diff --git a/.changeset/flat-birds-relax.md b/.changeset/flat-birds-relax.md new file mode 100644 index 0000000000..0920b14d0c --- /dev/null +++ b/.changeset/flat-birds-relax.md @@ -0,0 +1,5 @@ +--- +'@channel.io/bezier-tokens': patch +--- + +The alpha version dimension token is removed. The alpha version radius token is added. diff --git a/packages/bezier-react/src/components/AlphaButton/Button.module.scss b/packages/bezier-react/src/components/AlphaButton/Button.module.scss index fc8d97f211..664b2568a1 100644 --- a/packages/bezier-react/src/components/AlphaButton/Button.module.scss +++ b/packages/bezier-react/src/components/AlphaButton/Button.module.scss @@ -177,11 +177,11 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; /* border-radius */ &:where(.variant-primary, .variant-secondary, .variant-tertiary) { $border-radius-by-size: ( - xs: var(--alpha-dimension-6), - s: var(--alpha-dimension-7), - m: var(--alpha-dimension-10), - l: var(--alpha-dimension-12), - xl: var(--alpha-dimension-14), + xs: var(--alpha-radius-6), + s: var(--alpha-radius-7), + m: var(--alpha-radius-10), + l: var(--alpha-radius-12), + xl: var(--alpha-radius-14), ); @each $size, $border-radius in $border-radius-by-size { diff --git a/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss b/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss index 43932c2c6f..ef5dca2c01 100644 --- a/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss +++ b/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss @@ -159,11 +159,11 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; /* border-radius */ &:where(.shape-rectangle) { $border-radius-by-size: ( - xs: var(--alpha-dimension-6), - s: var(--alpha-dimension-7), - m: var(--alpha-dimension-10), - l: var(--alpha-dimension-12), - xl: var(--alpha-dimension-14), + xs: var(--alpha-radius-6), + s: var(--alpha-radius-7), + m: var(--alpha-radius-10), + l: var(--alpha-radius-12), + xl: var(--alpha-radius-14), ); @each $size, $border-radius in $border-radius-by-size { diff --git a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss index cb24ff9a07..f29776e7dc 100644 --- a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss +++ b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss @@ -29,7 +29,7 @@ } &:where(.shape-rectangle) { - border-radius: var(--alpha-dimension-10); + border-radius: var(--alpha-radius-10); } &:where(.shape-capsule) { diff --git a/packages/bezier-tokens/src/alpha/global/dimension.json b/packages/bezier-tokens/src/alpha/global/dimension.json deleted file mode 100644 index e404795b2a..0000000000 --- a/packages/bezier-tokens/src/alpha/global/dimension.json +++ /dev/null @@ -1,218 +0,0 @@ -{ - "dimension": { - "1": { - "value": "1px", - "type": "dimension" - }, - "2": { - "value": "2px", - "type": "dimension" - }, - "3": { - "value": "3px", - "type": "dimension" - }, - "4": { - "value": "4px", - "type": "dimension" - }, - "6": { - "value": "6px", - "type": "dimension" - }, - "7": { - "value": "7px", - "type": "dimension" - }, - "8": { - "value": "8px", - "type": "dimension" - }, - "10": { - "value": "10px", - "type": "dimension" - }, - "12": { - "value": "12px", - "type": "dimension" - }, - "14": { - "value": "14px", - "type": "dimension" - }, - "16": { - "value": "16px", - "type": "dimension" - }, - "20": { - "value": "20px", - "type": "dimension" - }, - "22": { - "value": "22px", - "type": "dimension" - }, - "24": { - "value": "24px", - "type": "dimension" - }, - "28": { - "value": "28px", - "type": "dimension" - }, - "30": { - "value": "30px", - "type": "dimension" - }, - "32": { - "value": "32px", - "type": "dimension" - }, - "36": { - "value": "36px", - "type": "dimension" - }, - "40": { - "value": "40px", - "type": "dimension" - }, - "42": { - "value": "42px", - "type": "dimension" - }, - "44": { - "value": "44px", - "type": "dimension" - }, - "48": { - "value": "48px", - "type": "dimension" - }, - "54": { - "value": "54px", - "type": "dimension" - }, - "60": { - "value": "60px", - "type": "dimension" - }, - "72": { - "value": "72px", - "type": "dimension" - }, - "90": { - "value": "90px", - "type": "dimension" - }, - "120": { - "value": "120px", - "type": "dimension" - }, - "160": { - "value": "160px", - "type": "dimension" - }, - "200": { - "value": "200px", - "type": "dimension" - }, - "240": { - "value": "240px", - "type": "dimension" - }, - "320": { - "value": "320px", - "type": "dimension" - }, - "420": { - "value": "420px", - "type": "dimension" - }, - "540": { - "value": "540px", - "type": "dimension" - }, - "640": { - "value": "640px", - "type": "dimension" - }, - "720": { - "value": "720px", - "type": "dimension" - }, - "800": { - "value": "800px", - "type": "dimension" - }, - "900": { - "value": "900px", - "type": "dimension" - }, - "source": { - "10": { - "value": "{dimension.10}", - "type": "dimension" - }, - "12": { - "value": "{dimension.12}", - "type": "dimension" - }, - "16": { - "value": "{dimension.16}", - "type": "dimension" - }, - "20": { - "value": "{dimension.20}", - "type": "dimension" - }, - "24": { - "value": "{dimension.24}", - "type": "dimension" - }, - "30": { - "value": "{dimension.30}", - "type": "dimension" - }, - "36": { - "value": "{dimension.36}", - "type": "dimension" - }, - "42": { - "value": "{dimension.42}", - "type": "dimension" - }, - "48": { - "value": "{dimension.48}", - "type": "dimension" - }, - "60": { - "value": "{dimension.60}", - "type": "dimension" - }, - "72": { - "value": "{dimension.72}", - "type": "dimension" - }, - "90": { - "value": "{dimension.90}", - "type": "dimension" - }, - "120": { - "value": "{dimension.120}", - "type": "dimension" - } - }, - "42-p": { - "value": "42%", - "type": "dimension" - }, - "100-p": { - "value": "100%", - "type": "dimension" - }, - "m-1": { - "value": "-1px", - "type": "dimension" - } - } -} diff --git a/packages/bezier-tokens/src/alpha/global/radius.json b/packages/bezier-tokens/src/alpha/global/radius.json new file mode 100644 index 0000000000..e44f963e72 --- /dev/null +++ b/packages/bezier-tokens/src/alpha/global/radius.json @@ -0,0 +1,60 @@ +{ + "radius": { + "2": { + "value": "2px", + "type": "dimension" + }, + "3": { + "value": "3px", + "type": "dimension" + }, + "4": { + "value": "4px", + "type": "dimension" + }, + "6": { + "value": "6px", + "type": "dimension" + }, + "7": { + "value": "7px", + "type": "dimension" + }, + "8": { + "value": "8px", + "type": "dimension" + }, + "10": { + "value": "10px", + "type": "dimension" + }, + "12": { + "value": "12px", + "type": "dimension" + }, + "14": { + "value": "14px", + "type": "dimension" + }, + "16": { + "value": "16px", + "type": "dimension" + }, + "20": { + "value": "20px", + "type": "dimension" + }, + "32": { + "value": "32px", + "type": "dimension" + }, + "rounded-half": { + "value": "9999px", + "type": "dimension" + }, + "smooth-corner": { + "value": "42%", + "type": "dimension" + } + } +}