From 9d6708d4ac3556cdf52a0a5308fb455ea8f3308a Mon Sep 17 00:00:00 2001 From: takanorip Date: Fri, 21 Jun 2024 17:22:29 +0900 Subject: [PATCH 1/2] update tokens --- .env_sample | 2 ++ package.json | 2 +- scripts/figma.js | 23 +++++++++++++++++++++++ tokens/size/icon.json | 1 + tokens/size/radius.json | 2 +- tokens/size/spacing.json | 2 +- tokens/text/typography.json | 2 +- 7 files changed, 30 insertions(+), 4 deletions(-) create mode 100644 .env_sample create mode 100644 tokens/size/icon.json diff --git a/.env_sample b/.env_sample new file mode 100644 index 0000000..522d89b --- /dev/null +++ b/.env_sample @@ -0,0 +1,2 @@ +FIGMA_TOKEN= +FIGMA_DESIGN_TOKEN_FILE_KEY= diff --git a/package.json b/package.json index dac19c3..aed9a6e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ubie/design-tokens", - "version": "0.1.4", + "version": "0.2.0", "description": "Ubie Design Tokens", "style": "dist/tokens.css", "main": "dist/tokens.js", diff --git a/scripts/figma.js b/scripts/figma.js index 3d89a30..af0963e 100644 --- a/scripts/figma.js +++ b/scripts/figma.js @@ -167,11 +167,34 @@ const main = async () => { }, }); + // Generate seize/icon tokens + const icon = {}; + Object.values(componentNodes) + .filter(({ document }) => document.name.includes('IconSize')) + .forEach(({ document }) => { + const name = document.name.split('/')[1].toLowerCase(); + const srcValue = document.absoluteBoundingBox.width; + const value = Number(srcValue) / ROOT_FONT_SIZE; + icon[name] = { + value: value, + attributes: { + note: `${srcValue}px`, + }, + }; + }); + + const iconContent = JSON.stringify({ + icon: { + ...icon, + }, + }); + await writeFile(path.resolve(__dirname, '../tokens/color/primitive.json'), primitiveColorContent); await writeFile(path.resolve(__dirname, '../tokens/color/semantics.json'), semanticsColorContent); await writeFile(path.resolve(__dirname, '../tokens/size/spacing.json'), spacingContent); await writeFile(path.resolve(__dirname, '../tokens/text/typography.json'), typographyContent); await writeFile(path.resolve(__dirname, '../tokens/size/radius.json'), radiusContent); + await writeFile(path.resolve(__dirname, '../tokens/size/icon.json'), iconContent); console.log('DONE'); }; diff --git a/tokens/size/icon.json b/tokens/size/icon.json new file mode 100644 index 0000000..a7aaafc --- /dev/null +++ b/tokens/size/icon.json @@ -0,0 +1 @@ +{"icon":{"sm":{"value":1.25,"attributes":{"note":"20px"}},"xs":{"value":1,"attributes":{"note":"16px"}},"3xl":{"value":5,"attributes":{"note":"80px"}},"lg":{"value":1.75,"attributes":{"note":"28px"}},"2xl":{"value":4,"attributes":{"note":"64px"}},"4xl":{"value":6.5,"attributes":{"note":"104px"}},"xl":{"value":2,"attributes":{"note":"32px"}},"md":{"value":1.5,"attributes":{"note":"24px"}}}} \ No newline at end of file diff --git a/tokens/size/radius.json b/tokens/size/radius.json index 7cbf0e5..44e26f8 100644 --- a/tokens/size/radius.json +++ b/tokens/size/radius.json @@ -1 +1 @@ -{"radius":{"md":{"value":"8px"},"full":{"value":"9999px"},"sm":{"value":"4px"},"lg":{"value":"12px"},"xs":{"value":"2px"}}} \ No newline at end of file +{"radius":{"md":{"value":"8px"},"full":{"value":"9999px"},"lg":{"value":"12px"},"xs":{"value":"2px"},"sm":{"value":"4px"}}} \ No newline at end of file diff --git a/tokens/size/spacing.json b/tokens/size/spacing.json index d9891a8..ae529e8 100644 --- a/tokens/size/spacing.json +++ b/tokens/size/spacing.json @@ -1 +1 @@ -{"size":{"spacing-xxl":{"value":4,"attributes":{"note":"64px"}},"spacing-xs":{"value":0.5,"attributes":{"note":"8px"}},"spacing-xxs":{"value":0.25,"attributes":{"note":"4px"}},"spacing-md":{"value":1,"attributes":{"note":"16px"}},"spacing-lg":{"value":1.5,"attributes":{"note":"24px"}},"spacing-xl":{"value":2.5,"attributes":{"note":"40px"}},"spacing-sm":{"value":0.75,"attributes":{"note":"12px"}}}} \ No newline at end of file +{"size":{"spacing-xxl":{"value":4,"attributes":{"note":"64px"}},"spacing-xs":{"value":0.5,"attributes":{"note":"8px"}},"spacing-xxs":{"value":0.25,"attributes":{"note":"4px"}},"spacing-lg":{"value":1.5,"attributes":{"note":"24px"}},"spacing-xl":{"value":2.5,"attributes":{"note":"40px"}},"spacing-md":{"value":1,"attributes":{"note":"16px"}},"spacing-sm":{"value":0.75,"attributes":{"note":"12px"}}}} \ No newline at end of file diff --git a/tokens/text/typography.json b/tokens/text/typography.json index 32f8b76..8a38162 100644 --- a/tokens/text/typography.json +++ b/tokens/text/typography.json @@ -1 +1 @@ -{"text":{"body-lg-size":{"value":"1.125rem","attributes":{"note":"18px"}},"body-lg-line":{"value":1.7,"attributes":{"note":"170%"}},"body-lg-narrow-size":{"value":"1.125rem","attributes":{"note":"18px"}},"body-lg-narrow-line":{"value":1.5,"attributes":{"note":"150%"}},"body-lg-tight-size":{"value":"1.125rem","attributes":{"note":"18px"}},"body-lg-tight-line":{"value":1.4,"attributes":{"note":"140%"}},"body-md-size":{"value":"1rem","attributes":{"note":"16px"}},"body-md-line":{"value":1.7,"attributes":{"note":"170%"}},"body-md-narrow-size":{"value":"1rem","attributes":{"note":"16px"}},"body-md-narrow-line":{"value":1.5,"attributes":{"note":"150%"}},"body-md-tight-size":{"value":"1rem","attributes":{"note":"16px"}},"body-md-tight-line":{"value":1.4,"attributes":{"note":"140%"}},"body-sm-size":{"value":"0.875rem","attributes":{"note":"14px"}},"body-sm-line":{"value":1.7,"attributes":{"note":"170%"}},"body-sm-narrow-size":{"value":"0.875rem","attributes":{"note":"14px"}},"body-sm-narrow-line":{"value":1.5,"attributes":{"note":"150%"}},"body-sm-tight-size":{"value":"0.875rem","attributes":{"note":"14px"}},"body-sm-tight-line":{"value":1.4,"attributes":{"note":"140%"}},"button-lg-size":{"value":"1rem","attributes":{"note":"16px"}},"button-lg-line":{"value":1.4,"attributes":{"note":"140%"}},"button-md-size":{"value":"0.875rem","attributes":{"note":"14px"}},"button-md-line":{"value":1.4,"attributes":{"note":"140%"}},"button-sm-size":{"value":"0.8125rem","attributes":{"note":"13px"}},"button-sm-line":{"value":1.4,"attributes":{"note":"140%"}},"heading-lg-size":{"value":"1.5rem","attributes":{"note":"24px"}},"heading-lg-line":{"value":1.4,"attributes":{"note":"140%"}},"heading-md-size":{"value":"1.25rem","attributes":{"note":"20px"}},"heading-md-line":{"value":1.4,"attributes":{"note":"140%"}},"heading-sm-size":{"value":"1.125rem","attributes":{"note":"18px"}},"heading-sm-line":{"value":1.5,"attributes":{"note":"150%"}},"heading-xl-size":{"value":"1.75rem","attributes":{"note":"28px"}},"heading-xl-line":{"value":1.4,"attributes":{"note":"140%"}},"heading-xs-size":{"value":"1rem","attributes":{"note":"16px"}},"heading-xs-line":{"value":1.5,"attributes":{"note":"150%"}},"note-lg-size":{"value":"0.8125rem","attributes":{"note":"13px"}},"note-lg-line":{"value":1.7,"attributes":{"note":"170%"}},"note-lg-narrow-size":{"value":"0.8125rem","attributes":{"note":"13px"}},"note-lg-narrow-line":{"value":1.5,"attributes":{"note":"150%"}},"note-lg-tight-size":{"value":"0.8125rem","attributes":{"note":"13px"}},"note-lg-tight-line":{"value":1.4,"attributes":{"note":"140%"}},"note-md-size":{"value":"0.75rem","attributes":{"note":"12px"}},"note-md-line":{"value":1.7,"attributes":{"note":"170%"}},"note-md-narrow-size":{"value":"0.75rem","attributes":{"note":"12px"}},"note-md-narrow-line":{"value":1.5,"attributes":{"note":"150%"}},"note-md-tight-size":{"value":"0.75rem","attributes":{"note":"12px"}},"note-md-tight-line":{"value":1.4,"attributes":{"note":"140%"}},"note-sm-size":{"value":"0.625rem","attributes":{"note":"10px"}},"note-sm-line":{"value":1.7,"attributes":{"note":"170%"}},"note-sm-narrow-size":{"value":"0.625rem","attributes":{"note":"10px"}},"note-sm-narrow-line":{"value":1.5,"attributes":{"note":"150%"}},"note-sm-tight-size":{"value":"0.625rem","attributes":{"note":"10px"}},"note-sm-tight-line":{"value":1.4,"attributes":{"note":"140%"}},"tag-lg-size":{"value":"0.8125rem","attributes":{"note":"13px"}},"tag-lg-line":{"value":1.4,"attributes":{"note":"140%"}},"tag-md-size":{"value":"0.75rem","attributes":{"note":"12px"}},"tag-md-line":{"value":1.4,"attributes":{"note":"140%"}},"tag-sm-size":{"value":"0.625rem","attributes":{"note":"10px"}},"tag-sm-line":{"value":1.4,"attributes":{"note":"140%"}},"base-family":{"value":"UDShinGoPr6N, sans-serif"}}} \ No newline at end of file +{"text":{"body-lg-size":{"value":"1.125rem","attributes":{"note":"18px"}},"body-lg-line":{"value":1.7,"attributes":{"note":"170%"}},"body-lg-narrow-size":{"value":"1.125rem","attributes":{"note":"18px"}},"body-lg-narrow-line":{"value":1.5,"attributes":{"note":"150%"}},"body-md-size":{"value":"1rem","attributes":{"note":"16px"}},"body-md-line":{"value":1.7,"attributes":{"note":"170%"}},"body-md-narrow-size":{"value":"1rem","attributes":{"note":"16px"}},"body-md-narrow-line":{"value":1.5,"attributes":{"note":"150%"}},"body-sm-size":{"value":"0.875rem","attributes":{"note":"14px"}},"body-sm-line":{"value":1.7,"attributes":{"note":"170%"}},"body-sm-narrow-size":{"value":"0.875rem","attributes":{"note":"14px"}},"body-sm-narrow-line":{"value":1.5,"attributes":{"note":"150%"}},"body-xs-size":{"value":"0.75rem","attributes":{"note":"12px"}},"body-xs-line":{"value":1.7,"attributes":{"note":"170%"}},"body-xs-narrow-size":{"value":"0.75rem","attributes":{"note":"12px"}},"body-xs-narrow-line":{"value":1.5,"attributes":{"note":"150%"}},"button-lg-size":{"value":"1rem","attributes":{"note":"16px"}},"button-lg-line":{"value":1.5,"attributes":{"note":"150%"}},"button-md-size":{"value":"0.875rem","attributes":{"note":"14px"}},"button-md-line":{"value":1.5,"attributes":{"note":"150%"}},"button-sm-size":{"value":"0.75rem","attributes":{"note":"12px"}},"button-sm-line":{"value":1.5,"attributes":{"note":"150%"}},"heading-lg-size":{"value":"1.5rem","attributes":{"note":"24px"}},"heading-lg-line":{"value":1.4,"attributes":{"note":"140%"}},"heading-md-size":{"value":"1.25rem","attributes":{"note":"20px"}},"heading-md-line":{"value":1.4,"attributes":{"note":"140%"}},"heading-sm-size":{"value":"1.125rem","attributes":{"note":"18px"}},"heading-sm-line":{"value":1.5,"attributes":{"note":"150%"}},"heading-xl-size":{"value":"1.75rem","attributes":{"note":"28px"}},"heading-xl-line":{"value":1.4,"attributes":{"note":"140%"}},"heading-xs-size":{"value":"1rem","attributes":{"note":"16px"}},"heading-xs-line":{"value":1.5,"attributes":{"note":"150%"}},"tag-lg-size":{"value":"0.875rem","attributes":{"note":"14px"}},"tag-lg-line":{"value":1.5,"attributes":{"note":"150%"}},"tag-md-size":{"value":"0.75rem","attributes":{"note":"12px"}},"tag-md-line":{"value":1.5,"attributes":{"note":"150%"}},"base-family":{"value":"UDShinGoPr6N, sans-serif"}}} \ No newline at end of file From fee7811405f912b36d17185aa8fb68374bab7cca Mon Sep 17 00:00:00 2001 From: takanorip Date: Mon, 24 Jun 2024 12:22:57 +0900 Subject: [PATCH 2/2] update README and fix typo --- README.md | 15 +++++++++++---- package.json | 2 +- scripts/figma.js | 2 +- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 3d6a3ba..63264b0 100644 --- a/README.md +++ b/README.md @@ -33,17 +33,24 @@ import DesignTokens from '@ubie/design-tokens'; ## Development -1. Convert design tokens defined in Figma to JSON format files +1. create .env file and include file id and token ```bash -FIGMA_TOKEN=*** FIGMA_DESIGN_TOKEN_FILE_KEY=*** npm run build:figma +cp .env_sample .env ``` -\*If you’re Ubie member and want to know FIGMA_DESIGN_TOKEN_FILE_KEY, please ask to `@designer` on Ubie Slack. +- You can generate a token from the settings page in Figma. +- If you’re Ubie member and want to know FIGMA_DESIGN_TOKEN_FILE_KEY, please ask to `@designer` on Ubie Slack. -2. Converts JSON files to the format used by each platform +2. Convert design tokens defined in Figma to JSON format files +```bash +npm run build:figma ``` + +3. Converts JSON files to the format used by each platform + +```bash npm run build:tokens ``` diff --git a/package.json b/package.json index aed9a6e..0a06dc5 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build:tokens": "style-dictionary build", - "build:figma": "node ./scripts/figma.js", + "build:figma": "node --env-file=.env ./scripts/figma.js", "fix": "prettier -w scripts", "prepublishOnly": "npm run build:tokens" }, diff --git a/scripts/figma.js b/scripts/figma.js index af0963e..880a9db 100644 --- a/scripts/figma.js +++ b/scripts/figma.js @@ -167,7 +167,7 @@ const main = async () => { }, }); - // Generate seize/icon tokens + // Generate size/icon tokens const icon = {}; Object.values(componentNodes) .filter(({ document }) => document.name.includes('IconSize'))