fix(web): Fix type and breakpoints tokens (#124)

This PR fixes system type and breakpoints tokens. [category:Web Tokens] Release Note: Type tokens have been fixed to refer to system font tokens instead of base. Breakpoints tokens have been fixed to have px value instead of rem. Co-authored-by: Raisa Primerova <[email protected]>
Workday · Oct 7, 2024 · 0cab56d · 0cab56d
1 parent 8e81145
commit 0cab56d
Show file tree

Hide file tree

Showing 12 changed files with 136 additions and 85 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,15 +1,10 @@
 module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
- plugins: [
- '@typescript-eslint',
- ],
- extends: [
- 'eslint:recommended',
- 'plugin:@typescript-eslint/recommended',
- 'prettier',
- ],
+ plugins: ['@typescript-eslint'],
+ extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
  rules: {
- "@typescript-eslint/no-explicit-any": "off"
+ '@typescript-eslint/no-explicit-any': 'off',
+ '@typescript-eslint/ban-ts-ignore': 'off',
  },
 };
diff --git a/packages/canvas-tokens/_refs.json b/packages/canvas-tokens/_refs.json
diff --git a/packages/canvas-tokens/build.ts b/packages/canvas-tokens/build.ts
@@ -113,6 +113,7 @@ StyleDictionary.registerTransformGroup({
  'name/cti/kebab',
  'value/flatten-border',
  'value/shadow/flat-sys',
+ 'value/breakpoints/px',
  'value/hex-to-rgba',
  'value/wrapped-font-family',
  'value/math',

diff --git a/packages/canvas-tokens/tokens/web/sys.json b/packages/canvas-tokens/tokens/web/sys.json
@@ -1047,30 +1047,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"
@@ -1079,87 +1079,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"
  }

diff --git a/packages/canvas-tokens/utils/filters/index.ts b/packages/canvas-tokens/utils/filters/index.ts
@@ -53,6 +53,11 @@ export const isBaseOpacity: Matcher = token => {
  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]);

diff --git a/packages/canvas-tokens/utils/tokenStudioParser.ts b/packages/canvas-tokens/utils/tokenStudioParser.ts
@@ -1,5 +1,6 @@
 import {kebabCase} from 'case-anything';
 import {DesignToken} from 'style-dictionary/types/DesignToken';
+import refsList from '../_refs.json';
 
 export function resolveRef(ref: string, resolver: (full: string, ref: string) => string) {
  // comment explaining what this RegExp does.
@@ -31,34 +32,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 as any)[key].some((item: string) => item.startsWith(ref))
+ );
 };
 
 const replaceDescriptionByComment = (token: DesignToken) => {

diff --git a/packages/canvas-tokens/utils/transformers/index.ts b/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',

diff --git a/scripts/utils/generateRefs.ts b/scripts/utils/generateRefs.ts
@@ -0,0 +1,48 @@
+import fs from 'fs';
+import {decodeJSONBufferString} from './parse-utils';
+import path from 'path';
+
+type Transform = (
+ tokens: Record<string, any>,
+ parsed?: any,
+ level?: string
+) => Record<string, string[]>;
+
+const transformToRefs: Transform = (tokens, parsed = {}, level = '') => {
+ const keys = Object.keys(tokens);
+
+ keys.forEach(key => {
+ const isHighestLevel = /base|brand|sys/.test(key);
+ if (isHighestLevel) {
+ parsed[key] = [];
+ }
+
+ if (keys.includes('value')) {
+ parsed?.push(level);
+ return parsed;
+ }
+
+ transformToRefs(
+ tokens[key],
+ 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.writeFileSync(refsFileName, JSON.stringify(tokens));
+ } else {
+ const content = decodeJSONBufferString(data as any);
+ fs.writeFileSync(refsFileName, JSON.stringify({...content, ...tokens}));
+ }
+ });
+};
diff --git a/scripts/utils/sync-base-config.ts b/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,

diff --git a/scripts/utils/sync-brand-config.ts b/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,

diff --git a/scripts/utils/sync-sys-config.ts b/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,

diff --git a/tsconfig.json b/tsconfig.json
@@ -4,11 +4,16 @@
  "module": "commonjs",
  "jsx": "react",
  "esModuleInterop": true,
+ "resolveJsonModule": true,
  "forceConsistentCasingInFileNames": true,
  "strict": true,
  "skipLibCheck": true,
  "composite": true
  },
+ "include": [
+ // ...other includes
+ "packages/**/*.json"
+ ],
  "ts-node": {
  "compilerOptions": {
  "module": "commonjs"