From d91d889c3a529a90167bd9b9d0d9c3174b2b0e05 Mon Sep 17 00:00:00 2001 From: Aram <37216945+alimpens@users.noreply.github.com> Date: Fri, 29 Mar 2024 11:15:11 +0100 Subject: [PATCH] feat: Add border tokens and use rems for widths (#1147) Co-authored-by: Vincent Smedinga --- .../src/components/accordion/accordion.scss | 6 +++++- .../css/src/components/button/button.scss | 8 ++++++-- .../css/src/components/checkbox/checkbox.scss | 12 +++++------ .../css/src/components/fieldset/fieldset.scss | 2 +- packages/css/src/components/radio/radio.scss | 6 +++--- .../components/search-field/search-field.scss | 13 ++++++++---- .../src/components/text-area/text-area.scss | 2 +- .../src/components/text-input/text-input.scss | 2 +- .../tokens/src/brand/ams/border.tokens.json | 12 +++++++++++ .../tokens/src/common/ams/border.tokens.json | 9 --------- .../common/ams/link-appearance.tokens.json | 4 ++-- .../src/components/ams/accordion.tokens.json | 2 +- .../src/components/ams/alert.tokens.json | 2 +- .../src/components/ams/button.tokens.json | 19 ++++++++++-------- .../src/components/ams/checkbox.tokens.json | 8 ++++++-- .../src/components/ams/radio.tokens.json | 5 ++++- .../components/ams/search-field.tokens.json | 4 ++-- .../src/components/ams/table.tokens.json | 2 +- .../src/components/ams/tabs.tokens.json | 4 ++-- .../src/components/ams/text-area.tokens.json | 10 +++++----- .../src/components/ams/text-input.tokens.json | 10 +++++----- storybook/src/docs/borders.docs.mdx | 20 +++++++++++++++++++ 22 files changed, 104 insertions(+), 58 deletions(-) create mode 100644 proprietary/tokens/src/brand/ams/border.tokens.json delete mode 100644 proprietary/tokens/src/common/ams/border.tokens.json create mode 100644 storybook/src/docs/borders.docs.mdx diff --git a/packages/css/src/components/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss index 426ad09eef..0cfeb8e257 100644 --- a/packages/css/src/components/accordion/accordion.scss +++ b/packages/css/src/components/accordion/accordion.scss @@ -11,9 +11,12 @@ margin-inline: 0; } -.ams-accordion__button { +@mixin reset-button { background-color: transparent; border: 0; +} + +.ams-accordion__button { color: var(--ams-accordion-button-color); cursor: pointer; display: flex; @@ -44,6 +47,7 @@ } @include text-rendering; + @include reset-button; } .ams-accordion__button[aria-expanded="true"] svg { diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss index aa1ffe0de6..ce4b275def 100644 --- a/packages/css/src/components/button/button.scss +++ b/packages/css/src/components/button/button.scss @@ -5,8 +5,11 @@ @import "../../common/text-rendering"; +@mixin reset-button { + border: 0; +} + .ams-button { - border: none; cursor: var(--ams-button-cursor); display: inline-flex; font-family: var(--ams-button-font-family); @@ -24,11 +27,12 @@ } @include text-rendering; + @include reset-button; } @mixin ams-button-forced-color-mode { @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) { - border: 2px solid ButtonBorder; // add border because forced colors changes box-shadow to none + border: var(--ams-button-forced-color-mode-border); // add border because forced colors changes box-shadow to none } } diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss index 1a0078ee6c..408eab9f65 100644 --- a/packages/css/src/components/checkbox/checkbox.scss +++ b/packages/css/src/components/checkbox/checkbox.scss @@ -25,7 +25,7 @@ background-size: 1rem; border-color: var(--ams-checkbox-checkmark-border-color); border-style: solid; - border-width: 0.125rem; + border-width: var(--ams-checkbox-checkmark-border-width); box-sizing: border-box; content: ""; height: 1.5rem; @@ -47,12 +47,12 @@ &:hover { color: var(--ams-checkbox-hover-color); text-decoration-line: underline; - text-decoration-thickness: 0.125rem; + text-decoration-thickness: var(--ams-checkbox-hover-text-decoration-thickness); text-underline-offset: 0.375rem; .ams-checkbox__checkmark::after { border-color: var(--ams-checkbox-checkmark-hover-border-color); - border-width: 0.1875rem; + border-width: var(--ams-checkbox-checkmark-hover-border-width); } } @@ -64,7 +64,7 @@ + .ams-checkbox__label .ams-checkbox__checkmark::after { background-color: var(--ams-checkbox-checkmark-checked-background-color); background-image: var(--ams-checkbox-checkmark-checked-background-image); - border: none; + border: 0; } } @@ -76,7 +76,7 @@ background-position: center; background-repeat: no-repeat; background-size: 1rem; - border: none; + border: 0; } } @@ -96,7 +96,7 @@ .ams-checkbox__checkmark::after { border-color: var(--ams-checkbox-checkmark-disabled-border-color); - border-width: 0.125rem; + border-width: var(--ams-checkbox-checkmark-disabled-border-width); } } } diff --git a/packages/css/src/components/fieldset/fieldset.scss b/packages/css/src/components/fieldset/fieldset.scss index a30423743f..5091408cc5 100644 --- a/packages/css/src/components/fieldset/fieldset.scss +++ b/packages/css/src/components/fieldset/fieldset.scss @@ -7,7 +7,7 @@ @import "../../common/text-rendering"; @mixin reset { - border: none; + border: 0; margin-inline: 0; padding-block: 0; padding-inline: 0; diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss index 530369bbdf..b062428c55 100644 --- a/packages/css/src/components/radio/radio.scss +++ b/packages/css/src/components/radio/radio.scss @@ -26,7 +26,7 @@ border-color: var(--ams-radio-circle-border-color); border-radius: 100%; border-style: solid; - border-width: 0.125rem; + border-width: var(--ams-radio-circle-border-width); box-sizing: border-box; content: ""; height: 1.5rem; @@ -48,7 +48,7 @@ &:hover { color: var(--ams-radio-hover-color); text-decoration-line: underline; - text-decoration-thickness: 0.125rem; + text-decoration-thickness: var(--ams-radio-hover-text-decoration-thickness); text-underline-offset: 0.375rem; .ams-radio__circle::after { @@ -81,7 +81,7 @@ .ams-radio__circle::after { border-color: var(--ams-radio-circle-disabled-border-color); - border-width: 0.125rem; + border-width: var(--ams-radio-circle-disabled-border-width); } } } diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss index 9f27e15571..00d7c77f01 100644 --- a/packages/css/src/components/search-field/search-field.scss +++ b/packages/css/src/components/search-field/search-field.scss @@ -10,13 +10,13 @@ isolation: isolate; // create new stacking context, so the input’s z-index doesn’t escape the component } -@mixin reset { +@mixin reset-input { + border: 0; box-sizing: border-box; margin-block: 0; } .ams-search-field__input { - border: none; box-shadow: var(--ams-search-field-input-box-shadow); color: var(--ams-search-field-input-color); font-family: var(--ams-search-field-input-font-family); @@ -30,7 +30,7 @@ width: 100%; @include text-rendering; - @include reset; + @include reset-input; &:hover { box-shadow: var(--ams-search-field-input-hover-box-shadow); @@ -54,9 +54,12 @@ width: var(--ams-search-field-input-cancel-button-width); } +@mixin reset-button { + border: 0; +} + .ams-search-field__button { background-color: var(--ams-search-field-button-background-color); - border: 0; color: var(--ams-search-field-button-color); cursor: pointer; outline-offset: var(--ams-search-field-button-outline-offset); @@ -66,6 +69,8 @@ padding-inline: var(--ams-search-field-button-padding-inline); touch-action: manipulation; + @include reset-button; + &:hover { background-color: var(--ams-search-field-button-hover-background-color); } diff --git a/packages/css/src/components/text-area/text-area.scss b/packages/css/src/components/text-area/text-area.scss index 88920aa405..492ba03295 100644 --- a/packages/css/src/components/text-area/text-area.scss +++ b/packages/css/src/components/text-area/text-area.scss @@ -11,7 +11,7 @@ } .ams-text-area { - border: none; + border: 0; box-shadow: var(--ams-text-area-box-shadow); color: var(--ams-text-area-color); font-family: var(--ams-text-area-font-family); diff --git a/packages/css/src/components/text-input/text-input.scss b/packages/css/src/components/text-input/text-input.scss index f140cbd332..e50df12312 100644 --- a/packages/css/src/components/text-input/text-input.scss +++ b/packages/css/src/components/text-input/text-input.scss @@ -11,7 +11,7 @@ } .ams-text-input { - border: none; + border: 0; box-shadow: var(--ams-text-input-box-shadow); color: var(--ams-text-input-color); font-family: var(--ams-text-input-font-family); diff --git a/proprietary/tokens/src/brand/ams/border.tokens.json b/proprietary/tokens/src/brand/ams/border.tokens.json new file mode 100644 index 0000000000..1d5c69d448 --- /dev/null +++ b/proprietary/tokens/src/brand/ams/border.tokens.json @@ -0,0 +1,12 @@ +{ + "ams": { + "border": { + "width": { + "sm": { "value": "0.0625rem" }, + "md": { "value": "0.125rem" }, + "lg": { "value": "0.1875rem" }, + "xl": { "value": "0.25rem" } + } + } + } +} diff --git a/proprietary/tokens/src/common/ams/border.tokens.json b/proprietary/tokens/src/common/ams/border.tokens.json deleted file mode 100644 index 3c9f217831..0000000000 --- a/proprietary/tokens/src/common/ams/border.tokens.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "ams": { - "border-width": { - "sm": { "value": "1px" }, - "md": { "value": "2px" }, - "lg": { "value": "3px" } - } - } -} diff --git a/proprietary/tokens/src/common/ams/link-appearance.tokens.json b/proprietary/tokens/src/common/ams/link-appearance.tokens.json index fde698cf2b..f24002709d 100644 --- a/proprietary/tokens/src/common/ams/link-appearance.tokens.json +++ b/proprietary/tokens/src/common/ams/link-appearance.tokens.json @@ -2,7 +2,7 @@ "ams": { "link-appearance": { "color": { "value": "{ams.color.primary-blue}" }, - "text-decoration-thickness": { "value": "0.125rem" }, + "text-decoration-thickness": { "value": "{ams.border.width.md}" }, "text-underline-offset": { "value": "0.375rem" }, "hover": { "color": { "value": "{ams.color.dark-blue}" } @@ -16,7 +16,7 @@ "regular": { "text-decoration-line": { "value": "underline" }, "hover": { - "text-decoration-thickness": { "value": "0.1875rem" }, + "text-decoration-thickness": { "value": "{ams.border.width.lg}" }, "text-underline-offset": { "value": "0.3125rem" } } }, diff --git a/proprietary/tokens/src/components/ams/accordion.tokens.json b/proprietary/tokens/src/components/ams/accordion.tokens.json index ae1c1cc586..e97bf5ab0a 100644 --- a/proprietary/tokens/src/components/ams/accordion.tokens.json +++ b/proprietary/tokens/src/components/ams/accordion.tokens.json @@ -13,7 +13,7 @@ "outline-offset": { "value": "{ams.focus.outline-offset}" } }, "hover": { - "box-shadow": { "value": "inset 0 0 0 2px {ams.color.neutral-grey3}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey3}" } } }, "panel": { diff --git a/proprietary/tokens/src/components/ams/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json index 12522fafa8..9ba890705c 100644 --- a/proprietary/tokens/src/components/ams/alert.tokens.json +++ b/proprietary/tokens/src/components/ams/alert.tokens.json @@ -1,7 +1,7 @@ { "ams": { "alert": { - "border-width": { "value": "4px" }, + "border-width": { "value": "{ams.border.width.xl}" }, "border-style": { "value": "solid" }, "gap": { "value": "1rem" }, "padding-block": { "value": "{ams.space.inside.md}" }, diff --git a/proprietary/tokens/src/components/ams/button.tokens.json b/proprietary/tokens/src/components/ams/button.tokens.json index d7b6c227bb..8a86ccfcd0 100644 --- a/proprietary/tokens/src/components/ams/button.tokens.json +++ b/proprietary/tokens/src/components/ams/button.tokens.json @@ -12,41 +12,44 @@ "disabled": { "cursor": { "value": "{ams.action.disabled.cursor}" } }, + "forced-color-mode": { + "border": { "value": "{ams.border.width.md} solid" } + }, "primary": { "background-color": { "value": "{ams.color.primary-blue}" }, - "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-blue}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" }, "color": { "value": "{ams.color.primary-white}" }, "disabled": { "background-color": { "value": "{ams.color.neutral-grey2}" }, - "box-shadow": { "value": "inset 0 0 0 2px {ams.color.neutral-grey2}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey2}" } }, "hover": { "background-color": { "value": "{ams.color.dark-blue}" }, - "box-shadow": { "value": "inset 0 0 0 2px {ams.color.dark-blue}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.dark-blue}" } } }, "secondary": { "background-color": { "value": "{ams.color.primary-white}" }, "color": { "value": "{ams.color.primary-blue}" }, - "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-blue}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" }, "hover": { - "box-shadow": { "value": "inset 0 0 0 3px {ams.color.dark-blue}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.lg} {ams.color.dark-blue}" }, "color": { "value": "{ams.color.dark-blue}" } }, "disabled": { "background-color": { "value": "{ams.color.primary-white}" }, - "box-shadow": { "value": "inset 0 0 0 2px {ams.color.neutral-grey2}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey2}" }, "color": { "value": "{ams.color.neutral-grey2}" } }, "focus": { - "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-blue}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" } } }, "tertiary": { "background-color": { "value": "transparent" }, "color": { "value": "{ams.color.primary-blue}" }, "hover": { - "box-shadow": { "value": "inset 0 0 0 2px {ams.color.dark-blue}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.dark-blue}" }, "color": { "value": "{ams.color.dark-blue}" } }, "disabled": { diff --git a/proprietary/tokens/src/components/ams/checkbox.tokens.json b/proprietary/tokens/src/components/ams/checkbox.tokens.json index 5558eeece7..260bc1fc1d 100644 --- a/proprietary/tokens/src/components/ams/checkbox.tokens.json +++ b/proprietary/tokens/src/components/ams/checkbox.tokens.json @@ -9,6 +9,7 @@ "outline-offset": { "value": "{ams.focus.outline-offset}" }, "checkmark": { "border-color": { "value": "{ams.color.primary-blue}" }, + "border-width": { "value": "{ams.border.width.md}" }, "checked": { "background-color": { "value": "{ams.color.primary-blue}" }, "background-image": { @@ -20,6 +21,7 @@ }, "disabled": { "border-color": { "value": "{ams.color.neutral-grey3}" }, + "border-width": { "value": "{ams.border.width.md}" }, "checked": { "background-color": { "value": "{ams.color.neutral-grey3}" }, "hover": { @@ -34,7 +36,8 @@ } }, "hover": { - "border-color": { "value": "{ams.color.dark-blue}" } + "border-color": { "value": "{ams.color.dark-blue}" }, + "border-width": { "value": "{ams.border.width.lg}" } }, "invalid": { "border-color": { "value": "{ams.color.primary-red}" }, @@ -68,7 +71,8 @@ "color": { "value": "{ams.color.neutral-grey3}" } }, "hover": { - "color": { "value": "{ams.color.dark-blue}" } + "color": { "value": "{ams.color.dark-blue}" }, + "text-decoration-thickness": { "value": "{ams.border.width.md}" } } } } diff --git a/proprietary/tokens/src/components/ams/radio.tokens.json b/proprietary/tokens/src/components/ams/radio.tokens.json index 14b1a6d6aa..d65f0ed386 100644 --- a/proprietary/tokens/src/components/ams/radio.tokens.json +++ b/proprietary/tokens/src/components/ams/radio.tokens.json @@ -9,6 +9,7 @@ "outline-offset": { "value": "{ams.focus.outline-offset}" }, "circle": { "border-color": { "value": "{ams.color.primary-blue}" }, + "border-width": { "value": "{ams.border.width.md}" }, "checked": { "background-image": { "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23004699'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")" @@ -21,6 +22,7 @@ }, "disabled": { "border-color": { "value": "{ams.color.neutral-grey3}" }, + "border-width": { "value": "{ams.border.width.md}" }, "checked": { "background-image": { "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")" @@ -56,7 +58,8 @@ "color": { "value": "{ams.color.neutral-grey3}" } }, "hover": { - "color": { "value": "{ams.color.dark-blue}" } + "color": { "value": "{ams.color.dark-blue}" }, + "text-decoration-thickness": { "value": "{ams.border.width.md}" } } } } diff --git a/proprietary/tokens/src/components/ams/search-field.tokens.json b/proprietary/tokens/src/components/ams/search-field.tokens.json index ad8649870e..9c4b0a7499 100644 --- a/proprietary/tokens/src/components/ams/search-field.tokens.json +++ b/proprietary/tokens/src/components/ams/search-field.tokens.json @@ -13,7 +13,7 @@ }, "input": { "box-shadow": { - "value": "inset 0 0 0 1px {ams.color.primary-black}" + "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" }, "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, @@ -33,7 +33,7 @@ }, "hover": { "box-shadow": { - "value": "inset 0 0 0 2px {ams.color.primary-black}" + "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" } }, "placeholder": { diff --git a/proprietary/tokens/src/components/ams/table.tokens.json b/proprietary/tokens/src/components/ams/table.tokens.json index 7274a40f6c..21457161a5 100644 --- a/proprietary/tokens/src/components/ams/table.tokens.json +++ b/proprietary/tokens/src/components/ams/table.tokens.json @@ -10,7 +10,7 @@ "font-weight": { "value": "{ams.text.font-weight.bold}" } }, "cell": { - "border-bottom": { "value": "1px solid {ams.color.neutral-grey1}" }, + "border-bottom": { "value": "{ams.border.width.sm} solid {ams.color.neutral-grey1}" }, "padding-block": { "value": "{ams.space.inside.md}" }, "padding-inline": { "value": "{ams.space.inside.md}" } }, diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json index 9a7ff5b17d..51b4525661 100644 --- a/proprietary/tokens/src/components/ams/tabs.tokens.json +++ b/proprietary/tokens/src/components/ams/tabs.tokens.json @@ -2,11 +2,11 @@ "ams": { "tabs": { "list": { - "border-bottom": { "value": ".125rem solid {ams.color.primary-blue}" } + "border-bottom": { "value": "{ams.border.width.md} solid {ams.color.primary-blue}" } }, "button": { "background-color": { "value": "transparent" }, - "border": { "value": "none" }, + "border": { "value": "0" }, "color": { "value": "{ams.color.primary-blue}" }, "cursor": { "value": "{ams.action.activate.cursor}" }, "font-family": { "value": "{ams.text.font-family}" }, diff --git a/proprietary/tokens/src/components/ams/text-area.tokens.json b/proprietary/tokens/src/components/ams/text-area.tokens.json index 9c3e20b5da..77c0160667 100644 --- a/proprietary/tokens/src/components/ams/text-area.tokens.json +++ b/proprietary/tokens/src/components/ams/text-area.tokens.json @@ -1,7 +1,7 @@ { "ams": { "text-area": { - "box-shadow": { "value": "inset 0 0 0 1px {ams.color.primary-black}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" }, "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.6.font-size}" }, @@ -15,17 +15,17 @@ "padding-inline": { "value": "1rem" }, "disabled": { "background-color": { "value": "{ams.color.primary-white}" }, - "box-shadow": { "value": "inset 0 0 0 1px {ams.color.neutral-grey2}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey2}" }, "color": { "value": "{ams.color.neutral-grey2}" }, "cursor": { "value": "{ams.action.disabled.cursor}" } }, "hover": { - "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-black}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" } }, "invalid": { - "box-shadow": { "value": "inset 0 0 0 1px {ams.color.primary-red}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" }, "hover": { - "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-red}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" } } }, "placeholder": { diff --git a/proprietary/tokens/src/components/ams/text-input.tokens.json b/proprietary/tokens/src/components/ams/text-input.tokens.json index 566390b491..03be76885b 100644 --- a/proprietary/tokens/src/components/ams/text-input.tokens.json +++ b/proprietary/tokens/src/components/ams/text-input.tokens.json @@ -1,7 +1,7 @@ { "ams": { "text-input": { - "box-shadow": { "value": "inset 0 0 0 1px {ams.color.primary-black}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" }, "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, "font-size": { "value": "{ams.text.level.6.font-size}" }, @@ -12,16 +12,16 @@ "padding-inline": { "value": "{ams.space.inside.md}" }, "disabled": { "background-color": { "value": "{ams.color.primary-white}" }, - "box-shadow": { "value": "inset 0 0 0 1px {ams.color.neutral-grey2}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey2}" }, "color": { "value": "{ams.color.neutral-grey2}" } }, "hover": { - "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-black}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" } }, "invalid": { - "box-shadow": { "value": "inset 0 0 0 1px {ams.color.primary-red}" }, + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" }, "hover": { - "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-red}" } + "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" } } }, "placeholder": { diff --git a/storybook/src/docs/borders.docs.mdx b/storybook/src/docs/borders.docs.mdx new file mode 100644 index 0000000000..f92aa7d15b --- /dev/null +++ b/storybook/src/docs/borders.docs.mdx @@ -0,0 +1,20 @@ +import { Meta } from "@storybook/blocks"; + + + +# Borders + +## Widths + +We have 4 border widths: + +| Size | px | rem | Token name | +| :-------------- | :-: | :----: | :-------------------- | +| **Small** | 1 | 0.0625 | `ams.border.width.sm` | +| **Medium** | 2 | 0.125 | `ams.border.width.md` | +| **Large** | 3 | 0.1875 | `ams.border.width.lg` | +| **Extra large** | 4 | 0.25 | `ams.border.width.xl` | + +Use these widths when defining borders, +`box-shadow`s that look like borders, +`text-decoration-thickness`, et cetera.