From 6431abc6a4d0ef4783345d9abfbeae76e74f180c Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 17 Jan 2022 11:24:46 -0800 Subject: [PATCH 1/6] Create border width tokens --- .../CustomProperties/tests/CustomProperties.test.tsx | 1 + src/tokens/token-groups/border.json | 5 +++++ src/tokens/tokens.ts | 3 +++ 3 files changed, 9 insertions(+) create mode 100644 src/tokens/token-groups/border.json diff --git a/src/components/CustomProperties/tests/CustomProperties.test.tsx b/src/components/CustomProperties/tests/CustomProperties.test.tsx index 40fc0d8d2ce..b63a3afe66c 100644 --- a/src/components/CustomProperties/tests/CustomProperties.test.tsx +++ b/src/components/CustomProperties/tests/CustomProperties.test.tsx @@ -39,6 +39,7 @@ const mockTokens: Tokens = { motion: mockTokenGroup, // Note: We don't need to assign mock values to the remaining static tokens. depth: {}, + borderWidth: {}, fontSize: {}, legacyTokens: {}, lineHeight: {}, diff --git a/src/tokens/token-groups/border.json b/src/tokens/token-groups/border.json new file mode 100644 index 00000000000..971d8b74eea --- /dev/null +++ b/src/tokens/token-groups/border.json @@ -0,0 +1,5 @@ +{ + "border-width-1": "1px", + "border-width-2": "2px", + "border-width-3": "3px" +} diff --git a/src/tokens/tokens.ts b/src/tokens/tokens.ts index 7ddcc02fe6e..18670e12d16 100644 --- a/src/tokens/tokens.ts +++ b/src/tokens/tokens.ts @@ -1,5 +1,6 @@ import depth from './token-groups/depth.json'; import legacyTokens from './token-groups/legacy-tokens.json'; +import borderWidth from './token-groups/border.json'; import darkColorScheme from './token-groups/color.dark.json'; import fontSize from './token-groups/font-size.json'; import lightColorScheme from './token-groups/color.light.json'; @@ -50,6 +51,7 @@ const colorSchemes: ColorSchemes = { export interface Tokens { depth: TokenGroup; + borderWidth: TokenGroup; colorSchemes: ColorSchemes; fontSize: TokenGroup; legacyTokens: TokenGroup; @@ -63,6 +65,7 @@ export interface Tokens { export const tokens: Tokens = { colorSchemes, + borderWidth: tokensToRems(borderWidth), depth, fontSize: tokensToRems(fontSize), legacyTokens: tokensToRems(legacyTokens), From 4f4ec104ea0e73d73430ac6045e7ee1e20ee82b2 Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 17 Jan 2022 13:27:31 -0800 Subject: [PATCH 2/6] Replace instances of `border-width()` with token --- src/components/Button/Button.scss | 2 +- src/components/ButtonGroup/ButtonGroup.scss | 2 +- src/components/Card/Card.scss | 2 +- src/components/DropZone/DropZone.scss | 14 ++++++++------ .../OptionList/components/Option/Option.scss | 4 ++-- .../components/DualThumb/DualThumb.scss | 4 ++-- src/components/Select/Select.scss | 2 +- src/components/TextField/TextField.scss | 4 ++-- src/styles/foundation/_accessibility.scss | 4 ++-- src/styles/foundation/_borders.scss | 8 ++++---- src/styles/shared/_buttons.scss | 10 +++++----- 11 files changed, 29 insertions(+), 27 deletions(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index dc643cf24b3..56560910f33 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -481,7 +481,7 @@ .ConnectedDisclosure { z-index: var(--pc-button-segment); - margin-left: -(border-width()); + margin-left: calc(-1 * var(--p-border-width-1)); border-top-left-radius: 0; border-bottom-left-radius: 0; height: 100%; diff --git a/src/components/ButtonGroup/ButtonGroup.scss b/src/components/ButtonGroup/ButtonGroup.scss index 167f3ee0049..6d6c5d40292 100644 --- a/src/components/ButtonGroup/ButtonGroup.scss +++ b/src/components/ButtonGroup/ButtonGroup.scss @@ -38,7 +38,7 @@ margin-left: 0; &:not(:first-child) { - margin-left: -1 * border-width(); + margin-left: calc(-1 * var(--p-border-width-1)); } } diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss index 619bcb77517..972e57b1792 100644 --- a/src/components/Card/Card.scss +++ b/src/components/Card/Card.scss @@ -3,7 +3,7 @@ .Card { background-color: var(--p-surface); box-shadow: var(--p-shadow-card); - outline: border-width(base) solid transparent; + outline: var(--p-border-width-1) solid transparent; + .Card { margin-top: var(--p-space-4); diff --git a/src/components/DropZone/DropZone.scss b/src/components/DropZone/DropZone.scss index 1ea6c702755..3b4bff8e607 100755 --- a/src/components/DropZone/DropZone.scss +++ b/src/components/DropZone/DropZone.scss @@ -18,11 +18,13 @@ $dropzone-stacking-order: ( bottom: 0; opacity: 1; transform: scale(1); - border: border-width() $dropzone-border-style transparent; + border: var(--p-border-width-1) $dropzone-border-style transparent; } @mixin set-border-radius { - border-radius: calc(var(--p-border-radius-1) + #{border-width()} + 1px); + border-radius: calc( + var(--p-border-radius-1) + #{var(--p-border-width-1)} + 1px + ); } .DropZone { @@ -42,7 +44,7 @@ $dropzone-stacking-order: ( right: 0; bottom: 0; left: 0; - border: border-width() $dropzone-border-style transparent; + border: var(--p-border-width-1) $dropzone-border-style transparent; border-radius: var(--p-border-radius-1); pointer-events: none; } @@ -59,7 +61,7 @@ $dropzone-stacking-order: ( } .hasOutline { - padding: border-width(); + padding: var(--p-border-width-1); &::after { border-color: var(--p-border-neutral-subdued); @@ -121,7 +123,7 @@ $dropzone-stacking-order: ( } .Container { - @include focus-ring($border-width: border-width()); + @include focus-ring($border-width: var(--p-border-width-1)); flex: 1; } @@ -137,7 +139,7 @@ $dropzone-stacking-order: ( justify-content: center; align-items: center; padding: $dropzone-padding; - border: border-width() $dropzone-border-style var(--p-interactive); + border: var(--p-border-width-1) $dropzone-border-style var(--p-interactive); text-align: center; color: var(--p-interactive); background-color: var(--p-surface-selected); diff --git a/src/components/OptionList/components/Option/Option.scss b/src/components/OptionList/components/Option/Option.scss index fa9141963de..29302cc9c01 100644 --- a/src/components/OptionList/components/Option/Option.scss +++ b/src/components/OptionList/components/Option/Option.scss @@ -53,7 +53,7 @@ $control-vertical-adjustment: 2px; &:hover:not(.disabled) { background: var(--p-surface-hovered); - outline: border-width(base) solid transparent; + outline: var(--p-border-width-1) solid transparent; } // stylelint-disable-next-line selector-max-specificity @@ -61,7 +61,7 @@ $control-vertical-adjustment: 2px; &.select:hover:not(.disabled), &:active:not(.disabled) { background: var(--p-surface-selected); - outline: border-width(base) solid transparent; + outline: var(--p-border-width-1) solid transparent; } &.disabled { diff --git a/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/src/components/RangeSlider/components/DualThumb/DualThumb.scss index def80721568..6b4adc61ae4 100644 --- a/src/components/RangeSlider/components/DualThumb/DualThumb.scss +++ b/src/components/RangeSlider/components/DualThumb/DualThumb.scss @@ -71,14 +71,14 @@ $range-thumb-border-error: 2px solid var(--p-border-critical); } .Thumbs { - @include focus-ring($size: 'wide', $border-width: border-width()); + @include focus-ring($size: 'wide', $border-width: var(--p-border-width-1)); position: absolute; z-index: var(--pc-range-slider-input); padding: 0; width: var(--pc-range-slider-thumb-size); height: var(--pc-range-slider-thumb-size); border-radius: var(--p-border-radius-half); - border: border-width() solid var(--p-interactive); + border: var(--p-border-width-1) solid var(--p-interactive); background: linear-gradient(var(--p-interactive), var(--p-interactive)); -webkit-tap-highlight-color: transparent; diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss index 3665db2751d..541f3819315 100644 --- a/src/components/Select/Select.scss +++ b/src/components/Select/Select.scss @@ -95,7 +95,7 @@ right: 0; bottom: 0; left: 0; - border: border-width() solid var(--p-border-subdued); + border: var(--p-border-width-1) solid var(--p-border-subdued); border-bottom-color: var(--p-border-shadow-subdued); border-radius: var(--p-border-radius-1); background-color: var(--p-surface); diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss index c98aea01086..eac54eda7a5 100644 --- a/src/components/TextField/TextField.scss +++ b/src/components/TextField/TextField.scss @@ -165,7 +165,7 @@ $prefix-horizontal-spacing: var(--p-space-2); } .Backdrop { - @include focus-ring($border-width: border-width()); + @include focus-ring($border-width: var(--p-border-width-1)); position: absolute; z-index: var(--pc-text-field-backdrop); top: 0; @@ -229,7 +229,7 @@ $prefix-horizontal-spacing: var(--p-space-2); .Spinner { --pc-text-field-spinner-offset-large: calc( - var(--p-text-field-spinner-offset) + #{border-width()} + var(--p-text-field-spinner-offset) + var(--p-border-width-1) ); z-index: var(--pc-text-field-contents); margin: var(--pc-text-field-spinner-offset-large); diff --git a/src/styles/foundation/_accessibility.scss b/src/styles/foundation/_accessibility.scss index 338df5e2227..f3724818f22 100644 --- a/src/styles/foundation/_accessibility.scss +++ b/src/styles/foundation/_accessibility.scss @@ -1,9 +1,9 @@ -@mixin high-contrast-outline($border-width: border-width()) { +@mixin high-contrast-outline($border-width: var(--p-border-width-1)) { outline: $border-width solid transparent; @content; } -@mixin high-contrast-border($border-width: border-width()) { +@mixin high-contrast-border($border-width: var(--p-border-width-1)) { border: $border-width solid transparent; @content; } diff --git a/src/styles/foundation/_borders.scss b/src/styles/foundation/_borders.scss index 07d5ec71965..af56f095a52 100644 --- a/src/styles/foundation/_borders.scss +++ b/src/styles/foundation/_borders.scss @@ -1,8 +1,8 @@ $borders-data: ( - base: border-width() solid var(--p-border-subdued), - dark: border-width() solid var(--p-border), - transparent: border-width() solid transparent, - divider: border-width() solid var(--p-divider), + base: var(--p-border-width-1) solid var(--p-border-subdued), + dark: var(--p-border-width-1) solid var(--p-border), + transparent: var(--p-border-width-1) solid transparent, + divider: var(--p-border-width-1) solid var(--p-divider), ); /// Returns the default border. diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss index a1133e01b32..c8df5e6d461 100644 --- a/src/styles/shared/_buttons.scss +++ b/src/styles/shared/_buttons.scss @@ -118,25 +118,25 @@ @mixin button-outline($outline-color, $background-color: transparent) { background: transparent; - border: border-width() solid var(--p-border); + border: var(--p-border-width-1) solid var(--p-border); box-shadow: none; color: var(--p-text); @include focus-ring($border-width: border-width('base')); &:hover { - border: border-width() solid var(--p-border); + border: var(--p-border-width-1) solid var(--p-border); box-shadow: none; background: var(--p-surface-hovered); } &:focus { - border: border-width() solid var(--p-border); + border: var(--p-border-width-1) solid var(--p-border); box-shadow: none; @include focus-ring($style: 'focused'); } &:active { - border: border-width() solid var(--p-border); + border: var(--p-border-width-1) solid var(--p-border); box-shadow: none; background: var(--p-surface-pressed); @@ -147,7 +147,7 @@ &.pressed { background: var(--p-action-secondary-pressed); - border: border-width() solid var(--p-border); + border: var(--p-border-width-1) solid var(--p-border); box-shadow: none; color: var(--pc-button-text); } From 04bd55981d6c1bebc529e74451104c289cdb0c59 Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 17 Jan 2022 13:51:17 -0800 Subject: [PATCH 3/6] Replace instances of `border-width()` with token --- src/components/Badge/Badge.scss | 2 +- src/components/Frame/components/Toast/Toast.scss | 2 +- src/components/TextField/TextField.scss | 2 +- .../Tooltip/components/TooltipOverlay/TooltipOverlay.scss | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss index c01a77d0275..bbd1815f5a5 100644 --- a/src/components/Badge/Badge.scss +++ b/src/components/Badge/Badge.scss @@ -70,7 +70,7 @@ margin-left: calc( var(--pc-badge-vertical-padding) - var(--pc-badge-pip-spacing) ); - border: border-width(thick) solid currentColor; + border: var(--p-border-width-2) solid currentColor; border-radius: var(--p-border-radius-half); flex-shrink: 0; } diff --git a/src/components/Frame/components/Toast/Toast.scss b/src/components/Frame/components/Toast/Toast.scss index 00077c5fb92..7796202f652 100644 --- a/src/components/Frame/components/Toast/Toast.scss +++ b/src/components/Frame/components/Toast/Toast.scss @@ -18,7 +18,7 @@ $Backdrop-opacity: 0.88; } @media (forced-colors: active) { - @include high-contrast-border(border-width(thick)); + @include high-contrast-border(var(--p-border-width-2)); } } diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss index eac54eda7a5..7e5e1811207 100644 --- a/src/components/TextField/TextField.scss +++ b/src/components/TextField/TextField.scss @@ -1,6 +1,6 @@ @import '../../styles/common'; -$textfield-backdrop-offset: -(border-width(thick)); +$textfield-backdrop-offset: calc(-1 * var(--p-border-width-2)); $backdrop-horizontal-spacing: calc(var(--p-space-2) * 1.5); $addon-horizontal-spacing: 0.25em; $spinner-icon-size: 12px; diff --git a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss index 3f76f1d64c5..720e84a3780 100644 --- a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss +++ b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss @@ -14,7 +14,7 @@ $content-max-width: 200px; var(--p-duration-100); @media screen and (-ms-high-contrast: active) { - border: border-width(thick) solid ms-high-contrast-color('text'); + border: var(--p-border-width-2) solid ms-high-contrast-color('text'); } } From 1691a0a4e55edb0f1cf69190ba6b5fc2a457a308 Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 17 Jan 2022 14:18:50 -0800 Subject: [PATCH 4/6] Replace instances of `border-width()` with tokens --- src/components/ActionList/ActionList.scss | 4 ++-- src/components/Button/Button.scss | 2 +- src/components/Tabs/Tabs.scss | 6 +++--- src/styles/shared/_buttons.scss | 18 +++++++++--------- src/styles/shared/_interaction-state.scss | 2 +- 5 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/components/ActionList/ActionList.scss b/src/components/ActionList/ActionList.scss index 13c2a604423..99b08dd50cd 100644 --- a/src/components/ActionList/ActionList.scss +++ b/src/components/ActionList/ActionList.scss @@ -61,7 +61,7 @@ background-color: var(--p-surface-hovered); text-decoration: none; - @include high-contrast-outline($border-width: border-width(thicker)); + @include high-contrast-outline($border-width: var(--p-border-width-3)); } &.active { @@ -80,7 +80,7 @@ &:focus:not(:active) { @include focus-ring($style: 'focused'); - @include high-contrast-outline($border-width: border-width(thicker)); + @include high-contrast-outline($border-width: var(--p-border-width-3)); } &.destructive { diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 56560910f33..15a78c5df17 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -419,7 +419,7 @@ position: relative; border-color: currentColor; // stylelint-disable selector-max-class - box-shadow: 0 0 0 border-width('base') currentColor; + box-shadow: 0 0 0 var(--p-border-width-1) currentColor; @include focus-ring($border-width: 2px); &::before { diff --git a/src/components/Tabs/Tabs.scss b/src/components/Tabs/Tabs.scss index 9eb1f33cd62..3a820c2e024 100644 --- a/src/components/Tabs/Tabs.scss +++ b/src/components/Tabs/Tabs.scss @@ -3,7 +3,7 @@ $item-min-height: 16px; $item-min-width: 50px; $item-vertical-padding: $item-min-height / 2; -$underline-height: border-width(thicker); +$underline-height: var(--p-border-width-3); $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8); .Tabs { @@ -104,7 +104,7 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8); @include text-emphasis-normal; &:focus .Title { - @include high-contrast-outline($border-width: border-width(thicker)); + @include high-contrast-outline($border-width: var(--p-border-width-3)); // stylelint-disable-next-line selector-max-specificity &::before { background: var(--p-action-primary); @@ -112,7 +112,7 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8); } .Title { - @include high-contrast-outline($border-width: border-width(thicker)); + @include high-contrast-outline($border-width: var(--p-border-width-3)); color: var(--p-text); &::before { diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss index c8df5e6d461..5cf172bca0a 100644 --- a/src/styles/shared/_buttons.scss +++ b/src/styles/shared/_buttons.scss @@ -10,7 +10,7 @@ ); @include recolor-icon(var(--p-icon)); - @include focus-ring($border-width: border-width('base')); + @include focus-ring($border-width: var(--p-border-width-1)); position: relative; display: inline-flex; align-items: center; @@ -121,7 +121,7 @@ border: var(--p-border-width-1) solid var(--p-border); box-shadow: none; color: var(--p-text); - @include focus-ring($border-width: border-width('base')); + @include focus-ring($border-width: var(--p-border-width-1)); &:hover { border: var(--p-border-width-1) solid var(--p-border); @@ -153,7 +153,7 @@ } &.disabled { - border: border-width('base') solid var(--p-border-disabled); + border: var(--p-border-width-1) solid var(--p-border-disabled); box-shadow: none; background: transparent; color: var(--p-text-disabled); @@ -161,35 +161,35 @@ &.destructive { background: transparent; - border: border-width('base') solid var(--p-border-critical); + border: var(--p-border-width-1) solid var(--p-border-critical); box-shadow: none; color: var(--p-interactive-critical); @include recolor-icon(var(--p-icon-critical)); &:hover { - border: border-width('base') solid var(--p-border-critical); + border: var(--p-border-width-1) solid var(--p-border-critical); background: var(--p-surface-critical-subdued); } &:focus { - border: border-width('base') solid var(--p-border-critical); + border: var(--p-border-width-1) solid var(--p-border-critical); @include focus-ring($style: 'focused'); } &:active { - border: border-width('base') solid var(--p-border-critical); + border: var(--p-border-width-1) solid var(--p-border-critical); background: var(--p-surface-critical-subdued); } &.disabled { - border: border-width('base') solid var(--p-border-critical-disabled); + border: var(--p-border-width-1) solid var(--p-border-critical-disabled); background: transparent; color: var(--p-interactive-critical-disabled); } &.pressed { background: var(--p-surface-critical-subdued); - box-shadow: border-width('base') solid var(--p-border-critical); + box-shadow: var(--p-border-width-1) solid var(--p-border-critical); color: var(--p-interactive-critical); } } diff --git a/src/styles/shared/_interaction-state.scss b/src/styles/shared/_interaction-state.scss index 37bc2b4cdf2..049de01c0da 100644 --- a/src/styles/shared/_interaction-state.scss +++ b/src/styles/shared/_interaction-state.scss @@ -33,7 +33,7 @@ left: calc(-1 * var(--p-space-2)); height: 100%; display: block; - width: border-width(thicker); + width: var(--p-border-width-3); border-top-right-radius: var(--p-border-radius-1); border-bottom-right-radius: var(--p-border-radius-1); } From 764916da3e8d6ae1f5b62237c49a37b0e859f34b Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 17 Jan 2022 14:26:36 -0800 Subject: [PATCH 5/6] Remove `border-width()` sass function --- src/styles/_common.scss | 1 - src/styles/_public-api.scss | 1 - src/styles/foundation/_border-width.scss | 19 ------------------- 3 files changed, 21 deletions(-) delete mode 100644 src/styles/foundation/_border-width.scss diff --git a/src/styles/_common.scss b/src/styles/_common.scss index a020d37fc8c..3e27ae8c8ec 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -6,7 +6,6 @@ @import './foundation/utilities'; @import './foundation/colors'; -@import './foundation/border-width'; @import './foundation/borders'; @import './foundation/layout'; @import './foundation/typography'; diff --git a/src/styles/_public-api.scss b/src/styles/_public-api.scss index 50adad36264..cbcbc4004e7 100644 --- a/src/styles/_public-api.scss +++ b/src/styles/_public-api.scss @@ -19,7 +19,6 @@ @import './foundation/utilities'; @import './foundation/colors'; @import './foundation/spacing'; -@import './foundation/border-width'; @import './foundation/borders'; @import './foundation/layout'; @import './foundation/typography'; diff --git a/src/styles/foundation/_border-width.scss b/src/styles/foundation/_border-width.scss deleted file mode 100644 index 1a4dfec15e1..00000000000 --- a/src/styles/foundation/_border-width.scss +++ /dev/null @@ -1,19 +0,0 @@ -$border-width-data: ( - base: 1px, - thick: 2px, - thicker: 3px, -); - -/// Returns the width of the specified border type. -/// @param {String} $variant [base] - The border variant key. -/// @return {Number} The width for the border. - -@function border-width($variant: base) { - $fetched-value: map-get($border-width-data, $variant); - - @if type-of($fetched-value) == number { - @return $fetched-value; - } @else { - @error 'Border width variant `#{$variant}` not found. Available variants: #{available-names($border-width-data)}'; - } -} From 892910042a43ba45c11f7b17c051f1d07953a180 Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 19 Jan 2022 14:37:08 -0800 Subject: [PATCH 6/6] feat: move border-width to same file as border-radius --- .../CustomProperties/tests/CustomProperties.test.tsx | 1 - src/tokens/token-groups/border.json | 5 ----- src/tokens/token-groups/shape.json | 5 ++++- src/tokens/tokens.ts | 3 --- 4 files changed, 4 insertions(+), 10 deletions(-) delete mode 100644 src/tokens/token-groups/border.json diff --git a/src/components/CustomProperties/tests/CustomProperties.test.tsx b/src/components/CustomProperties/tests/CustomProperties.test.tsx index b63a3afe66c..40fc0d8d2ce 100644 --- a/src/components/CustomProperties/tests/CustomProperties.test.tsx +++ b/src/components/CustomProperties/tests/CustomProperties.test.tsx @@ -39,7 +39,6 @@ const mockTokens: Tokens = { motion: mockTokenGroup, // Note: We don't need to assign mock values to the remaining static tokens. depth: {}, - borderWidth: {}, fontSize: {}, legacyTokens: {}, lineHeight: {}, diff --git a/src/tokens/token-groups/border.json b/src/tokens/token-groups/border.json deleted file mode 100644 index 971d8b74eea..00000000000 --- a/src/tokens/token-groups/border.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "border-width-1": "1px", - "border-width-2": "2px", - "border-width-3": "3px" -} diff --git a/src/tokens/token-groups/shape.json b/src/tokens/token-groups/shape.json index a219b0127ec..2bcd0194e71 100644 --- a/src/tokens/token-groups/shape.json +++ b/src/tokens/token-groups/shape.json @@ -8,5 +8,8 @@ "border-radius-6": "30px", "border-radius-base": "3px", "border-radius-large": "6px", - "border-radius-half": "50%" + "border-radius-half": "50%", + "border-width-1": "1px", + "border-width-2": "2px", + "border-width-3": "3px" } diff --git a/src/tokens/tokens.ts b/src/tokens/tokens.ts index 18670e12d16..7ddcc02fe6e 100644 --- a/src/tokens/tokens.ts +++ b/src/tokens/tokens.ts @@ -1,6 +1,5 @@ import depth from './token-groups/depth.json'; import legacyTokens from './token-groups/legacy-tokens.json'; -import borderWidth from './token-groups/border.json'; import darkColorScheme from './token-groups/color.dark.json'; import fontSize from './token-groups/font-size.json'; import lightColorScheme from './token-groups/color.light.json'; @@ -51,7 +50,6 @@ const colorSchemes: ColorSchemes = { export interface Tokens { depth: TokenGroup; - borderWidth: TokenGroup; colorSchemes: ColorSchemes; fontSize: TokenGroup; legacyTokens: TokenGroup; @@ -65,7 +63,6 @@ export interface Tokens { export const tokens: Tokens = { colorSchemes, - borderWidth: tokensToRems(borderWidth), depth, fontSize: tokensToRems(fontSize), legacyTokens: tokensToRems(legacyTokens),