From 9eb281609996c4286fe52b9fe76df3c71c16732c Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 22 Nov 2023 11:43:37 +0900 Subject: [PATCH 1/7] feat(bezier-tokens): rm font-family-sans-system token --- packages/bezier-tokens/src/global/font.json | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/bezier-tokens/src/global/font.json b/packages/bezier-tokens/src/global/font.json index 8210c041ae..d8946772cc 100644 --- a/packages/bezier-tokens/src/global/font.json +++ b/packages/bezier-tokens/src/global/font.json @@ -77,14 +77,11 @@ }, "family": { "sans": { - "system": { - "value": "-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif" - }, "kr": { - "value": "'Inter', 'NotoSansKR', 'NotoSansJP', {font.family.sans.system}" + "value": "'Inter', 'NotoSansKR', 'NotoSansJP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif" }, "jp": { - "value": "'Inter', 'NotoSansJP', 'NotoSansKR', {font.family.sans.system}" + "value": "'Inter', 'NotoSansJP', 'NotoSansKR', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif" } }, "mono": { From 997c1e39f9727851e6bbf693326ca41a17d2a5c3 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 22 Nov 2023 11:58:55 +0900 Subject: [PATCH 2/7] feat(bezier-tokens): implement custom radius transformer --- packages/bezier-tokens/scripts/lib/transform.ts | 15 +++++++++++++++ packages/bezier-tokens/scripts/lib/utils.ts | 2 ++ 2 files changed, 17 insertions(+) diff --git a/packages/bezier-tokens/scripts/lib/transform.ts b/packages/bezier-tokens/scripts/lib/transform.ts index 0d8d2994bd..7854f285c1 100644 --- a/packages/bezier-tokens/scripts/lib/transform.ts +++ b/packages/bezier-tokens/scripts/lib/transform.ts @@ -3,6 +3,8 @@ import type { Transform, } from 'style-dictionary' +import { endsWithNumber } from './utils' + type CustomTransform = Named> export const customFontPxToRem: CustomTransform = { @@ -17,3 +19,16 @@ export const customFontPxToRem: CustomTransform = { return `${token.value / ((options && options.basePxFontSize) || 16)}rem` }, } + +export const customRadiusPx: CustomTransform = { + name: 'custom/radius/px', + type: 'value', + transitive: true, + matcher(token) { + const { attributes: { category } = {} } = token + return category === 'radius' + }, + transformer(token) { + return endsWithNumber(token.value) ? `${token.value}px` : token.value + }, +} diff --git a/packages/bezier-tokens/scripts/lib/utils.ts b/packages/bezier-tokens/scripts/lib/utils.ts index 2c54293505..baeec903a9 100644 --- a/packages/bezier-tokens/scripts/lib/utils.ts +++ b/packages/bezier-tokens/scripts/lib/utils.ts @@ -1,2 +1,4 @@ export const toCamelCase = (str: string) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_, char) => char.toUpperCase()) + +export const endsWithNumber = (str: string) => /\d$/.test(str) From 97774c8cafe89c07ae3cbf40dad1dfe1b6191b56 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 22 Nov 2023 12:00:01 +0900 Subject: [PATCH 3/7] feat(bezier-tokens): apply custom transformer and rm unused predefined transforms --- packages/bezier-tokens/scripts/build-tokens.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/bezier-tokens/scripts/build-tokens.ts b/packages/bezier-tokens/scripts/build-tokens.ts index 8785f334e7..2db2bbe1c2 100644 --- a/packages/bezier-tokens/scripts/build-tokens.ts +++ b/packages/bezier-tokens/scripts/build-tokens.ts @@ -4,19 +4,23 @@ import { customJsCjs, customJsEsm, } from './lib/format' -import { customFontPxToRem } from './lib/transform' +import { + customFontPxToRem, + customRadiusPx, +} from './lib/transform' import { toCamelCase } from './lib/utils' -const TokenBuilder = StyleDictionary.registerTransform(customFontPxToRem) +const TokenBuilder = StyleDictionary + .registerTransform(customFontPxToRem) + .registerTransform(customRadiusPx) .registerFormat(customJsCjs) .registerFormat(customJsEsm) const COMMON_WEB_TRANSFORMS = [ 'attribute/cti', 'name/cti/kebab', - 'size/rem', - 'color/css', customFontPxToRem.name, + customRadiusPx.name, ] interface DefineConfigOptions { From 067b0b7cad0b0ff842faaab629b83564d758b717 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 22 Nov 2023 12:07:16 +0900 Subject: [PATCH 4/7] fix(bezier-tokens): add missing basePxFontSize prop for js transforms --- .../bezier-tokens/scripts/build-tokens.ts | 39 +++++++++++-------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/packages/bezier-tokens/scripts/build-tokens.ts b/packages/bezier-tokens/scripts/build-tokens.ts index 2db2bbe1c2..3c65050b7a 100644 --- a/packages/bezier-tokens/scripts/build-tokens.ts +++ b/packages/bezier-tokens/scripts/build-tokens.ts @@ -1,4 +1,7 @@ -import StyleDictionary, { type Config } from 'style-dictionary' +import StyleDictionary, { + type Config, + type Platform, +} from 'style-dictionary' import { customJsCjs, @@ -16,12 +19,18 @@ const TokenBuilder = StyleDictionary .registerFormat(customJsCjs) .registerFormat(customJsEsm) -const COMMON_WEB_TRANSFORMS = [ - 'attribute/cti', - 'name/cti/kebab', - customFontPxToRem.name, - customRadiusPx.name, -] +function defineWebPlatform(options: Platform): Platform { + return { + transforms: [ + 'attribute/cti', + 'name/cti/kebab', + customFontPxToRem.name, + customRadiusPx.name, + ], + basePxFontSize: 10, + ...options, + } +} interface DefineConfigOptions { source: string[] @@ -39,8 +48,7 @@ function defineConfig({ return { source, platforms: { - 'js/cjs': { - transforms: COMMON_WEB_TRANSFORMS, + 'js/cjs': defineWebPlatform({ buildPath: 'dist/cjs/', files: [ { @@ -49,9 +57,8 @@ function defineConfig({ filter: (token) => token.filePath.includes(destination), }, ], - }, - 'js/esm': { - transforms: COMMON_WEB_TRANSFORMS, + }), + 'js/esm': defineWebPlatform({ buildPath: 'dist/esm/', files: [ { @@ -60,10 +67,8 @@ function defineConfig({ filter: (token) => token.filePath.includes(destination), }, ], - }, - css: { - transforms: COMMON_WEB_TRANSFORMS, - basePxFontSize: 10, + }), + css: defineWebPlatform({ buildPath: 'dist/css/', files: [ { @@ -76,7 +81,7 @@ function defineConfig({ }, }, ], - }, + }), }, } } From 222e1921aa38d0fa443cddfc6395d08835101e81 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 22 Nov 2023 12:12:50 +0900 Subject: [PATCH 5/7] refactor(bezier-tokens): change transform's name --- packages/bezier-tokens/scripts/build-tokens.ts | 6 +++--- packages/bezier-tokens/scripts/lib/transform.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/bezier-tokens/scripts/build-tokens.ts b/packages/bezier-tokens/scripts/build-tokens.ts index 3c65050b7a..783c3e61d0 100644 --- a/packages/bezier-tokens/scripts/build-tokens.ts +++ b/packages/bezier-tokens/scripts/build-tokens.ts @@ -8,13 +8,13 @@ import { customJsEsm, } from './lib/format' import { - customFontPxToRem, + customFontRem, customRadiusPx, } from './lib/transform' import { toCamelCase } from './lib/utils' const TokenBuilder = StyleDictionary - .registerTransform(customFontPxToRem) + .registerTransform(customFontRem) .registerTransform(customRadiusPx) .registerFormat(customJsCjs) .registerFormat(customJsEsm) @@ -24,7 +24,7 @@ function defineWebPlatform(options: Platform): Platform { transforms: [ 'attribute/cti', 'name/cti/kebab', - customFontPxToRem.name, + customFontRem.name, customRadiusPx.name, ], basePxFontSize: 10, diff --git a/packages/bezier-tokens/scripts/lib/transform.ts b/packages/bezier-tokens/scripts/lib/transform.ts index 7854f285c1..9be24d7423 100644 --- a/packages/bezier-tokens/scripts/lib/transform.ts +++ b/packages/bezier-tokens/scripts/lib/transform.ts @@ -7,8 +7,8 @@ import { endsWithNumber } from './utils' type CustomTransform = Named> -export const customFontPxToRem: CustomTransform = { - name: 'custom/font/pxToRem', +export const customFontRem: CustomTransform = { + name: 'custom/font/rem', type: 'value', transitive: true, matcher(token) { From 66a207951a3f055a7f08e478bc7500d9157d87cc Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 22 Nov 2023 12:13:38 +0900 Subject: [PATCH 6/7] refactor(bezier-tokens): change web platform name --- packages/bezier-tokens/scripts/build-tokens.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/bezier-tokens/scripts/build-tokens.ts b/packages/bezier-tokens/scripts/build-tokens.ts index 783c3e61d0..3b58a18a76 100644 --- a/packages/bezier-tokens/scripts/build-tokens.ts +++ b/packages/bezier-tokens/scripts/build-tokens.ts @@ -48,7 +48,7 @@ function defineConfig({ return { source, platforms: { - 'js/cjs': defineWebPlatform({ + 'web/cjs': defineWebPlatform({ buildPath: 'dist/cjs/', files: [ { @@ -58,7 +58,7 @@ function defineConfig({ }, ], }), - 'js/esm': defineWebPlatform({ + 'web/esm': defineWebPlatform({ buildPath: 'dist/esm/', files: [ { @@ -68,7 +68,7 @@ function defineConfig({ }, ], }), - css: defineWebPlatform({ + 'web/css': defineWebPlatform({ buildPath: 'dist/css/', files: [ { From 879fbad996bece2f22fde4382b9f7f1b161f88f5 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 22 Nov 2023 14:00:31 +0900 Subject: [PATCH 7/7] chore(changeset): add changeset --- .changeset/wicked-months-sparkle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wicked-months-sparkle.md diff --git a/.changeset/wicked-months-sparkle.md b/.changeset/wicked-months-sparkle.md new file mode 100644 index 0000000000..3ba9d1f0d1 --- /dev/null +++ b/.changeset/wicked-months-sparkle.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-tokens": minor +--- + +Remove unused tokens and add missing unit to radius tokens.