From 30a07e3fb790a2502a7045b7f1d64322c88582ea Mon Sep 17 00:00:00 2001 From: MIGUELez11 Date: Thu, 19 Oct 2023 12:23:37 +0200 Subject: [PATCH] feat: Add merger for old and new figma tokens so no missing tokens are being used --- old_tokens.json | 5480 +++++++++++++++++ packages/components/package.json | 3 +- packages/components/scripts/compile-tokens.sh | 6 +- packages/components/scripts/merge-tokens.js | 13 + 4 files changed, 5500 insertions(+), 2 deletions(-) create mode 100644 old_tokens.json create mode 100644 packages/components/scripts/merge-tokens.js diff --git a/old_tokens.json b/old_tokens.json new file mode 100644 index 000000000..37b2a456a --- /dev/null +++ b/old_tokens.json @@ -0,0 +1,5480 @@ +{ + "core": { + "core": { + "color": { + "black": { + "value": "#1a202b", + "type": "color" + }, + "white": { + "value": "#ffffff", + "type": "color" + }, + "neutral": { + "50": { + "value": "hsla({core.color.customPrimary.hue},50%,98%,1)", + "type": "color" + }, + "75": { + "value": "hsla({core.color.customPrimary.hue},45%,96%,1)", + "type": "color" + }, + "100": { + "value": "hsla({core.color.customPrimary.hue},40%,94%,1)", + "type": "color" + }, + "200": { + "value": "hsla({core.color.customPrimary.hue},36%,89%,1)", + "type": "color" + }, + "300": { + "value": "hsla({core.color.customPrimary.hue},20%,80%,1)", + "type": "color" + }, + "400": { + "value": "hsla({core.color.customPrimary.hue},12%,68%,1)", + "type": "color" + }, + "500": { + "value": "hsla({core.color.customPrimary.hue},10%,54%,1)", + "type": "color" + }, + "600": { + "value": "hsla({core.color.customPrimary.hue},10%,44%,1)", + "type": "color" + }, + "700": { + "value": "hsla({core.color.customPrimary.hue},16%,34%,1)", + "type": "color" + }, + "800": { + "value": "hsla({core.color.customPrimary.hue},20%,20%,1)", + "type": "color" + }, + "900": { + "value": "hsla({core.color.customPrimary.hue},20%,12%,1)", + "type": "color" + } + }, + "primary": { + "100": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.up.4}%,1)", + "type": "color" + }, + "200": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.up.3}%,1)", + "type": "color" + }, + "300": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.up.2}%,1)", + "type": "color" + }, + "400": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.up.1}%,1)", + "type": "color" + }, + "500": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{core.color.customPrimary.lightness}%,1)", + "type": "color" + }, + "600": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.down.1}%,1)", + "type": "color" + }, + "700": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.down.2}%,1)", + "type": "color" + }, + "800": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.down.3}%,1)", + "type": "color" + }, + "900": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.down.4}%,1)", + "type": "color" + } + }, + "accent": { + "100": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{util.color.accent.lightness.up.4}%,1)", + "type": "color" + }, + "200": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{util.color.accent.lightness.up.3}%,1)", + "type": "color" + }, + "300": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{util.color.accent.lightness.up.2}%,1)", + "type": "color" + }, + "400": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{util.color.accent.lightness.up.1}%,1)", + "type": "color" + }, + "500": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{core.color.customAccent.lightness}%,1)", + "type": "color" + }, + "600": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{util.color.accent.lightness.down.1}%,1)", + "type": "color" + }, + "700": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{util.color.accent.lightness.down.2}%,1)", + "type": "color" + }, + "800": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{util.color.accent.lightness.down.3}%,1)", + "type": "color" + }, + "900": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{util.color.accent.lightness.down.4}%,1)", + "type": "color" + } + }, + "danger": { + "100": { + "value": "#f7dede", + "type": "color" + }, + "200": { + "value": "#f0bebe", + "type": "color" + }, + "300": { + "value": "#e07c7c", + "type": "color" + }, + "400": { + "value": "#d95c5c", + "type": "color" + }, + "500": { + "value": "#d13b3b", + "type": "color" + }, + "600": { + "value": "#b52a2a", + "type": "color" + }, + "700": { + "value": "#912222", + "type": "color" + }, + "800": { + "value": "#6d1919", + "type": "color" + }, + "900": { + "value": "#481111", + "type": "color" + } + }, + "success": { + "100": { + "value": "#e4f4e6", + "type": "color" + }, + "200": { + "value": "#c9e9cd", + "type": "color" + }, + "300": { + "value": "#aedeb5", + "type": "color" + }, + "400": { + "value": "#77c783", + "type": "color" + }, + "500": { + "value": "#5cbc6a", + "type": "color" + }, + "600": { + "value": "#44a552", + "type": "color" + }, + "700": { + "value": "#368442", + "type": "color" + }, + "800": { + "value": "#296331", + "type": "color" + }, + "900": { + "value": "#1b4221", + "type": "color" + } + }, + "attention": { + "100": { + "value": "#fef3e1", + "type": "color" + }, + "200": { + "value": "#fbdaa6", + "type": "color" + }, + "300": { + "value": "#f8c16b", + "type": "color" + }, + "400": { + "value": "#f6b54d", + "type": "color" + }, + "500": { + "value": "#f39c12", + "type": "color" + }, + "600": { + "value": "#d98a0b", + "type": "color" + }, + "700": { + "value": "#ba7609", + "type": "color" + }, + "800": { + "value": "#9b6208", + "type": "color" + }, + "900": { + "value": "#7c4f06", + "type": "color" + } + }, + "customPrimary": { + "hue": { + "value": "216", + "type": "color" + }, + "saturation": { + "value": "80", + "type": "color" + }, + "lightness": { + "value": "55", + "type": "color" + }, + "hsla": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{core.color.customPrimary.lightness}%,1)", + "type": "color" + } + }, + "customAccent": { + "hue": { + "value": "60", + "type": "color" + }, + "saturation": { + "value": "100", + "type": "color" + }, + "lightness": { + "value": "78", + "type": "color" + }, + "hsla": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{core.color.customAccent.lightness}%,1)", + "type": "color" + } + } + }, + "dimension": { + "0": { + "value": "0*{core.dimension.root}", + "type": "sizing" + }, + "50": { + "value": "0.25*{core.dimension.root}", + "type": "sizing" + }, + "100": { + "value": "0.5*{core.dimension.root}", + "type": "sizing" + }, + "150": { + "value": "0.75*{core.dimension.root}", + "type": "sizing" + }, + "200": { + "value": "1*{core.dimension.root}", + "type": "sizing" + }, + "250": { + "value": "1.25*{core.dimension.root}", + "type": "sizing" + }, + "300": { + "value": "1.5*{core.dimension.root}", + "type": "sizing" + }, + "350": { + "value": "1.75*{core.dimension.root}", + "type": "sizing" + }, + "400": { + "value": "2*{core.dimension.root}", + "type": "sizing" + }, + "500": { + "value": "2.5*{core.dimension.root}", + "type": "sizing" + }, + "600": { + "value": "3*{core.dimension.root}", + "type": "sizing" + }, + "700": { + "value": "3.5*{core.dimension.root}", + "type": "sizing" + }, + "800": { + "value": "4*{core.dimension.root}", + "type": "sizing" + }, + "900": { + "value": "4.5*{core.dimension.root}", + "type": "sizing" + }, + "1000": { + "value": "5*{core.dimension.root}", + "type": "sizing" + }, + "static": { + "0": { + "value": "0", + "type": "sizing" + }, + "10": { + "value": "1", + "type": "sizing" + }, + "25": { + "value": "2", + "type": "sizing" + }, + "50": { + "value": "4", + "type": "sizing" + }, + "100": { + "value": "8", + "type": "sizing" + }, + "150": { + "value": "12", + "type": "sizing" + }, + "200": { + "value": "16", + "type": "sizing" + }, + "250": { + "value": "20", + "type": "sizing" + }, + "300": { + "value": "24", + "type": "sizing" + }, + "350": { + "value": "28", + "type": "sizing" + }, + "400": { + "value": "32", + "type": "sizing" + }, + "450": { + "value": "36", + "type": "sizing" + }, + "500": { + "value": "40", + "type": "sizing" + }, + "550": { + "value": "44", + "type": "sizing" + }, + "600": { + "value": "48", + "type": "sizing" + }, + "700": { + "value": "56", + "type": "sizing" + }, + "800": { + "value": "64", + "type": "sizing" + }, + "900": { + "value": "72", + "type": "sizing" + }, + "1000": { + "value": "80", + "type": "sizing" + } + }, + "root": { + "value": "16", + "type": "sizing" + }, + "percentage": { + "50": { + "value": "50%", + "type": "sizing" + }, + "100": { + "value": "100%", + "type": "sizing" + } + }, + "breakpoint": { + "xsm": { + "value": "320px", + "type": "sizing" + }, + "sm": { + "value": "640px", + "type": "sizing" + }, + "md": { + "value": "1007px", + "type": "sizing" + }, + "lg": { + "value": "1440px", + "type": "sizing" + } + } + }, + "font": { + "family": { + "main": { + "value": "Lexend", + "type": "fontFamilies" + }, + "alt": { + "value": "Inter", + "type": "fontFamilies" + }, + "code": { + "value": "Courier new", + "type": "fontFamilies" + } + }, + "weight": { + "light": { + "value": "300", + "type": "fontWeights" + }, + "regular": { + "value": "400", + "type": "fontWeights" + }, + "medium": { + "value": "500", + "type": "fontWeights" + }, + "bold": { + "value": "600", + "type": "fontWeights" + } + }, + "lineHeight": { + "100": { + "value": "{core.dimension.200}", + "type": "lineHeights" + }, + "200": { + "value": "{core.dimension.250}", + "type": "lineHeights" + }, + "300": { + "value": "{core.dimension.300}", + "type": "lineHeights" + }, + "400": { + "value": "{core.dimension.350}", + "type": "lineHeights" + }, + "500": { + "value": "{core.dimension.400}", + "type": "lineHeights" + }, + "600": { + "value": "{core.dimension.500}", + "type": "lineHeights" + }, + "700": { + "value": "{core.dimension.600}", + "type": "lineHeights" + } + }, + "size": { + "50": { + "value": "roundTo({core.font.size.75} / {util.font.scale}, 0)", + "type": "fontSizes" + }, + "75": { + "value": "roundTo({util.font.base} / {util.font.scale}, 0)", + "type": "fontSizes" + }, + "100": { + "value": "{util.font.base}", + "type": "fontSizes" + }, + "200": { + "value": "roundTo({util.font.base} * {util.font.scale}, 0)", + "type": "fontSizes" + }, + "300": { + "value": "roundTo({core.font.size.200} * {util.font.scale}, 0)", + "type": "fontSizes" + }, + "400": { + "value": "roundTo({core.font.size.300} * {util.font.scale}, 0)", + "type": "fontSizes" + }, + "500": { + "value": "roundTo({core.font.size.400} * {util.font.scale}, 0)", + "type": "fontSizes" + }, + "600": { + "value": "roundTo({core.font.size.500} * {util.font.scale}, 0)", + "type": "fontSizes" + } + } + } + }, + "util": { + "color": { + "primary": { + "lightness": { + "scale": { + "value": "1.15", + "type": "other" + }, + "up": { + "1": { + "value": "roundTo({core.color.customPrimary.lightness} * {util.color.primary.lightness.scale})", + "type": "other" + }, + "2": { + "value": "roundTo({util.color.primary.lightness.up.1} * {util.color.primary.lightness.scale})", + "type": "other" + }, + "3": { + "value": "roundTo({util.color.primary.lightness.up.2} * {util.color.primary.lightness.scale})", + "type": "other" + }, + "4": { + "value": "roundTo({util.color.primary.lightness.up.3} * {util.color.primary.lightness.scale})", + "type": "other" + } + }, + "down": { + "1": { + "value": "roundTo({core.color.customPrimary.lightness} / {util.color.primary.lightness.scale})", + "type": "other" + }, + "2": { + "value": "roundTo({util.color.primary.lightness.down.1} / {util.color.primary.lightness.scale})", + "type": "other" + }, + "3": { + "value": "roundTo({util.color.primary.lightness.down.2} / {util.color.primary.lightness.scale})", + "type": "other" + }, + "4": { + "value": "roundTo({util.color.primary.lightness.down.3} / {util.color.primary.lightness.scale})", + "type": "other" + } + } + } + }, + "accent": { + "lightness": { + "scale": { + "value": "8", + "type": "other" + }, + "up": { + "1": { + "value": "{core.color.customAccent.lightness} + {util.color.accent.lightness.scale}", + "type": "other" + }, + "2": { + "value": "{util.color.accent.lightness.up.1} + {util.color.accent.lightness.scale}", + "type": "other" + }, + "3": { + "value": "{util.color.accent.lightness.up.2} + {util.color.accent.lightness.scale}", + "type": "other" + }, + "4": { + "value": "{util.color.accent.lightness.up.3} + {util.color.accent.lightness.scale}", + "type": "other" + } + }, + "down": { + "1": { + "value": "{core.color.customAccent.lightness} - {util.color.accent.lightness.scale}", + "type": "other" + }, + "2": { + "value": "{util.color.accent.lightness.down.1} - {util.color.accent.lightness.scale}", + "type": "other" + }, + "3": { + "value": "{util.color.accent.lightness.down.2} - {util.color.accent.lightness.scale}", + "type": "other" + }, + "4": { + "value": "{util.color.accent.lightness.down.3} - {util.color.accent.lightness.scale}", + "type": "other" + } + } + } + }, + "colorDebug": { + "value": "#9747FF", + "type": "color" + }, + "debugColorContainer": { + "value": "#ebdcff", + "type": "color" + } + }, + "font": { + "scale": { + "value": "1.125", + "type": "other" + }, + "base": { + "value": "16", + "type": "other" + } + } + } + }, + "global": { + "global": { + "shadow": { + "100": { + "value": [ + { + "color": "rgba({core.color.neutral.200}, 0.08)", + "type": "dropShadow", + "x": "0", + "y": "2", + "blur": "0", + "spread": "0" + }, + { + "color": "rgba({core.color.black}, 0.08)", + "type": "dropShadow", + "x": "0", + "y": "10", + "blur": "36", + "spread": "0" + } + ], + "type": "boxShadow" + }, + "200": { + "value": [ + { + "color": "rgba({core.color.neutral.200}, 0.16)", + "type": "dropShadow", + "x": "0", + "y": "2", + "blur": "0", + "spread": "0" + }, + { + "color": "rgba({core.color.black}, 0.12)", + "type": "dropShadow", + "x": "0", + "y": "10", + "blur": "36", + "spread": "0" + } + ], + "type": "boxShadow" + }, + "300": { + "value": [ + { + "color": "rgba({core.color.neutral.200}, 0.24)", + "type": "dropShadow", + "x": "0", + "y": "2", + "blur": "0", + "spread": "0" + }, + { + "color": "rgba({core.color.black}, 0.16)", + "type": "dropShadow", + "x": "0", + "y": "10", + "blur": "36", + "spread": "0" + } + ], + "type": "boxShadow" + }, + "400": { + "value": [ + { + "color": "rgba({core.color.neutral.200}, 0.08)", + "type": "dropShadow", + "x": "-100", + "y": "0", + "blur": "60", + "spread": "0" + }, + { + "color": "rgba({core.color.black}, 0.05)", + "type": "dropShadow", + "x": "-32", + "y": "0", + "blur": "32", + "spread": "0" + } + ], + "type": "boxShadow" + } + }, + "focus": { + "default": { + "value": { + "x": "0", + "y": "0", + "blur": "0", + "spread": "3", + "color": "{core.color.primary.300}", + "type": "dropShadow" + }, + "type": "boxShadow" + } + }, + "content": { + "color": { + "text": { + "default": { + "value": "{core.color.neutral.700}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.neutral.800}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.500}", + "type": "color" + }, + "subtle": { + "value": "{core.color.neutral.300}", + "type": "color" + }, + "default--reverse": { + "value": "{core.color.white}", + "type": "color" + } + }, + "icon": { + "default": { + "value": "{core.color.neutral.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.neutral.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.300}", + "type": "color" + }, + "default--reverse": { + "value": "{core.color.white}", + "type": "color" + } + }, + "primary": { + "default": { + "value": "{core.color.primary.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.primary.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.primary.300}", + "type": "color" + }, + "subtle": { + "value": "{core.color.primary.100}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{core.color.neutral.700}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.neutral.800}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.500}", + "type": "color" + }, + "subtle": { + "value": "{core.color.neutral.100}", + "type": "color" + } + }, + "negative": { + "default": { + "value": "{core.color.danger.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.danger.600}", + "type": "color" + }, + "muted": { + "value": "{core.color.danger.300}", + "type": "color" + }, + "subtle": { + "value": "{core.color.danger.100}", + "type": "color" + } + }, + "positive": { + "default": { + "value": "{core.color.success.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.success.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.success.300}", + "type": "color" + }, + "subtle": { + "value": "{core.color.success.100}", + "type": "color" + } + }, + "transparent": { + "value": "transparent", + "type": "color" + }, + "disabled": { + "value": "{core.color.neutral.300}", + "type": "color" + }, + "attention": { + "default": { + "value": "{core.color.attention.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.attention.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.attention.300}", + "type": "color" + }, + "subtle": { + "value": "{core.color.attention.100}", + "type": "color" + } + } + }, + "typo": { + "heading": { + "xlg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.600}px", + "fontSize": "{core.font.size.600}px" + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.500}px", + "fontSize": "{core.font.size.500}px" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.400}px", + "fontSize": "{core.font.size.400}px" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.300}px" + }, + "type": "typography" + }, + "xsm": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.200}px" + }, + "type": "typography" + } + }, + "body": { + "lg": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.200}px" + }, + "type": "typography" + }, + "lg--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.200}px" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + }, + "md--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "sm--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + }, + "caption": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}", + "fontSize": "{core.font.size.50}" + }, + "type": "typography" + } + }, + "typoMobile": { + "heading": { + "xlg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.500}px", + "fontSize": "{core.font.size.500}px" + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.400}px", + "fontSize": "{core.font.size.400}px" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.300}px" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.200}px" + }, + "type": "typography" + }, + "xsm": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + } + }, + "body": { + "lg": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + }, + "lg--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "md--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}px" + }, + "type": "typography" + }, + "sm--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}px" + }, + "type": "typography" + } + }, + "caption": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}", + "fontSize": "{core.font.size.50}" + }, + "type": "typography" + } + } + }, + "background": { + "color": { + "surface": { + "default": { + "value": "{core.color.white}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.neutral.200}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.100}", + "type": "color" + }, + "subtle": { + "value": "{core.color.neutral.50}", + "type": "color" + }, + "default--reverse": { + "value": "{core.color.neutral.700}", + "type": "color" + } + }, + "primary": { + "default": { + "value": "{core.color.primary.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.primary.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.primary.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.primary.100}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{core.color.neutral.700}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.neutral.800}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.500}", + "type": "color" + }, + "subtle": { + "value": "{core.color.neutral.50}", + "type": "color" + } + }, + "accent": { + "default": { + "value": "{core.color.accent.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.accent.900}", + "type": "color" + }, + "subtle": { + "value": "{core.color.accent.300}", + "type": "color" + } + }, + "negative": { + "default": { + "value": "{core.color.danger.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.danger.600}", + "type": "color" + }, + "muted": { + "value": "{core.color.danger.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.danger.100}", + "type": "color" + } + }, + "positive": { + "default": { + "value": "{core.color.success.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.success.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.success.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.success.100}", + "type": "color" + } + }, + "transparent": { + "value": "transparent", + "type": "color" + }, + "disabled": { + "value": "{core.color.neutral.75}", + "type": "color" + }, + "overlay": { + "default": { + "value": "rgb({core.color.neutral.100},0.5)", + "type": "color" + } + }, + "attention": { + "default": { + "value": "{core.color.attention.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.attention.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.attention.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.attention.100}", + "type": "color" + } + } + } + }, + "border": { + "width": { + "sm": { + "value": "{core.dimension.static.10}px", + "type": "borderWidth" + }, + "md": { + "value": "{core.dimension.static.25}px", + "type": "borderWidth" + }, + "lg": { + "value": "{core.dimension.static.50}px", + "type": "borderWidth" + } + }, + "radius": { + "sm": { + "value": "2px", + "type": "borderRadius" + }, + "md": { + "value": "4px", + "type": "borderRadius" + }, + "lg": { + "value": "8px", + "type": "borderRadius" + }, + "rounded": { + "value": "99em", + "type": "borderRadius" + }, + "circle": { + "value": "{core.dimension.percentage.50}", + "type": "borderRadius" + } + }, + "color": { + "line": { + "default": { + "value": "{core.color.neutral.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.neutral.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.300}", + "type": "color" + }, + "subtle": { + "value": "{core.color.neutral.100}", + "type": "color" + }, + "default--reverse": { + "value": "{core.color.white}", + "type": "color" + } + }, + "primary": { + "default": { + "value": "{core.color.primary.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.primary.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.primary.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.primary.100}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{core.color.neutral.700}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.neutral.800}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.500}", + "type": "color" + }, + "subtle": { + "value": "{core.color.neutral.50}", + "type": "color" + } + }, + "negative": { + "default": { + "value": "{core.color.danger.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.danger.600}", + "type": "color" + }, + "muted": { + "value": "{core.color.danger.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.danger.100}", + "type": "color" + } + }, + "positive": { + "default": { + "value": "{core.color.success.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.success.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.success.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.success.100}", + "type": "color" + } + }, + "transparent": { + "value": "transparent", + "type": "color" + }, + "disabled": { + "default": { + "value": "{core.color.neutral.300}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.75}", + "type": "color" + } + }, + "overlay": { + "default": { + "value": "rgb({core.color.neutral.100},0.5)", + "type": "color" + } + }, + "attention": { + "default": { + "value": "{core.color.attention.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.attention.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.attention.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.attention.100}", + "type": "color" + } + } + } + }, + "spacing": { + "padding": { + "3xsm": { + "value": "{core.dimension.static.25}px", + "type": "spacing" + }, + "2xsm": { + "value": "{core.dimension.static.50}px", + "type": "spacing" + }, + "xsm": { + "value": "{core.dimension.static.100}px", + "type": "spacing" + }, + "sm": { + "value": "{core.dimension.static.150}px", + "type": "spacing" + }, + "md": { + "value": "{core.dimension.static.200}px", + "type": "spacing" + }, + "lg": { + "value": "{core.dimension.static.300}px", + "type": "spacing" + }, + "xlg": { + "value": "{core.dimension.static.400}px", + "type": "spacing" + }, + "2xlg": { + "value": "{core.dimension.static.500}px", + "type": "spacing" + }, + "3xlg": { + "value": "{core.dimension.static.600}px", + "type": "spacing" + } + }, + "gap": { + "none": { + "value": "{core.dimension.static.0}px", + "type": "spacing" + }, + "sm": { + "value": "{core.dimension.static.50}px", + "type": "spacing" + }, + "md": { + "value": "{core.dimension.static.100}px", + "type": "spacing" + }, + "lg": { + "value": "{core.dimension.static.200}px", + "type": "spacing" + }, + "xlg": { + "value": "{core.dimension.static.400}px", + "type": "spacing" + } + } + }, + "icon": { + "size": { + "xsm": { + "value": "{core.dimension.100}px", + "type": "sizing" + }, + "sm": { + "value": "{core.dimension.150}px", + "type": "sizing" + }, + "md": { + "value": "{core.dimension.200}px", + "type": "sizing" + }, + "lg": { + "value": "{core.dimension.250}px", + "type": "sizing" + }, + "xlg": { + "value": "{core.dimension.300}px", + "type": "sizing" + }, + "2xlg": { + "value": "{core.dimension.400}px", + "type": "sizing" + } + } + }, + "control": { + "size": { + "100": { + "value": "{core.dimension.static.200}px", + "type": "sizing" + }, + "200": { + "value": "{core.dimension.static.250}px", + "type": "sizing" + }, + "300": { + "value": "{core.dimension.static.300}px", + "type": "sizing" + }, + "400": { + "value": "{core.dimension.static.350}px", + "type": "sizing" + }, + "500": { + "value": "{core.dimension.static.400}px", + "type": "sizing" + }, + "600": { + "value": "{core.dimension.static.450}px", + "type": "sizing" + }, + "700": { + "value": "{core.dimension.static.500}px", + "type": "sizing" + }, + "800": { + "value": "{core.dimension.static.550}px", + "type": "sizing" + }, + "900": { + "value": "{core.dimension.static.600}px", + "type": "sizing" + }, + "1000": { + "value": "{core.dimension.static.700}px", + "type": "sizing" + } + } + } + } + }, + "component": { + "button": { + "content": { + "color": { + "primary": { + "default": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.secondary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.content.color.primary.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.muted}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.muted}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.content.color.negative.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "down": { + "value": "{global.content.color.negative.default}", + "type": "color" + } + } + }, + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + }, + "background": { + "color": { + "primary": { + "default": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.background.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.secondary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.background.color.secondary.default}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "down": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.background.color.negative.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.negative.default}", + "type": "color" + }, + "down": { + "value": "{global.background.color.negative.subtle}", + "type": "color" + } + } + } + }, + "border": { + "color": { + "primary": { + "default": { + "value": "{global.border.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.border.color.primary.emphasis}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.border.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.secondary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.border.color.secondary.emphasis}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.border.color.line.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "down": { + "value": "{global.border.color.line.muted}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.border.color.negative.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.negative.default}", + "type": "color" + }, + "down": { + "value": "{global.border.color.negative.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.border.color.negative.default}", + "type": "color" + } + } + }, + "width": { + "value": "{global.border.width.md}", + "type": "borderWidth" + }, + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "rounded": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + } + }, + "spacing": { + "padding": { + "vertical": { + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + } + }, + "horizontal": { + "md": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + } + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + } + }, + "buttonText": { + "content": { + "color": { + "primary": { + "default": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.default}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.secondary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.secondary.default}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.content.color.primary.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.subtle}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.content.color.negative.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.negative.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.negative.default}", + "type": "color" + } + } + }, + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + }, + "background": { + "color": { + "primary": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.transparent}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.secondary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.transparent}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.transparent}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.negative.muted}", + "type": "color" + }, + "down": { + "value": "{global.background.color.transparent}", + "type": "color" + } + } + } + }, + "border": { + "color": { + "primary": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.secondary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.border.color.secondary.subtle}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.negative.muted}", + "type": "color" + }, + "down": { + "value": "{global.border.color.negative.subtle}", + "type": "color" + } + } + }, + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + }, + "width": { + "value": "{global.border.width.md}", + "type": "borderWidth" + } + }, + "spacing": { + "padding": { + "vertical": { + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + } + }, + "horizontal": { + "md": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + } + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + } + }, + "buttonIcon": { + "content": { + "color": { + "primary": { + "default": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.secondary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.content.color.primary.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.subtle}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.muted}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.content.color.negative.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "down": { + "value": "{global.content.color.negative.default}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.content.color.negative.emphasis}", + "type": "color" + } + } + } + }, + "background": { + "color": { + "primary": { + "default": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down--reverse": { + "value": "{global.background.color.transparent}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.background.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.secondary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.background.color.secondary.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.background.color.secondary.subtle}", + "type": "color" + }, + "down--reverse": { + "value": "{global.background.color.transparent}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "down": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "default-reverse": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover-reverse": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down-reverse": { + "value": "{global.background.color.transparent}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.background.color.negative.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.negative.default}", + "type": "color" + }, + "down": { + "value": "{global.background.color.negative.subtle}", + "type": "color" + }, + "default--reverse": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.background.color.negative.muted}", + "type": "color" + }, + "down--reverse": { + "value": "{global.background.color.transparent}", + "type": "color" + } + } + } + }, + "border": { + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "rounded": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + }, + "width": { + "value": "{global.border.width.md}", + "type": "borderWidth" + }, + "color": { + "primary": { + "default": { + "value": "{global.border.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.border.color.primary.emphasis}", + "type": "color" + }, + "default--reverse": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + }, + "down--reverse": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.border.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.secondary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.border.color.secondary.emphasis}", + "type": "color" + }, + "default-reverse": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover-reverse": { + "value": "{global.border.color.secondary.subtle}", + "type": "color" + }, + "down-reverse": { + "value": "{global.border.color.secondary.subtle}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.border.color.line.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "down": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "default-reverse": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + }, + "down--reverse": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.border.color.negative.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.negative.default}", + "type": "color" + }, + "down": { + "value": "{global.border.color.negative.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.border.color.negative.muted}", + "type": "color" + }, + "down--reverse": { + "value": "{global.border.color.negative.subtle}", + "type": "color" + } + } + } + }, + "spacing": { + "padding": { + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + } + } + } + }, + "buttonAction": { + "content": { + "color": { + "primary": { + "default": { + "value": "{global.content.color.secondary.muted}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.subtle}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "down--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.content.color.secondary.muted}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.negative.default}", + "type": "color" + }, + "down": { + "value": "{global.content.color.negative.default}", + "type": "color" + } + } + }, + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}px" + }, + "type": "typography" + } + }, + "background": { + "color": { + "primary": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.background.color.secondary.default}", + "type": "color" + }, + "down--reverse": { + "value": "{global.background.color.secondary.muted}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.negative.subtle}", + "type": "color" + }, + "down": { + "value": "{global.content.color.negative.subtle}", + "type": "color" + } + } + } + }, + "border": { + "color": { + "primary": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.border.color.secondary.default}", + "type": "color" + }, + "down--reverse": { + "value": "{global.border.color.secondary.muted}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.negative.subtle}", + "type": "color" + }, + "down": { + "value": "{global.border.color.line.muted}", + "type": "color" + } + } + }, + "width": { + "value": "{global.border.width.md}", + "type": "borderWidth" + }, + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "rounded": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + } + }, + "spacing": { + "padding": { + "sm": { + "value": "{global.spacing.padding.3xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + } + }, + "gap": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + } + } + }, + "input": { + "content": { + "color": { + "default": { + "value": "{global.content.color.text.emphasis}", + "type": "color" + }, + "selected": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "placeholder": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "icon": { + "value": "{global.content.color.icon.default}", + "type": "color" + } + }, + "typo": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "subtle": { + "value": "{global.border.color.line.subtle}", + "type": "color" + } + }, + "radius": { + "sm": { + "value": "{global.border.radius.sm}", + "type": "borderRadius" + }, + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + }, + "spacing": { + "padding": { + "vertical": { + "md": { + "value": "7px", + "type": "spacing" + }, + "sm": { + "value": "3px", + "type": "spacing" + } + }, + "horizontal": { + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + } + }, + "all": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + } + }, + "gap": { + "none": { + "value": "{core.dimension.static.0}px", + "type": "spacing" + }, + "sm": { + "value": "{core.dimension.static.50}px", + "type": "spacing" + }, + "md": { + "value": "{core.dimension.static.100}px", + "type": "spacing" + }, + "lg": { + "value": "{core.dimension.static.200}px", + "type": "spacing" + } + } + } + }, + "label": { + "spacing": { + "gap": { + "none": { + "value": "{global.spacing.gap.none}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "subtle": { + "value": "{global.content.color.text.muted}", + "type": "color" + } + }, + "typo": { + "01": { + "value": "{global.content.typo.body.sm--bold}", + "type": "typography" + }, + "02": { + "value": "{global.content.typo.body.sm}", + "type": "typography" + }, + "03": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.light}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + } + } + }, + "helpText": { + "content": { + "color": { + "default": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "emphasis": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "phatic": { + "value": "{global.content.color.negative.default}", + "type": "color" + } + }, + "typo": { + "value": "{global.content.typo.caption}", + "type": "typography" + } + } + }, + "radio": { + "size": { + "sm": { + "value": "10px", + "type": "sizing" + }, + "md": { + "value": "{global.control.size.200}", + "type": "sizing" + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.transparent}", + "type": "color" + }, + "icon": { + "value": "{global.content.color.text.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "selected": { + "value": "{global.content.color.primary.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "selected": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "default--reverse": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "selected--reverse": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.muted}", + "type": "color" + }, + "selected": { + "value": "{global.border.color.primary.default}", + "type": "color" + } + } + }, + "spacing": { + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "paddings": { + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + } + } + } + }, + "checkbox": { + "size": { + "md": { + "value": "{global.control.size.200}", + "type": "sizing" + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.transparent}", + "type": "color" + }, + "selected": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "contrast": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.emphasis}", + "type": "color" + }, + "selected": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.emphasis}", + "type": "color" + }, + "selected": { + "value": "{global.border.color.primary.default}", + "type": "color" + } + }, + "radius": { + "value": "{global.border.radius.sm}", + "type": "borderRadius" + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + }, + "spacing": { + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "paddings": { + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + } + } + } + }, + "toggle": { + "size": { + "inner": { + "value": "{global.control.size.100}", + "type": "sizing" + }, + "width": { + "value": "{global.control.size.500}", + "type": "sizing" + } + }, + "spacing": { + "padding": { + "value": "{global.spacing.padding.3xsm}", + "type": "spacing" + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "selected": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.muted}", + "type": "color" + } + } + }, + "background": { + "color": { + "unselected": { + "default": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.muted}", + "type": "color" + } + }, + "selected": { + "default": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.emphasis}", + "type": "color" + } + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + } + }, + "badge": { + "content": { + "typo": { + "sm": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}px" + }, + "type": "typography" + }, + "sm--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}px" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "md--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + }, + "color": { + "default--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "neutral": { + "default": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + }, + "default--reverse": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + }, + "primary": { + "default": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.background.color.negative.default}", + "type": "color" + }, + "default--warning": { + "value": "{global.background.color.attention.default}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.background.color.secondary.default}", + "type": "color" + } + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + }, + "color": { + "default--reverse": { + "value": "{global.border.color.line.default--reverse}", + "type": "color" + }, + "default": { + "value": "{global.border.color.line.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.default}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + }, + "size": { + "sm": { + "value": "{core.dimension.100}px", + "type": "sizing" + }, + "md": { + "value": "{core.dimension.150}px", + "type": "sizing" + }, + "lg": { + "value": "{core.dimension.200}px", + "type": "sizing" + }, + "xlg": { + "value": "{core.dimension.400}px", + "type": "sizing" + }, + "2xlg": { + "value": "{core.dimension.600}px", + "type": "sizing" + } + }, + "spacing": { + "padding": { + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + } + } + } + }, + "avatar": { + "size": { + "xsm": { + "value": "{global.control.size.100}", + "type": "sizing" + }, + "sm": { + "value": "{global.control.size.300}", + "type": "sizing" + }, + "md": { + "value": "{global.control.size.500}", + "type": "sizing" + }, + "lg": { + "value": "{global.control.size.1000}", + "type": "sizing" + }, + "xlg": { + "value": "120px", + "type": "sizing" + } + }, + "content": { + "typo": { + "sm": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "fontSize": "{core.font.size.50}", + "textCase": "uppercase", + "lineHeight": "{core.font.lineHeight.100}" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "fontSize": "{core.font.size.100}", + "textCase": "uppercase" + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "fontSize": "{core.font.size.400}", + "textCase": "uppercase" + }, + "type": "typography" + }, + "xlg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "fontSize": "56px", + "textCase": "uppercase" + }, + "type": "typography" + } + }, + "color": { + "default": { + "value": "{global.border.color.line.default--reverse}", + "type": "color" + } + } + }, + "background": { + "color": { + "10": { + "value": "#EC62D8", + "type": "color" + }, + "01": { + "value": "#DC5571", + "type": "color" + }, + "02": { + "value": "#F26262", + "type": "color" + }, + "03": { + "value": "#E36B2B", + "type": "color" + }, + "04": { + "value": "#E8C642", + "type": "color" + }, + "05": { + "value": "#96D47F", + "type": "color" + }, + "06": { + "value": "#50B579", + "type": "color" + }, + "07": { + "value": "#4F96FF", + "type": "color" + }, + "08": { + "value": "#7449F4", + "type": "color" + }, + "09": { + "value": "#B462F2", + "type": "color" + } + } + }, + "border": { + "radius": { + "circle": { + "value": "{global.border.radius.circle}", + "type": "borderRadius" + }, + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + } + } + }, + "colorPicker": { + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "border": { + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "rounded": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + }, + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + }, + "spacing": { + "gap": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "padding": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + }, + "size": { + "md": { + "value": "{global.control.size.100}", + "type": "sizing" + } + } + }, + "calendar": { + "content": { + "typo": { + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}px" + }, + "type": "typography" + } + }, + "color": { + "calendarButton": { + "default": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "weekName": { + "default": { + "value": "{global.content.color.text.subtle}", + "type": "color" + } + }, + "weekday": { + "default": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "down": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "default--weekend": { + "value": "{global.content.color.negative.default}", + "type": "color" + } + } + } + }, + "spacing": { + "padding": { + "vertical": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "horizontal": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + } + }, + "gap": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + }, + "border": { + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "rounded": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + } + }, + "background": { + "color": { + "calendarButton": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "default--reverse": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.background.color.primary.emphasis}", + "type": "color" + }, + "down--reverse": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + }, + "weekday": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "default--alt": { + "value": "{global.background.color.primary.muted}", + "type": "color" + } + }, + "range": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + } + } + }, + "size": { + "md": { + "value": "{global.control.size.600}", + "type": "sizing" + } + } + }, + "popover": { + "background": { + "color": { + "enabled": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "spacing": { + "padding": { + "vertical": { + "xsm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + }, + "horizontal": { + "xsm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + } + }, + "gap": { + "value": "{input.spacing.gap.lg}", + "type": "spacing" + } + }, + "border": { + "color": { + "enabled": { + "value": "{global.border.color.secondary.subtle}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + } + }, + "drawer": { + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "spacing": { + "gap": { + "sm": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.xlg}", + "type": "spacing" + } + }, + "padding": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + }, + "shadow": { + "left": { + "value": "{global.shadow.400}", + "type": "boxShadow" + }, + "top": { + "value": [ + { + "x": "0", + "y": "100", + "blur": "60", + "spread": "0", + "color": "rgba({core.color.neutral.200}, 0.08)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "32", + "blur": "32", + "spread": "0", + "color": "rgba({core.color.black},0.05)", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.text.emphasis}", + "type": "color" + } + }, + "typo": { + "value": "{global.content.typo.heading.md}", + "type": "typography" + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + } + }, + "link": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.muted}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.primary.subtle}", + "type": "color" + } + } + }, + "spacing": { + "padding": { + "horizontal": { + "value": "{global.spacing.padding.3xsm}", + "type": "spacing" + } + }, + "gap": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.sm}", + "type": "borderRadius" + } + } + }, + "divider": { + "size": { + "sm": { + "value": "{core.dimension.static.10}px", + "type": "sizing" + } + }, + "background": { + "color": { + "default": { + "value": "{global.border.color.line.subtle}", + "type": "color" + } + } + } + }, + "tab": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.default}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.muted}", + "type": "color" + }, + "down": { + "value": "{global.border.color.primary.default}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.lg}", + "type": "borderWidth" + }, + "radius": { + "value": "{global.border.radius.sm}", + "type": "borderRadius" + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.transparent}", + "type": "color" + } + } + }, + "spacing": { + "padding": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + } + }, + "segmentedControl": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.default}", + "type": "color" + } + } + }, + "spacing": { + "padding": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "selected": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "color": { + "default": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "selected": { + "value": "{global.border.color.primary.default}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + } + }, + "dropzone": { + "spacing": { + "padding": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + }, + "default--subtle": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "default--icon": { + "value": "{global.content.color.primary.muted}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.primary.muted}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.emphasis}", + "type": "color" + } + }, + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + } + }, + "modal": { + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "spacing": { + "padding": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "gap": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + }, + "border": { + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "color": { + "default": { + "value": "{global.border.color.line.default--reverse}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.md}", + "type": "borderWidth" + } + } + }, + "dropdown": { + "content": { + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "default--alt": { + "value": "{global.content.color.text.muted}", + "type": "color" + } + }, + "typo": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + }, + "spacing": { + "padding": { + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + } + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "active": { + "value": "{global.background.color.surface.muted}", + "type": "color" + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + } + } + } + }, + "score": { + "content": { + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "muted": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "typo": { + "sm": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}px", + "textCase": "none" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px", + "textCase": "none" + }, + "type": "typography" + }, + "lg--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px", + "textCase": "none" + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px", + "textCase": "none", + "letterSpacing": "", + "paragraphSpacing": "{core.font.lineHeight.300}px" + }, + "type": "typography" + }, + "xlg": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.500}px", + "fontSize": "{core.font.size.400}px", + "textCase": "none" + }, + "type": "typography" + }, + "2xlg": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.600}px", + "fontSize": "{core.font.size.600}px", + "textCase": "none" + }, + "type": "typography" + } + } + }, + "background": { + "color": { + "neutral": { + "default": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + }, + "subtle": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "active": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + }, + "positive": { + "default": { + "value": "{global.background.color.positive.default}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.positive.emphasis}", + "type": "color" + }, + "muted": { + "value": "{global.background.color.positive.muted}", + "type": "color" + } + }, + "attention": { + "default": { + "value": "{global.background.color.attention.default}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.attention.emphasis}", + "type": "color" + }, + "muted": { + "value": "{global.background.color.attention.subtle}", + "type": "color" + } + }, + "negative": { + "default": { + "value": "{global.background.color.negative.default}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.negative.emphasis}", + "type": "color" + }, + "muted": { + "value": "{global.background.color.negative.muted}", + "type": "color" + } + } + } + }, + "border": { + "color": { + "neutral": { + "default": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + }, + "active": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + }, + "positive": { + "default": { + "value": "{global.background.color.positive.default}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.positive.emphasis}", + "type": "color" + }, + "muted": { + "value": "{global.background.color.positive.muted}", + "type": "color" + } + }, + "attention": { + "default": { + "value": "{global.background.color.attention.default}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.attention.emphasis}", + "type": "color" + }, + "muted": { + "value": "{global.background.color.attention.subtle}", + "type": "color" + } + }, + "negative": { + "default": { + "value": "{global.background.color.negative.default}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.negative.emphasis}", + "type": "color" + }, + "muted": { + "value": "{global.background.color.negative.muted}", + "type": "color" + } + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "lg": { + "value": "{global.border.radius.lg}", + "type": "borderRadius" + } + } + }, + "spacing": { + "padding": { + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "xlg": { + "value": "{global.spacing.padding.xlg}", + "type": "spacing" + } + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + } + }, + "tree": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "fontSize": "{core.font.size.75}px", + "lineHeight": "{core.font.lineHeight.300}px" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + } + } + }, + "spacing": { + "gap": { + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "padding": { + "vertical": { + "value": "{global.spacing.padding.2xsm} - {tree.border.width}", + "type": "spacing" + }, + "horizontal": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + } + } + }, + "border": { + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "color": { + "default": { + "value": "{global.border.color.line.default--reverse}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.subtle}", + "type": "color" + }, + "default-alt": { + "value": "{global.border.color.primary.default}", + "type": "color" + }, + "hover-alt": { + "value": "{global.border.color.line.default}", + "type": "color" + } + }, + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + } + } + } + }, + "breadcrumbs": { + "content": { + "typo": { + "default": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.light}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + }, + "hover": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.light}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}", + "textDecoration": "underline" + }, + "type": "typography" + }, + "current": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + } + }, + "color": { + "default": { + "value": "{global.content.color.secondary.muted}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "default--alt": { + "value": "{global.content.color.secondary.emphasis}", + "type": "color" + } + } + } + }, + "breadcrumb": { + "spacing": { + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + } + }, + "pager": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.light}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + }, + "typo--bold": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.secondary.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "selected": { + "value": "{global.background.color.transparent}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "selected": { + "value": "{global.border.color.primary.muted}", + "type": "color" + } + }, + "radius": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + }, + "size": { + "md": { + "value": "{global.control.size.900}", + "type": "sizing" + } + }, + "spacing": { + "gap": { + "lg": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + } + } + }, + "tooltip": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "default-reverse": { + "value": "{global.content.color.text.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default--reverse}", + "type": "color" + }, + "default--alt": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "default-reverse": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "spacing": { + "padding": { + "vertical": { + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + } + }, + "horizontal": { + "sm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + } + } + }, + "gap": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + }, + "border": { + "radius": { + "value": "{global.border.radius.sm}", + "type": "borderRadius" + } + } + }, + "banner": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.light}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "typo--bold": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "success": { + "value": "{global.content.color.positive.emphasis}", + "type": "color" + }, + "error": { + "value": "{global.content.color.negative.emphasis}", + "type": "color" + }, + "warning": { + "value": "{global.content.color.attention.emphasis}", + "type": "color" + }, + "info": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + } + } + }, + "spacing": { + "padding": { + "vertical": { + "xsm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + } + }, + "horizontal": { + "sm": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + } + } + }, + "gap": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + }, + "background": { + "color": { + "success": { + "value": "{global.content.color.positive.subtle}", + "type": "color" + }, + "error": { + "value": "{global.background.color.negative.subtle}", + "type": "color" + }, + "warning": { + "value": "{global.background.color.attention.subtle}", + "type": "color" + }, + "info": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + } + }, + "chip": { + "content": { + "typo": { + "sm": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}px" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + }, + "default--alt": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover--alt": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.default}", + "type": "color" + }, + "default--alt": { + "value": "{global.border.color.line.default}", + "type": "color" + }, + "hover--alt": { + "value": "{global.border.color.line.emphasis}", + "type": "color" + }, + "empty": { + "value": "{global.border.color.transparent}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "radius": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + }, + "spacing": { + "padding": { + "horizontal": { + "sm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + } + }, + "vertical": { + "sm": { + "value": "3px", + "type": "spacing" + } + } + } + } + }, + "toast": { + "spacing": { + "padding": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "gap": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "default--alt": { + "value": "{global.content.color.text.subtle}", + "type": "color" + }, + "default--alt--reverse": { + "value": "{global.content.color.text.muted}", + "type": "color" + } + }, + "typo": { + "sm": { + "value": "{global.content.typo.caption}", + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default--reverse}", + "type": "color" + }, + "default--reverse": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "color": { + "default": { + "value": "{global.border.color.line.emphasis}", + "type": "color" + }, + "default--reverse": { + "value": "{global.border.color.line.muted}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + } + }, + "menu": { + "spacing": { + "padding": { + "md": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + } + }, + "gap": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + }, + "content": { + "color": { + "main": { + "default": { + "value": "{global.content.color.text.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "active": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "sub": { + "default": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "active": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + } + }, + "typo": { + "md": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "fontSize": "{core.font.size.75}px", + "lineHeight": "{core.font.lineHeight.200}px" + }, + "type": "typography" + } + } + }, + "background": { + "color": { + "main": { + "default": { + "value": "{global.background.color.secondary.emphasis}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "active": { + "value": "{global.background.color.secondary.default}", + "type": "color" + } + }, + "sub": { + "default": { + "value": "{global.background.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "active": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + } + } + }, + "size": { + "md": { + "value": "{global.control.size.900}", + "type": "sizing" + } + } + }, + "stepper": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "fontSize": "{core.font.size.75}", + "lineHeight": "{core.font.lineHeight.200}" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "completed": { + "value": "{global.content.color.positive.default}", + "type": "color" + } + } + }, + "spacing": { + "gap": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "padding": { + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + } + }, + "background": { + "color": { + "active": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "active": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "completed": { + "value": "{global.background.color.positive.default}", + "type": "color" + } + }, + "radius": { + "value": "{global.border.radius.circle}", + "type": "borderRadius" + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + }, + "size": { + "sm": { + "value": "{global.icon.size.sm}", + "type": "sizing" + }, + "md": { + "value": "{global.icon.size.lg}", + "type": "sizing" + } + } + }, + "accordion": { + "content": { + "typo": { + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "default--alt": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.subtle}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "radius": { + "value": "{global.border.radius.lg}", + "type": "borderRadius" + } + }, + "spacing": { + "padding": { + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + } + }, + "gap": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + } + }, + "table": { + "content": { + "typo": { + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + }, + "md--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}", + "fontSize": "{core.font.size.50}" + }, + "type": "typography" + } + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.subtle}", + "type": "color" + }, + "emphasis": { + "value": "{global.border.color.line.default}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.md}", + "type": "borderWidth" + }, + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + }, + "spacing": { + "padding": { + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "gaps": { + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + } + } + }, + "timeline": { + "content": { + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "typo": { + "value": "{global.content.typo.body.sm--bold}", + "type": "typography" + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default--reverse}", + "type": "color" + }, + "default--reverse": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "spacing": { + "gap": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "padding": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.emphasis}", + "type": "color" + }, + "default--reverse": { + "value": "{global.border.color.line.default--reverse}", + "type": "color" + } + }, + "width": { + "sm": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "md": { + "value": "{global.border.width.md}", + "type": "borderWidth" + } + } + } + }, + "swiper": { + "size": { + "md": { + "value": "{global.control.size.900}", + "type": "sizing" + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.icon.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + } + } + }, + "spacing": { + "gap": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + }, + "padding": { + "value": "{global.spacing.padding.3xlg}", + "type": "spacing" + } + }, + "border": { + "radius": { + "value": "{global.border.radius.sm}", + "type": "borderRadius" + } + } + }, + "comunica": { + "content": { + "typo": { + "01": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + }, + "02": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + } + }, + "color": { + "default": { + "value": "{global.content.color.text.emphasis}", + "type": "color" + }, + "default--alt": { + "value": "{global.content.color.text.subtle}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "muted": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.surface.muted}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "default--alt": { + "value": "{global.border.color.primary.emphasis}", + "type": "color" + } + }, + "width": { + "sm": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "md": { + "value": "{global.border.width.md}", + "type": "borderWidth" + } + }, + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + }, + "spacing": { + "padding": { + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "xlg": { + "value": "96px", + "type": "spacing" + } + }, + "gap": { + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + } + } + }, + "menuLibrary": { + "content": { + "color": { + "main": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "active": { + "value": "{global.content.color.primary.default}", + "type": "color" + } + }, + "sub": { + "default": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "active": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + } + } + }, + "background": { + "color": { + "main": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "active": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + } + }, + "sub": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "active": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + } + } + } + }, + "$themes": [], + "$metadata": { + "tokenSetOrder": [ + "core", + "global", + "component" + ] + } +} \ No newline at end of file diff --git a/packages/components/package.json b/packages/components/package.json index d1fa4f610..d8136a567 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -56,7 +56,8 @@ "types:clean": "rimraf types _types", "types:generate": "tsc-silent --project ./tsconfig.json --suppress @ --compiler \"../../node_modules/typescript/lib/typescript.js\"", "types:fix": "mv _types types && rimraf _types types/**/mocks", - "compile-tokens": "sh scripts/compile-tokens.sh", + "merge-tokens": "node scripts/merge-tokens.js", + "compile-tokens": "yarn merge-tokens; sh scripts/compile-tokens.sh", "chromatic": "npx chromatic --project-token=7b10302a7b6b --build-script-name=build:storybook:raw" }, "dependencies": { diff --git a/packages/components/scripts/compile-tokens.sh b/packages/components/scripts/compile-tokens.sh index f795ae306..278b1a84f 100644 --- a/packages/components/scripts/compile-tokens.sh +++ b/packages/components/scripts/compile-tokens.sh @@ -1,6 +1,10 @@ #!/bin/bash + +# TODO: Change input tokens to the figma tokens instead of merged ones +# TODO: once they are fully unified + # Generate tokens-compiled.json file -npx token-transformer ../../tokens.json tokens-compiled.json core,global,component; +npx token-transformer ../../merged_tokens.json tokens-compiled.json core,global,component; # Create a new tokens-compiled.js file starting with "export default " printf "export default " > ./src/tokens.compiled.js; # Insert the tokens-compiled.json into tokens-compiled.js diff --git a/packages/components/scripts/merge-tokens.js b/packages/components/scripts/merge-tokens.js new file mode 100644 index 000000000..563007bc8 --- /dev/null +++ b/packages/components/scripts/merge-tokens.js @@ -0,0 +1,13 @@ +const { defaultsDeep } = require('lodash'); +const fs = require('fs'); +const path = require('path'); + +const oldTokens = require('../../../old_tokens.json'); +const newTokens = require('../../../tokens.json'); + +const output = defaultsDeep(newTokens, oldTokens); + +fs.writeFileSync( + path.join(__dirname, '../../../merged_tokens.json'), + JSON.stringify(output, '', 2) +);