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; +};