From 21f5e5722abfa67975b68b28201881998b65f07c Mon Sep 17 00:00:00 2001 From: Alan B Smith Date: Thu, 18 Apr 2024 16:29:51 -0600 Subject: [PATCH] =?UTF-8?q?chore:=20Sync=20Tokens=20Studio=20config=20?= =?UTF-8?q?=F0=9F=A4=96=20(#112)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- packages/canvas-tokens/tokens/base.json | 82 +++++++++---------- packages/canvas-tokens/tokens/web/sys.json | 43 +++++----- .../utils/spec/transforms.spec.ts | 2 +- .../canvas-tokens/utils/transformers/index.ts | 3 +- .../utils/transformers/mapFontWeight.ts | 24 ++++++ 5 files changed, 90 insertions(+), 64 deletions(-) create mode 100644 packages/canvas-tokens/utils/transformers/mapFontWeight.ts diff --git a/packages/canvas-tokens/tokens/base.json b/packages/canvas-tokens/tokens/base.json index 0e20e59..f259e8a 100644 --- 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 index ad0cf17..c1d76f2 100644 --- 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 index 9659605..4fc00db 100644 --- 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 index 24ec5df..65a314c 100644 --- 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 = { 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 new file mode 100644 index 0000000..b204deb --- /dev/null +++ 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; +};