From 616df885a7b096a85b0c63d5d26ea6207d48dcf3 Mon Sep 17 00:00:00 2001 From: Alan B Smith Date: Mon, 23 Oct 2023 16:34:12 -0600 Subject: [PATCH] =?UTF-8?q?chore:=20Sync=20Tokens=20Studio=20config=20?= =?UTF-8?q?=F0=9F=A4=96=20(#50)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [category:Infrastructure] Co-authored-by: @RayRedGoose <48605821+RayRedGoose@users.noreply.github.com> --- package.json | 6 +- .../canvas-tokens-docs/.storybook/main.ts | 3 - .../stories/base/examples/Color.tsx | 40 +- packages/canvas-tokens-web/package.json | 4 +- packages/canvas-tokens/tokens/base.json | 304 +++++---- packages/canvas-tokens/tokens/web/brand.json | 6 +- packages/canvas-tokens/tokens/web/sys.json | 598 +++++------------- .../canvas-tokens/utils/tokenStudioParser.ts | 10 +- .../transformers/transformNameToCamelCase.ts | 2 +- yarn.lock | 9 +- 10 files changed, 341 insertions(+), 641 deletions(-) diff --git a/package.json b/package.json index e323356..e533f09 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ }, "scripts": { "commit": "git-cz", - "build:tokens": "npx nx build @workday/canvas-tokens", + "build:tokens": "yarn clean:tokens && npx nx build @workday/canvas-tokens", + "clean:tokens": "npx nx clean @workday/canvas-tokens-web", "lint": "eslint -c ./.eslintrc.js --ext=ts .", "precommit": "lint-staged", "prepare": "husky install", @@ -34,11 +35,11 @@ "@nx/vite": "16.7.4", "@octokit/openapi-types": "^18.0.0", "@octokit/rest": "^18.12.0", - "@types/node": "^18.18.0", "@storybook/addon-essentials": "7.4.0", "@storybook/core-server": "7.4.0", "@storybook/react-vite": "7.4.0", "@types/jest": "^29.5.2", + "@types/node": "^18.18.0", "@typescript-eslint/eslint-plugin": "^5.59.5", "@typescript-eslint/parser": "^5.59.5", "chromatic": "^7.2.0", @@ -54,6 +55,7 @@ "prettier": "^2.8.8", "react": "^18.2.0", "react-dom": "^18.2.0", + "rimraf": "^5.0.5", "ts-jest": "^29.1.0", "ts-node": "10.9.1", "typescript": "^5.0.4", diff --git a/packages/canvas-tokens-docs/.storybook/main.ts b/packages/canvas-tokens-docs/.storybook/main.ts index efbc5f7..c652755 100644 --- a/packages/canvas-tokens-docs/.storybook/main.ts +++ b/packages/canvas-tokens-docs/.storybook/main.ts @@ -13,9 +13,6 @@ const config: StorybookConfig = { viteFinal: async config => mergeConfig(config, { plugins: [nxViteTsPaths()], - optimizeDeps: { - include: ['@workday/canvas-tokens-web'], - }, }), }; diff --git a/packages/canvas-tokens-docs/stories/base/examples/Color.tsx b/packages/canvas-tokens-docs/stories/base/examples/Color.tsx index aab0811..304dbe3 100644 --- a/packages/canvas-tokens-docs/stories/base/examples/Color.tsx +++ b/packages/canvas-tokens-docs/stories/base/examples/Color.tsx @@ -5,33 +5,33 @@ import {Stack} from '../../../components/Stack'; import {ColorGrid, buildColorSwatch, ColorSwatch} from '../../../components/ColorGrid'; const colorPaletteNames = [ - 'cinnamon', - 'peach', - 'chiliMango', + 'berrySmoothie', + 'blackPepper', + 'blackberry', + 'blueberry', 'cantaloupe', - 'sourLemon', - 'juicyPear', - 'kiwi', + 'cappuccino', + 'chiliMango', + 'cinnamon', + 'coconut', + 'frenchVanilla', + 'fruitPunch', + 'grapeSoda', 'greenApple', - 'watermelon', + 'islandPunch', 'jewel', - 'toothpaste', - 'blueberry', + 'juicyPear', + 'kiwi', + 'licorice', + 'peach', 'plum', - 'berrySmoothie', - 'blackberry', - 'islandPunch', - 'grapeSoda', 'pomegranate', - 'fruitPunch', 'rootBeer', - 'toastedMarshmallow', - 'coconut', - 'capuccino', // Misspelled - 'licorice', 'soap', - 'frenchVanilla', - 'blackPepper', + 'sourLemon', + 'toastedMarshmallow', + 'toothpaste', + 'watermelon', ] as const; const colorRegExp = new RegExp(colorPaletteNames.join('|')); diff --git a/packages/canvas-tokens-web/package.json b/packages/canvas-tokens-web/package.json index a55f9ec..264cc54 100644 --- a/packages/canvas-tokens-web/package.json +++ b/packages/canvas-tokens-web/package.json @@ -8,7 +8,9 @@ "module": "dist/es6/index.js", "sideEffects": false, "types": "dist/es6/index.d.ts", - "scripts": {}, + "scripts": { + "clean": "rimraf dist" + }, "files": [ "dist/" ], diff --git a/packages/canvas-tokens/tokens/base.json b/packages/canvas-tokens/tokens/base.json index fb1510f..53db9e3 100644 --- a/packages/canvas-tokens/tokens/base.json +++ b/packages/canvas-tokens/tokens/base.json @@ -3,7 +3,7 @@ "palette": { "cinnamon": { "100": { - "value": "#fff1f0", + "value": "#ffefee", "type": "color" }, "200": { @@ -11,11 +11,11 @@ "type": "color" }, "300": { - "value": "#ff8880", + "value": "#ff867d", "type": "color" }, "400": { - "value": "#ff5447", + "value": "#ff5347", "type": "color" }, "500": { @@ -23,7 +23,7 @@ "type": "color" }, "600": { - "value": "#a11b12", + "value": "#a31b12", "type": "color" } }, @@ -49,25 +49,25 @@ "type": "color" }, "600": { - "value": "#b43313", + "value": "#b53413", "type": "color" } }, "chili-mango": { "100": { - "value": "#ffe8db", + "value": "#ffe6d9", "type": "color" }, "200": { - "value": "#ffc9ad", + "value": "#ffc7ab", "type": "color" }, "300": { - "value": "#ff9c6b", + "value": "#ff9b69", "type": "color" }, "400": { - "value": "#ff661a", + "value": "#ff671b", "type": "color" }, "500": { @@ -81,27 +81,27 @@ }, "cantaloupe": { "100": { - "value": "#ffefdb", + "value": "#ffeed9", "type": "color" }, "200": { - "value": "#fcd5a1", + "value": "#fcd49f", "type": "color" }, "300": { - "value": "#ffba61", + "value": "#ffbc63", "type": "color" }, "400": { - "value": "#ffa024", + "value": "#ffa126", "type": "color" }, "500": { - "value": "#f58b00", + "value": "#f38b00", "type": "color" }, "600": { - "value": "#c26e00", + "value": "#c06c00", "type": "color" } }, @@ -111,7 +111,7 @@ "type": "color" }, "200": { - "value": "#ffecad", + "value": "#ffecab", "type": "color" }, "300": { @@ -133,7 +133,7 @@ }, "juicy-pear": { "100": { - "value": "#f7fae5", + "value": "#f7fae6", "type": "color" }, "200": { @@ -141,7 +141,7 @@ "type": "color" }, "300": { - "value": "#c4de3f", + "value": "#c4de40", "type": "color" }, "400": { @@ -149,21 +149,21 @@ "type": "color" }, "500": { - "value": "#8ea518", + "value": "#8ea618", "type": "color" }, "600": { - "value": "#677718", + "value": "#687818", "type": "color" } }, "kiwi": { "100": { - "value": "#edfcd9", + "value": "#ecfcd7", "type": "color" }, "200": { - "value": "#cbf594", + "value": "#caf593", "type": "color" }, "300": { @@ -171,15 +171,15 @@ "type": "color" }, "400": { - "value": "#78bd1f", + "value": "#77bc1f", "type": "color" }, "500": { - "value": "#5f9915", + "value": "#609915", "type": "color" }, "600": { - "value": "#557a24", + "value": "#537824", "type": "color" } }, @@ -189,7 +189,7 @@ "type": "color" }, "200": { - "value": "#adf5bf", + "value": "#acf5be", "type": "color" }, "300": { @@ -197,37 +197,37 @@ "type": "color" }, "400": { - "value": "#45c465", + "value": "#43c463", "type": "color" }, "500": { - "value": "#319b4b", + "value": "#319c4c", "type": "color" }, "600": { - "value": "#217837", + "value": "#217a37", "type": "color" } }, "watermelon": { "100": { - "value": "#ecfdf8", + "value": "#ebfdf8", "type": "color" }, "200": { - "value": "#b6eddd", + "value": "#b7edde", "type": "color" }, "300": { - "value": "#66ccaf", + "value": "#65ccaf", "type": "color" }, "400": { - "value": "#12a57c", + "value": "#12a67c", "type": "color" }, "500": { - "value": "#0c795a", + "value": "#0c7a5b", "type": "color" }, "600": { @@ -241,11 +241,11 @@ "type": "color" }, "200": { - "value": "#aaecf3", + "value": "#acecf3", "type": "color" }, "300": { - "value": "#42c8d7", + "value": "#44c8d7", "type": "color" }, "400": { @@ -253,17 +253,17 @@ "type": "color" }, "500": { - "value": "#1a838e", + "value": "#1a818c", "type": "color" }, "600": { - "value": "#156b74", + "value": "#156973", "type": "color" } }, "toothpaste": { "100": { - "value": "#d9f2fc", + "value": "#d7f1fc", "type": "color" }, "200": { @@ -271,7 +271,7 @@ "type": "color" }, "300": { - "value": "#3eb3e5", + "value": "#40b4e5", "type": "color" }, "400": { @@ -279,37 +279,37 @@ "type": "color" }, "500": { - "value": "#0272a2", + "value": "#0271a1", "type": "color" }, "600": { - "value": "#005980", + "value": "#005B82", "type": "color" } }, "blueberry": { "100": { - "value": "#d9ebfc", + "value": "#D7EAFC", "type": "color" }, "200": { - "value": "#a8d4ff", + "value": "#A6D2FF", "type": "color" }, "300": { - "value": "#42a1ff", + "value": "#40A0FF", "type": "color" }, "400": { - "value": "#0875E2", + "value": "#0875E1", "type": "color" }, "500": { - "value": "#005cb8", + "value": "#005cb9", "type": "color" }, "600": { - "value": "#004285", + "value": "#004387", "type": "color" } }, @@ -319,7 +319,7 @@ "type": "color" }, "200": { - "value": "#a8ceff", + "value": "#A6CDFF", "type": "color" }, "300": { @@ -327,21 +327,21 @@ "type": "color" }, "400": { - "value": "#3781e1", + "value": "#3881E1", "type": "color" }, "500": { - "value": "#3166aa", + "value": "#3166ab", "type": "color" }, "600": { - "value": "#264a78", + "value": "#264a7a", "type": "color" } }, "berry-smoothie": { "100": { - "value": "#e5ebff", + "value": "#e8edff", "type": "color" }, "200": { @@ -349,15 +349,15 @@ "type": "color" }, "300": { - "value": "#7a93ff", + "value": "#7891FF", "type": "color" }, "400": { - "value": "#6079e6", + "value": "#5E77E6", "type": "color" }, "500": { - "value": "#4b5eb4", + "value": "#4b5eb3", "type": "color" }, "600": { @@ -375,19 +375,19 @@ "type": "color" }, "300": { - "value": "#8684e6", + "value": "#8483e6", "type": "color" }, "400": { - "value": "#5d5be6", + "value": "#5c59e6", "type": "color" }, "500": { - "value": "#403ecc", + "value": "#413fcc", "type": "color" }, "600": { - "value": "#2e2c90", + "value": "#2e2d91", "type": "color" } }, @@ -397,15 +397,15 @@ "type": "color" }, "200": { - "value": "#d1bdfa", + "value": "#d2befa", "type": "color" }, "300": { - "value": "#a889e6", + "value": "#a88ae6", "type": "color" }, "400": { - "value": "#8661d1", + "value": "#8660d1", "type": "color" }, "500": { @@ -413,7 +413,7 @@ "type": "color" }, "600": { - "value": "#4e3781", + "value": "#503882", "type": "color" } }, @@ -423,23 +423,23 @@ "type": "color" }, "200": { - "value": "#fac2ff", + "value": "#fac0ff", "type": "color" }, "300": { - "value": "#de89e6", + "value": "#de8ae6", "type": "color" }, "400": { - "value": "#c861d1", + "value": "#c860d1", "type": "color" }, "500": { - "value": "#96489d", + "value": "#97499e", "type": "color" }, "600": { - "value": "#7a3781", + "value": "#7C3882", "type": "color" } }, @@ -449,7 +449,7 @@ "type": "color" }, "200": { - "value": "#ffbdd6", + "value": "#ffbdbd", "type": "color" }, "300": { @@ -457,21 +457,21 @@ "type": "color" }, "400": { - "value": "#f31268", + "value": "#f31167", "type": "color" }, "500": { - "value": "#c7054f", + "value": "#c70550", "type": "color" }, "600": { - "value": "#99003b", + "value": "#99003a", "type": "color" } }, "fruit-punch": { "100": { - "value": "#fff0f0", + "value": "#FFEEEE", "type": "color" }, "200": { @@ -479,15 +479,15 @@ "type": "color" }, "300": { - "value": "#ff8080", + "value": "#FF7E7E", "type": "color" }, "400": { - "value": "#ff4d4d", + "value": "#ff4c4c", "type": "color" }, "500": { - "value": "#e12d2d", + "value": "#e12f2f", "type": "color" }, "600": { @@ -501,7 +501,7 @@ "type": "color" }, "200": { - "value": "#ebd8d0", + "value": "#EBD7CF", "type": "color" }, "300": { @@ -513,7 +513,7 @@ "type": "color" }, "500": { - "value": "#8b7165", + "value": "#8C7266", "type": "color" }, "600": { @@ -523,75 +523,75 @@ }, "toasted-marshmallow": { "100": { - "value": "#fdf7e7", + "value": "#fdf6e6", "type": "color" }, "200": { - "value": "#ebd6a8", + "value": "#ebd6a9", "type": "color" }, "300": { - "value": "#e6bf6b", + "value": "#e6bf6c", "type": "color" }, "400": { - "value": "#cd9f3c", + "value": "#CC9E3B", "type": "color" }, "500": { - "value": "#b27f10", + "value": "#b37f10", "type": "color" }, "600": { - "value": "#8a5e00", + "value": "#8C6000", "type": "color" } }, "coconut": { "100": { - "value": "#f1efef", + "value": "#F0EEEE", "type": "color" }, "200": { - "value": "#e3dede", + "value": "#e3dfdf", "type": "color" }, "300": { - "value": "#d1cccd", + "value": "#d1cbcc", "type": "color" }, "400": { - "value": "#b3adad", + "value": "#b3acac", "type": "color" }, "500": { - "value": "#9d9595", + "value": "#9e9595", "type": "color" }, "600": { - "value": "#8e8586", + "value": "#8F8687", "type": "color" } }, - "cappucino": { + "cappuccino": { "100": { - "value": "#797273", + "value": "#7A7374", "type": "color" }, "200": { - "value": "#6f6768", + "value": "#706869", "type": "color" }, "300": { - "value": "#5d5656", + "value": "#5E5757", "type": "color" }, "400": { - "value": "#494141", + "value": "#4A4242", "type": "color" }, "500": { - "value": "#363030", + "value": "#352f2f", "type": "color" }, "600": { @@ -601,19 +601,19 @@ }, "licorice": { "100": { - "value": "#a2abb4", + "value": "#A1AAB3", "type": "color" }, "200": { - "value": "#7b858e", + "value": "#7b858f", "type": "color" }, "300": { - "value": "#5d6974", + "value": "#5E6A75", "type": "color" }, "400": { - "value": "#4b5662", + "value": "#4a5561", "type": "color" }, "500": { @@ -631,7 +631,7 @@ "type": "color" }, "200": { - "value": "#f1f2f3", + "value": "#F0F1F2", "type": "color" }, "300": { @@ -639,7 +639,7 @@ "type": "color" }, "400": { - "value": "#e0e3e6", + "value": "#DFE2E6", "type": "color" }, "500": { @@ -647,7 +647,7 @@ "type": "color" }, "600": { - "value": "#b8bfc6", + "value": "#B9C0C7", "type": "color" } }, @@ -687,7 +687,7 @@ "type": "color" }, "300": { - "value": "#4a4a4a", + "value": "#494949", "type": "color" }, "400": { @@ -695,7 +695,7 @@ "type": "color" }, "500": { - "value": "#1f1f1f", + "value": "#1e1e1e", "type": "color" }, "600": { @@ -727,10 +727,10 @@ } }, "base": { - "dimension": { + "unit": { "value": "0.25rem", "type": "dimension", - "description": "Smallest unit in the baseline grid\n" + "description": "The base unit used in the grid system.\n" } }, "font-size": { @@ -739,140 +739,132 @@ "type": "fontSizes" }, "50": { - "value": "{font-size.25} + {font-scale.size.default}", + "value": "{font-size.25} + {typescale.size.default}", "type": "fontSizes" }, "75": { - "value": "{font-size.50} + {font-scale.size.default}", + "value": "{font-size.50} + {typescale.size.default}", "type": "fontSizes" }, "100": { - "value": "{font-size.75} + {font-scale.size.default}", + "value": "{font-size.75} + {typescale.size.default}", "type": "fontSizes" }, "125": { - "value": "{font-size.100} + {font-scale.size.default}", + "value": "{font-size.100} + {typescale.size.default}", "type": "fontSizes" }, "150": { - "value": "{font-size.125} + {font-scale.size.default}", + "value": "{font-size.125} + {typescale.size.default}", "type": "fontSizes" }, "200": { - "value": "{font-size.150} + {font-scale.size.heading}", + "value": "{font-size.150} + {typescale.size.heading}", "type": "fontSizes" }, "250": { - "value": "{font-size.200} + {font-scale.size.heading}", + "value": "{font-size.200} + {typescale.size.heading}", "type": "fontSizes" }, "300": { - "value": "{font-size.250} + {font-scale.size.heading}", + "value": "{font-size.250} + {typescale.size.heading}", "type": "fontSizes" }, "400": { - "value": "{font-size.300} + {font-scale.size.title}", + "value": "{font-size.300} + {typescale.size.title}", "type": "fontSizes" }, "500": { - "value": "{font-size.400} + {font-scale.size.title}", + "value": "{font-size.400} + {typescale.size.title}", "type": "fontSizes" }, "600": { - "value": "{font-size.500} + {font-scale.size.title}", + "value": "{font-size.500} + {typescale.size.title}", "type": "fontSizes" }, "750": { - "value": "{font-size.600} + {font-scale.size.display}", + "value": "{font-size.600} + {typescale.size.display}", "type": "fontSizes" }, "900": { - "value": "{font-size.750} + {font-scale.size.display}", + "value": "{font-size.750} + {typescale.size.display}", "type": "fontSizes" }, "1050": { - "value": "{font-size.900} + {font-scale.size.display}", + "value": "{font-size.900} + {typescale.size.display}", "type": "fontSizes" } }, "line-height": { "50": { - "value": "0.75rem", + "value": "1rem", "type": "lineHeights" }, "100": { - "value": "{line-height.50}", + "value": "{line-height.50} + {typescale.height.default}", "type": "lineHeights" }, "150": { - "value": "{line-height.100} + {font-scale.height.default}", + "value": "{line-height.100} + {typescale.height.default}", "type": "lineHeights" }, "200": { - "value": "{line-height.150} + {font-scale.height.default}", + "value": "{line-height.150} + {typescale.height.default}", "type": "lineHeights" }, "250": { - "value": "{line-height.200} + {font-scale.height.default}", + "value": "{line-height.200} + {typescale.height.default}", "type": "lineHeights" }, "300": { - "value": "{line-height.250} + {font-scale.height.default}", + "value": "{line-height.250} + {typescale.height.default}", "type": "lineHeights" }, "350": { - "value": "{line-height.300} + {font-scale.height.default}", + "value": "{line-height.300} + {typescale.height.default}", "type": "lineHeights" }, "400": { - "value": "{line-height.350} + {font-scale.height.default}", - "type": "lineHeights" - }, - "450": { - "value": "{line-height.400} + {font-scale.height.default}", + "value": "{line-height.350} + {typescale.height.title}", "type": "lineHeights" }, "500": { - "value": "{line-height.450} + {font-scale.height.title}", + "value": "{line-height.400} + {typescale.height.title}", "type": "lineHeights" }, "600": { - "value": "{line-height.500} + {font-scale.height.title}", - "type": "lineHeights" - }, - "700": { - "value": "{line-height.600} + {font-scale.height.title}", + "value": "{line-height.500} + {typescale.height.title}", "type": "lineHeights" }, - "850": { - "value": "{line-height.700} + {font-scale.height.display}", + "750": { + "value": "{line-height.600} + {typescale.height.display}", "type": "lineHeights" }, - "1000": { - "value": "{line-height.850} + {font-scale.height.display}", + "900": { + "value": "{line-height.750} + {typescale.height.display}", "type": "lineHeights" }, - "1150": { - "value": "{line-height.1000} + {font-scale.height.display}", + "1050": { + "value": "{line-height.900} + {typescale.height.display}", "type": "lineHeights" } }, - "font-scale": { + "typescale": { "size": { "default": { "value": "0.125rem", "type": "dimension" }, "heading": { - "value": "0.25rem", + "value": "{typescale.size.default} * {level}", "type": "dimension" }, "title": { - "value": "0.5rem", + "value": "{typescale.size.heading} * {level}", "type": "dimension" }, "display": { - "value": "1rem", + "value": "{typescale.size.title} * {level}", "type": "dimension" } }, @@ -882,7 +874,7 @@ "type": "dimension" }, "title": { - "value": "0.5rem", + "value": "{typescale.height.default} * {level}", "type": "dimension" }, "display": { @@ -894,7 +886,8 @@ "font-family": { "50": { "value": "Roboto", - "type": "fontFamilies" + "type": "fontFamilies", + "description": "Default font-family" }, "100": { "value": "Roboto Mono", @@ -955,7 +948,7 @@ { "x": "0", "y": "2", - "blur": "16", + "blur": "8", "spread": "0", "color": "rgba({palette.licorice.600},{opacity.100})", "type": "dropShadow" @@ -1069,6 +1062,11 @@ ], "type": "boxShadow" } + }, + "level": { + "value": "2", + "type": "number", + "description": "Used to calculate the skip level amount between levels in the type ramp, such as going from subtext to body, body to heading." } } } diff --git a/packages/canvas-tokens/tokens/web/brand.json b/packages/canvas-tokens/tokens/web/brand.json index a9700f1..7d754f4 100644 --- a/packages/canvas-tokens/tokens/web/brand.json +++ b/packages/canvas-tokens/tokens/web/brand.json @@ -132,15 +132,15 @@ }, "common": { "focus-outline": { - "value": "{brand.primary.base}", + "value": "{palette.blueberry.400}", "type": "color" }, "error-inner": { - "value": "{brand.error.base}", + "value": "{palette.cinnamon.500}", "type": "color" }, "alert-inner": { - "value": "{brand.alert.base}", + "value": "{palette.cantaloupe.400}", "type": "color" } }, diff --git a/packages/canvas-tokens/tokens/web/sys.json b/packages/canvas-tokens/tokens/web/sys.json index 07b7a47..1665bcf 100644 --- a/packages/canvas-tokens/tokens/web/sys.json +++ b/packages/canvas-tokens/tokens/web/sys.json @@ -1,424 +1,121 @@ { "sys": { - "border": { - "value": { - "color": "{palette.soap.500}", - "width": "1", - "style": "solid" - }, - "type": "border" - }, - "color": { - "bg": { - "default": { - "value": "{palette.french-vanilla.100}", - "type": "color", - "description": "Background Default" - }, - "alt": { - "value": "{palette.soap.200}", - "type": "color", - "description": "Background Alt" - }, - "hover": { - "value": "{palette.soap.300}", - "type": "color", - "description": "Hover" - }, - "active": { - "value": "{palette.soap.400}", - "type": "color", - "description": "Background Active" - }, - "selected": { - "value": "{palette.blueberry.200}", - "type": "color", - "description": "Selected BG\n" - }, - "primary": { - "default": { - "value": "{palette.blueberry.400}", - "type": "color", - "description": "Primary Default" - }, - "hover": { - "value": "{palette.blueberry.500}", - "type": "color", - "description": "Primary Hover\n" - }, - "active": { - "value": "{palette.blueberry.600}", - "type": "color", - "description": "Primary Active" - } - }, - "secondary": { - "default": { - "value": "none", - "type": "color" - }, - "focus": { - "value": "{palette.french-vanilla.100}", - "type": "color" - }, - "hover": { - "value": "{palette.black-pepper.300}", - "type": "color" - }, - "active": { - "value": "{palette.black-pepper.400}", - "type": "color" - } - }, - "delete": { - "default": { - "value": "{palette.cinnamon.500}", - "type": "color" - }, - "hover": { - "value": "{palette.cinnamon.600}", - "type": "color" - }, - "active": { - "value": "#80160E", - "type": "color" - } - }, - "status": { - "success": { - "value": "{palette.green-apple.400}", - "type": "color" - }, - "error": { - "value": "{palette.cinnamon.500}", - "type": "color" - }, - "alert": { - "value": "{palette.cantaloupe.400}", - "type": "color" - } - }, - "help": { - "value": "rgba({palette.black-pepper.600},{opacity.500})", - "type": "color" - }, - "overlay": { - "value": "rgba({palette.black-pepper.600},{opacity.400})", - "type": "color" - } - }, - "fg": { - "type": { - "heading": { - "value": "{palette.black-pepper.400}", - "type": "color" - }, - "body": { - "value": "{palette.black-pepper.300}", - "type": "color" - }, - "hint": { - "value": "{palette.licorice.300}", - "type": "color" - }, - "disabled": { - "value": "{palette.licorice.100}", - "type": "color" - }, - "link": { - "default": { - "value": "{palette.blueberry.400}", - "type": "color" - }, - "focus": { - "value": "{palette.blueberry.400}", - "type": "color" - }, - "active": { - "value": "{palette.blueberry.600}", - "type": "color" - }, - "visited": { - "value": "{palette.blueberry.600}", - "type": "color" - } - }, - "inverse": { - "value": "{palette.french-vanilla.100}", - "type": "color" - }, - "error": { - "value": "{palette.cinnamon.500}", - "type": "color" - }, - "selected": { - "value": "{palette.blueberry.400}", - "type": "color" - } - }, - "icon": { - "fill": { - "value": "{palette.licorice.200}", - "type": "color" - }, - "background": { - "value": "{palette.licorice.200}", - "type": "color" - }, - "accent": { - "value": "{palette.licorice.200}", - "type": "color" - }, - "hover": { - "value": "{palette.licorice.500}", - "type": "color" - }, - "disabled": { - "value": "{palette.soap.600}", - "type": "color" - }, - "inverse": { - "value": "{palette.french-vanilla.100}", - "type": "color" - }, - "primary": { - "value": "{palette.blueberry.400}", - "type": "color" - } - } - }, - "border": { - "input": { - "default": { - "value": "{palette.licorice.200}", - "type": "color" - }, - "hover": { - "value": "{palette.licorice.500}", - "type": "color" - }, - "disabled": { - "value": "{palette.soap.600}", - "type": "color" - }, - "active": { - "value": "{palette.blueberry.400}", - "type": "color" - }, - "error": { - "value": "{palette.cinnamon.500}", - "type": "color" - }, - "alert": { - "value": "{palette.cantaloupe.600}", - "type": "color" - } - } - }, - "shadow": { - "main": { - "value": "rgba({palette.licorice.600},{opacity.200})", - "type": "color" - }, - "accent": { - "value": "rgba({palette.licorice.600},{opacity.100})", - "type": "color" - } - }, - "focus-ring": { - "value": "{palette.blueberry.400}", - "type": "color" - }, - "gradient": { - "value": "linear-gradient(90deg, {palette.blueberry.500} 0%, {palette.blueberry.400} 100%)", - "type": "color" - }, - "overlay": { - "modal": { - "value": "rgba({palette.black-pepper.600},{opacity.400})", - "type": "color" - }, - "tooltip": { - "value": "rgba({palette.black-pepper.600},{opacity.500})", - "type": "color" - } - }, - "data-viz": { - "10": { - "value": "{palette.jewel.300}", - "type": "color" - }, - "11": { - "value": "{palette.sour-lemon.200}", - "type": "color" - }, - "12": { - "value": "{palette.sour-lemon.400}", - "type": "color" - }, - "13": { - "value": "{palette.island-punch.200}", - "type": "color" - }, - "14": { - "value": "{palette.island-punch.400}", - "type": "color" - }, - "15": { - "value": "{palette.peach.200}", - "type": "color" - }, - "16": { - "value": "{palette.peach.400}", - "type": "color" - }, - "01": { - "value": "{palette.watermelon.100}", - "type": "color" - }, - "02": { - "value": "{palette.watermelon.200}", - "type": "color" - }, - "03": { - "value": "{palette.plum.200}", - "type": "color" - }, - "04": { - "value": "{palette.plum.300}", - "type": "color" - }, - "05": { - "value": "{palette.pomegranate.200}", - "type": "color" - }, - "06": { - "value": "{palette.pomegranate.300}", - "type": "color" - }, - "07": { - "value": "{palette.cantaloupe.200}", - "type": "color" - }, - "08": { - "value": "{palette.cantaloupe.400}", - "type": "color" - }, - "09": { - "value": "{palette.jewel.200}", - "type": "color" - } - } - }, "depth": { "1": { "value": "{shadow.100}", - "type": "boxShadow" + "type": "boxShadow", + "description": "Standard card depth" }, "2": { "value": "{shadow.200}", - "type": "boxShadow" + "type": "boxShadow", + "description": "Top navigation, Bottom Navigation" }, "3": { "value": "{shadow.300}", - "type": "boxShadow" + "type": "boxShadow", + "description": "Floating Action Buttons (FAB), Menus" }, "4": { "value": "{shadow.400}", - "type": "boxShadow" + "type": "boxShadow", + "description": "Bottom Sheets" }, "5": { "value": "{shadow.500}", - "type": "boxShadow" + "type": "boxShadow", + "description": "Banners, Snackbars, Toast Messages, Non modal Dialogs, \nSide Panels (when opacity overlay behaviour is not applied)" }, "6": { "value": "{shadow.600}", - "type": "boxShadow" + "type": "boxShadow", + "description": "Modal Dialogs, Side Panels (when opacity overlay behaviour\nis applied)" } }, "opacity": { "disabled": { "value": "{opacity.300}", - "type": "opacity" + "type": "opacity", + "description": "State layer added on top of disabled elements." } }, "shape": { "zero": { "value": "0rem", - "type": "borderRadius" + "type": "borderRadius", + "description": "This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels." }, - "small": { - "value": "{base.dimension} * 0.5", + "half": { + "value": "{base.unit} * 0.5", "type": "borderRadius", "description": "Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches." }, - "medium": { - "value": "{base.dimension}", + "x1": { + "value": "{base.unit}", "type": "borderRadius", - "description": "Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus and Banners.\n" + "description": "Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus and Banners." }, - "large": { - "value": "{base.dimension} * 2", + "x2": { + "value": "{base.unit} * 2", "type": "borderRadius", - "description": "Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.\n" + "description": "Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts." }, - "circle": { - "value": "{base.dimension} * 250", - "type": "borderRadius" + "round": { + "value": "{base.unit} * 250", + "type": "borderRadius", + "description": "Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges." } }, "space": { "zero": { "value": "0", - "type": "spacing" + "type": "spacing", + "description": "Stacks, rows in tables" }, "x1": { - "value": "{base.dimension}", - "type": "spacing" + "value": "{base.unit}", + "type": "spacing", + "description": "Compact spacing between text or icons" }, "x2": { - "value": "{base.dimension} * 2", - "type": "spacing" + "value": "{base.unit} * 2", + "type": "spacing", + "description": "Commonly used to group compact elements like icon buttons" }, "x3": { - "value": "{base.dimension} * 3", - "type": "spacing" + "value": "{base.unit} * 3", + "type": "spacing", + "description": "Use when compact padding is required" }, "x4": { - "value": "{base.dimension} * 4", - "type": "spacing" - }, - "x5": { - "value": "{base.dimension} * 5", - "type": "spacing" + "value": "{base.unit} * 4", + "type": "spacing", + "description": "Default space token. Used to group Inputs with related data" }, "x6": { - "value": "{base.dimension} * 6", - "type": "spacing" + "value": "{base.unit} * 6", + "type": "spacing", + "description": "• Padding around card content\n• Related elements where more space between them can be afforded\n• Separate section headings or titles from body text or inputs" }, "x8": { - "value": "{base.dimension} * 8", - "type": "spacing" + "value": "{base.unit} * 8", + "type": "spacing", + "description": "• Standard spacing between cards\n• Used to separate groups of content \n• Separate section headings or titles from body text or inputs" }, "x10": { - "value": "{base.dimension} * 10", - "type": "spacing" - }, - "x12": { - "value": "{base.dimension} * 12", - "type": "spacing" - }, - "x14": { - "value": "{base.dimension} * 14", - "type": "spacing" + "value": "{base.unit} * 10", + "type": "spacing", + "description": "• Used for outer margins on the overall page content \n• Used for inner margins on large items such as page sections" }, "x16": { - "value": "{base.dimension} * 16", - "type": "spacing" + "value": "{base.unit} * 16", + "type": "spacing", + "description": "- Use to de-clutter your UI when a lot of space is available\n- Separate banner sections from page content\n- Use to differentiate page content like page sections" }, "x20": { - "value": "{base.dimension} * 20", - "type": "spacing" + "value": "{base.unit} * 20", + "type": "spacing", + "description": "- Use sparingly\n- Helps to put focus on the primary element within your page\n- Use to de-clutter your UI when a lot of space is available" } }, "font-family": { @@ -446,7 +143,7 @@ "type": "sizing" }, "large": { - "value": "{font-size.25}", + "value": "{font-size.75}", "type": "sizing" } }, @@ -496,57 +193,57 @@ "line-height": { "subtext": { "small": { - "value": "{line-height.150}", + "value": "{line-height.50}", "type": "lineHeights" }, "medium": { - "value": "{line-height.150}", + "value": "{line-height.50}", "type": "lineHeights" }, "large": { - "value": "{line-height.200}", + "value": "{line-height.100}", "type": "lineHeights" } }, "body": { "small": { - "value": "{line-height.250}", + "value": "{line-height.150}", "type": "lineHeights" }, "medium": { - "value": "{line-height.300}", + "value": "{line-height.200}", "type": "lineHeights" }, "large": { - "value": "{line-height.300}", + "value": "{line-height.200}", "type": "lineHeights" } }, "heading": { "small": { - "value": "{line-height.350}", + "value": "{line-height.250}", "type": "lineHeights" }, "medium": { - "value": "{line-height.400}", + "value": "{line-height.300}", "type": "lineHeights" }, "large": { - "value": "{line-height.450}", + "value": "{line-height.350}", "type": "lineHeights" } }, "title": { "small": { - "value": "{line-height.500}", + "value": "{line-height.400}", "type": "lineHeights" }, "medium": { - "value": "{line-height.600}", + "value": "{line-height.500}", "type": "lineHeights" }, "large": { - "value": "{line-height.700}", + "value": "{line-height.600}", "type": "lineHeights" } } @@ -575,7 +272,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.25}", "letterSpacing": "{letter-spacing.50}" }, @@ -585,7 +282,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.50}", "letterSpacing": "{letter-spacing.100}" }, @@ -595,7 +292,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.200}", + "lineHeight": "{line-height.100}", "fontSize": "{font-size.75}", "letterSpacing": "{letter-spacing.150}" }, @@ -607,7 +304,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.250}", + "lineHeight": "{line-height.150}", "fontSize": "{font-size.100}", "letterSpacing": "{letter-spacing.200}" }, @@ -617,7 +314,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.300}", + "lineHeight": "{line-height.200}", "fontSize": "{font-size.125}" }, "type": "typography" @@ -626,7 +323,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.300}", + "lineHeight": "{line-height.200}", "fontSize": "{font-size.150}" }, "type": "typography" @@ -637,7 +334,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.350}", + "lineHeight": "{line-height.250}", "fontSize": "{font-size.200}" }, "type": "typography" @@ -646,7 +343,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.400}", + "lineHeight": "{line-height.300}", "fontSize": "{font-size.250}" }, "type": "typography" @@ -655,7 +352,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.450}", + "lineHeight": "{line-height.350}", "fontSize": "{font-size.300}" }, "type": "typography" @@ -666,7 +363,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.500}", + "lineHeight": "{line-height.400}", "fontSize": "{font-size.400}" }, "type": "typography" @@ -675,7 +372,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.600}", + "lineHeight": "{line-height.500}", "fontSize": "{font-size.500}" }, "type": "typography" @@ -684,7 +381,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.700}", + "lineHeight": "{line-height.600}", "fontSize": "{font-size.600}" }, "type": "typography" @@ -697,7 +394,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.25}", "letterSpacing": "{letter-spacing.50}" }, @@ -708,7 +405,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.25}", "letterSpacing": "{letter-spacing.50}" }, @@ -719,7 +416,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.25}", "letterSpacing": "{letter-spacing.50}", "textDecoration": "underline" @@ -731,7 +428,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.25}", "letterSpacing": "{letter-spacing.50}", "textDecoration": "underline" @@ -743,7 +440,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.25}", "letterSpacing": "{letter-spacing.50}", "textDecoration": "underline" @@ -755,7 +452,7 @@ "value": { "fontFamily": "{font-family.100}", "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.25}", "letterSpacing": "{letter-spacing.50}" }, @@ -766,7 +463,7 @@ "value": { "fontFamily": "{font-family.100}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.25}", "letterSpacing": "{letter-spacing.50}" }, @@ -777,7 +474,7 @@ "value": { "fontFamily": "{font-family.100}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.25}", "letterSpacing": "{letter-spacing.50}" }, @@ -788,9 +485,9 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.50}", - "letterSpacing": "{letter-spacing.200}" + "letterSpacing": "{letter-spacing.100}" }, "type": "typography", "description": "Subtext Medium (12px) - (500) Medium\n\n🧩Advised Use:\nComplex data\n\n🖍Main Color:\nBlack Pepper 300\n\n✚ More Colors:\nSee Type Color Swatches" @@ -799,10 +496,9 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.50}", - "letterSpacing": "{letter-spacing.200}", - "textDecoration": "underline" + "letterSpacing": "{letter-spacing.100}" }, "type": "typography", "description": "Subtext Medium (12px) - (500) Medium\n\n🧩Advised Use:\nComplex data\n\n🖍Main Color:\nBlack Pepper 300\n\n✚ More Colors:\nSee Type Color Swatches" @@ -811,9 +507,9 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.50}", - "letterSpacing": "{letter-spacing.200}", + "letterSpacing": "{letter-spacing.100}", "textDecoration": "underline" }, "type": "typography", @@ -823,9 +519,9 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.50}", - "letterSpacing": "{letter-spacing.200}", + "letterSpacing": "{letter-spacing.100}", "textDecoration": "underline" }, "type": "typography", @@ -835,9 +531,9 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.50}", - "letterSpacing": "{letter-spacing.200}", + "letterSpacing": "{letter-spacing.100}", "textDecoration": "underline" }, "type": "typography", @@ -847,9 +543,9 @@ "value": { "fontFamily": "{font-family.100}", "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.50}", - "letterSpacing": "{letter-spacing.200}" + "letterSpacing": "{letter-spacing.100}" }, "type": "typography", "description": "Subtext Medium (12px) - (500) Medium\n\n🧩Advised Use:\nComplex data\n\n🖍Main Color:\nBlack Pepper 300\n\n✚ More Colors:\nSee Type Color Swatches" @@ -858,9 +554,9 @@ "value": { "fontFamily": "{font-family.100}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.50}", - "letterSpacing": "{letter-spacing.200}" + "letterSpacing": "{letter-spacing.100}" }, "type": "typography", "description": "Subtext Medium (12px) - (500) Medium\n\n🧩Advised Use:\nComplex data\n\n🖍Main Color:\nBlack Pepper 300\n\n✚ More Colors:\nSee Type Color Swatches" @@ -869,9 +565,9 @@ "value": { "fontFamily": "{font-family.100}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.150}", + "lineHeight": "{line-height.50}", "fontSize": "{font-size.50}", - "letterSpacing": "{letter-spacing.200}" + "letterSpacing": "{letter-spacing.100}" }, "type": "typography", "description": "Subtext Medium (12px) - (500) Medium\n\n🧩Advised Use:\nComplex data\n\n🖍Main Color:\nBlack Pepper 300\n\n✚ More Colors:\nSee Type Color Swatches" @@ -880,7 +576,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.200}", + "lineHeight": "{line-height.100}", "fontSize": "{font-size.75}", "letterSpacing": "{letter-spacing.150}" }, @@ -891,7 +587,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.200}", + "lineHeight": "{line-height.100}", "fontSize": "{font-size.75}", "letterSpacing": "{letter-spacing.150}" }, @@ -902,7 +598,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.200}", + "lineHeight": "{line-height.100}", "fontSize": "{font-size.75}", "letterSpacing": "{letter-spacing.150}", "textDecoration": "underline" @@ -914,7 +610,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.200}", + "lineHeight": "{line-height.100}", "fontSize": "{font-size.75}", "letterSpacing": "{letter-spacing.150}", "textDecoration": "underline" @@ -926,7 +622,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.200}", + "lineHeight": "{line-height.100}", "fontSize": "{font-size.75}", "letterSpacing": "{letter-spacing.150}", "textDecoration": "underline" @@ -938,7 +634,7 @@ "value": { "fontFamily": "{font-family.100}", "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.200}", + "lineHeight": "{line-height.100}", "fontSize": "{font-size.75}", "letterSpacing": "{letter-spacing.150}" }, @@ -949,7 +645,7 @@ "value": { "fontFamily": "{font-family.100}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.200}", + "lineHeight": "{line-height.100}", "fontSize": "{font-size.75}", "letterSpacing": "{letter-spacing.150}" }, @@ -960,7 +656,7 @@ "value": { "fontFamily": "{font-family.100}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.200}", + "lineHeight": "{line-height.100}", "fontSize": "{font-size.75}", "letterSpacing": "{letter-spacing.150}" }, @@ -973,9 +669,9 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.250}", + "lineHeight": "{line-height.150}", "fontSize": "{font-size.100}", - "letterSpacing": "{letter-spacing.100}" + "letterSpacing": "{letter-spacing.200}" }, "type": "typography", "description": "Body Small (16px) - (500) Medium\n\n🧩Advised Use:\nParagraphs\n\n🖍Main Color:\nBlack Pepper 300\n\n✚ More Colors:\nSee Type Color Swatches" @@ -984,9 +680,9 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.250}", + "lineHeight": "{line-height.150}", "fontSize": "{font-size.100}", - "letterSpacing": "{letter-spacing.100}" + "letterSpacing": "{letter-spacing.200}" }, "type": "typography", "description": "Body Small (16px) - (500) Medium\n\n🧩Advised Use:\nParagraphs\n\n🖍Main Color:\nBlack Pepper 300\n\n✚ More Colors:\nSee Type Color Swatches" @@ -995,9 +691,10 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.250}", - "fontSize": "{font-size.100}", - "letterSpacing": "{letter-spacing.100}" + "lineHeight": "{line-height.150}", + "fontSize": "{font-size.200}", + "letterSpacing": "{letter-spacing.100}", + "textDecoration": "underline" }, "type": "typography", "description": "Body Small (16px) - (500) Medium\n\n🧩Advised Use:\nParagraphs\n\n🖍Main Color:\nBlack Pepper 300\n\n✚ More Colors:\nSee Type Color Swatches" @@ -1006,9 +703,9 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.250}", + "lineHeight": "{line-height.150}", "fontSize": "{font-size.100}", - "letterSpacing": "{letter-spacing.100}", + "letterSpacing": "{letter-spacing.200}", "textDecoration": "underline" }, "type": "typography", @@ -1018,18 +715,19 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.250}", + "lineHeight": "{line-height.150}", "fontSize": "{font-size.100}", - "letterSpacing": "{letter-spacing.100}" + "letterSpacing": "{letter-spacing.200}", + "textDecoration": "underline" }, "type": "typography", "description": "Body Small (16px) - (500) Medium\n\n🧩Advised Use:\nParagraphs\n\n🖍Main Color:\nBlack Pepper 300\n\n✚ More Colors:\nSee Type Color Swatches" }, "Body S Mono - (400) Regular": { "value": { - "fontFamily": "{font-family.50}", + "fontFamily": "{font-family.100}", "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.250}", + "lineHeight": "{line-height.150}", "fontSize": "{font-size.100}", "letterSpacing": "{letter-spacing.100}" }, @@ -1040,7 +738,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.300}", + "lineHeight": "{line-height.200}", "fontSize": "{font-size.125}" }, "type": "typography", @@ -1050,7 +748,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.300}", + "lineHeight": "{line-height.200}", "fontSize": "{font-size.125}" }, "type": "typography", @@ -1060,7 +758,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.300}", + "lineHeight": "{line-height.200}", "fontSize": "{font-size.125}", "textDecoration": "underline" }, @@ -1071,7 +769,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.300}", + "lineHeight": "{line-height.200}", "fontSize": "{font-size.125}", "textDecoration": "underline" }, @@ -1082,7 +780,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.300}", + "lineHeight": "{line-height.200}", "fontSize": "{font-size.125}", "textDecoration": "underline" }, @@ -1093,7 +791,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.300}", + "lineHeight": "{line-height.200}", "fontSize": "{font-size.150}" }, "type": "typography", @@ -1103,7 +801,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.300}", + "lineHeight": "{line-height.200}", "fontSize": "{font-size.150}" }, "type": "typography", @@ -1113,7 +811,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.300}", + "lineHeight": "{line-height.200}", "fontSize": "{font-size.150}", "textDecoration": "underline" }, @@ -1124,7 +822,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.300}", + "lineHeight": "{line-height.200}", "fontSize": "{font-size.150}", "textDecoration": "underline" }, @@ -1135,7 +833,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.300}", + "lineHeight": "{line-height.200}", "fontSize": "{font-size.150}", "textDecoration": "underline" }, @@ -1148,7 +846,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.350}", + "lineHeight": "{line-height.250}", "fontSize": "{font-size.200}" }, "type": "typography", @@ -1158,7 +856,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.400}", + "lineHeight": "{line-height.300}", "fontSize": "{font-size.250}" }, "type": "typography", @@ -1168,7 +866,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.450}", + "lineHeight": "{line-height.350}", "fontSize": "{font-size.300}" }, "type": "typography", @@ -1180,7 +878,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.300}", - "lineHeight": "{line-height.500}", + "lineHeight": "{line-height.400}", "fontSize": "{font-size.400}" }, "type": "typography", @@ -1190,7 +888,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.500}", + "lineHeight": "{line-height.400}", "fontSize": "{font-size.400}" }, "type": "typography", @@ -1201,7 +899,7 @@ "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.300}", "fontSize": "{font-size.500}", - "lineHeight": "{line-height.600}" + "lineHeight": "{line-height.500}" }, "type": "typography", "description": "Title Medium (48px) - (300) Light\n\n🧩Advised Use:\nTitles\n\n🖍Main Color:\nBlack Pepper 400\n\n✚ More Colors:\nSee Type Color Swatches" @@ -1210,7 +908,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.600}", + "lineHeight": "{line-height.500}", "fontSize": "{font-size.500}" }, "type": "typography", @@ -1220,7 +918,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.300}", - "lineHeight": "{line-height.700}", + "lineHeight": "{line-height.600}", "fontSize": "{font-size.600}" }, "type": "typography", @@ -1230,7 +928,7 @@ "value": { "fontFamily": "{font-family.50}", "fontWeight": "{font-weight.500}", - "lineHeight": "{line-height.700}", + "lineHeight": "{line-height.600}", "fontSize": "{font-size.600}" }, "type": "typography", diff --git a/packages/canvas-tokens/utils/tokenStudioParser.ts b/packages/canvas-tokens/utils/tokenStudioParser.ts index cc715f5..a99daee 100644 --- a/packages/canvas-tokens/utils/tokenStudioParser.ts +++ b/packages/canvas-tokens/utils/tokenStudioParser.ts @@ -14,9 +14,9 @@ export const tokenStudioParser = ({contents}: any) => { } if (parsed.base) { - const {dimension} = parsed.base.base; + const {unit} = parsed.base.base; delete parsed.base.base; - parsed.base.dimension = dimension; + parsed.base.unit = unit; } const updateTokens = (token: DesignToken) => { @@ -92,16 +92,12 @@ const replaceByFullRef = (value: string) => { }; // Resolving extensions - -const getKeys = (obj: object): string[] => Object.keys(obj); - const mapObjectContent = (fn: (token: DesignToken) => DesignToken, obj: DesignToken) => { if (obj.value) { return fn(obj); } - const keys = getKeys(obj); - keys.forEach(key => { + Object.keys(obj).forEach(key => { mapObjectContent(fn, obj[key]); }); }; diff --git a/packages/canvas-tokens/utils/transformers/transformNameToCamelCase.ts b/packages/canvas-tokens/utils/transformers/transformNameToCamelCase.ts index baf1003..a97b6fd 100644 --- a/packages/canvas-tokens/utils/transformers/transformNameToCamelCase.ts +++ b/packages/canvas-tokens/utils/transformers/transformNameToCamelCase.ts @@ -14,6 +14,6 @@ export const transformNameToCamelCase: Transformer = token => { const [, ...rest] = name; const [tokenName, ...restName] = rest; - const value = tokenName !== 'dimension' ? (tokenName === 'palette' ? restName : rest) : name; + const value = tokenName !== 'unit' ? (tokenName === 'palette' ? restName : rest) : name; return camelCase(value.join('-')); }; diff --git a/yarn.lock b/yarn.lock index 845d49b..6c0f079 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6555,7 +6555,7 @@ glob@7.2.3, glob@^7.1.3, glob@^7.1.4, glob@^7.2.0: once "^1.3.0" path-is-absolute "^1.0.0" -glob@^10.0.0: +glob@^10.0.0, glob@^10.3.7: version "10.3.10" resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.10.tgz#0351ebb809fd187fe421ab96af83d3a70715df4b" integrity sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g== @@ -9361,6 +9361,13 @@ rimraf@^3.0.0, rimraf@^3.0.2: dependencies: glob "^7.1.3" +rimraf@^5.0.5: + version "5.0.5" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-5.0.5.tgz#9be65d2d6e683447d2e9013da2bf451139a61ccf" + integrity sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A== + dependencies: + glob "^10.3.7" + "rollup@^2.25.0 || ^3.3.0", rollup@^3.21.0: version "3.29.4" resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981"