fix: Fix type and breakpoints tokens

packages/canvas-tokens/build.ts

@@ -110,6 +110,7 @@ StyleDictionary.registerTransformGroup({
     'name/cti/kebab',
     'value/flatten-border',
     'value/flatten-base-shadow',
+    'value/breakpoints/px',
     'value/hex-to-rgba',
     'value/wrapped-font-family',
     'value/math',

packages/canvas-tokens/tokens/web/sys.json

@@ -945,30 +945,30 @@
       "subtext": {
         "small": {
           "value": {
-            "fontFamily": "{font-family.50}",
-            "fontWeight": "{font-weight.400}",
-            "lineHeight": "{line-height.50}",
-            "fontSize": "{font-size.25}",
+            "fontFamily": "{font-family.default}",
+            "fontWeight": "{font-weight.normal}",
+            "lineHeight": "{line-height.subtext.small}",
+            "fontSize": "{font-size.subtext.small}",
             "letterSpacing": "{letter-spacing.50}"
           },
           "type": "typography"
         },
         "medium": {
           "value": {
-            "fontFamily": "{font-family.50}",
-            "fontWeight": "{font-weight.400}",
-            "lineHeight": "{line-height.50}",
-            "fontSize": "{font-size.50}",
+            "fontFamily": "{font-family.default}",
+            "fontWeight": "{font-weight.normal}",
+            "lineHeight": "{line-height.subtext.medium}",
+            "fontSize": "{font-size.subtext.medium}",
             "letterSpacing": "{letter-spacing.100}"
           },
           "type": "typography"
         },
         "large": {
           "value": {
-            "fontFamily": "{font-family.50}",
-            "fontWeight": "{font-weight.400}",
-            "lineHeight": "{line-height.100}",
-            "fontSize": "{font-size.75}",
+            "fontFamily": "{font-family.default}",
+            "fontWeight": "{font-weight.normal}",
+            "lineHeight": "{line-height.subtext.large}",
+            "fontSize": "{font-size.subtext.large}",
             "letterSpacing": "{letter-spacing.150}"
           },
           "type": "typography"
@@ -977,87 +977,87 @@
       "body": {
         "small": {
           "value": {
-            "fontFamily": "{font-family.50}",
-            "fontWeight": "{font-weight.400}",
-            "lineHeight": "{line-height.150}",
-            "fontSize": "{font-size.100}",
+            "fontFamily": "{font-family.default}",
+            "fontWeight": "{font-weight.normal}",
+            "lineHeight": "{line-height.body.small}",
+            "fontSize": "{font-size.body.small}",
             "letterSpacing": "{letter-spacing.200}"
           },
           "type": "typography"
         },
         "medium": {
           "value": {
-            "fontFamily": "{font-family.50}",
-            "fontWeight": "{font-weight.400}",
-            "lineHeight": "{line-height.200}",
-            "fontSize": "{font-size.125}"
+            "fontFamily": "{font-family.default}",
+            "fontWeight": "{font-weight.normal}",
+            "lineHeight": "{line-height.body.medium}",
+            "fontSize": "{font-size.body.medium}"
           },
           "type": "typography"
         },
         "large": {
           "value": {
-            "fontFamily": "{font-family.50}",
-            "fontWeight": "{font-weight.400}",
-            "lineHeight": "{line-height.200}",
-            "fontSize": "{font-size.150}"
+            "fontFamily": "{font-family.default}",
+            "fontWeight": "{font-weight.normal}",
+            "lineHeight": "{line-height.body.large}",
+            "fontSize": "{font-size.body.large}"
           },
           "type": "typography"
         }
       },
       "heading": {
         "small": {
           "value": {
-            "fontFamily": "{font-family.50}",
-            "fontWeight": "{font-weight.700}",
-            "lineHeight": "{line-height.250}",
-            "fontSize": "{font-size.200}"
+            "fontFamily": "{font-family.default}",
+            "fontWeight": "{font-weight.bold}",
+            "lineHeight": "{line-height.heading.small}",
+            "fontSize": "{font-size.heading.small}"
           },
           "type": "typography"
         },
         "medium": {
           "value": {
-            "fontFamily": "{font-family.50}",
-            "fontWeight": "{font-weight.700}",
-            "lineHeight": "{line-height.300}",
-            "fontSize": "{font-size.250}"
+            "fontFamily": "{font-family.default}",
+            "fontWeight": "{font-weight.bold}",
+            "lineHeight": "{line-height.heading.medium}",
+            "fontSize": "{font-size.heading.medium}"
           },
           "type": "typography"
         },
         "large": {
           "value": {
-            "fontFamily": "{font-family.50}",
-            "fontWeight": "{font-weight.700}",
-            "lineHeight": "{line-height.350}",
-            "fontSize": "{font-size.300}"
+            "fontFamily": "{font-family.default}",
+            "fontWeight": "{font-weight.bold}",
+            "lineHeight": "{line-height.heading.large}",
+            "fontSize": "{font-size.heading.large}"
           },
           "type": "typography"
         }
       },
       "title": {
         "small": {
           "value": {
-            "fontFamily": "{font-family.50}",
-            "fontWeight": "{font-weight.700}",
-            "lineHeight": "{line-height.400}",
-            "fontSize": "{font-size.400}"
+            "fontFamily": "{font-family.default}",
+            "fontWeight": "{font-weight.bold}",
+            "lineHeight": "{line-height.title.small}",
+            "fontSize": "{font-size.title.small}"
           },
           "type": "typography"
         },
         "medium": {
           "value": {
-            "fontFamily": "{font-family.50}",
-            "fontWeight": "{font-weight.700}",
-            "lineHeight": "{line-height.500}",
-            "fontSize": "{font-size.500}"
+            "fontFamily": "{font-family.default}",
+            "fontWeight": "{font-weight.bold}",
+            "lineHeight": "{line-height.title.medium}",
+            "fontSize": "{font-size.title.medium}"
           },
           "type": "typography"
         },
         "large": {
           "value": {
-            "fontFamily": "{font-family.50}",
-            "fontWeight": "{font-weight.700}",
-            "lineHeight": "{line-height.600}",
-            "fontSize": "{font-size.600}"
+            "fontFamily": "{font-family.default}",
+            "fontWeight": "{font-weight.bold}",
+            "lineHeight": "{line-height.title.large}",
+            "fontSize": "{font-size.title.large}"
           },
           "type": "typography"
         }

packages/canvas-tokens/utils/filters/index.ts

@@ -52,3 +52,13 @@ export const isBaseOpacity: Matcher = token => {
   const [level, category] = token.path;
   return level === 'base' && category === 'opacity' && parseFloat(token.value) > 1;
 };
+
+export const isBreakpoints: Matcher = token => {
+  const [level, category] = token.path;
+  return level === 'sys' && category === 'breakpoints';
+};
+
+export const filterCodeTokens: Matcher = token => {
+  const excludedTokens = ['level', 'shadow', 'typescale'];
+  return !excludedTokens.includes(token.path[1]);
+};

packages/canvas-tokens/utils/tokenStudioParser.ts

@@ -1,5 +1,7 @@
 import {kebabCase} from 'case-anything';
 import {DesignToken} from 'style-dictionary/types/DesignToken';
+// @ts-ignore
+import refsList from '../_refs.json';
 
 export function resolveRef(ref: string, resolver: (full: string, ref: string) => string) {
   // comment explaining what this RegExp does.
@@ -31,34 +33,10 @@ export const tokenStudioParser = ({contents}: any) => {
   return parsed;
 };
 
-const levelRefs = {
-  base: [
-    'palette',
-    'opacity',
-    'font-size',
-    'line-height',
-    'typescale',
-    'font-family',
-    'font-weight',
-    'letter-spacing',
-    'shadow',
-    'level',
-    'extended',
-    'unit',
-  ],
-  brand: ['primary', 'alert', 'error', 'success', 'neutral', 'common', 'gradient'],
-  sys: ['color', 'breakpoints', 'depth', 'shape', 'space', 'type'],
-};
-
-const getLevel = (ref: string): string => {
-  const [key] = ref.split('.');
-
-  return Object.keys(levelRefs).reduce((acc: string, item: string) => {
-    if (levelRefs[item as 'base' | 'brand' | 'sys'].includes(key)) {
-      return item;
-    }
-    return acc;
-  }, '');
+const getLevel = (ref: string): string | void => {
+  return Object.keys(refsList).find((key: string) =>
+    refsList[key].some((item: string) => item.startsWith(ref))
+  );
 };
 
 const replaceDescriptionByComment = (token: DesignToken) => {

packages/canvas-tokens/utils/transformers/index.ts

@@ -1,4 +1,5 @@
 import {Transform} from 'style-dictionary';
+import * as math from 'mathjs';
 import * as filter from '../filters';
 import {flatShadow} from './flatShadow';
 import {flatRGBAColor} from './flatRGBAColor';
@@ -47,6 +48,15 @@ export const transforms: Record<string, Transform> = {
     matcher: filter.isBaseOpacity,
     transformer: ({value}) => `${value / 100}`,
   },
+  'value/breakpoints/px': {
+    type: 'value',
+    transitive: true,
+    matcher: filter.isBreakpoints,
+    transformer: ({value}) => {
+      const expr = value.replace('0.25rem', '4');
+      return `${math.evaluate(expr)}px`;
+    },
+  },
   // transform function that changes a value to its CSS var name
   'value/variables': {
     type: 'value',

scripts/utils/generateRefs.ts

@@ -0,0 +1,46 @@
+import fs from 'fs';
+import {decodeJSONBufferString} from './parse-utils';
+const path = require('path');
+
+const transformToRefs = (tokens: any, parsed = {}, level = '') => {
+  const keys = Object.keys(tokens);
+
+  keys.forEach(key => {
+    const isHighestLevel = /base|brand|sys/.test(key);
+    if (isHighestLevel) {
+      // @ts-ignore
+      parsed[key] = [];
+    }
+
+    if (keys.includes('value')) {
+      // @ts-ignore
+      parsed.push(level);
+      return parsed;
+    }
+
+    transformToRefs(
+      tokens[key],
+      // @ts-ignore
+      isHighestLevel ? parsed[key] : parsed,
+      isHighestLevel ? '' : level ? `${level}.${key}` : key
+    );
+  });
+
+  return parsed;
+};
+
+export const generateRefs = async (file: any) => {
+  const refsFileName = path.resolve(__dirname, '../../packages/canvas-tokens/_refs.json');
+
+  await fs.readFile(refsFileName, async (err, data) => {
+    const tokens = transformToRefs(file);
+
+    if (err || !data) {
+      fs.writeFile(refsFileName, JSON.stringify(tokens), () => {});
+    } else {
+      // @ts-ignore
+      const content = decodeJSONBufferString(data);
+      fs.writeFile(refsFileName, JSON.stringify({...content, ...tokens}), () => {});
+    }
+  });
+};

scripts/utils/sync-base-config.ts

@@ -1,5 +1,6 @@
 import {tokensStudioRepoParams, canvasTokensRepoParams} from './api-client';
 import {ContentFile, getFileContent, updateFileContent} from './file-content';
+import {generateRefs} from './generateRefs';
 import {decodeJSONBufferString, encodeJSONToString} from './parse-utils';
 
 // Format the config object into the shape expected by the consumer
@@ -45,6 +46,8 @@ export async function syncBaseConfig() {
   // Re-encode the formatted JSON object to a Buffer string
   const encodedConfig = encodeJSONToString(formattedConfig);
 
+  generateRefs(formattedConfig);
+
   // Sync Canvas Tokens config file with the updated config
   updateFileContent({
     owner: canvasTokensRepoParams.owner,

scripts/utils/sync-brand-config.ts

@@ -1,5 +1,6 @@
 import {tokensStudioRepoParams, canvasTokensRepoParams} from './api-client';
 import {ContentFile, getFileContent, updateFileContent} from './file-content';
+import {generateRefs} from './generateRefs';
 import {decodeJSONBufferString, encodeJSONToString} from './parse-utils';
 
 // Format the config object into the shape expected by the consumer
@@ -45,6 +46,8 @@ export async function syncBrandConfig() {
   // Re-encode the formatted JSON object to a Buffer string
   const encodedConfig = encodeJSONToString(formattedConfig);
 
+  generateRefs(formattedConfig);
+
   // Sync Canvas Tokens config file with the updated config
   updateFileContent({
     owner: canvasTokensRepoParams.owner,

scripts/utils/sync-sys-config.ts

@@ -1,5 +1,6 @@
 import {tokensStudioRepoParams, canvasTokensRepoParams} from './api-client';
 import {ContentFile, getFileContent, updateFileContent} from './file-content';
+import {generateRefs} from './generateRefs';
 import {decodeJSONBufferString, encodeJSONToString} from './parse-utils';
 
 /**
@@ -80,6 +81,8 @@ export async function syncSystemConfig() {
   // Re-encode the formatted JSON object to a Buffer string
   const encodedConfig = encodeJSONToString(formattedConfig);
 
+  generateRefs(formattedConfig);
+
   // Fetch system token config from canvas-tokens repo
   const canvasSystemTokensConfig = (await getFileContent({
     owner: canvasTokensRepoParams.owner,