From d008f24ccf8c1b35f6436ba1a3610a6223042ed9 Mon Sep 17 00:00:00 2001 From: coreyvickery <45767595+coreyvickery@users.noreply.github.com> Date: Mon, 16 Feb 2026 23:51:02 -0800 Subject: [PATCH 01/10] Update token docs descriptions in border.yml Update token docs for border width to provide clearer guidance on usage and examples for LLMs. --- tokens/border.yml | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/tokens/border.yml b/tokens/border.yml index ccdadbc..f5650f2 100644 --- a/tokens/border.yml +++ b/tokens/border.yml @@ -4,15 +4,30 @@ border: $extensions: com.redhat.ux: heading: Width + sm: $value: '{length.4xs}' - $description: '1px border width; Example: Secondary CTA or Button' + $description: 'This applies a 1px border width which is the default. Examples: Buttons, Calls to action, Cards, Dividers, Input fields, thin lines, and more.' + + # Guidance for LLMs + # + # This applies a 1px border width to an element. A 1px border width is the default and can be used to separate an element from the background or to distinguish it apart from other nearby elements, graphics, text, etc. Examples of where a 1px border width could be applied: Buttons, Calls to action, Cards, Dividers, Input fields, thin lines, and more. + md: $value: '{length.3xs}' - $description: '2px border width: Example: Alert' + $description: 'This applies a 2px border width. Examples: Alerts, border hover states, Progress stepper, thick lines, and more.' + + # Guidance for LLMs + # + # This applies a 2px border width to an element. A 2px border width can be used to add a small amount of emphasis to interaction states or to add extra thickness to elements strategically. Examples of where a 2px border width could be applied: Alerts, border hover states, Progress stepper, thick lines, and more. + lg: $value: '{length.2xs}' - $description: '3px border width: Example: Expanded Accordion panel' + $description: 'This applies a 3px border width. Examples: Accordion, current page indicator in Tabs, current page indicator in navigations, focus indicator styling, etc.' + + # Guidance for LLMs + # + # This applies a 3px border width to an element. A 3px border width can be used to add maximum emphasis like indicating the page or tab a user is currently viewing or to add even more thickness strategically. A 3px border width is also applied to our focus indicator; this styling aligns to the latest WCAG guidance. Examples of where a 3px border width could be applied: Accordion, current page indicator in Tabs, current page indicator in navigations, focus indicator styling, etc. radius: $extensions: @@ -22,9 +37,11 @@ border: sharp: $value: 0.0px $description: Border radius reset + default: $description: '3px border radius; Example: Card' $value: '{length.2xs}' + pill: $value: '{length.4xl}' $description: 'Pill border radius; Example: Label' From 71a09a39766594f002217faf8367b923a23ff3c2 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Tue, 17 Feb 2026 10:49:36 +0200 Subject: [PATCH 02/10] docs: update border.yml --- tokens/border.yml | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/tokens/border.yml b/tokens/border.yml index f5650f2..589c1ae 100644 --- a/tokens/border.yml +++ b/tokens/border.yml @@ -7,11 +7,12 @@ border: sm: $value: '{length.4xs}' - $description: 'This applies a 1px border width which is the default. Examples: Buttons, Calls to action, Cards, Dividers, Input fields, thin lines, and more.' - - # Guidance for LLMs - # - # This applies a 1px border width to an element. A 1px border width is the default and can be used to separate an element from the background or to distinguish it apart from other nearby elements, graphics, text, etc. Examples of where a 1px border width could be applied: Buttons, Calls to action, Cards, Dividers, Input fields, thin lines, and more. + $description: >- + Applies a 1px border width to an element. + A 1px border width is the default and should be used to separate an element from the + background or to distinguish it apart from other nearby elements, graphics, text, etc. + Examples of where a 1px border width should be applied: Buttons, Calls to action, Cards, + Dividers, Input fields, thin lines, and more. md: $value: '{length.3xs}' From fa47c588b99cb82b50584b984c75780e5e025848 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?= =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?= Date: Tue, 17 Feb 2026 10:53:00 +0200 Subject: [PATCH 03/10] Update token descriptions in changeset --- .changeset/seven-ligers-rule.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/seven-ligers-rule.md diff --git a/.changeset/seven-ligers-rule.md b/.changeset/seven-ligers-rule.md new file mode 100644 index 0000000..f85a288 --- /dev/null +++ b/.changeset/seven-ligers-rule.md @@ -0,0 +1,5 @@ +--- +"@rhds/tokens": patch +--- + +docs(border): update token descriptions From 6d3d09430b2549e7018b34656aaee7b780d61e43 Mon Sep 17 00:00:00 2001 From: coreyvickery <45767595+coreyvickery@users.noreply.github.com> Date: Tue, 17 Feb 2026 23:03:54 -0800 Subject: [PATCH 04/10] Revise border width descriptions in border.yml Updated border descriptions to clarify usage guidelines and recommendations for each border width. --- tokens/border.yml | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/tokens/border.yml b/tokens/border.yml index 589c1ae..1813d7c 100644 --- a/tokens/border.yml +++ b/tokens/border.yml @@ -8,28 +8,32 @@ border: sm: $value: '{length.4xs}' $description: >- - Applies a 1px border width to an element. - A 1px border width is the default and should be used to separate an element from the - background or to distinguish it apart from other nearby elements, graphics, text, etc. - Examples of where a 1px border width should be applied: Buttons, Calls to action, Cards, - Dividers, Input fields, thin lines, and more. + + This token applies a 1px border width, it SHALL be considered the default width for all borders and dividers. + It SHOULD be used to establish a baseline thickness. It MAY also be used to establish visual separation with + a container or thin line. It is RECOMMENDED to apply this token to elements that require a thin border or line + like Buttons, Calls to action, Cards, Dividers, Input fields, Tables, and more. This token MUST NOT be used + for emphasis like indicating a selected state. Applying this token to all 4 sides of a border is OPTIONAL. md: $value: '{length.3xs}' $description: 'This applies a 2px border width. Examples: Alerts, border hover states, Progress stepper, thick lines, and more.' - # Guidance for LLMs - # - # This applies a 2px border width to an element. A 2px border width can be used to add a small amount of emphasis to interaction states or to add extra thickness to elements strategically. Examples of where a 2px border width could be applied: Alerts, border hover states, Progress stepper, thick lines, and more. + This token applies a 2px border width. It SHOULD be used to add a little extra thickness to a thin border + or line when needed. It MUST be used to ensure interaction states are discernible by more than just color as + outlined by WCAG guidelines. It is RECOMMENDED to apply this token to elements that already have a thin border + or line like Alerts, Progress stepper, and more. This token MUST NOT be applied to all 4 sides of a border. lg: $value: '{length.2xs}' $description: 'This applies a 3px border width. Examples: Accordion, current page indicator in Tabs, current page indicator in navigations, focus indicator styling, etc.' - # Guidance for LLMs - # - # This applies a 3px border width to an element. A 3px border width can be used to add maximum emphasis like indicating the page or tab a user is currently viewing or to add even more thickness strategically. A 3px border width is also applied to our focus indicator; this styling aligns to the latest WCAG guidance. Examples of where a 3px border width could be applied: Accordion, current page indicator in Tabs, current page indicator in navigations, focus indicator styling, etc. - + This token applies a 3px border width. It SHOULD be used as strong emphasis like indicating a current page + or selected state. It MUST be used for the focus indicator as well according to WCAG guidelines. It is + RECOMMENDED to apply this token to elements that require directional accent borders like Accordions, Disclosures, + Jump links, Navigations, Tabs, and more. Except for the focus indicator, this token MUST NOT be applied to all + 4 sides of a border. + radius: $extensions: com.redhat.ux: From 79429b53b1e518c63523334e91ed2fdf779be4c4 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 18 Feb 2026 11:41:38 +0200 Subject: [PATCH 05/10] docs: format descriptions --- tokens/border.yml | 41 +++++++++++++++++++---------------------- 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/tokens/border.yml b/tokens/border.yml index 1813d7c..aef9512 100644 --- a/tokens/border.yml +++ b/tokens/border.yml @@ -8,32 +8,29 @@ border: sm: $value: '{length.4xs}' $description: >- - - This token applies a 1px border width, it SHALL be considered the default width for all borders and dividers. - It SHOULD be used to establish a baseline thickness. It MAY also be used to establish visual separation with - a container or thin line. It is RECOMMENDED to apply this token to elements that require a thin border or line - like Buttons, Calls to action, Cards, Dividers, Input fields, Tables, and more. This token MUST NOT be used - for emphasis like indicating a selected state. Applying this token to all 4 sides of a border is OPTIONAL. + This token applies a 1px border width, it shall be considered the default width for all borders and dividers. + It should be used to establish a baseline thickness. It may also be used to establish visual separation with + a container or thin line. It is recommended to apply this token to elements that require a thin border or line + like Buttons, Calls to action, Cards, Dividers, Input fields, Tables, and more. This token must not be used + for emphasis like indicating a selected state. Applying this token to all 4 sides of a border is optional. md: $value: '{length.3xs}' - $description: 'This applies a 2px border width. Examples: Alerts, border hover states, Progress stepper, thick lines, and more.' + $description: >- + This token applies a 2px border width. It should be used to add a little extra thickness to a thin border + or line when needed. It must be used to ensure interaction states are discernible by more than just color as + outlined by WCAG guidelines. It is recommended to apply this token to elements that already have a thin border + or line like Alerts, Progress stepper, and more. This token must not be applied to all 4 sides of a border. - This token applies a 2px border width. It SHOULD be used to add a little extra thickness to a thin border - or line when needed. It MUST be used to ensure interaction states are discernible by more than just color as - outlined by WCAG guidelines. It is RECOMMENDED to apply this token to elements that already have a thin border - or line like Alerts, Progress stepper, and more. This token MUST NOT be applied to all 4 sides of a border. - lg: $value: '{length.2xs}' - $description: 'This applies a 3px border width. Examples: Accordion, current page indicator in Tabs, current page indicator in navigations, focus indicator styling, etc.' - - This token applies a 3px border width. It SHOULD be used as strong emphasis like indicating a current page - or selected state. It MUST be used for the focus indicator as well according to WCAG guidelines. It is - RECOMMENDED to apply this token to elements that require directional accent borders like Accordions, Disclosures, - Jump links, Navigations, Tabs, and more. Except for the focus indicator, this token MUST NOT be applied to all - 4 sides of a border. - + $description: >- + This token applies a 3px border width. It should be used as strong emphasis like indicating a current page + or selected state. It must be used for the focus indicator as well according to WCAG guidelines. It is + recommended to apply this token to elements that require directional accent borders like Accordions, Disclosures, + Jump links, Navigations, Tabs, and more. Except for the focus indicator, this token must not be applied to all + 4 sides of a border. + radius: $extensions: com.redhat.ux: @@ -42,11 +39,11 @@ border: sharp: $value: 0.0px $description: Border radius reset - + default: $description: '3px border radius; Example: Card' $value: '{length.2xs}' - + pill: $value: '{length.4xl}' $description: 'Pill border radius; Example: Label' From d2e33367fcf43639de4d354f4ca6f51231f7f4f1 Mon Sep 17 00:00:00 2001 From: coreyvickery <45767595+coreyvickery@users.noreply.github.com> Date: Fri, 27 Feb 2026 03:26:43 -0800 Subject: [PATCH 06/10] Refine border and radius descriptions in border.yml --- tokens/border.yml | 49 ++++++++++++++++++++++++++++++----------------- 1 file changed, 31 insertions(+), 18 deletions(-) diff --git a/tokens/border.yml b/tokens/border.yml index aef9512..6162dbf 100644 --- a/tokens/border.yml +++ b/tokens/border.yml @@ -8,28 +8,30 @@ border: sm: $value: '{length.4xs}' $description: >- - This token applies a 1px border width, it shall be considered the default width for all borders and dividers. - It should be used to establish a baseline thickness. It may also be used to establish visual separation with - a container or thin line. It is recommended to apply this token to elements that require a thin border or line - like Buttons, Calls to action, Cards, Dividers, Input fields, Tables, and more. This token must not be used - for emphasis like indicating a selected state. Applying this token to all 4 sides of a border is optional. + This token applies a 1px border width, it shall be considered the default width for all borders and dividing lines. + It should be used to establish a baseline thickness. It may also be used to establish visual separation with a + container or thin line. It is recommended to apply this token to element containers that require a thin border or + line like Buttons, Calls to action, Cards, Fields, Tables, and more. This token must not be used for strong + directional emphasis like indicating a selected state. Applying this token as a border to all 4 sides of a container + at once is optional. md: $value: '{length.3xs}' $description: >- - This token applies a 2px border width. It should be used to add a little extra thickness to a thin border - or line when needed. It must be used to ensure interaction states are discernible by more than just color as - outlined by WCAG guidelines. It is recommended to apply this token to elements that already have a thin border - or line like Alerts, Progress stepper, and more. This token must not be applied to all 4 sides of a border. + This token applies a 2px border width. It should be used to add extra thickness or visual separation to a thin + border or line when needed. It must be used to ensure that hover, focus, and active interaction states are + discernible by more than just color alone as outlined by WCAG guidelines. It is recommended to apply this token + to element containers that already display a thin border or line like Alerts, Progress stepper, and more. + Applying this token as a border to all 4 sides of a container at once is optional. lg: $value: '{length.2xs}' $description: >- - This token applies a 3px border width. It should be used as strong emphasis like indicating a current page - or selected state. It must be used for the focus indicator as well according to WCAG guidelines. It is - recommended to apply this token to elements that require directional accent borders like Accordions, Disclosures, - Jump links, Navigations, Tabs, and more. Except for the focus indicator, this token must not be applied to all - 4 sides of a border. + This token applies a 3px border width. It should be used as strong directional emphasis like viewing the current + page or indicating a selected state. It must be used for the focus indicator as well according to WCAG guidelines. + It is recommended to apply this token to element container borders that require high visual weight like Accordions, + Disclosures, Jump links, Navigations, Tabs, and more. Except for the focus indicator, this token must not be + applied to all 4 sides of a container border at once. radius: $extensions: @@ -38,13 +40,24 @@ border: sharp: $value: 0.0px - $description: Border radius reset + $description: >- + This token resets the border radius of a container. It should be used to remove rounding and apply perfectly sharp + corners to a container. This token must be applied to all 4 corners of a container at once. default: - $description: '3px border radius; Example: Card' $value: '{length.2xs}' + $descrition: >- + This token applies 3px to each corner of a container. It shall be considered the default for containers that + need rounded corners. It should be used to soften the visual footprint of a container in a layout and promote + a modern look and feel. It is recommended to apply this token to element containers that require subtle rounded + corners like Buttons, Calls to action, Cards, Dialogs, and more. This token must be applied to all 4 corners of + a container at once. pill: $value: '{length.4xl}' - $description: 'Pill border radius; Example: Label' - + $description: >- + This token applies 64px to each corner of a container. It should be used as a visually-distinct container option + for compact elements like Badge. It must be used to convert rectilinear containers into circle or pill-shaped + containers. It must not replace the default 3px as an alternate rounded corner design treatment. It is recommended + to apply this token to elements that require circle or pill-shaped containers like Avatars, Badges, Switches, + Tags, and more. This token must be applied to all 4 corners of a container at once. From 9f1ddefe38a978e7773ef6bb544a816d7fbab4b9 Mon Sep 17 00:00:00 2001 From: coreyvickery <45767595+coreyvickery@users.noreply.github.com> Date: Fri, 27 Feb 2026 04:00:06 -0800 Subject: [PATCH 07/10] Refactor descriptions for border tokens in YAML --- tokens/border.yml | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/tokens/border.yml b/tokens/border.yml index 6162dbf..d695272 100644 --- a/tokens/border.yml +++ b/tokens/border.yml @@ -8,12 +8,12 @@ border: sm: $value: '{length.4xs}' $description: >- - This token applies a 1px border width, it shall be considered the default width for all borders and dividing lines. - It should be used to establish a baseline thickness. It may also be used to establish visual separation with a - container or thin line. It is recommended to apply this token to element containers that require a thin border or - line like Buttons, Calls to action, Cards, Fields, Tables, and more. This token must not be used for strong - directional emphasis like indicating a selected state. Applying this token as a border to all 4 sides of a container - at once is optional. + This token applies a 1px border width, it shall be considered the default width for all borders and dividing + lines. It should be used to establish a baseline thickness. It may also be used to establish visual separation + with a container or thin line. It is recommended to apply this token to element containers that require a thin + border or line like Buttons, Calls to action, Cards, Fields, Tables, and more. This token must not be used for + strong directional emphasis like indicating a selected state. Applying this token as a border to all 4 sides of + a container at once is optional. md: $value: '{length.3xs}' @@ -27,7 +27,7 @@ border: lg: $value: '{length.2xs}' $description: >- - This token applies a 3px border width. It should be used as strong directional emphasis like viewing the current + This token applies a 3px border width. It should be used as strong directional emphasis like viewing a current page or indicating a selected state. It must be used for the focus indicator as well according to WCAG guidelines. It is recommended to apply this token to element container borders that require high visual weight like Accordions, Disclosures, Jump links, Navigations, Tabs, and more. Except for the focus indicator, this token must not be @@ -47,11 +47,11 @@ border: default: $value: '{length.2xs}' $descrition: >- - This token applies 3px to each corner of a container. It shall be considered the default for containers that - need rounded corners. It should be used to soften the visual footprint of a container in a layout and promote - a modern look and feel. It is recommended to apply this token to element containers that require subtle rounded - corners like Buttons, Calls to action, Cards, Dialogs, and more. This token must be applied to all 4 corners of - a container at once. + This token applies 3px to each corner of a container. It shall be considered the default border radius for + containers that need rounded corners. It should be used to soften the visual footprint of a container in a layout + and promote a modern look and feel. It is recommended to apply this token to element containers that require subtle + rounded corners like Buttons, Calls to action, Cards, Dialogs, and more. This token must be applied to all 4 corners + of a container at once. pill: $value: '{length.4xl}' From f310c51d38e9c6d774a524705fd0539e02e8def5 Mon Sep 17 00:00:00 2001 From: coreyvickery <45767595+coreyvickery@users.noreply.github.com> Date: Tue, 3 Mar 2026 18:51:53 -0800 Subject: [PATCH 08/10] Refine descriptions for border width and radius tokens --- tokens/border.yml | 56 +++++++++++++++++++++++------------------------ 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/tokens/border.yml b/tokens/border.yml index d695272..e791132 100644 --- a/tokens/border.yml +++ b/tokens/border.yml @@ -8,30 +8,30 @@ border: sm: $value: '{length.4xs}' $description: >- - This token applies a 1px border width, it shall be considered the default width for all borders and dividing - lines. It should be used to establish a baseline thickness. It may also be used to establish visual separation - with a container or thin line. It is recommended to apply this token to element containers that require a thin - border or line like Buttons, Calls to action, Cards, Fields, Tables, and more. This token must not be used for - strong directional emphasis like indicating a selected state. Applying this token as a border to all 4 sides of - a container at once is optional. + This token applies a 1px border width to at least 1 side of a container. It shall be considered the default width for + all borders and lines. It should be used to establish a baseline thickness. It may also be used to establish visual + separation by leveraging a container or thin line. It must not be used for strong directional emphasis like indicating + a selected state. It is recommended to apply this token to elements that require a thin container border or line like a + Button, Call to action, Card, Field, Table, and more. Applying this token as a border to all 4 sides of a container at + once is optional. md: $value: '{length.3xs}' $description: >- - This token applies a 2px border width. It should be used to add extra thickness or visual separation to a thin - border or line when needed. It must be used to ensure that hover, focus, and active interaction states are - discernible by more than just color alone as outlined by WCAG guidelines. It is recommended to apply this token - to element containers that already display a thin border or line like Alerts, Progress stepper, and more. - Applying this token as a border to all 4 sides of a container at once is optional. + This token applies a 2px border width to at least 1 side of a container. It should be used to add more emphasis or + visual separation to a 1px border or line when needed. It is recommended to apply this token to elements with borders + or lines that need a little extra thickness like an Alert, Progress stepper, and more. However, it must be used to + ensure that hover, focus, and active interaction states are discernible by more than just color alone as outlined by + WCAG guidelines. Applying this token as a border to all 4 sides of a container at once is optional. lg: $value: '{length.2xs}' $description: >- - This token applies a 3px border width. It should be used as strong directional emphasis like viewing a current - page or indicating a selected state. It must be used for the focus indicator as well according to WCAG guidelines. - It is recommended to apply this token to element container borders that require high visual weight like Accordions, - Disclosures, Jump links, Navigations, Tabs, and more. Except for the focus indicator, this token must not be - applied to all 4 sides of a container border at once. + This token applies a 3px border width to 1 side of a container. It should be used as strong directional emphasis like + viewing a current page or indicating an expanded or selected state. It is recommended to apply this token to element + container borders that need a lot of visual weight like an Accordion, Disclosure, Jump links, Navigation, Tabs, and + more. However, it must also be used for the focus indicator border according to WCAG guidelines. Except for the focus + indicator, this token should not be applied as a border to all 4 sides of a container at once. radius: $extensions: @@ -41,23 +41,23 @@ border: sharp: $value: 0.0px $description: >- - This token resets the border radius of a container. It should be used to remove rounding and apply perfectly sharp - corners to a container. This token must be applied to all 4 corners of a container at once. + This token resets the border radius of a container back to 0 or sharp. It must be applied to all 4 corners of a + container at once. default: $value: '{length.2xs}' $descrition: >- - This token applies 3px to each corner of a container. It shall be considered the default border radius for - containers that need rounded corners. It should be used to soften the visual footprint of a container in a layout - and promote a modern look and feel. It is recommended to apply this token to element containers that require subtle - rounded corners like Buttons, Calls to action, Cards, Dialogs, and more. This token must be applied to all 4 corners - of a container at once. + This token applies a 3px border radius to at least 1 corner of a container. It shall be considered the default for + all containers that need rounded corners. It should be used to soften the visual footprint of a container while promoting + a modern look and feel. It is recommended to apply this token to elements with containers that need to display subtle + rounded corners like Button, Call to action, Card, Dialog, and more. It must be applied to all 4 corners of a + container at once. pill: $value: '{length.4xl}' $description: >- - This token applies 64px to each corner of a container. It should be used as a visually-distinct container option - for compact elements like Badge. It must be used to convert rectilinear containers into circle or pill-shaped - containers. It must not replace the default 3px as an alternate rounded corner design treatment. It is recommended - to apply this token to elements that require circle or pill-shaped containers like Avatars, Badges, Switches, - Tags, and more. This token must be applied to all 4 corners of a container at once. + This token applies a 64px border radius to at least 1 corner of a container. It should be used as a container option + for elements like Badge or for Hybrid style branding. It is recommended to apply this token to elements that need a + circle or pill-shaped container background like Avatar, Badge, Switch, Tag, and more. However, applying this token to + all 4 corners of a container at once is optional. This token may be used in place of the default 3px token if not all + rounded corner values need to be the same like a Card element with Hybrid style branding. From d89719f564b80b96dbd25d9c9f63318ec8402838 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Tue, 10 Mar 2026 16:48:10 +0200 Subject: [PATCH 09/10] docs: Update .changeset/seven-ligers-rule.md Co-authored-by: Adam Johnson --- .changeset/seven-ligers-rule.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/seven-ligers-rule.md b/.changeset/seven-ligers-rule.md index f85a288..8ac9146 100644 --- a/.changeset/seven-ligers-rule.md +++ b/.changeset/seven-ligers-rule.md @@ -2,4 +2,4 @@ "@rhds/tokens": patch --- -docs(border): update token descriptions +Clarify use cases for `width` and `radius` tokens like `--rh-border-width-sm` and `--rh-border-radius-sharp`. From 715a9f70ef7631951a9604174016ac735365be0b Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Tue, 10 Mar 2026 16:52:34 +0200 Subject: [PATCH 10/10] docs: reduce border token description char counts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Key changes across all descriptions: - Removed "This token" preambles — descriptions now start with the action directly - Limited examples to 3 elements (e.g., "Button, Call to action, Card, Field, Table" → "Button, Card, or Field") - Replaced "It is recommended to apply this token to" → "Recommended for" - Replaced "leveraging" with direct language - Replaced verbose WCAG references ("as outlined by WCAG guidelines" → "per WCAG") - Removed filler like "a modern look and feel", "a little extra" - Fixed typo: $descrition → $description on the default token Assisted-By: Claude Opus 4.6 --- tokens/border.yml | 46 +++++++++++++++++++--------------------------- 1 file changed, 19 insertions(+), 27 deletions(-) diff --git a/tokens/border.yml b/tokens/border.yml index e791132..d2842f6 100644 --- a/tokens/border.yml +++ b/tokens/border.yml @@ -8,30 +8,26 @@ border: sm: $value: '{length.4xs}' $description: >- - This token applies a 1px border width to at least 1 side of a container. It shall be considered the default width for - all borders and lines. It should be used to establish a baseline thickness. It may also be used to establish visual - separation by leveraging a container or thin line. It must not be used for strong directional emphasis like indicating - a selected state. It is recommended to apply this token to elements that require a thin container border or line like a - Button, Call to action, Card, Field, Table, and more. Applying this token as a border to all 4 sides of a container at - once is optional. + Applies a 1px border width to at least 1 side of a container. This shall be the default width for all borders and + lines. It should be used to establish baseline thickness or visual separation with a container or thin line. It must + not be used for strong directional emphasis like indicating a selected state. Recommended for elements like Button, + Card, or Field. Applying to all 4 sides at once is optional. md: $value: '{length.3xs}' $description: >- - This token applies a 2px border width to at least 1 side of a container. It should be used to add more emphasis or - visual separation to a 1px border or line when needed. It is recommended to apply this token to elements with borders - or lines that need a little extra thickness like an Alert, Progress stepper, and more. However, it must be used to - ensure that hover, focus, and active interaction states are discernible by more than just color alone as outlined by - WCAG guidelines. Applying this token as a border to all 4 sides of a container at once is optional. + Applies a 2px border width to at least 1 side of a container. It should be used to add emphasis or visual separation + beyond a 1px border. Recommended for elements needing extra thickness like Alert or Progress stepper. It must be used + to ensure hover, focus, and active states are discernible by more than color alone per WCAG. Applying to all 4 sides + at once is optional. lg: $value: '{length.2xs}' $description: >- - This token applies a 3px border width to 1 side of a container. It should be used as strong directional emphasis like - viewing a current page or indicating an expanded or selected state. It is recommended to apply this token to element - container borders that need a lot of visual weight like an Accordion, Disclosure, Jump links, Navigation, Tabs, and - more. However, it must also be used for the focus indicator border according to WCAG guidelines. Except for the focus - indicator, this token should not be applied as a border to all 4 sides of a container at once. + Applies a 3px border width to 1 side of a container. It should be used for strong directional emphasis like indicating + a current page, expanded, or selected state. Recommended for elements needing heavy visual weight like Accordion, + Navigation, or Tabs. It must also be used for the focus indicator border per WCAG. Except for the focus indicator, it + should not be applied to all 4 sides at once. radius: $extensions: @@ -46,18 +42,14 @@ border: default: $value: '{length.2xs}' - $descrition: >- - This token applies a 3px border radius to at least 1 corner of a container. It shall be considered the default for - all containers that need rounded corners. It should be used to soften the visual footprint of a container while promoting - a modern look and feel. It is recommended to apply this token to elements with containers that need to display subtle - rounded corners like Button, Call to action, Card, Dialog, and more. It must be applied to all 4 corners of a - container at once. + $description: >- + Applies a 3px border radius to at least 1 corner of a container. This shall be the default for all containers needing + rounded corners. It should be used to soften a container's visual footprint. Recommended for elements with subtle + rounded corners like Button, Card, or Dialog. It must be applied to all 4 corners of a container at once. pill: $value: '{length.4xl}' $description: >- - This token applies a 64px border radius to at least 1 corner of a container. It should be used as a container option - for elements like Badge or for Hybrid style branding. It is recommended to apply this token to elements that need a - circle or pill-shaped container background like Avatar, Badge, Switch, Tag, and more. However, applying this token to - all 4 corners of a container at once is optional. This token may be used in place of the default 3px token if not all - rounded corner values need to be the same like a Card element with Hybrid style branding. + Applies a 64px border radius to at least 1 corner of a container. It should be used for elements needing a circle or + pill-shaped background like Avatar, Badge, or Switch. It may also be used for Hybrid style branding. Applying to all + 4 corners at once is optional. It may replace the default 3px radius when not all corners need the same value.