Merge pull request #42 from ubie-oss/update-tokens-20240620

update tokens 2024-06-21

.env_sample

@@ -0,0 +1,2 @@
+FIGMA_TOKEN=
+FIGMA_DESIGN_TOKEN_FILE_KEY=

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
 ```
 

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",
@@ -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"
   },

scripts/figma.js

@@ -167,11 +167,34 @@ const main = async () => {
     },
   });
 
+  // Generate size/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');
 };
 

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"}}}}

tokens/size/radius.json

@@ -1 +1 @@
-{"radius":{"md":{"value":"8px"},"full":{"value":"9999px"},"sm":{"value":"4px"},"lg":{"value":"12px"},"xs":{"value":"2px"}}}
+{"radius":{"md":{"value":"8px"},"full":{"value":"9999px"},"lg":{"value":"12px"},"xs":{"value":"2px"},"sm":{"value":"4px"}}}

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"}}}}
+{"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"}}}}

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"}}}
+{"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"}}}