chore: Sync Tokens Studio config 🤖 (#112)

Changes done: - Figma only: Changed `font-family` and `font-weight` types to text and `font-weight` values to strings: Bold, Medium, Light, etc - Figma only: Changed `line-height` type to number and value to px - Fix value for `static.orange.default` color [category:Infrastructure] Release Note: Incorrect value of `sys.color.static.orange.default` token has been changed to the correct `cantaloupe.400`. Token Studio structure has been updated for Figma only (types and `font-weight`, `line-height` values changes). Co-authored-by: @RayRedGoose <[email protected]>
Workday · Apr 18, 2024 · 21f5e57 · 21f5e57
1 parent 12c501d
commit 21f5e57
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 64 deletions.
diff --git a/packages/canvas-tokens/tokens/base.json b/packages/canvas-tokens/tokens/base.json
@@ -797,56 +797,56 @@
     },
     "line-height": {
       "50": {
-        "value": "1rem",
-        "type": "lineHeights"
+        "value": "16",
+        "type": "number"
       },
       "100": {
-        "value": "{line-height.50} + {typescale.height.default}",
-        "type": "lineHeights"
+        "value": "20",
+        "type": "number"
       },
       "150": {
-        "value": "{line-height.100} + {typescale.height.default}",
-        "type": "lineHeights"
+        "value": "24",
+        "type": "number"
       },
       "200": {
-        "value": "{line-height.150} + {typescale.height.default}",
-        "type": "lineHeights"
+        "value": "28",
+        "type": "number"
       },
       "250": {
-        "value": "{line-height.200} + {typescale.height.default}",
-        "type": "lineHeights"
+        "value": "32",
+        "type": "number"
       },
       "300": {
-        "value": "{line-height.250} + {typescale.height.default}",
-        "type": "lineHeights"
+        "value": "36",
+        "type": "number"
       },
       "350": {
-        "value": "{line-height.300} + {typescale.height.default}",
-        "type": "lineHeights"
+        "value": "40",
+        "type": "number"
       },
       "400": {
-        "value": "{line-height.350} + {typescale.height.title}",
-        "type": "lineHeights"
+        "value": "48",
+        "type": "number"
       },
       "500": {
-        "value": "{line-height.400} + {typescale.height.title}",
-        "type": "lineHeights"
+        "value": "56",
+        "type": "number"
       },
       "600": {
-        "value": "{line-height.500} + {typescale.height.title}",
-        "type": "lineHeights"
+        "value": "64",
+        "type": "number"
       },
       "750": {
-        "value": "{line-height.600} + {typescale.height.display}",
-        "type": "lineHeights"
+        "value": "72",
+        "type": "number"
       },
       "900": {
-        "value": "{line-height.750} + {typescale.height.display}",
-        "type": "lineHeights"
+        "value": "88",
+        "type": "number"
       },
       "1050": {
-        "value": "{line-height.900} + {typescale.height.display}",
-        "type": "lineHeights"
+        "value": "104",
+        "type": "number"
       }
     },
     "typescale": {
@@ -886,52 +886,52 @@
     "font-family": {
       "50": {
         "value": "Roboto",
-        "type": "fontFamilies",
+        "type": "text",
         "description": "Default font-family"
       },
       "100": {
         "value": "Roboto Mono",
-        "type": "fontFamilies"
+        "type": "text"
       },
       "200": {
         "value": "Noto Sans",
-        "type": "fontFamilies"
+        "type": "text"
       }
     },
     "font-weight": {
       "300": {
-        "value": "300",
-        "type": "fontWeights"
+        "value": "Light",
+        "type": "text"
       },
       "400": {
-        "value": "400",
-        "type": "fontWeights"
+        "value": "Regular",
+        "type": "text"
       },
       "500": {
-        "value": "500",
-        "type": "fontWeights"
+        "value": "Medium",
+        "type": "text"
       },
       "700": {
-        "value": "700",
-        "type": "fontWeights"
+        "value": "Bold",
+        "type": "text"
       }
     },
     "letter-spacing": {
       "50": {
         "value": "0.4",
-        "type": "letterSpacing"
+        "type": "number"
       },
       "100": {
         "value": "0.32",
-        "type": "letterSpacing"
+        "type": "number"
       },
       "150": {
         "value": "0.24",
-        "type": "letterSpacing"
+        "type": "number"
       },
       "200": {
         "value": "0.16",
-        "type": "letterSpacing"
+        "type": "number"
       }
     },
     "shadow": {

diff --git a/packages/canvas-tokens/tokens/web/sys.json b/packages/canvas-tokens/tokens/web/sys.json
@@ -448,7 +448,7 @@
           }
         },
         "transparent": {
-          "value": "rgba({color.static.white},0)",
+          "value": "rgba({color.static.white},0%)",
           "type": "color",
           "description": "Transparent"
         },
@@ -567,7 +567,7 @@
         },
         "orange": {
           "default": {
-            "value": "{palette.cantaloupe.500}",
+            "value": "{palette.cantaloupe.400}",
             "type": "color",
             "description": "Orange"
           },
@@ -714,6 +714,7 @@
         }
       }
     },
+    "layer-opacity": {},
     "shape": {
       "zero": {
         "value": "0rem",
@@ -796,15 +797,15 @@
     "font-family": {
       "default": {
         "value": "{font-family.50}",
-        "type": "fontFamilies"
+        "type": "text"
       },
       "mono": {
         "value": "{font-family.100}",
-        "type": "fontFamilies"
+        "type": "text"
       },
       "global": {
         "value": "{font-family.200}",
-        "type": "fontFamilies"
+        "type": "text"
       }
     },
     "font-size": {
@@ -869,76 +870,76 @@
       "subtext": {
         "small": {
           "value": "{line-height.50}",
-          "type": "lineHeights"
+          "type": "number"
         },
         "medium": {
           "value": "{line-height.50}",
-          "type": "lineHeights"
+          "type": "number"
         },
         "large": {
           "value": "{line-height.100}",
-          "type": "lineHeights"
+          "type": "number"
         }
       },
       "body": {
         "small": {
           "value": "{line-height.150}",
-          "type": "lineHeights"
+          "type": "number"
         },
         "medium": {
           "value": "{line-height.200}",
-          "type": "lineHeights"
+          "type": "number"
         },
         "large": {
           "value": "{line-height.200}",
-          "type": "lineHeights"
+          "type": "number"
         }
       },
       "heading": {
         "small": {
           "value": "{line-height.250}",
-          "type": "lineHeights"
+          "type": "number"
         },
         "medium": {
           "value": "{line-height.300}",
-          "type": "lineHeights"
+          "type": "number"
         },
         "large": {
           "value": "{line-height.350}",
-          "type": "lineHeights"
+          "type": "number"
         }
       },
       "title": {
         "small": {
           "value": "{line-height.400}",
-          "type": "lineHeights"
+          "type": "number"
         },
         "medium": {
           "value": "{line-height.500}",
-          "type": "lineHeights"
+          "type": "number"
         },
         "large": {
           "value": "{line-height.600}",
-          "type": "lineHeights"
+          "type": "number"
         }
       }
     },
     "font-weight": {
       "light": {
         "value": "{font-weight.300}",
-        "type": "fontWeights"
+        "type": "text"
       },
       "normal": {
         "value": "{font-weight.400}",
-        "type": "fontWeights"
+        "type": "text"
       },
       "medium": {
         "value": "{font-weight.500}",
-        "type": "fontWeights"
+        "type": "text"
       },
       "bold": {
         "value": "{font-weight.700}",
-        "type": "fontWeights"
+        "type": "text"
       }
     },
     "type": {

diff --git a/packages/canvas-tokens/utils/spec/transforms.spec.ts b/packages/canvas-tokens/utils/spec/transforms.spec.ts
@@ -134,7 +134,7 @@ describe('transforms', () => {
       {...defaultToken, value: 'Bold'},
       defaultOptions
     );
-    const expected = 'bold';
+    const expected = '700';
 
     expect(result).toBe(expected);
   });

diff --git a/packages/canvas-tokens/utils/transformers/index.ts b/packages/canvas-tokens/utils/transformers/index.ts
@@ -2,6 +2,7 @@ import {Transform} from 'style-dictionary';
 import * as filter from '../filters';
 import {flatShadow} from './flatShadow';
 import {flatRGBAColor} from './flatRGBAColor';
+import {mapFontWeight} from './mapFontWeight';
 import {transformMath} from './transformMath';
 import {transformNameToCamelCase} from './transformNameToCamelCase';
 import {transformHexToRgb} from './transformHexToRgb';
@@ -26,7 +27,7 @@ export const transforms: Record<string, Transform> = {
     type: 'value',
     transitive: true,
     matcher: filter.isBaseFontWeight,
-    transformer: ({value}) => value.toLowerCase(),
+    transformer: mapFontWeight,
   },
   'value/line-height/px2rem': {
     type: 'value',

diff --git a/packages/canvas-tokens/utils/transformers/mapFontWeight.ts b/packages/canvas-tokens/utils/transformers/mapFontWeight.ts
@@ -0,0 +1,24 @@
+import {DesignToken} from 'style-dictionary';
+
+type Transformer = (token: DesignToken) => string;
+
+const mappedFontWeight = {
+  Light: '300',
+  Regular: '400',
+  Medium: '500',
+  Bold: '700',
+};
+
+/**
+ * [Style Dictionary custom transform function](https://amzn.github.io/style-dictionary/#/transforms?id=defining-custom-transforms) that
+ * transforms the string values to number
+ * @param {*} Token - style dictionary token object.
+ * @returns updated token value
+ */
+export const mapFontWeight: Transformer = ({value}) => {
+  if (value in mappedFontWeight) {
+    return mappedFontWeight[value as keyof typeof mappedFontWeight];
+  }
+
+  return value;
+};