diff --git a/build.js b/build.js new file mode 100755 index 0000000..29dbfa5 --- /dev/null +++ b/build.js @@ -0,0 +1,80 @@ +#!/usr/bin/env node + +const StyleDictionary = require('style-dictionary').extend('config.js'); + +// Identifiers +const SIZE_IDENTIFIERS = ['fontSizes', 'fontSize', 'sizing', 'borderWidth', 'borderRadius', 'blur', 'spread', 'x', 'y']; +const WEIGHT_IDENTIFIERS = ['fontWeights', 'fontWeight']; +const FONT_FAMILY_IDENTIFIERS = ['fontFamilies'] + +// Values +const FALLBACK_FONTS = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"; +const FALLBACK_FONTS_MONO = "SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace"; +const BASE_FONT_SIZE = 15.0; +const WEIGHT = { + 'Light': 300, + 'Regular': 400, + 'Medium': 500, + 'Semibold': 600, + 'Bold': 700, +} + +function getBasePxFontSize(options) { + return (options && options.basePxFontSize) || BASE_FONT_SIZE; +} + +function throwSizeError(name, value, unitType) { + throw `Invalid Number: '${name}: ${value}' is not a valid number, cannot transform to '${unitType}' \n`; +} + +StyleDictionary.registerTransform({ + name: 'dt/fonts/weight', + type: 'value', + matcher: function(token) { + return WEIGHT_IDENTIFIERS.includes(token.type) + }, + transformer: (token, options) => { + return WEIGHT[token.value] ?? token.value + } +}); + +StyleDictionary.registerTransform({ + name: 'dt/fonts/transformToStack', + type: 'value', + matcher: function(token) { + return FONT_FAMILY_IDENTIFIERS.includes(token.type) + }, + transformer: (token, options) => { + if (token.name === 'body' || token.value === 'expressive') { + return `${token.value}, ${FALLBACK_FONTS}` + } + else if (token.name === 'mono') { + return `${token.value}, ${FALLBACK_FONTS_MONO}` + } + return token.value; + } +}); + +StyleDictionary.registerTransform({ + name: 'dt/size/pxToRem', + type: 'value', + matcher: function(token) { + return SIZE_IDENTIFIERS.includes(token.type) + }, + transformer: (token, options) => { + const baseFont = getBasePxFontSize(options); + const floatVal = parseFloat(token.value); + + if (isNaN(floatVal)) { + throwSizeError(token.name, token.value, 'rem'); + } + + if (floatVal === 0) { + return '0'; + } + + return `${floatVal / baseFont}rem`; + } +}); + +StyleDictionary.buildAllPlatforms(); diff --git a/config.js b/config.js index 4565194..4888ce6 100644 --- a/config.js +++ b/config.js @@ -2,7 +2,7 @@ module.exports = { source: ['tokens/**/*.json'], platforms: { less: { - transformGroup: 'less', + transforms: ['dt/size/pxToRem', 'dt/fonts/transformToStack', 'dt/fonts/weight', 'attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'color/hex'], prefix: 'dt', buildPath: 'dist/less/', files: [ @@ -13,7 +13,7 @@ module.exports = { ], }, css: { - transformGroup: 'css', + transforms: ['dt/size/pxToRem', 'dt/fonts/transformToStack', 'dt/fonts/weight', 'attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'size/rem', 'color/css'], prefix: 'dt', buildPath: 'dist/css/', files: [ @@ -60,7 +60,7 @@ module.exports = { json: { prefix: 'dt', buildPath: 'dist/', - transforms: ['name/cti/camel'], + transforms: ['dt/size/pxToRem', 'dt/fonts/transformToStack', 'dt/fonts/weight', 'name/cti/camel'], files: [ { destination: 'tokens.json', diff --git a/package.json b/package.json index 4809882..b58fda8 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "build": "npm run transform && style-dictionary build", + "build": "npm run transform && ./build.js", "transform": "token-transformer base.json tokens/tokens.json --expandTypography=true --expandShadow=true", "prepublishOnly": "npm run build", "release": "semantic-release --no-ci --extends ./release-local.config.js" diff --git a/tokens/tokens.json b/tokens/tokens.json index 32c3e01..596e8b0 100644 --- a/tokens/tokens.json +++ b/tokens/tokens.json @@ -1,4 +1,14 @@ { + "tokenSetOrder": { + "0": { + "value": "base", + "type": "other" + }, + "1": { + "value": "button", + "type": "other" + } + }, "button": { "color": { "background": { @@ -7,17 +17,17 @@ "type": "color" }, "primary": { - "value": "#6C3DFF", + "value": "#7C52FF", "type": "color" }, "danger": { - "value": "#D81616", + "value": "#FF2E2E", "type": "color" } }, "text": { "default": { - "value": "#6C3DFF", + "value": "#7C52FF", "type": "color" }, "primary": { @@ -33,49 +43,49 @@ "border": { "radius": { "extraSmall": { - "value": "3px", + "value": "7px", "type": "borderRadius" }, "small": { - "value": "3.5px", + "value": "7.5px", "type": "borderRadius" }, "medium": { - "value": "4px", + "value": "8px", "type": "borderRadius" }, "large": { - "value": "5px", + "value": "9px", "type": "borderRadius" }, "extraLarge": { - "value": "6px", + "value": "10px", "type": "borderRadius" } } }, "space": { "gap": { - "value": "8px", + "value": "16px", "type": "spacing" } }, "padding": { "horizontal": { "extraSmall": { - "value": "7px", + "value": "15px", "type": "spacing" }, "small": { - "value": "7px", + "value": "15px", "type": "spacing" }, "medium": { - "value": "7px", + "value": "15px", "type": "spacing" }, "large": { - "value": "15px", + "value": "63px", "type": "spacing" }, "extraLarge": { @@ -85,23 +95,23 @@ }, "vertical": { "extraSmall": { - "value": "5px", + "value": "13px", "type": "spacing" }, "small": { - "value": "5px", + "value": "13px", "type": "spacing" }, "medium": { - "value": "7px", + "value": "15px", "type": "spacing" }, "large": { - "value": "11px", + "value": "31px", "type": "spacing" }, "extraLarge": { - "value": "11px", + "value": "31px", "type": "spacing" } } @@ -113,19 +123,19 @@ "type": "fontSizes" }, "small": { - "value": "14px", + "value": "12px", "type": "fontSizes" }, "medium": { - "value": "16px", + "value": "15px", "type": "fontSizes" }, "large": { - "value": "20px", + "value": "19px", "type": "fontSizes" }, "extraLarge": { - "value": "24px", + "value": "27px", "type": "fontSizes" } } @@ -133,23 +143,23 @@ "lineHeight": { "size": { "extraSmall": { - "value": "16px", + "value": "140%", "type": "lineHeights" }, "small": { - "value": "20px", + "value": "140%", "type": "lineHeights" }, "medium": { - "value": "20px", + "value": "140%", "type": "lineHeights" }, "large": { - "value": "24px", + "value": "140%", "type": "lineHeights" }, "extraLarge": { - "value": "32px", + "value": "140%", "type": "lineHeights" } } @@ -157,292 +167,268 @@ }, "color": { "surface": { - "default": { + "primary": { "value": "#fff", "type": "color" }, - "foo": { + "secondary": { "value": "#F9F9F9", "type": "color" }, - "bar": { + "moderate": { "value": "#EDEDED", "type": "color" }, - "baz": { + "bold": { "value": "#BBBBBB", "type": "color" }, - "zar": { + "strong": { "value": "#555555", "type": "color" + }, + "contrast": { + "value": "#222222", + "type": "color" } }, "text": { "dark": { - "value": "#0D0C0F", + "value": "#000000", "type": "color" }, "medium": { - "value": "#221F24", + "value": "#222222", "type": "color" }, "light": { - "value": "#322D37", + "value": "#555555", "type": "color" }, "lighter": { - "value": "#444150", - "type": "color" - }, - "primary": { - "value": "#6C3DFF", + "value": "#808080", "type": "color" }, "success": { - "value": "#0A5B03", + "value": "#1AA340", "type": "color" }, "error": { - "value": "#930000", + "value": "#A41111", "type": "color" }, "danger": { - "value": "#930000", + "value": "#A41111", "type": "color" }, "muted": { - "value": "#0D0C0F", + "value": "#808080", "type": "color" } }, "black": { "100": { - "value": "#CDCDD8", + "value": "#F9F9F9", "type": "color" }, "200": { - "value": "#B3B0C0", + "value": "#E9E9E9", "type": "color" }, "300": { - "value": "#9C99AC", + "value": "#D2D2D2", "type": "color" }, "400": { - "value": "#7B7789", + "value": "#AAAAAA", "type": "color" }, "500": { - "value": "#575564", + "value": "#808080", "type": "color" }, "600": { - "value": "#444150", + "value": "#555555", "type": "color" }, "700": { - "value": "#322D37", + "value": "#3A3A3A", "type": "color" }, "800": { - "value": "#221F24", + "value": "#222222", "type": "color" }, "900": { - "value": "#0D0C0F", - "type": "color" - }, - "025": { - "value": "#F2F2F6", - "type": "color" - }, - "050": { - "value": "#EAE9EF", - "type": "color" - }, - "075": { - "value": "#DFDEE5", + "value": "#000000", "type": "color" } }, "purple": { "100": { - "value": "#ECE1FF", + "value": "#EEE5FF", "type": "color" }, "200": { - "value": "#D1C0FF", + "value": "#D3BCFF", "type": "color" }, "300": { - "value": "#A687FF", + "value": "#AB7EFF", "type": "color" }, "400": { - "value": "#8B65FF", + "value": "#7C52FF", "type": "color" }, "500": { - "value": "#6C3DFF", + "value": "#3A1D95", "type": "color" }, "600": { - "value": "#3A1C95", - "type": "color" - }, - "700": { - "value": "#2A1173", - "type": "color" - }, - "800": { - "value": "#160645", + "value": "#10022C", "type": "color" } }, - "orange": { + "blue": { "100": { - "value": "#FFF0E5", + "value": "#E3EDF9", "type": "color" }, "200": { - "value": "#FFCCA7", + "value": "#84BDFF", "type": "color" }, "300": { - "value": "#FFA360", + "value": "#51A0FE", "type": "color" }, "400": { - "value": "#FF7F23", + "value": "#1768C6", "type": "color" }, "500": { - "value": "#E05E00", - "type": "color" - }, - "600": { - "value": "#43220A", + "value": "#01326D", "type": "color" } }, - "pink": { + "magenta": { "100": { - "value": "#FFEBEC", - "type": "color" + "value": "#FF97D2", + "type": "color", + "description": "aka pink" }, "200": { - "value": "#FFD8DA", - "type": "color" + "value": "#F756B1", + "type": "color", + "description": "aka pink" }, "300": { - "value": "#FDA2A8", - "type": "color" + "value": "#F9008E", + "type": "color", + "description": "aka pink" }, "400": { - "value": "#FF578A", - "type": "color" + "value": "#8C0E56", + "type": "color", + "description": "aka pink" }, "500": { - "value": "#E92A7A", - "type": "color" + "value": "#541A3B", + "type": "color", + "description": "aka pink" + } + }, + "gold": { + "100": { + "value": "#FFE793", + "type": "color", + "description": "aka yellow" }, - "600": { - "value": "#A2114D", - "type": "color" + "200": { + "value": "#FFD362", + "type": "color", + "description": "aka yellow" }, - "700": { - "value": "#57102E", - "type": "color" + "300": { + "value": "#F6AB3C", + "type": "color", + "description": "aka yellow" + }, + "400": { + "value": "#D28F2B", + "type": "color", + "description": "aka yellow" + }, + "500": { + "value": "#815008", + "type": "color", + "description": "aka yellow" } }, - "yellow": { + "green": { "100": { - "value": "#FFF9E3", + "value": "#DDF4D9", "type": "color" }, "200": { - "value": "#FFEEB0", + "value": "#9FFF90", "type": "color" }, "300": { - "value": "#FFDB59", + "value": "#45F777", "type": "color" }, "400": { - "value": "#FFCE1C", + "value": "#1AA340", "type": "color" }, "500": { - "value": "#FFBC0F", - "type": "color" - }, - "600": { - "value": "#3F2D00", - "type": "color" - }, - "050": { - "value": "#FBF8F1", + "value": "#124620", "type": "color" } }, - "green": { + "red": { "100": { - "value": "#EBFFE2", + "value": "#FFDCDC", "type": "color" }, "200": { - "value": "#D1FFBC", + "value": "#FF7474", "type": "color" }, "300": { - "value": "#9CFF6D", + "value": "#FF2E2E", "type": "color" }, "400": { - "value": "#6BEE04", + "value": "#A41111", "type": "color" }, "500": { - "value": "#0C9B02", - "type": "color" - }, - "600": { - "value": "#0A5B03", - "type": "color" - }, - "700": { - "value": "#052F01", + "value": "#540000", "type": "color" } }, - "red": { + "tan": { "100": { - "value": "#FFF1F1", + "value": "#F2F0EE", "type": "color" }, "200": { - "value": "#FFD3D3", + "value": "#CEC8C4", "type": "color" }, "300": { - "value": "#FFA7A7", + "value": "#87807B", "type": "color" }, "400": { - "value": "#FA4646", + "value": "#3F3D3C", "type": "color" }, "500": { - "value": "#D81616", - "type": "color" - }, - "600": { - "value": "#930000", - "type": "color" - }, - "700": { - "value": "#480000", + "value": "#121212", "type": "color" } }, @@ -517,11 +503,11 @@ }, "font": { "family": { - "default": { - "value": "Inter", + "body": { + "value": "SF Pro", "type": "fontFamilies" }, - "marketing": { + "expressive": { "value": "Archivo", "type": "fontFamilies" }, @@ -532,109 +518,78 @@ }, "size": { "100": { - "value": "10px", - "type": "fontSizes" + "value": "12px", + "type": "fontSizes", + "description": "small" }, "200": { - "value": "11px", - "type": "fontSizes" + "value": "15px", + "type": "fontSizes", + "description": "medium / base" }, "300": { - "value": "12px", - "type": "fontSizes" + "value": "19px", + "type": "fontSizes", + "description": "large" }, "400": { - "value": "14px", - "type": "fontSizes" + "value": "27px", + "type": "fontSizes", + "description": "extra large / xl" }, "500": { - "value": "16px", - "type": "fontSizes" - }, - "600": { - "value": "18px", - "type": "fontSizes" - }, - "700": { - "value": "20px", - "type": "fontSizes" - }, - "800": { - "value": "24px", - "type": "fontSizes" - }, - "900": { - "value": "28px", - "type": "fontSizes" - }, - "1000": { - "value": "32px", - "type": "fontSizes" - }, - "1100": { - "value": "36px", - "type": "fontSizes" - }, - "1200": { - "value": "42px", - "type": "fontSizes" - }, - "1300": { - "value": "48px", - "type": "fontSizes" - }, - "1400": { - "value": "54px", - "type": "fontSizes" + "value": "53px", + "type": "fontSizes", + "description": "extra large / xxl" } }, "lineHeight": { "100": { - "value": "12px", + "value": "140%", "type": "lineHeights" }, "200": { - "value": "16px", + "value": "140%", "type": "lineHeights" }, "300": { - "value": "20px", + "value": "140%", "type": "lineHeights" }, "400": { - "value": "24px", + "value": "140%", "type": "lineHeights" }, "500": { - "value": "28px", + "value": "140%", "type": "lineHeights" }, - "600": { - "value": "32px", + "base": { + "value": "140%", "type": "lineHeights" }, - "700": { - "value": "36px", + "_100": { + "value": "100%", "type": "lineHeights" }, - "800": { - "value": "40px", + "_200": { + "value": "120%", "type": "lineHeights" }, - "900": { - "value": "48px", + "_300": { + "value": "140%", "type": "lineHeights" }, - "1000": { - "value": "52px", - "type": "lineHeights" - }, - "1100": { - "value": "58px", + "_400": { + "value": "160%", "type": "lineHeights" } }, "weight": { + "light": { + "value": "Light", + "type": "fontWeights" + }, "normal": { "value": "Regular", "type": "fontWeights" @@ -644,12 +599,16 @@ "type": "fontWeights" }, "semiBold": { - "value": "Semi Bold", + "value": "Semibold", "type": "fontWeights" }, "bold": { "value": "Bold", "type": "fontWeights" + }, + "condensedMedium": { + "value": "Condensed Medium", + "type": "fontWeights" } } }, @@ -657,7 +616,7 @@ "body": { "100": { "fontFamily": { - "value": "Inter", + "value": "SF Pro", "type": "fontFamily" }, "fontWeight": { @@ -665,17 +624,17 @@ "type": "fontWeight" }, "lineHeight": { - "value": "12px", + "value": "140%", "type": "lineHeight" }, "fontSize": { - "value": "10px", + "value": "12px", "type": "fontSize" } }, "200": { "fontFamily": { - "value": "Inter", + "value": "SF Pro", "type": "fontFamily" }, "fontWeight": { @@ -683,17 +642,17 @@ "type": "fontWeight" }, "lineHeight": { - "value": "16px", + "value": "140%", "type": "lineHeight" }, "fontSize": { - "value": "11px", + "value": "15px", "type": "fontSize" } }, "300": { "fontFamily": { - "value": "Inter", + "value": "SF Pro", "type": "fontFamily" }, "fontWeight": { @@ -701,17 +660,17 @@ "type": "fontWeight" }, "lineHeight": { - "value": "16px", + "value": "140%", "type": "lineHeight" }, "fontSize": { - "value": "12px", + "value": "19px", "type": "fontSize" } }, "400": { "fontFamily": { - "value": "Inter", + "value": "SF Pro", "type": "fontFamily" }, "fontWeight": { @@ -719,17 +678,17 @@ "type": "fontWeight" }, "lineHeight": { - "value": "20px", + "value": "140%", "type": "lineHeight" }, "fontSize": { - "value": "14px", + "value": "27px", "type": "fontSize" } }, "500": { "fontFamily": { - "value": "Inter", + "value": "SF Pro", "type": "fontFamily" }, "fontWeight": { @@ -737,173 +696,11 @@ "type": "fontWeight" }, "lineHeight": { - "value": "20px", + "value": "140%", "type": "lineHeight" }, "fontSize": { - "value": "16px", - "type": "fontSize" - } - }, - "600": { - "fontFamily": { - "value": "Inter", - "type": "fontFamily" - }, - "fontWeight": { - "value": "Regular", - "type": "fontWeight" - }, - "lineHeight": { - "value": "24px", - "type": "lineHeight" - }, - "fontSize": { - "value": "18px", - "type": "fontSize" - } - }, - "700": { - "fontFamily": { - "value": "Inter", - "type": "fontFamily" - }, - "fontWeight": { - "value": "Regular", - "type": "fontWeight" - }, - "lineHeight": { - "value": "24px", - "type": "lineHeight" - }, - "fontSize": { - "value": "20px", - "type": "fontSize" - } - }, - "800": { - "fontFamily": { - "value": "Inter", - "type": "fontFamily" - }, - "fontWeight": { - "value": "Regular", - "type": "fontWeight" - }, - "lineHeight": { - "value": "28px", - "type": "lineHeight" - }, - "fontSize": { - "value": "24px", - "type": "fontSize" - } - }, - "900": { - "fontFamily": { - "value": "Inter", - "type": "fontFamily" - }, - "fontWeight": { - "value": "Regular", - "type": "fontWeight" - }, - "lineHeight": { - "value": "32px", - "type": "lineHeight" - }, - "fontSize": { - "value": "28px", - "type": "fontSize" - } - }, - "1000": { - "fontFamily": { - "value": "Inter", - "type": "fontFamily" - }, - "fontWeight": { - "value": "Regular", - "type": "fontWeight" - }, - "lineHeight": { - "value": "36px", - "type": "lineHeight" - }, - "fontSize": { - "value": "32px", - "type": "fontSize" - } - }, - "1100": { - "fontFamily": { - "value": "Inter", - "type": "fontFamily" - }, - "fontWeight": { - "value": "Regular", - "type": "fontWeight" - }, - "lineHeight": { - "value": "40px", - "type": "lineHeight" - }, - "fontSize": { - "value": "36px", - "type": "fontSize" - } - }, - "1200": { - "fontFamily": { - "value": "Inter", - "type": "fontFamily" - }, - "fontWeight": { - "value": "Regular", - "type": "fontWeight" - }, - "lineHeight": { - "value": "48px", - "type": "lineHeight" - }, - "fontSize": { - "value": "42px", - "type": "fontSize" - } - }, - "1300": { - "fontFamily": { - "value": "Inter", - "type": "fontFamily" - }, - "fontWeight": { - "value": "Regular", - "type": "fontWeight" - }, - "lineHeight": { - "value": "52px", - "type": "lineHeight" - }, - "fontSize": { - "value": "48px", - "type": "fontSize" - } - }, - "1400": { - "fontFamily": { - "value": "Inter", - "type": "fontFamily" - }, - "fontWeight": { - "value": "Regular", - "type": "fontWeight" - }, - "lineHeight": { - "value": "58px", - "type": "lineHeight" - }, - "fontSize": { - "value": "54px", + "value": "53px", "type": "fontSize" } } @@ -911,145 +708,55 @@ "headline": { "100": { "fontFamily": { - "value": "Inter", + "value": "SF Pro", "type": "fontFamily" }, "fontWeight": { - "value": "Bold", + "value": "Condensed Medium", "type": "fontWeight" }, "lineHeight": { - "value": "12px", + "value": "140%", "type": "lineHeight" }, "fontSize": { - "value": "10px", + "value": "19px", "type": "fontSize" } }, "200": { "fontFamily": { - "value": "Inter", + "value": "SF Pro", "type": "fontFamily" }, "fontWeight": { - "value": "Bold", + "value": "Condensed Medium", "type": "fontWeight" }, "lineHeight": { - "value": "28px", + "value": "140%", "type": "lineHeight" }, "fontSize": { - "value": "24px", + "value": "27px", "type": "fontSize" } }, "300": { "fontFamily": { - "value": "Inter", + "value": "SF Pro", "type": "fontFamily" }, "fontWeight": { - "value": "Bold", + "value": "Condensed Medium", "type": "fontWeight" }, "lineHeight": { - "value": "32px", + "value": "140%", "type": "lineHeight" }, "fontSize": { - "value": "28px", - "type": "fontSize" - } - }, - "400": { - "fontFamily": { - "value": "Inter", - "type": "fontFamily" - }, - "fontWeight": { - "value": "Bold", - "type": "fontWeight" - }, - "lineHeight": { - "value": "36px", - "type": "lineHeight" - }, - "fontSize": { - "value": "32px", - "type": "fontSize" - } - }, - "500": { - "fontFamily": { - "value": "Inter", - "type": "fontFamily" - }, - "fontWeight": { - "value": "Bold", - "type": "fontWeight" - }, - "lineHeight": { - "value": "32px", - "type": "lineHeight" - }, - "fontSize": { - "value": "36px", - "type": "fontSize" - } - }, - "600": { - "fontFamily": { - "value": "Inter", - "type": "fontFamily" - }, - "fontWeight": { - "value": "Bold", - "type": "fontWeight" - }, - "lineHeight": { - "value": "36px", - "type": "lineHeight" - }, - "fontSize": { - "value": "42px", - "type": "fontSize" - } - }, - "700": { - "fontFamily": { - "value": "Inter", - "type": "fontFamily" - }, - "fontWeight": { - "value": "Bold", - "type": "fontWeight" - }, - "lineHeight": { - "value": "52px", - "type": "lineHeight" - }, - "fontSize": { - "value": "48px", - "type": "fontSize" - } - }, - "800": { - "fontFamily": { - "value": "Inter", - "type": "fontFamily" - }, - "fontWeight": { - "value": "Bold", - "type": "fontWeight" - }, - "lineHeight": { - "value": "58px", - "type": "lineHeight" - }, - "fontSize": { - "value": "54px", + "value": "53px", "type": "fontSize" } } @@ -1073,63 +780,27 @@ "type": "sizing" }, "400": { - "value": "6px", - "type": "sizing" - }, - "500": { "value": "8px", "type": "sizing" }, - "600": { - "value": "12px", - "type": "sizing" - }, - "700": { + "500": { "value": "16px", "type": "sizing" }, - "800": { - "value": "24px", - "type": "sizing" - }, - "900": { + "600": { "value": "32px", "type": "sizing" }, - "1000": { - "value": "48px", - "type": "sizing" - }, - "1100": { + "700": { "value": "64px", "type": "sizing" }, - "1200": { - "value": "72px", - "type": "sizing" - }, - "1300": { - "value": "84px", - "type": "sizing" - }, - "1400": { - "value": "96px", - "type": "sizing" - }, - "1500": { - "value": "102px", - "type": "sizing" - }, - "1600": { - "value": "114px", - "type": "sizing" - }, - "1700": { + "800": { "value": "128px", "type": "sizing" }, "base": { - "value": "4px", + "value": "8px", "type": "sizing" }, "border": { @@ -1154,7 +825,11 @@ "type": "borderWidth" }, "500": { - "value": "12px", + "value": "16px", + "type": "borderWidth" + }, + "600": { + "value": "32px", "type": "borderWidth" } }, @@ -1180,11 +855,7 @@ "type": "borderRadius" }, "500": { - "value": "12px", - "type": "borderRadius" - }, - "600": { - "value": "24px", + "value": "32px", "type": "borderRadius" } }, @@ -1220,10 +891,6 @@ "800": { "value": "64px", "type": "sizing" - }, - "000": { - "value": "12px", - "type": "sizing" } } }, @@ -1245,63 +912,27 @@ "type": "spacing" }, "400": { - "value": "6px", - "type": "spacing" - }, - "500": { "value": "8px", "type": "spacing" }, - "600": { - "value": "12px", - "type": "spacing" - }, - "700": { + "500": { "value": "16px", "type": "spacing" }, - "800": { - "value": "24px", - "type": "spacing" - }, - "900": { + "600": { "value": "32px", "type": "spacing" }, - "1000": { - "value": "48px", - "type": "spacing" - }, - "1100": { + "700": { "value": "64px", "type": "spacing" }, - "1200": { - "value": "72px", - "type": "spacing" - }, - "1300": { - "value": "84px", - "type": "spacing" - }, - "1400": { - "value": "96px", - "type": "spacing" - }, - "1500": { - "value": "102px", - "type": "spacing" - }, - "1600": { - "value": "114px", - "type": "spacing" - }, - "1700": { + "800": { "value": "128px", "type": "spacing" }, "base": { - "value": "4px", + "value": "8px", "type": "spacing" } }, @@ -1325,7 +956,7 @@ "type": "spread" }, "color": { - "value": "#0d0c0f26", + "value": "#00000026", "type": "color" }, "type": { @@ -1353,7 +984,7 @@ "type": "spread" }, "color": { - "value": "#0d0c0f40", + "value": "#00000040", "type": "color" }, "type": { @@ -1373,7 +1004,7 @@ "type": "y" }, "blur": { - "value": "12px", + "value": "16px", "type": "blur" }, "spread": { @@ -1381,7 +1012,7 @@ "type": "spread" }, "color": { - "value": "#0d0c0f4d", + "value": "#0000004d", "type": "color" }, "type": { @@ -1401,7 +1032,7 @@ "type": "y" }, "blur": { - "value": "16px", + "value": "32px", "type": "blur" }, "spread": { @@ -1409,7 +1040,7 @@ "type": "spread" }, "color": { - "value": "#0d0c0f4d", + "value": "#0000004d", "type": "color" }, "type": { @@ -1437,7 +1068,7 @@ "type": "spread" }, "color": { - "value": "#0d0c0f08", + "value": "#00000008", "type": "color" }, "type": { @@ -1463,7 +1094,7 @@ "type": "spread" }, "color": { - "value": "#0d0c0f0a", + "value": "#0000000a", "type": "color" }, "type": { @@ -1489,7 +1120,7 @@ "type": "spread" }, "color": { - "value": "#0d0c0f14", + "value": "#00000014", "type": "color" }, "type": {