From 6a9b3931ac37e7ae145833c4ace1abd940e30519 Mon Sep 17 00:00:00 2001 From: fermarinsanchez Date: Sat, 21 Oct 2023 22:02:14 +0200 Subject: [PATCH 1/9] refactor(Button): Prepare branch for refactor. new tokens compiled Ref: #issue/BubblesDS-5 --- merged_tokens.json | 6612 +++++++++++++++++ packages/components/babel.config.js | 4 +- packages/components/src/form/Button/Button.js | 4 + .../src/form/Button/Button.styles.js | 21 +- packages/components/src/tokens.compiled.js | 1092 ++- 5 files changed, 7561 insertions(+), 172 deletions(-) create mode 100644 merged_tokens.json diff --git a/merged_tokens.json b/merged_tokens.json new file mode 100644 index 000000000..4b22f6b56 --- /dev/null +++ b/merged_tokens.json @@ -0,0 +1,6612 @@ +{ + "core": { + "core": { + "color": { + "black": { + "value": "#1a202b", + "type": "color" + }, + "white": { + "value": "#ffffff", + "type": "color" + }, + "neutral": { + "50": { + "value": "#F8F9FB", + "type": "color" + }, + "75": { + "value": "hsla({core.color.customPrimary.hue},45%,96%,1)", + "type": "color" + }, + "100": { + "value": "#F2F4F8", + "type": "color" + }, + "200": { + "value": "#DDE1E6", + "type": "color" + }, + "300": { + "value": "#C1C7CD", + "type": "color" + }, + "400": { + "value": "#A2A9B0", + "type": "color" + }, + "500": { + "value": "#878D96", + "type": "color" + }, + "600": { + "value": "#697077", + "type": "color" + }, + "700": { + "value": "#4D5358", + "type": "color" + }, + "800": { + "value": "#343A3F", + "type": "color" + }, + "900": { + "value": "#21272A", + "type": "color" + } + }, + "primary": { + "100": { + "value": "#F1FFBD", + "type": "color" + }, + "200": { + "value": "#E2FF7A", + "type": "color" + }, + "300": { + "value": "#B4E600", + "type": "color" + }, + "400": { + "value": "#98C200", + "type": "color" + }, + "500": { + "value": "#4A6000", + "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" + } + }, + "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" + } + }, + "info": { + "100": { + "value": "#E8F0FC", + "type": "color" + }, + "200": { + "value": "#B1CDF6", + "type": "color" + }, + "300": { + "value": "#7EACF1", + "type": "color" + }, + "400": { + "value": "#5592EC", + "type": "color" + }, + "500": { + "value": "#307AE8", + "type": "color" + }, + "600": { + "value": "#1867DC", + "type": "color" + }, + "700": { + "value": "#155AC1", + "type": "color" + }, + "800": { + "value": "#134FAA", + "type": "color" + }, + "900": { + "value": "#104593", + "type": "color" + } + }, + "secondary": { + "100": { + "value": "#0C1F22", + "type": "color" + } + }, + "tertiary": { + "100": { + "value": "#2F463F", + "type": "color" + } + }, + "accent": { + "100": { + "value": "#FF5470", + "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" + } + }, + "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" + }, + "175": { + "value": "0.875*{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" + }, + "75": { + "value": "6", + "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": "Albert Sans", + "type": "fontFamilies" + }, + "alt": { + "value": "Albert Sans", + "type": "fontFamilies" + }, + "code": { + "value": "Courier new", + "type": "fontFamilies" + } + }, + "weight": { + "regular": { + "value": "400", + "type": "fontWeights" + }, + "medium": { + "value": "500", + "type": "fontWeights" + }, + "semiBold": { + "value": "600", + "type": "fontWeights" + }, + "light": { + "value": "300", + "type": "fontWeights" + }, + "bold": { + "value": "600", + "type": "fontWeights" + } + }, + "lineHeight": { + "75": { + "value": "{core.dimension.175}", + "type": "lineHeights" + }, + "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": { + "25": { + "value": "roundTo( {core.font.size.300} - {core.font.size.50}, 0)", + "type": "fontSizes" + }, + "30": { + "value": "roundTo( {core.font.size.25} + 2 , 0)", + "type": "fontSizes" + }, + "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" + } + }, + "uppercase": { + "value": "uppercase", + "type": "textCase" + } + }, + "shadow": { + "100": { + "value": [ + { + "color": "rgba( {core.color.neutral.900}, 0.08)", + "type": "dropShadow", + "x": "0", + "y": "10", + "blur": "36", + "spread": "0" + } + ], + "type": "boxShadow" + }, + "200": { + "value": [ + { + "color": "rgba( {core.color.neutral.900}, 0.12)", + "type": "dropShadow", + "x": "0", + "y": "10", + "blur": "36", + "spread": "0" + } + ], + "type": "boxShadow" + }, + "300": { + "value": [ + { + "color": "rgba( {core.color.neutral.900}, 0.16)", + "type": "dropShadow", + "x": "0", + "y": "10", + "blur": "36", + "spread": "0" + } + ], + "type": "boxShadow" + }, + "400": { + "value": [ + { + "color": "rgba( {core.color.neutral.900}, 0.05)", + "type": "dropShadow", + "x": "-32", + "y": "0", + "blur": "32", + "spread": "0" + } + ], + "type": "boxShadow" + } + }, + "blur": { + "value": "4px", + "type": "dimension" + } + }, + "util": { + "color": { + "primary": { + "lightness": { + "scale": { + "value": "1.21", + "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" + }, + "5": { + "value": "roundTo({util.color.primary.lightness.up.4} * {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" + }, + "5": { + "value": "roundTo( {util.color.primary.lightness.down.4} / {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" + } + } + }, + "underline": { + "value": "underline", + "type": "textDecoration" + } + }, + "global": { + "global": { + "focus": { + "default": { + "value": { + "x": "0", + "y": "0", + "blur": "0", + "spread": "2", + "color": "{core.color.primary.400}", + "type": "dropShadow" + }, + "type": "boxShadow" + }, + "default-border": { + "value": { + "color": "{core.color.primary.400}", + "width": "{global.border.width.md}", + "style": "solid" + }, + "type": "border" + } + }, + "content": { + "color": { + "text": { + "emphasis": { + "value": "{core.color.neutral.800}", + "type": "color" + }, + "default": { + "value": "{core.color.neutral.700}", + "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": { + "emphasis": { + "value": "{core.color.neutral.700}", + "type": "color" + }, + "default": { + "value": "{core.color.neutral.500}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.300}", + "type": "color" + }, + "default--reverse": { + "value": "{core.color.white}", + "type": "color" + } + }, + "primary": { + "subtle": { + "value": "{core.color.primary.100}", + "type": "color" + }, + "muted": { + "value": "{core.color.primary.200}", + "type": "color" + }, + "default": { + "value": "{core.color.primary.300}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.primary.400}", + "type": "color" + }, + "strong": { + "value": "{core.color.primary.500}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{core.color.secondary.100}", + "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" + } + }, + "tertiary": { + "default": { + "value": "{core.color.tertiary.100}", + "type": "color" + } + }, + "accent": { + "default": { + "value": "{core.color.accent.100}", + "type": "color" + } + } + }, + "typo": { + "heading": { + "xlg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.500}px", + "fontSize": "{core.font.size.500}px" + }, + "type": "typography" + }, + "xlg--semiBold": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.semiBold}", + "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.medium}", + "lineHeight": "{core.font.lineHeight.400}px", + "fontSize": "{core.font.size.400}px" + }, + "type": "typography" + }, + "lg--semiBold": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.semiBold}", + "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.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.300}px" + }, + "type": "typography" + }, + "md--semiBold": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.semiBold}", + "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.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.200}px" + }, + "type": "typography" + }, + "sm--semiBold": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.semiBold}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.200}px" + }, + "type": "typography" + }, + "xsm": { + "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" + }, + "xsm--semiBold": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.semiBold}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + } + }, + "body": { + "lg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.200}px" + }, + "type": "typography" + }, + "lg--medium": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.200}px" + }, + "type": "typography" + }, + "lg--semiBold": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.semiBold}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.200}px" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + }, + "md--medium": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + }, + "md--semiBold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.semiBold}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + }, + "sm": { + "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" + }, + "sm--medium": { + "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" + }, + "sm--semiBold": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.semiBold}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "xsm": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.50}px" + }, + "type": "typography" + }, + "xsm--semiBold": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.semiBold}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.50}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--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--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.main}", + "fontWeight": "{core.font.weight.medium}", + "fontSize": "{core.font.size.30}", + "lineHeight": "{core.font.lineHeight.75}" + }, + "type": "typography" + } + }, + "typoMobile": { + "heading": { + "xlg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.semiBold}", + "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.semiBold}", + "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.semiBold}", + "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.semiBold}", + "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.semiBold}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + } + }, + "body": { + "lg": { + "value": { + "fontFamily": "{core.font.family.main}", + "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": { + "subtle": { + "value": "{core.color.primary.100}", + "type": "color" + }, + "muted": { + "value": "{core.color.primary.200}", + "type": "color" + }, + "default": { + "value": "{core.color.primary.300}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.primary.400}", + "type": "color" + }, + "strong": { + "value": "{core.color.primary.500}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{core.color.secondary.100}", + "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.100}", + "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.100}", + "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" + } + }, + "info": { + "default": { + "value": "{core.color.info.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.info.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.info.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.info.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.200}", + "type": "color" + }, + "default--reverse": { + "value": "{core.color.white}", + "type": "color" + } + }, + "primary": { + "subtle": { + "value": "{core.color.primary.100}", + "type": "color" + }, + "muted": { + "value": "{core.color.primary.200}", + "type": "color" + }, + "default": { + "value": "{core.color.primary.300}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.primary.400}", + "type": "color" + }, + "strong": { + "value": "{core.color.primary.500}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{core.color.secondary.100}", + "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" + } + }, + "leemons": { + "default": { + "value": "{core.color.leemons.500}", + "type": "color" + } + }, + "info": { + "default": { + "value": "{core.color.info.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.info.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.info.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.info.100}", + "type": "color" + } + } + } + }, + "spacing": { + "padding": { + "3xsm": { + "value": "{core.dimension.static.25}px", + "type": "spacing" + }, + "2xsm": { + "value": "{core.dimension.static.50}px", + "type": "spacing" + }, + "1xsm": { + "value": "{core.dimension.static.75}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" + }, + "xlslg": { + "value": "{core.dimension.static.350}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" + }, + "1xsm": { + "value": "{core.dimension.static.25}px", + "type": "spacing" + }, + "sm": { + "value": "{core.dimension.static.50}px", + "type": "spacing" + }, + "xsm": { + "value": "{core.dimension.static.75}px", + "type": "spacing" + }, + "md": { + "value": "{core.dimension.static.100}px", + "type": "spacing" + }, + "slg": { + "value": "{core.dimension.static.150}px", + "type": "spacing" + }, + "lg": { + "value": "{core.dimension.static.200}px", + "type": "spacing" + }, + "xlg": { + "value": "{core.dimension.static.300}px", + "type": "spacing" + }, + "xxlg": { + "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": { + "50": { + "value": "{core.dimension.static.100} px", + "type": "sizing" + }, + "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" + } + } + }, + "hover": { + "default": { + "value": { + "x": "0", + "y": "0", + "blur": "4", + "spread": "0", + "color": "rgba({core.color.primary.400}, 0.80)", + "type": "dropShadow" + }, + "type": "boxShadow" + } + }, + "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" + } + } + } + }, + "component": { + "button": { + "content": { + "color": { + "primary": { + "default": { + "value": "{global.content.color.secondary.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" + } + }, + "ghost": { + "default": { + "value": "{global.content.color.secondary.default}", + "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" + } + } + }, + "default": { + "value": "{global.content.typo.body.sm}", + "type": "typography" + }, + "hover": { + "value": "{global.content.typo.body.sm--medium}", + "type": "typography" + }, + "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.default}", + "type": "color" + }, + "pressed": { + "value": "{global.background.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "pressed": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "down": { + "value": "{global.background.color.secondary.default}", + "type": "color" + } + }, + "ghost": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "pressed": { + "value": "{global.background.color.primary.muted}", + "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": { + "secondary": { + "default": { + "value": "{global.border.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.secondary.default}", + "type": "color" + }, + "pressed": { + "value": "{global.border.color.primary.strong}", + "type": "color" + }, + "down": { + "value": "{global.border.color.secondary.emphasis}", + "type": "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" + } + }, + "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.sm}", + "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": { + "sm": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "xs": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + } + } + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "shadow": { + "hover": { + "value": { + "x": "0", + "y": "0", + "blur": "4", + "spread": "0", + "color": "rgba({button.background.color.primary.hover}, 0.80)", + "type": "dropShadow" + }, + "type": "boxShadow" + }, + "pressed": { + "value": { + "x": "0", + "y": "0", + "blur": "4", + "spread": "0", + "color": "{button.border.color.secondary.pressed}", + "type": "innerShadow" + }, + "type": "boxShadow" + } + }, + "textDecoration": { + "underLine": { + "value": "{underline}", + "type": "textDecoration" + } + } + }, + "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" + } + } + }, + "default": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px", + "textDecoration": "{underline}" + }, + "type": "typography" + }, + "hover": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px", + "textDecoration": "{underline}" + }, + "type": "typography" + }, + "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" + }, + "xs": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + } + } + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + } + }, + "buttonIcon": { + "content": { + "color": { + "primary": { + "default": { + "value": "{global.content.color.secondary.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" + } + }, + "ghost": { + "default": { + "value": "{global.content.color.secondary.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" + }, + "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.default}", + "type": "color" + }, + "pressed": { + "value": "{global.background.color.primary.emphasis}", + "type": "color" + }, + "selected": { + "value": "{global.background.color.primary.muted}", + "type": "color" + }, + "focus": { + "value": "{global.background.color.primary.default}", + "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" + } + }, + "ghost": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "pressed": { + "value": "{global.background.color.primary.emphasis}", + "type": "color" + }, + "selected": { + "value": "{global.background.color.primary.muted}", + "type": "color" + }, + "focus": { + "value": "{global.background.color.primary.subtle}", + "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.1xsm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + } + } + }, + "shadow": { + "hover": { + "value": { + "x": "0", + "y": "0", + "blur": "4", + "spread": "0", + "color": "rgba({buttonIcon.background.color.primary.hover}, 0.80)", + "type": "dropShadow" + }, + "type": "boxShadow" + } + } + }, + "buttonAction": { + "content": { + "color": { + "primary": { + "default": { + "value": "{global.content.color.tertiary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.secondary.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.default}", + "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" + }, + "pressed": { + "value": "{global.background.color.primary.emphasis}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.background.color.secondary.default}", + "type": "color" + }, + "down--reverse": { + "value": "{global.background.color.secondary.muted}", + "type": "color" + }, + "hover--reverse-transparent": { + "value": "{global.background.color.surface.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.15", + "space": "lch" + } + } + } + }, + "down": { + "value": "{global.background.color.primary.subtle}", + "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.primary.default}", + "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.sm}", + "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.emphasis}", + "type": "color" + } + }, + "typo": { + "value": "{global.content.typo.body.sm}", + "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" + }, + "negative": { + "value": "{global.border.color.negative.default}", + "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": "{badge.spacing.padding.md}", + "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--semiBold}", + "type": "typography" + }, + "02": { + "value": "{global.content.typo.body.sm}", + "type": "typography" + }, + "03": { + "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" + } + } + } + }, + "helpText": { + "content": { + "color": { + "default": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "emphasis": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "phatic--negative": { + "value": "{global.content.color.negative.default}", + "type": "color" + }, + "phatic--attention": { + "value": "{global.content.color.attention.default}", + "type": "color" + }, + "phatic": { + "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.50}px" + }, + "type": "typography" + }, + "typo": { + "value": "{global.content.typo.caption}", + "type": "typography" + } + }, + "spacing": { + "gap": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + } + } + }, + "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.50}", + "type": "sizing" + }, + "width": { + "value": "{global.control.size.500}", + "type": "sizing" + } + }, + "spacing": { + "padding": { + "value": "{global.spacing.padding.1xsm} {global.spacing.padding.2xsm}", + "type": "spacing" + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.primary.default}", + "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": { + "caption": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "fontSize": "{core.font.size.30}", + "lineHeight": "{core.font.lineHeight.75}", + "textCase": "{core.font.uppercase}" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}" + }, + "type": "typography" + }, + "sm--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.semiBold}", + "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.semiBold}", + "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" + } + }, + "info": { + "default": { + "value": "{core.color.info.500}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.background.color.secondary.default}", + "type": "color" + } + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + }, + "md-radius": { + "value": "{global.border.radius.md}", + "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": { + "3xsm": { + "value": "{global.spacing.padding.3xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.2xsm}", + "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" + }, + "xmd": { + "value": "{global.control.size.900}", + "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.semiBold}", + "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.semiBold}", + "fontSize": "{core.font.size.100}", + "textCase": "uppercase" + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.semiBold}", + "fontSize": "{core.font.size.400}", + "textCase": "uppercase" + }, + "type": "typography" + }, + "xlg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.semiBold}", + "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" + }, + "muted": { + "value": "{global.background.color.surface.muted}", + "type": "color" + } + } + }, + "spacing": { + "gap": { + "xxs": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "xs": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.xxlg}", + "type": "spacing" + } + }, + "padding": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + }, + "shadow": { + "left": { + "value": "{core.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" + }, + "icon": { + "value": "{global.content.color.icon.emphasis}", + "type": "color" + } + }, + "typo": { + "value": "{global.content.typo.heading.md}", + "type": "typography" + }, + "typo-regular": { + "value": "{accordion.content.typo.sm}", + "type": "typography" + }, + "typo-bold": { + "value": "{global.content.typo.body.sm--semiBold}", + "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", + "textDecoration": "{underline}" + }, + "type": "typography" + }, + "typo--medium": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px", + "textDecoration": "{underline}" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.secondary.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" + }, + "pressed": { + "value": "{global.background.color.primary.muted}", + "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": { + "color": { + "default": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.default}", + "type": "color" + } + }, + "typo": { + "sm": { + "value": "{global.content.typo.body.sm}", + "type": "typography" + }, + "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" + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.subtle}", + "type": "color" + }, + "selected": { + "value": "{global.border.color.primary.default}", + "type": "color" + }, + "down-copy": { + "value": "{global.border.color.line.subtle}", + "type": "color" + }, + "down": { + "value": "{global.border.color.primary.default}", + "type": "color" + } + }, + "radius": { + "value": "{global.border.radius.sm}", + "type": "borderRadius" + }, + "width": { + "sm": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "md": { + "value": "{global.border.width.md}", + "type": "borderWidth" + }, + "value": "{global.border.width.lg}", + "type": "borderWidth" + } + }, + "background": { + "color": { + "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" + } + } + }, + "spacing": { + "padding": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "vertical": { + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + }, + "horizontal": { + "xsm": { + "value": "{global.spacing.padding.xsm}", + "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" + }, + "check--icon": { + "value": "{global.content.color.positive.default}", + "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.secondary.default}", + "type": "color" + }, + "default--alt": { + "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" + }, + "typo--medium": { + "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" + } + }, + "spacing": { + "padding": { + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + } + }, + "gap": { + "1xsm": { + "value": "{global.spacing.gap.1xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.primary.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" + } + } + }, + "shadow": { + "default": { + "value": "{core.shadow.100}", + "type": "boxShadow" + } + } + }, + "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.semiBold}", + "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.semiBold}", + "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.semiBold}", + "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.medium}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + }, + "hover": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "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.default}", + "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.medium}", + "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.medium}", + "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": { + "xms": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "3xms": { + "value": "{global.spacing.padding.3xsm}", + "type": "spacing" + }, + "xsm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "xlslg": { + "value": "{global.spacing.padding.xlslg}", + "type": "spacing" + }, + "xlgm": { + "value": "52px", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + } + }, + "gap": { + "value": "{global.spacing.gap.slg}", + "type": "spacing" + }, + "gap--1xsm": { + "value": "{global.spacing.gap.1xsm}", + "type": "spacing" + }, + "gap-md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "content": { + "color": { + "main": { + "default": { + "value": "{global.content.color.secondary.default}", + "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--regular": { + "value": "{global.content.typo.body.sm}", + "type": "typography" + }, + "typo--medium": { + "value": "{global.content.typo.body.sm--medium}", + "type": "typography" + }, + "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.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "active": { + "value": "{global.background.color.primary.muted}", + "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" + }, + "lg": { + "value": "{global.control.size.1000}", + "type": "sizing" + } + }, + "border": { + "color": { + "main": { + "active": { + "value": "{global.border.color.primary.default}", + "type": "color" + }, + "default": { + "value": "{global.border.color.line.subtle}", + "type": "color" + } + } + }, + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + } + }, + "shadow": { + "value": [ + { + "color": "#21272a0d", + "type": "dropShadow", + "x": "32", + "y": "0", + "blur": "32", + "spread": "0" + } + ], + "type": "boxShadow" + }, + "footer": { + "value": "{core.shadow.200}", + "type": "boxShadow" + }, + "modal": { + "value": "{core.shadow.300}", + "type": "boxShadow" + } + }, + "stepper": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.semiBold}", + "fontSize": "{core.font.size.75}", + "lineHeight": "{core.font.lineHeight.200}" + }, + "type": "typography" + }, + "typo-pending": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "fontSize": "{core.font.size.75}", + "lineHeight": "{core.font.lineHeight.200}" + }, + "type": "typography" + }, + "color": { + "pending": { + "value": "{global.content.color.secondary.mutedSuble}", + "type": "color" + }, + "pending-text": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "active": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "completed": { + "value": "{global.content.color.text.emphasis}", + "type": "color" + }, + "default": { + "value": "{global.content.color.text.muted}", + "type": "color" + } + } + }, + "spacing": { + "gap": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "xsm": { + "value": "{global.spacing.gap.xsm}", + "type": "spacing" + }, + "padding": { + "xsm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + } + }, + "background": { + "color": { + "pending": { + "value": "{global.background.color.primary.verySubtle}", + "type": "color" + }, + "active": { + "value": "{global.background.color.primary.verySubtle}", + "type": "color" + }, + "active--reverse": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + }, + "completed": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "active": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "active--reverse": { + "value": "{global.border.color.line.default--reverse}", + "type": "color" + }, + "completed": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + }, + "radius": { + "value": "{global.border.radius.circle}", + "type": "borderRadius" + }, + "md": { + "value": "{global.border.radius.md}", + "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" + }, + "xlg": { + "value": "{global.icon.size.xlg}", + "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--semiBold}", + "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.default}", + "type": "color" + }, + "active": { + "value": "{global.background.color.primary.verySubtle}", + "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" + } + } + } + } + }, + "headerCreate": { + "spacing": { + "padding": { + "lg": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + } + } + }, + "border": { + "width": { + "sm": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + } + } + }, + "HeaderCreate": { + "content": { + "color": { + "default": { + "value": "{global.content.color.text.emphasis}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "border": { + "color": { + "hover": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + } + } + } + }, + "cardLibrary": { + "spacing": { + "padding": { + "horizontal": { + "xsm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "2xsm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + } + }, + "vertical": { + "xsm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "2xsm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + } + } + }, + "gap": { + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + }, + "xlg": { + "value": "{global.spacing.gap.xlg}", + "type": "spacing" + } + } + }, + "content": { + "color": { + "emphasis": { + "value": "{global.content.color.tertiary.default}", + "type": "color" + }, + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "subje": { + "value": "{global.content.color.text.emphasis}", + "type": "color" + }, + "muted": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "icon": { + "value": "{global.content.color.icon.default}", + "type": "color" + } + }, + "typo": { + "lg": { + "value": "{global.content.typo.body.lg--medium}", + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "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" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "cover": { + "value": "{global.background.color.surface.muted}", + "type": "color" + } + } + }, + "border": { + "color": { + "defaut": { + "value": "{global.border.color.line.default}", + "type": "color" + }, + "subtle": { + "value": "{global.border.color.line.subtle}", + "type": "color" + } + }, + "radius": { + "sm": { + "value": "{global.border.radius.sm}", + "type": "borderRadius" + }, + "circle": { + "value": "{global.border.radius.circle}", + "type": "borderRadius" + } + }, + "width": { + "sm": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "lg": { + "value": "{global.border.width.lg}", + "type": "borderWidth" + } + } + }, + "shadow": { + "hover": { + "value": "{core.shadow.100}", + "type": "boxShadow" + } + } + }, + "buttonIconCard": { + "spacing": { + "padding": { + "sm": { + "value": "{global.spacing.padding.3xsm}", + "type": "spacing" + } + } + }, + "content": { + "color": { + "primary": { + "default": { + "value": "{global.content.color.icon.default--reverse}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.icon.default--reverse}", + "type": "color" + }, + "down": { + "value": "{global.content.color.icon.default--reverse}", + "type": "color" + } + } + } + }, + "background": { + "color": { + "primary": { + "default": { + "value": "{global.background.color.surface.default--reverse}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.4", + "space": "lch" + } + } + } + }, + "hover": { + "value": "{global.background.color.surface.default--reverse}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.7", + "space": "lch" + } + } + } + }, + "down": { + "value": "{global.background.color.surface.default--reverse}", + "type": "color" + } + } + } + }, + "border": { + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + } + } + }, + "ButtonIconCard": { + "blur": { + "default": { + "value": "{core.blur}", + "type": "dimension" + } + } + }, + "buttonIconLike": { + "content": { + "color": { + "primary": { + "default": { + "value": "{global.content.color.icon.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.accent.default}", + "type": "color" + }, + "active": { + "value": "{global.content.color.accent.default}", + "type": "color" + } + } + } + } + } + }, + "$themes": [], + "$metadata": { + "tokenSetOrder": [ + "core", + "global", + "component" + ] + } +} \ No newline at end of file diff --git a/packages/components/babel.config.js b/packages/components/babel.config.js index 4f6cf0d79..32057f3f3 100644 --- a/packages/components/babel.config.js +++ b/packages/components/babel.config.js @@ -26,8 +26,8 @@ module.exports = { 'dev-expression', '@babel/plugin-syntax-dynamic-import', '@babel/plugin-syntax-import-meta', - '@babel/plugin-proposal-class-properties', - // '@babel/plugin-proposal-export-namespace-from', + // '@babel/plugin-proposal-class-properties', + '@babel/plugin-proposal-export-namespace-from', '@babel/plugin-proposal-export-default-from', ], }; diff --git a/packages/components/src/form/Button/Button.js b/packages/components/src/form/Button/Button.js index 2e9da9671..8de749889 100644 --- a/packages/components/src/form/Button/Button.js +++ b/packages/components/src/form/Button/Button.js @@ -53,6 +53,8 @@ export const Button = forwardRef( ? variantProp : BUTTON_DEFAULT_PROPS.variant; const size = BUTTON_SIZES.includes(sizeProp) ? sizeProp : BUTTON_DEFAULT_PROPS.size; + const hasLeftIcon = !!leftIcon; + const hasRightIcon = !!rightIcon; const { classes } = ButtonStyles( { @@ -64,6 +66,8 @@ export const Button = forwardRef( disabled, textAlign, styles, + hasLeftIcon, + hasRightIcon, }, { name: 'Button' } ); diff --git a/packages/components/src/form/Button/Button.styles.js b/packages/components/src/form/Button/Button.styles.js index 06b5680fb..1aed095e5 100644 --- a/packages/components/src/form/Button/Button.styles.js +++ b/packages/components/src/form/Button/Button.styles.js @@ -3,10 +3,12 @@ import { getBoxShadowFromToken } from './../../theme.mixins'; const getSizes = (size, theme) => { const buttonPadding = theme.other.button.spacing.padding; - return { - height: 'unset', - padding: `${buttonPadding.vertical[size]} ${buttonPadding.horizontal[size]}`, - }; + if (size === 'md') { + return { + height: 'unset', + padding: `${buttonPadding.vertical[size]} ${buttonPadding.horizontal.sm}`, + }; + } }; const getVariant = (variant, theme, color) => { @@ -16,13 +18,16 @@ const getVariant = (variant, theme, color) => { borderColor: 'transparent', backgroundColor: 'transparent', }; + const buttonTypo = buttonTheme.content.default; + const buttonTypoHover = buttonTheme.content.hover; const variants = { filled: { primary: { backgroundColor: buttonTheme.background.color.primary.default, - borderColor: buttonTheme.border.color.primary.default, - color: buttonTheme.content.color.primary['default--reverse'], + border: 'none', + color: buttonTheme.content.color.primary.default, + // ...buttonTypo, '&:focus-visible': { ...getBoxShadowFromToken(theme.other.global.focus.default), backgroundColor: buttonTheme.background.color.primary.hover, @@ -31,7 +36,9 @@ const getVariant = (variant, theme, color) => { }, '&:hover': { backgroundColor: buttonTheme.background.color.primary.hover, - borderColor: buttonTheme.border.color.primary.hover, + ...getBoxShadowFromToken(buttonTheme.shadow.hover), + fontWeight: '700 !important', + ...buttonTypoHover, }, '&:active': { backgroundColor: buttonTheme.background.color.primary.down, diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js index da5e47a45..dfda0561d 100644 --- a/packages/components/src/tokens.compiled.js +++ b/packages/components/src/tokens.compiled.js @@ -6,24 +6,54 @@ export default { "default": { "value": "#0C1F22", "type": "color" + }, + "hover": { + "value": "#98C200", + "type": "color" + }, + "down": { + "value": "#B4E600", + "type": "color" + }, + "default--reverse": { + "value": "#ffffff", + "type": "color" } }, "secondary": { "default": { "value": "#0C1F22", "type": "color" + }, + "hover": { + "value": "#343A3F", + "type": "color" + }, + "down": { + "value": "#0C1F22", + "type": "color" + }, + "default--reverse": { + "value": "#ffffff", + "type": "color" } }, "ghost": { + "default": { + "value": "#0C1F22", + "type": "color" + } + }, + "terciary": { "default": { "value": "#F1FFBD", "type": "color" }, "hover": { - "value": "#F1FFBD", + "value": "#E2FF7A", "type": "color" }, - "pressed": { + "down": { "value": "#E2FF7A", "type": "color" }, @@ -64,6 +94,15 @@ export default { "fontSize": "14px" }, "type": "typography" + }, + "typo": { + "value": { + "fontFamily": "Albert Sans", + "fontWeight": 400, + "lineHeight": "20px", + "fontSize": "14px" + }, + "type": "typography" } }, "background": { @@ -81,30 +120,44 @@ export default { "value": "#98C200", "type": "color" }, - "focus": { + "down": { "value": "#B4E600", "type": "color" } }, "secondary": { "default": { - "value": "transparent", + "value": "#ffffff", "type": "color" }, "hover": { - "value": "transparent", + "value": "#ffffff", "type": "color" }, - "press": { + "pressed": { "value": "#ffffff", "type": "color" }, - "focus": { - "value": "#ffffff", + "down": { + "value": "#0C1F22", "type": "color" } }, "ghost": { + "default": { + "value": "transparent", + "type": "color" + }, + "hover": { + "value": "#F1FFBD", + "type": "color" + }, + "pressed": { + "value": "#E2FF7A", + "type": "color" + } + }, + "terciary": { "default": { "value": "#F8F9FB", "type": "color" @@ -136,35 +189,35 @@ export default { }, "border": { "color": { - "primary": { + "secondary": { "default": { - "value": "#B4E600", + "value": "#0C1F22", "type": "color" }, "hover": { - "value": "#98C200", + "value": "#0C1F22", + "type": "color" + }, + "pressed": { + "value": "#4A6000", "type": "color" }, "down": { - "value": "#98C200", + "value": "#343A3F", "type": "color" } }, - "secondary": { + "primary": { "default": { - "value": "#0C1F22", + "value": "#B4E600", "type": "color" }, "hover": { - "value": "#0C1F22", - "type": "color" - }, - "pressed": { - "value": "#4A6000", + "value": "#98C200", "type": "color" }, - "focus": { - "value": "#0C1F22", + "down": { + "value": "#98C200", "type": "color" } }, @@ -229,10 +282,6 @@ export default { } }, "horizontal": { - "md": { - "value": "24px", - "type": "spacing" - }, "sm": { "value": "16px", "type": "spacing" @@ -240,6 +289,10 @@ export default { "xs": { "value": "8px", "type": "spacing" + }, + "md": { + "value": "24px", + "type": "spacing" } } }, @@ -271,6 +324,12 @@ export default { }, "type": "boxShadow" } + }, + "textDecoration": { + "underLine": { + "value": "underline", + "type": "textDecoration" + } } }, "buttonText": { @@ -296,9 +355,8 @@ export default { "type": "color" }, "hover": { - "value": "{global.content.color.secondary.emphasis}", - "type": "color", - "failedToResolve": true + "value": "#343A3F", + "type": "color" }, "down": { "value": "#0C1F22", @@ -353,6 +411,15 @@ export default { "textDecoration": "underline" }, "type": "typography" + }, + "typo": { + "value": { + "fontFamily": "Albert Sans", + "fontWeight": 400, + "lineHeight": "20px", + "fontSize": "14px" + }, + "type": "typography" } }, "background": { @@ -377,9 +444,8 @@ export default { "type": "color" }, "hover": { - "value": "{global.background.color.secondary.subtle}", - "type": "color", - "failedToResolve": true + "value": "#F8F9FB", + "type": "color" }, "down": { "value": "transparent", @@ -438,14 +504,12 @@ export default { "type": "color" }, "hover": { - "value": "{global.border.color.secondary.subtle}", - "type": "color", - "failedToResolve": true + "value": "#F8F9FB", + "type": "color" }, "down": { - "value": "{global.border.color.secondary.subtle}", - "type": "color", - "failedToResolve": true + "value": "#F8F9FB", + "type": "color" } }, "terciary": { @@ -528,6 +592,18 @@ export default { "default": { "value": "#0C1F22", "type": "color" + }, + "hover": { + "value": "#98C200", + "type": "color" + }, + "down": { + "value": "#B4E600", + "type": "color" + }, + "default--reverse": { + "value": "#ffffff", + "type": "color" } }, "ghost": { @@ -535,6 +611,60 @@ export default { "value": "#0C1F22", "type": "color" } + }, + "secondary": { + "default": { + "value": "#0C1F22", + "type": "color" + }, + "hover": { + "value": "#343A3F", + "type": "color" + }, + "down": { + "value": "#0C1F22", + "type": "color" + }, + "default--reverse": { + "value": "#ffffff", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "#F1FFBD", + "type": "color" + }, + "hover": { + "value": "#98C200", + "type": "color" + }, + "down": { + "value": "#F1FFBD", + "type": "color" + }, + "default--reverse": { + "value": "#878D96", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "#d13b3b", + "type": "color" + }, + "hover": { + "value": "#ffffff", + "type": "color" + }, + "down": { + "value": "#d13b3b", + "type": "color" + }, + "hover--reverse": { + "value": "#b52a2a", + "type": "color" + } } } }, @@ -560,6 +690,22 @@ export default { "focus": { "value": "#B4E600", "type": "color" + }, + "down": { + "value": "#B4E600", + "type": "color" + }, + "default--reverse": { + "value": "transparent", + "type": "color" + }, + "hover--reverse": { + "value": "#F1FFBD", + "type": "color" + }, + "down--reverse": { + "value": "transparent", + "type": "color" } }, "ghost": { @@ -575,29 +721,217 @@ export default { "value": "#98C200", "type": "color" }, - "selected": { - "value": "#E2FF7A", + "selected": { + "value": "#E2FF7A", + "type": "color" + }, + "focus": { + "value": "#F1FFBD", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "#0C1F22", + "type": "color" + }, + "hover": { + "value": "#343A3F", + "type": "color" + }, + "down": { + "value": "#0C1F22", + "type": "color" + }, + "default--reverse": { + "value": "transparent", + "type": "color" + }, + "hover--reverse": { + "value": "#F8F9FB", + "type": "color" + }, + "down--reverse": { + "value": "transparent", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "#F8F9FB", + "type": "color" + }, + "hover": { + "value": "#F2F4F8", + "type": "color" + }, + "down": { + "value": "#F8F9FB", + "type": "color" + }, + "default-reverse": { + "value": "transparent", + "type": "color" + }, + "hover-reverse": { + "value": "#F1FFBD", + "type": "color" + }, + "down-reverse": { + "value": "transparent", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "#f7dede", + "type": "color" + }, + "hover": { + "value": "#d13b3b", + "type": "color" + }, + "down": { + "value": "#f7dede", + "type": "color" + }, + "default--reverse": { + "value": "transparent", + "type": "color" + }, + "hover--reverse": { + "value": "#f0bebe", + "type": "color" + }, + "down--reverse": { + "value": "transparent", + "type": "color" + } + } + } + }, + "border": { + "radius": { + "md": { + "value": "4px", + "type": "borderRadius" + }, + "rounded": { + "value": "99em", + "type": "borderRadius" + } + }, + "width": { + "value": "2px", + "type": "borderWidth" + }, + "color": { + "primary": { + "default": { + "value": "#B4E600", + "type": "color" + }, + "hover": { + "value": "#98C200", + "type": "color" + }, + "down": { + "value": "#98C200", + "type": "color" + }, + "default--reverse": { + "value": "transparent", + "type": "color" + }, + "hover--reverse": { + "value": "#F1FFBD", + "type": "color" + }, + "down--reverse": { + "value": "#F1FFBD", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "#0C1F22", + "type": "color" + }, + "hover": { + "value": "#343A3F", + "type": "color" + }, + "down": { + "value": "#343A3F", + "type": "color" + }, + "default-reverse": { + "value": "transparent", + "type": "color" + }, + "hover-reverse": { + "value": "#F8F9FB", + "type": "color" + }, + "down-reverse": { + "value": "#F8F9FB", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "#DDE1E6", + "type": "color" + }, + "hover": { + "value": "#C1C7CD", + "type": "color" + }, + "down": { + "value": "#C1C7CD", + "type": "color" + }, + "default-reverse": { + "value": "transparent", + "type": "color" + }, + "hover--reverse": { + "value": "#F1FFBD", + "type": "color" + }, + "down--reverse": { + "value": "#F1FFBD", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "#f7dede", + "type": "color" + }, + "hover": { + "value": "#d13b3b", + "type": "color" + }, + "down": { + "value": "#d13b3b", + "type": "color" + }, + "default--reverse": { + "value": "transparent", + "type": "color" + }, + "hover--reverse": { + "value": "#f0bebe", "type": "color" }, - "focus": { - "value": "#F1FFBD", + "down--reverse": { + "value": "#f7dede", "type": "color" } } } }, - "border": { - "radius": { - "md": { - "value": "4px", - "type": "borderRadius" - } - }, - "width": { - "value": "2px", - "type": "borderWidth" - } - }, "spacing": { "padding": { "md": { @@ -635,6 +969,22 @@ export default { "hover": { "value": "#0C1F22", "type": "color" + }, + "down": { + "value": "#B4E600", + "type": "color" + }, + "default--reverse": { + "value": "#C1C7CD", + "type": "color" + }, + "hover--reverse": { + "value": "#ffffff", + "type": "color" + }, + "down--reverse": { + "value": "#ffffff", + "type": "color" } }, "phatic": { @@ -682,13 +1032,16 @@ export default { "type": "color" }, "down--reverse": { - "value": "{global.background.color.secondary.muted}", - "type": "color", - "failedToResolve": true + "value": "#878D96", + "type": "color" }, "hover--reverse-transparent": { "value": "#ffffff26", "type": "color" + }, + "down": { + "value": "#F1FFBD", + "type": "color" } }, "phatic": { @@ -727,9 +1080,8 @@ export default { "type": "color" }, "down--reverse": { - "value": "{global.border.color.secondary.muted}", - "type": "color", - "failedToResolve": true + "value": "#878D96", + "type": "color" } }, "phatic": { @@ -979,6 +1331,10 @@ export default { "phatic--attention": { "value": "#f39c12", "type": "color" + }, + "phatic": { + "value": "#d13b3b", + "type": "color" } }, "typo-": { @@ -989,6 +1345,15 @@ export default { "fontSize": "12px" }, "type": "typography" + }, + "typo": { + "value": { + "fontFamily": "Albert Sans", + "fontWeight": 500, + "fontSize": 10, + "lineHeight": 14 + }, + "type": "typography" } }, "spacing": { @@ -1336,6 +1701,12 @@ export default { "value": "#307AE8", "type": "color" } + }, + "secondary": { + "default": { + "value": "#0C1F22", + "type": "color" + } } } }, @@ -1402,6 +1773,10 @@ export default { "lg": { "value": "12px", "type": "spacing" + }, + "sm": { + "value": "4px", + "type": "spacing" } } } @@ -1789,9 +2164,8 @@ export default { "border": { "color": { "enabled": { - "value": "{global.border.color.secondary.subtle}", - "type": "color", - "failedToResolve": true + "value": "#F8F9FB", + "type": "color" } }, "width": { @@ -1955,6 +2329,18 @@ export default { "default": { "value": "#0C1F22", "type": "color" + }, + "hover": { + "value": "#98C200", + "type": "color" + }, + "down": { + "value": "#E2FF7A", + "type": "color" + }, + "default--reverse": { + "value": "#F1FFBD", + "type": "color" } } }, @@ -1983,6 +2369,10 @@ export default { "pressed": { "value": "#E2FF7A", "type": "color" + }, + "down": { + "value": "#F1FFBD", + "type": "color" } } }, @@ -2011,18 +2401,9 @@ export default { }, "tab": { "content": { - "typo": { - "value": { - "fontFamily": "Albert Sans", - "fontWeight": 400, - "lineHeight": "20px", - "fontSize": "14px" - }, - "type": "typography" - }, "color": { "default": { - "value": "#4D5358", + "value": "#0C1F22", "type": "color" }, "hover": { @@ -2033,6 +2414,19 @@ export default { "value": "#B4E600", "type": "color" } + }, + "typo": { + "sm": { + "value": "{global.content.typo.body.sm}", + "type": "typography" + }, + "value": { + "fontFamily": "Albert Sans", + "fontWeight": 400, + "lineHeight": "20px", + "fontSize": "14px" + }, + "type": "typography" } }, "border": { @@ -2042,7 +2436,15 @@ export default { "type": "color" }, "hover": { - "value": "#E2FF7A", + "value": "#DDE1E6", + "type": "color" + }, + "selected": { + "value": "#B4E600", + "type": "color" + }, + "down-copy": { + "value": "#DDE1E6", "type": "color" }, "down": { @@ -2050,13 +2452,21 @@ export default { "type": "color" } }, - "width": { - "value": "4px", - "type": "borderWidth" - }, "radius": { "value": "2px", "type": "borderRadius" + }, + "width": { + "sm": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "md": { + "value": "{global.border.width.md}", + "type": "borderWidth" + }, + "value": "4px", + "type": "borderWidth" } }, "background": { @@ -2066,7 +2476,7 @@ export default { "type": "color" }, "hover": { - "value": "#F8F9FB", + "value": "#F1FFBD", "type": "color" }, "down": { @@ -2083,6 +2493,18 @@ export default { "gap": { "value": "8px", "type": "spacing" + }, + "vertical": { + "md": { + "value": "16px", + "type": "spacing" + } + }, + "horizontal": { + "xsm": { + "value": "8px", + "type": "spacing" + } } } }, @@ -2271,7 +2693,7 @@ export default { "content": { "color": { "default": { - "value": "#4D5358", + "value": "#0C1F22", "type": "color" }, "default--alt": { @@ -2287,6 +2709,15 @@ export default { "fontSize": "14px" }, "type": "typography" + }, + "typo--medium": { + "value": { + "fontFamily": "Albert Sans", + "fontWeight": 500, + "lineHeight": "24px", + "fontSize": "14px" + }, + "type": "typography" } }, "spacing": { @@ -2301,6 +2732,14 @@ export default { } }, "gap": { + "1xsm": { + "value": "{global.spacing.gap.1xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, "value": "8px", "type": "spacing" } @@ -2312,11 +2751,11 @@ export default { "type": "color" }, "hover": { - "value": "#F8F9FB", + "value": "#F1FFBD", "type": "color" }, "down": { - "value": "#F2F4F8", + "value": "#E2FF7A", "type": "color" }, "active": { @@ -2340,6 +2779,21 @@ export default { "type": "color" } } + }, + "shadow": { + "default": { + "value": [ + { + "color": "#21272a14", + "type": "dropShadow", + "x": 0, + "y": 10, + "blur": 36, + "spread": 0 + } + ], + "type": "boxShadow" + } } }, "score": { @@ -2709,9 +3163,8 @@ export default { "type": "color" }, "default--alt": { - "value": "{global.content.color.secondary.emphasis}", - "type": "color", - "failedToResolve": true + "value": "#343A3F", + "type": "color" } } } @@ -3205,6 +3658,10 @@ export default { "xlgm": { "value": "52px", "type": "spacing" + }, + "lg": { + "value": "24px", + "type": "spacing" } }, "gap": { @@ -3226,6 +3683,28 @@ export default { "default": { "value": "#0C1F22", "type": "color" + }, + "hover": { + "value": "#ffffff", + "type": "color" + }, + "active": { + "value": "#ffffff", + "type": "color" + } + }, + "sub": { + "default": { + "value": "#ffffff", + "type": "color" + }, + "hover": { + "value": "#ffffff", + "type": "color" + }, + "active": { + "value": "#ffffff", + "type": "color" } } }, @@ -3246,6 +3725,17 @@ export default { "fontSize": "14px" }, "type": "typography" + }, + "typo": { + "md": { + "value": { + "fontFamily": "Albert Sans", + "fontWeight": 500, + "fontSize": "14px", + "lineHeight": "20px" + }, + "type": "typography" + } } }, "background": { @@ -3263,6 +3753,20 @@ export default { "value": "#E2FF7A", "type": "color" } + }, + "sub": { + "default": { + "value": "#0C1F22", + "type": "color" + }, + "hover": { + "value": "#B4E600", + "type": "color" + }, + "active": { + "value": "#B4E600", + "type": "color" + } } } }, @@ -3373,6 +3877,10 @@ export default { "completed": { "value": "#343A3F", "type": "color" + }, + "default": { + "value": "#878D96", + "type": "color" } } }, @@ -3389,6 +3897,10 @@ export default { "xsm": { "value": "8px", "type": "spacing" + }, + "md": { + "value": "16px", + "type": "spacing" } } }, @@ -3999,22 +4511,36 @@ export default { "type": "spacing" } } - }, - "gap": { - "value": "16px", - "type": "spacing" + }, + "gap": { + "md": { + "value": "8px", + "type": "spacing" + }, + "lg": { + "value": "16px", + "type": "spacing" + }, + "xlg": { + "value": "24px", + "type": "spacing" + } } }, "content": { "color": { "emphasis": { - "value": "#343A3F", + "value": "#2F463F", "type": "color" }, "default": { "value": "#4D5358", "type": "color" }, + "subje": { + "value": "#343A3F", + "type": "color" + }, "muted": { "value": "#878D96", "type": "color" @@ -4029,8 +4555,8 @@ export default { "value": { "fontFamily": "Albert Sans", "fontWeight": 500, - "lineHeight": 20, - "fontSize": 18 + "lineHeight": "24px", + "fontSize": "18px" }, "type": "typography" }, @@ -4059,14 +4585,22 @@ export default { "default": { "value": "#ffffff", "type": "color" + }, + "cover": { + "value": "#F2F4F8", + "type": "color" } } }, "border": { "color": { - "subtle": { + "defaut": { "value": "#878D96", "type": "color" + }, + "subtle": { + "value": "#DDE1E6", + "type": "color" } }, "radius": { @@ -4186,20 +4720,6 @@ export default { } } } - }, - "border": { - "color": { - "primary": { - "hover": { - "value": "#ffffff", - "type": "color" - } - } - }, - "sm": { - "value": "1px", - "type": "borderWidth" - } } }, "global": { @@ -4292,6 +4812,18 @@ export default { "default": { "value": "#0C1F22", "type": "color" + }, + "emphasis": { + "value": "#343A3F", + "type": "color" + }, + "muted": { + "value": "#878D96", + "type": "color" + }, + "subtle": { + "value": "#F2F4F8", + "type": "color" } }, "negative": { @@ -4561,6 +5093,33 @@ export default { "fontSize": "12px" }, "type": "typography" + }, + "lg--bold": { + "value": { + "fontFamily": "Albert Sans", + "fontWeight": 500, + "lineHeight": "24px", + "fontSize": "18px" + }, + "type": "typography" + }, + "md--bold": { + "value": { + "fontFamily": "Albert Sans", + "fontWeight": 500, + "lineHeight": "24px", + "fontSize": "16px" + }, + "type": "typography" + }, + "sm--bold": { + "value": { + "fontFamily": "Albert Sans", + "fontWeight": 500, + "lineHeight": "20px", + "fontSize": "14px" + }, + "type": "typography" } }, "caption": { @@ -4738,12 +5297,32 @@ export default { "default": { "value": "#0C1F22", "type": "color" + }, + "emphasis": { + "value": "#343A3F", + "type": "color" + }, + "muted": { + "value": "#878D96", + "type": "color" + }, + "subtle": { + "value": "#F8F9FB", + "type": "color" } }, "accent": { "default": { "value": "#FF5470", "type": "color" + }, + "emphasis": { + "value": "#ebeb00", + "type": "color" + }, + "subtle": { + "value": "#ffffe0", + "type": "color" } }, "negative": { @@ -4920,6 +5499,18 @@ export default { "default": { "value": "#0C1F22", "type": "color" + }, + "emphasis": { + "value": "#343A3F", + "type": "color" + }, + "muted": { + "value": "#878D96", + "type": "color" + }, + "subtle": { + "value": "#F8F9FB", + "type": "color" } }, "negative": { @@ -4968,9 +5559,8 @@ export default { "type": "color" }, "muted": { - "value": "{core.color.neutral.75}", - "type": "color", - "failedToResolve": true + "value": "#f0f4f9", + "type": "color" } }, "overlay": { @@ -5101,6 +5691,10 @@ export default { "type": "spacing" }, "xlg": { + "value": "24px", + "type": "spacing" + }, + "xxlg": { "value": "32px", "type": "spacing" } @@ -5194,6 +5788,92 @@ export default { }, "type": "boxShadow" } + }, + "shadow": { + "100": { + "value": [ + { + "color": "#dde1e614", + "type": "dropShadow", + "x": 0, + "y": 2, + "blur": 0, + "spread": 0 + }, + { + "color": "#1a202b14", + "type": "dropShadow", + "x": 0, + "y": 10, + "blur": 36, + "spread": 0 + } + ], + "type": "boxShadow" + }, + "200": { + "value": [ + { + "color": "#dde1e629", + "type": "dropShadow", + "x": 0, + "y": 2, + "blur": 0, + "spread": 0 + }, + { + "color": "#1a202b1f", + "type": "dropShadow", + "x": 0, + "y": 10, + "blur": 36, + "spread": 0 + } + ], + "type": "boxShadow" + }, + "300": { + "value": [ + { + "color": "#dde1e63d", + "type": "dropShadow", + "x": 0, + "y": 2, + "blur": 0, + "spread": 0 + }, + { + "color": "#1a202b29", + "type": "dropShadow", + "x": 0, + "y": 10, + "blur": 36, + "spread": 0 + } + ], + "type": "boxShadow" + }, + "400": { + "value": [ + { + "color": "#dde1e614", + "type": "dropShadow", + "x": -100, + "y": 0, + "blur": 60, + "spread": 0 + }, + { + "color": "#1a202b0d", + "type": "dropShadow", + "x": -32, + "y": 0, + "blur": 32, + "spread": 0 + } + ], + "type": "boxShadow" + } } }, "core": { @@ -5211,6 +5891,10 @@ export default { "value": "#F8F9FB", "type": "color" }, + "75": { + "value": "#f0f4f9", + "type": "color" + }, "100": { "value": "#F2F4F8", "type": "color" @@ -5268,6 +5952,22 @@ export default { "500": { "value": "#4A6000", "type": "color" + }, + "600": { + "value": "#1760cf", + "type": "color" + }, + "700": { + "value": "#134faa", + "type": "color" + }, + "800": { + "value": "#10428e", + "type": "color" + }, + "900": { + "value": "#0d3877", + "type": "color" } }, "danger": { @@ -5438,6 +6138,74 @@ export default { "100": { "value": "#FF5470", "type": "color" + }, + "200": { + "value": "hsla(60,100%,102%,1)", + "type": "color" + }, + "300": { + "value": "#ffffe0", + "type": "color" + }, + "400": { + "value": "#ffffb8", + "type": "color" + }, + "500": { + "value": "#ffff8f", + "type": "color" + }, + "600": { + "value": "#ffff66", + "type": "color" + }, + "700": { + "value": "#ffff3d", + "type": "color" + }, + "800": { + "value": "#ffff14", + "type": "color" + }, + "900": { + "value": "#ebeb00", + "type": "color" + } + }, + "customPrimary": { + "hue": { + "value": 216, + "type": "color" + }, + "saturation": { + "value": 80, + "type": "color" + }, + "lightness": { + "value": 55, + "type": "color" + }, + "hsla": { + "value": "#307ae8", + "type": "color" + } + }, + "customAccent": { + "hue": { + "value": 60, + "type": "color" + }, + "saturation": { + "value": 100, + "type": "color" + }, + "lightness": { + "value": 78, + "type": "color" + }, + "hsla": { + "value": "#ffff8f", + "type": "color" } } }, @@ -5648,6 +6416,14 @@ export default { "semiBold": { "value": 600, "type": "fontWeights" + }, + "light": { + "value": 300, + "type": "fontWeights" + }, + "bold": { + "value": 600, + "type": "fontWeights" } }, "lineHeight": { @@ -5800,56 +6576,46 @@ export default { }, "up": { "1": { - "value": "roundTo({core.color.customPrimary.lightness} * 1.21)", - "type": "other", - "failedToResolve": true + "value": 67, + "type": "other" }, "2": { - "value": "roundTo(roundTo({core.color.customPrimary.lightness} * 1.21) * 1.21)", - "type": "other", - "failedToResolve": true + "value": 81, + "type": "other" }, "3": { - "value": "roundTo(roundTo(roundTo({core.color.customPrimary.lightness} * 1.21) * 1.21) * 1.21)", - "type": "other", - "failedToResolve": true + "value": 98, + "type": "other" }, "4": { - "value": "roundTo(roundTo(roundTo(roundTo({core.color.customPrimary.lightness} * 1.21) * 1.21) * 1.21) * 1.21)", - "type": "other", - "failedToResolve": true + "value": 119, + "type": "other" }, "5": { - "value": "roundTo(roundTo(roundTo(roundTo(roundTo({core.color.customPrimary.lightness} * 1.21) * 1.21) * 1.21) * 1.21) * 1.21)", - "type": "other", - "failedToResolve": true + "value": 144, + "type": "other" } }, "down": { "1": { - "value": "roundTo({core.color.customPrimary.lightness} / 1.21)", - "type": "other", - "failedToResolve": true + "value": 45, + "type": "other" }, "2": { - "value": "roundTo(roundTo({core.color.customPrimary.lightness} / 1.21) / 1.21)", - "type": "other", - "failedToResolve": true + "value": 37, + "type": "other" }, "3": { - "value": "roundTo(roundTo(roundTo({core.color.customPrimary.lightness} / 1.21) / 1.21) / 1.21)", - "type": "other", - "failedToResolve": true + "value": 31, + "type": "other" }, "4": { - "value": "roundTo(roundTo(roundTo(roundTo({core.color.customPrimary.lightness} / 1.21) / 1.21) / 1.21) / 1.21)", - "type": "other", - "failedToResolve": true + "value": 26, + "type": "other" }, "5": { - "value": "roundTo( roundTo(roundTo(roundTo(roundTo({core.color.customPrimary.lightness} / 1.21) / 1.21) / 1.21) / 1.21) / 1.21)", - "type": "other", - "failedToResolve": true + "value": 21, + "type": "other" } } } @@ -5862,49 +6628,49 @@ export default { }, "up": { "1": { - "value": "{core.color.customAccent.lightness} + 8", - "type": "other", - "failedToResolve": true + "value": 86, + "type": "other" }, "2": { - "value": "{core.color.customAccent.lightness} + 8 + 8", - "type": "other", - "failedToResolve": true + "value": 94, + "type": "other" }, "3": { - "value": "{core.color.customAccent.lightness} + 8 + 8 + 8", - "type": "other", - "failedToResolve": true + "value": 102, + "type": "other" }, "4": { - "value": "{core.color.customAccent.lightness} + 8 + 8 + 8 + 8", - "type": "other", - "failedToResolve": true + "value": 110, + "type": "other" } }, "down": { "1": { - "value": "{core.color.customAccent.lightness} - 8", - "type": "other", - "failedToResolve": true + "value": 70, + "type": "other" }, "2": { - "value": "{core.color.customAccent.lightness} - 8 - 8", - "type": "other", - "failedToResolve": true + "value": 62, + "type": "other" }, "3": { - "value": "{core.color.customAccent.lightness} - 8 - 8 - 8", - "type": "other", - "failedToResolve": true + "value": 54, + "type": "other" }, "4": { - "value": "{core.color.customAccent.lightness} - 8 - 8 - 8 - 8", - "type": "other", - "failedToResolve": true + "value": 46, + "type": "other" } } } + }, + "colorDebug": { + "value": "#9747FF", + "type": "color" + }, + "debugColorContainer": { + "value": "#ebdcff", + "type": "color" } }, "font": { From 11d2d2bb74f406d12f53baca6f52fe59d62cb12a Mon Sep 17 00:00:00 2001 From: fermarinsanchez Date: Sat, 21 Oct 2023 23:43:42 +0200 Subject: [PATCH 2/9] refactor(Button): Primary done Ref: #issue/BubblesDS-5 --- .../src/form/Button/Button.styles.js | 24 ++++++++++++------- packages/components/src/theme.mixins.js | 7 ++++++ 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/packages/components/src/form/Button/Button.styles.js b/packages/components/src/form/Button/Button.styles.js index 1aed095e5..e415a6e8c 100644 --- a/packages/components/src/form/Button/Button.styles.js +++ b/packages/components/src/form/Button/Button.styles.js @@ -1,5 +1,5 @@ import { createStyles } from '@mantine/styles'; -import { getBoxShadowFromToken } from './../../theme.mixins'; +import { getBoxShadowFromToken, getFocusDefaultBorder } from './../../theme.mixins'; const getSizes = (size, theme) => { const buttonPadding = theme.other.button.spacing.padding; @@ -18,7 +18,7 @@ const getVariant = (variant, theme, color) => { borderColor: 'transparent', backgroundColor: 'transparent', }; - const buttonTypo = buttonTheme.content.default; + const buttonTypoDefault = buttonTheme.content.default; const buttonTypoHover = buttonTheme.content.hover; const variants = { @@ -27,22 +27,28 @@ const getVariant = (variant, theme, color) => { backgroundColor: buttonTheme.background.color.primary.default, border: 'none', color: buttonTheme.content.color.primary.default, - // ...buttonTypo, + ...buttonTypoDefault, '&:focus-visible': { - ...getBoxShadowFromToken(theme.other.global.focus.default), backgroundColor: buttonTheme.background.color.primary.hover, - borderColor: buttonTheme.border.color.primary.hover, + ...getFocusDefaultBorder(theme), outline: 'none', + '& > div > span': { + ...buttonTypoHover, + }, }, '&:hover': { backgroundColor: buttonTheme.background.color.primary.hover, ...getBoxShadowFromToken(buttonTheme.shadow.hover), - fontWeight: '700 !important', - ...buttonTypoHover, + '& > div > span': { + ...buttonTypoHover, + }, }, '&:active': { - backgroundColor: buttonTheme.background.color.primary.down, - borderColor: buttonTheme.border.color.primary.down, + backgroundColor: buttonTheme.background.color.primary.pressed, + boxShadow: 'none', + '& > div > span': { + ...buttonTypoDefault, + }, }, }, secondary: { diff --git a/packages/components/src/theme.mixins.js b/packages/components/src/theme.mixins.js index ea2731530..b233ef0d4 100644 --- a/packages/components/src/theme.mixins.js +++ b/packages/components/src/theme.mixins.js @@ -5,6 +5,13 @@ function round25(x) { return parseFloat(intPart + '.' + String(Math.round(parseInt(floatPart) / 25) * 25)); } +export const getFocusDefaultBorder = (theme) => { + const focusDefaultBorder = theme.other.global.focus['default-border']; + return { + border: `${focusDefaultBorder.width} ${focusDefaultBorder.style} ${focusDefaultBorder.color}`, + }; +}; + export function pxToRem(val, rounded25) { const PX_TO_REM = 0.063; const rem = Math.floor(val * PX_TO_REM * 100) / 100; From db4c7291c3272fb71aa011d15f31900b23be216d Mon Sep 17 00:00:00 2001 From: fermarinsanchez Date: Sun, 22 Oct 2023 00:07:13 +0200 Subject: [PATCH 3/9] refactor(Button): Primary done with icons Ref: #issue/BubblesDS-5 --- .../src/form/Button/Button.styles.js | 28 +++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/packages/components/src/form/Button/Button.styles.js b/packages/components/src/form/Button/Button.styles.js index e415a6e8c..ba5a37206 100644 --- a/packages/components/src/form/Button/Button.styles.js +++ b/packages/components/src/form/Button/Button.styles.js @@ -11,6 +11,16 @@ const getSizes = (size, theme) => { } }; +const getPaddingIfIcon = (hasLeftIcon, hasRightIcon, theme) => { + if (!hasLeftIcon && !hasRightIcon) return; + const buttonPadding = theme.other.button.spacing.padding; + const iconLeftPadding = hasLeftIcon ? buttonPadding.horizontal.xs : buttonPadding.horizontal.sm; + const iconRightPadding = hasRightIcon ? buttonPadding.horizontal.xs : buttonPadding.horizontal.sm; + return { + padding: `${buttonPadding.vertical.md} ${iconRightPadding} ${buttonPadding.vertical.md} ${iconLeftPadding}`, + }; +}; + const getVariant = (variant, theme, color) => { const buttonTheme = theme.other.button; @@ -306,7 +316,21 @@ const getVariant = (variant, theme, color) => { }; export const ButtonStyles = createStyles( - (theme, { size, color, variant, fullWidth, styles, rounded, textAlign, disabled }) => { + ( + theme, + { + size, + color, + variant, + fullWidth, + styles, + rounded, + textAlign, + disabled, + hasLeftIcon, + hasRightIcon, + } + ) => { const currentVariant = getVariant(variant, theme, color); const buttonTheme = theme.other.button; const iconStyles = { @@ -325,7 +349,6 @@ export const ButtonStyles = createStyles( disabledOverrides = { backgroundColor: variant === 'filled' ? theme.other.global.background.color.disabled : 'transparent', - borderColor: theme.other.global.background.color.disabled, color: theme.other.global.content.color.disabled, }; } @@ -340,6 +363,7 @@ export const ButtonStyles = createStyles( ...getSizes(size || 'md', theme), ...getVariant(variant, theme, color), ...styles, + ...getPaddingIfIcon(hasLeftIcon, hasRightIcon, theme), '&[data-loading]': { // borderColor: 'transparent', svg: { From 65775c60fa0c23b4c40629b47ac146eed09f9804 Mon Sep 17 00:00:00 2001 From: fermarinsanchez Date: Mon, 23 Oct 2023 12:57:34 +0200 Subject: [PATCH 4/9] refactor(Button): Button refactor done Ref: #issue/BubblesDS-5 --- .../src/form/Button/Button.constants.js | 49 +++ packages/components/src/form/Button/Button.js | 53 +--- .../src/form/Button/Button.stories.js | 4 +- .../src/form/Button/Button.styles.js | 283 ++++-------------- packages/components/src/theme.mixins.js | 5 +- 5 files changed, 117 insertions(+), 277 deletions(-) create mode 100644 packages/components/src/form/Button/Button.constants.js diff --git a/packages/components/src/form/Button/Button.constants.js b/packages/components/src/form/Button/Button.constants.js new file mode 100644 index 000000000..dab57a3ea --- /dev/null +++ b/packages/components/src/form/Button/Button.constants.js @@ -0,0 +1,49 @@ +import PropTypes from 'prop-types'; + +export const BUTTON_SIZES = ['sm', 'md']; +// export const BUTTON_VARIANTS = ['filled', 'outline', 'link', 'light']; +export const BUTTON_VARIANTS = ['filled', 'outline', 'link']; +// export const BUTTON_COLORS = ['primary', 'secondary', 'terciary', 'phatic']; +export const BUTTON_COLORS = ['primary']; +// export const BUTTON_TEXT_ALIGN = ['left', 'center', 'right', 'appart']; +export const BUTTON_TEXT_ALIGN = ['center']; +export const BUTTON_DEFAULT_PROPS = { + color: BUTTON_COLORS[0], + size: BUTTON_SIZES[1], + variant: BUTTON_VARIANTS[0], + rounded: false, + loading: false, + fullWidth: false, + disabled: false, + textAlign: BUTTON_TEXT_ALIGN[0], + useAria: true, +}; + +export const BUTTON_PROP_TYPES = { + /** Controls the button size. */ + size: PropTypes.string, // PropTypes.oneOf(BUTTON_SIZES), + /** Controls the button colors. */ + color: PropTypes.oneOf(BUTTON_COLORS), + /** Controls the button variants. */ + variant: PropTypes.oneOf(BUTTON_VARIANTS), + /** Controls the space and position between elements inside the button */ + textAlign: PropTypes.oneOf(BUTTON_TEXT_ALIGN), + /** Controls the border radius */ + rounded: PropTypes.bool, + /** Controls if is loading */ + loading: PropTypes.bool, + /** Adds icon before button label */ + leftIcon: PropTypes.node, + /** Adds icon after button label, */ + rightIcon: PropTypes.node, + /** Sets button width to 100% of parent element */ + fullWidth: PropTypes.bool, + /** Controls if the button is compact */ + compact: PropTypes.bool, + /** Controls the disabled state */ + disabled: PropTypes.bool, + /** Controls if Button uses aria role */ + useAria: PropTypes.bool, + /** Aria label for button */ + ariaLabel: PropTypes.string, +}; diff --git a/packages/components/src/form/Button/Button.js b/packages/components/src/form/Button/Button.js index 8de749889..987baa244 100644 --- a/packages/components/src/form/Button/Button.js +++ b/packages/components/src/form/Button/Button.js @@ -1,23 +1,13 @@ import React, { forwardRef } from 'react'; -import PropTypes from 'prop-types'; import { Button as MantineButton } from '@mantine/core'; import { ButtonStyles } from './Button.styles'; - -export const BUTTON_SIZES = ['sm', 'md']; -export const BUTTON_VARIANTS = ['filled', 'outline', 'link', 'light']; -export const BUTTON_COLORS = ['primary', 'secondary', 'terciary', 'phatic']; -export const BUTTON_TEXT_ALIGN = ['left', 'center', 'right', 'appart']; -export const BUTTON_DEFAULT_PROPS = { - color: BUTTON_COLORS[0], - size: BUTTON_SIZES[1], - variant: BUTTON_VARIANTS[0], - rounded: false, - loading: false, - fullWidth: false, - disabled: false, - textAlign: BUTTON_TEXT_ALIGN[1], - useAria: true, -}; +import { + BUTTON_DEFAULT_PROPS, + BUTTON_SIZES, + BUTTON_VARIANTS, + BUTTON_COLORS, + BUTTON_PROP_TYPES, +} from './Button.constants'; export const Button = forwardRef( ( @@ -96,31 +86,4 @@ export const Button = forwardRef( Button.defaultProps = BUTTON_DEFAULT_PROPS; -Button.propTypes = { - /** Controls the button size. */ - size: PropTypes.string, // PropTypes.oneOf(BUTTON_SIZES), - /** Controls the button colors. */ - color: PropTypes.oneOf(BUTTON_COLORS), - /** Controls the button variants. */ - variant: PropTypes.oneOf(BUTTON_VARIANTS), - /** Controls the space and position between elements inside the button */ - textAlign: PropTypes.oneOf(BUTTON_TEXT_ALIGN), - /** Controls the border radius */ - rounded: PropTypes.bool, - /** Controls if is loading */ - loading: PropTypes.bool, - /** Adds icon before button label */ - leftIcon: PropTypes.node, - /** Adds icon after button label, */ - rightIcon: PropTypes.node, - /** Sets button width to 100% of parent element */ - fullWidth: PropTypes.bool, - /** Controls if the button is compact */ - compact: PropTypes.bool, - /** Controls the disabled state */ - disabled: PropTypes.bool, - /** Controls if Button uses aria role */ - useAria: PropTypes.bool, - /** Aria label for button */ - ariaLabel: PropTypes.string, -}; +Button.propTypes = BUTTON_PROP_TYPES; diff --git a/packages/components/src/form/Button/Button.stories.js b/packages/components/src/form/Button/Button.stories.js index 05c289d96..df0f9e7b2 100644 --- a/packages/components/src/form/Button/Button.stories.js +++ b/packages/components/src/form/Button/Button.stories.js @@ -1,12 +1,12 @@ import React from 'react'; import { AddIcon } from '@bubbles-ui/icons/outline'; +import { Button } from './Button'; import { - Button, BUTTON_SIZES, BUTTON_VARIANTS, BUTTON_COLORS, BUTTON_DEFAULT_PROPS, -} from './Button'; +} from './Button.constants'; import mdx from './Button.mdx'; export default { diff --git a/packages/components/src/form/Button/Button.styles.js b/packages/components/src/form/Button/Button.styles.js index ba5a37206..dcecf00b6 100644 --- a/packages/components/src/form/Button/Button.styles.js +++ b/packages/components/src/form/Button/Button.styles.js @@ -3,12 +3,10 @@ import { getBoxShadowFromToken, getFocusDefaultBorder } from './../../theme.mixi const getSizes = (size, theme) => { const buttonPadding = theme.other.button.spacing.padding; - if (size === 'md') { - return { - height: 'unset', - padding: `${buttonPadding.vertical[size]} ${buttonPadding.horizontal.sm}`, - }; - } + return { + height: 'unset', + padding: `${buttonPadding.vertical.md} ${buttonPadding.horizontal.sm}`, + }; }; const getPaddingIfIcon = (hasLeftIcon, hasRightIcon, theme) => { @@ -23,11 +21,10 @@ const getPaddingIfIcon = (hasLeftIcon, hasRightIcon, theme) => { const getVariant = (variant, theme, color) => { const buttonTheme = theme.other.button; - - const commonLinkStyles = { - borderColor: 'transparent', - backgroundColor: 'transparent', - }; + // const commonLinkStyles = { + // borderColor: 'transparent', + // backgroundColor: 'transparent', + // }; const buttonTypoDefault = buttonTheme.content.default; const buttonTypoHover = buttonTheme.content.hover; @@ -61,209 +58,69 @@ const getVariant = (variant, theme, color) => { }, }, }, - secondary: { - backgroundColor: buttonTheme.background.color.secondary.default, - borderColor: buttonTheme.border.color.secondary.default, - color: buttonTheme.content.color.secondary['default--reverse'], - '&:focus-visible': { - ...getBoxShadowFromToken(theme.other.global.focus.default), - backgroundColor: buttonTheme.background.color.secondary.hover, - borderColor: buttonTheme.border.color.secondary.hover, - outline: 'none', - }, - '&:hover': { - backgroundColor: buttonTheme.background.color.secondary.hover, - borderColor: buttonTheme.border.color.secondary.hover, - }, - '&:active': { - backgroundColor: buttonTheme.background.color.secondary.down, - borderColor: buttonTheme.border.color.secondary.down, - }, - }, - terciary: { - backgroundColor: buttonTheme.background.color.terciary.default, - borderColor: buttonTheme.border.color.terciary.default, - color: buttonTheme.content.color.terciary['default--reverse'], - '&:focus-visible': { - ...getBoxShadowFromToken(theme.other.global.focus.default), - backgroundColor: buttonTheme.background.color.terciary.hover, - borderColor: buttonTheme.border.color.terciary.hover, - outline: 'none', - }, - '&:hover': { - backgroundColor: buttonTheme.background.color.terciary.hover, - borderColor: buttonTheme.border.color.terciary.hover, - }, - '&:active': { - backgroundColor: buttonTheme.background.color.terciary.down, - borderColor: buttonTheme.border.color.terciary.down, - }, - }, - phatic: { - backgroundColor: buttonTheme.background.color.phatic.default, - borderColor: buttonTheme.border.color.phatic.default, - color: buttonTheme.content.color.phatic.default, - '&:focus-visible': { - ...getBoxShadowFromToken(theme.other.global.focus.default), - backgroundColor: buttonTheme.background.color.phatic.hover, - borderColor: buttonTheme.border.color.phatic.hover, - color: buttonTheme.content.color.phatic.hover, - outline: 'none', - }, - '&:hover': { - backgroundColor: buttonTheme.background.color.phatic.hover, - borderColor: buttonTheme.border.color.phatic.hover, - color: buttonTheme.content.color.phatic.hover, - }, - '&:active': { - backgroundColor: buttonTheme.background.color.phatic.down, - borderColor: buttonTheme.border.color.phatic.down, - color: buttonTheme.content.color.phatic.down, - }, - }, }, outline: { primary: { backgroundColor: theme.other.global.background.color.transparent, - borderColor: buttonTheme.border.color.primary.default, - color: buttonTheme.content.color.primary.default, - '&:focus-visible': { - ...getBoxShadowFromToken(theme.other.global.focus.default), - backgroundColor: theme.other.global.background.color.overlay.default, - borderColor: buttonTheme.border.color.primary.hover, - color: buttonTheme.content.color.primary.hover, - outline: 'none', - }, - '&:hover': { - backgroundColor: theme.other.global.background.color.overlay.default, - borderColor: buttonTheme.border.color.primary.hover, - color: buttonTheme.content.color.primary.hover, - }, - '&:active': { - backgroundColor: theme.other.global.background.color.transparent, - borderColor: buttonTheme.border.color.primary.down, - color: buttonTheme.content.color.primary.down, - }, - }, - secondary: { - backgroundColor: theme.other.global.background.color.transparent, - borderColor: buttonTheme.border.color.secondary.default, + border: `${buttonTheme.border.width} solid ${buttonTheme.border.color.secondary.default}`, color: buttonTheme.content.color.secondary.default, '&:focus-visible': { ...getBoxShadowFromToken(theme.other.global.focus.default), - backgroundColor: theme.other.global.background.color.overlay.default, - borderColor: buttonTheme.border.color.secondary.hover, - color: buttonTheme.content.color.secondary.hover, - outline: 'none', - }, - '&:hover': { - backgroundColor: theme.other.global.background.color.overlay.default, - borderColor: buttonTheme.border.color.secondary.hover, - color: buttonTheme.content.color.secondary.hover, - }, - '&:active': { - backgroundColor: theme.other.global.background.color.transparent, - borderColor: buttonTheme.border.color.secondary.down, - color: buttonTheme.content.color.secondary.down, - }, - }, - terciary: { - backgroundColor: theme.other.global.background.color.transparent, - borderColor: buttonTheme.border.color.terciary.default, - color: buttonTheme.content.color.terciary.default, - '&:focus-visible': { - ...getBoxShadowFromToken(theme.other.global.focus.default), - backgroundColor: theme.other.global.background.color.overlay.default, - borderColor: buttonTheme.border.color.terciary.hover, - color: buttonTheme.content.color.terciary.hover, - outline: 'none', - }, - '&:hover': { - backgroundColor: theme.other.global.background.color.overlay.default, - borderColor: buttonTheme.border.color.terciary.hover, - color: buttonTheme.content.color.terciary.hover, - }, - '&:active': { - backgroundColor: theme.other.global.background.color.transparent, - borderColor: buttonTheme.border.color.terciary.down, - color: buttonTheme.content.color.terciary.down, - }, - }, - phatic: { - backgroundColor: theme.other.global.background.color.transparent, - borderColor: buttonTheme.border.color.phatic['default-reverse'], - color: buttonTheme.content.color.phatic.default, - '&:focus-visible': { - ...getBoxShadowFromToken(theme.other.global.focus.default), - backgroundColor: buttonTheme.background.color.phatic.hover, - borderColor: buttonTheme.border.color.phatic.hover, - color: buttonTheme.content.color.phatic.hover, + borderColor: buttonTheme.border.color.primary.hover, outline: 'none', + '& > div > span': { + ...buttonTypoHover, + }, }, '&:hover': { - backgroundColor: buttonTheme.background.color.phatic.hover, - borderColor: buttonTheme.border.color.phatic.hover, - color: buttonTheme.content.color.phatic.hover, + backgroundColor: buttonTheme.background.color.secondary.hover, + ...getBoxShadowFromToken(buttonTheme.shadow.hover), + '& > div > span': { + ...buttonTypoHover, + }, }, '&:active': { - backgroundColor: theme.other.global.background.color.transparent, - borderColor: buttonTheme.border.color.phatic.down, - color: buttonTheme.content.color.phatic.down, + backgroundColor: buttonTheme.background.color.secondary.press, + border: `${buttonTheme.border.width} solid ${buttonTheme.border.color.secondary.pressed}`, + color: buttonTheme.content.color.secondary.pressed, + ...getBoxShadowFromToken(buttonTheme.shadow.pressed), + '& > div > span': { + ...buttonTypoDefault, + }, }, }, }, link: { primary: { - color: buttonTheme.content.color.primary.default, - paddingInline: 0, - ...commonLinkStyles, - '&:hover': { - color: buttonTheme.content.color.primary.default, - textDecoration: 'none', - backgroundColor: 'transparent', - }, - }, - secondary: { color: buttonTheme.content.color.secondary.default, - paddingInline: 0, - ...commonLinkStyles, - '&:hover': { - color: buttonTheme.content.color.secondary.default, - textDecoration: 'none', - backgroundColor: 'transparent', - }, - }, - tertiary: { - color: buttonTheme.content.color.terciary.default, - paddingInline: 0, - ...commonLinkStyles, - '&:hover': { - color: buttonTheme.content.color.terciary.default, - textDecoration: 'none', - backgroundColor: 'transparent', + // paddingInline: 0, + border: 'none', + textAlign: 'center', + textDecoration: buttonTheme.textDecoration.underLine, + backgroundColor: buttonTheme.background.color.ghost.default, + // ...commonLinkStyles, + '&:focus-visible': { + backgroundColor: buttonTheme.background.color.ghost.hover, + ...getFocusDefaultBorder(theme), + outline: 'none', + '& > div > span': { + ...buttonTypoHover, + }, }, - }, - negative: { - color: theme.colors.text07, - paddingInline: 0, - ...commonLinkStyles, '&:hover': { - opacity: '0.8', - textDecoration: 'none', - backgroundColor: 'transparent', + color: buttonTheme.content.color.primary.default, + backgroundColor: buttonTheme.background.color.ghost.hover, + '& > div > span': { + ...buttonTypoHover, + }, }, '&:active': { - color: theme.colors.text07, - }, - }, - phatic: { - color: theme.colors.fatic01, - paddingInline: 0, - ...commonLinkStyles, - '&:hover': { - opacity: '0.8', - textDecoration: 'none', - backgroundColor: 'transparent', + backgroundColor: buttonTheme.background.color.ghost.pressed, + border: 'none', + color: buttonTheme.content.color.secondary.pressed, + '& > div > span': { + ...buttonTypoDefault, + }, }, }, }, @@ -271,45 +128,12 @@ const getVariant = (variant, theme, color) => { primary: { color: buttonTheme.content.color.terciary['default--reverse'], backgroundColor: 'transparent', - ...commonLinkStyles, + // ...commonLinkStyles, '&:hover': { color: buttonTheme.content.color.terciary['default--reverse'], backgroundColor: buttonTheme.background.color.terciary.default, }, }, - secondary: { - color: theme.colors.interactive02, - backgroundColor: 'transparent', - ...commonLinkStyles, - '&:hover': { - color: theme.colors.interactive02h, - backgroundColor: theme.colors.interactive03, - }, - }, - tertiary: { - color: theme.colors.text02, - backgroundColor: 'transparent', - ...commonLinkStyles, - '&:hover': { - backgroundColor: theme.colors.interactive03h, - }, - }, - negative: { - color: theme.colors.text07, - backgroundColor: 'transparent', - ...commonLinkStyles, - '&:hover': { - opacity: '0.8', - }, - }, - phatic: { - color: theme.colors.fatic01, - backgroundColor: 'transparent', - ...commonLinkStyles, - '&:hover': { - backgroundColor: theme.colors.fatic01v0, - }, - }, }, }; return variants[variant][color]; @@ -347,9 +171,12 @@ export const ButtonStyles = createStyles( let disabledOverrides = {}; if (disabled) { disabledOverrides = { - backgroundColor: - variant === 'filled' ? theme.other.global.background.color.disabled : 'transparent', + backgroundColor: theme.other.global.background.color.disabled, color: theme.other.global.content.color.disabled, + border: + variant === 'outline' + ? `${buttonTheme.border.width} solid ${theme.other.global.border.color.disabled.default}` + : 'none', }; } diff --git a/packages/components/src/theme.mixins.js b/packages/components/src/theme.mixins.js index b233ef0d4..d46f025a7 100644 --- a/packages/components/src/theme.mixins.js +++ b/packages/components/src/theme.mixins.js @@ -67,8 +67,9 @@ export function getBoxShadowFromToken(tokens) { const boxShadowString = boxShadows.join(','); return { boxShadow: boxShadowString }; } else { - const { x, y, blur, spread, color } = tokens; - return { boxShadow: `${x}px ${y}px ${blur}px ${spread}px ${color}` }; + const { x, y, blur, spread, color, type } = tokens; + const typeInset = type === 'innerShadow' ? 'inset' : ''; + return { boxShadow: `${x}px ${y}px ${blur}px ${spread}px ${color} ${typeInset}` }; } } From 04704ab45c90aeab6281f9a3193d5822636584f5 Mon Sep 17 00:00:00 2001 From: fermarinsanchez Date: Mon, 23 Oct 2023 14:28:24 +0200 Subject: [PATCH 5/9] refactor(ActionButton): ActionButton refactor done Ref: #issue/BubblesDS-5 --- .eslintrc.json | 91 +++++++++++++++---- .../ActionButton/ActionButton.constants.js | 28 ++++++ .../src/form/ActionButton/ActionButton.js | 33 ++----- .../form/ActionButton/ActionButton.stories.js | 4 +- .../form/ActionButton/ActionButton.styles.js | 63 +++---------- 5 files changed, 121 insertions(+), 98 deletions(-) create mode 100644 packages/components/src/form/ActionButton/ActionButton.constants.js diff --git a/.eslintrc.json b/.eslintrc.json index b8fdc313e..ef9eea81e 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,39 +1,92 @@ { "env": { "browser": true, + "commonjs": true, "es2021": true, - "node": true, - "jest": true + "node": true }, "globals": { "leemons": true }, - "extends": [ - "plugin:react/recommended", - "airbnb-base", - "prettier" - ], - "parser": "babel-eslint", + "extends": ["plugin:react/recommended", "plugin:sonarjs/recommended", "airbnb-base", "prettier"], + "settings": { + "react": { + "version": "detect" + } + }, + "parser": "@babel/eslint-parser", "parserOptions": { + "requireConfigFile": false, + "babelOptions": { + "babelrc": false, + "configFile": false, + "presets": ["@babel/preset-env"], + "plugins": ["@babel/plugin-syntax-jsx"] + }, + "ecmaVersion": 2020, "ecmaFeatures": { "jsx": true - }, - "ecmaVersion": 12, - "sourceType": "module" + } }, - "plugins": [ - "react", - "import", - "prettier" - ], + "plugins": ["react", "sonarjs", "import", "prettier"], "rules": { "no-plusplus": "off", "import/no-dynamic-requires": "off", "import/no-extraneous-dependencies": "off", "react/react-in-jsx-scope": "off", "no-underscore-dangle": "off", - "prettier/prettier": ["error", {}, { - "usePrettierrc": true - }] + "prettier/prettier": [ + 2, + {}, + { + "usePrettierrc": true + } + ], + "import/no-names-as-default": "off", + "import/no-unresolved": [ + 2, + { + "ignore": [ + "@academic-calendar", + "@academic-portfolio", + "@admin", + "@assignables", + "@attendance-control", + "@board-messages", + "@calendar", + "@common", + "@comunica", + "@content-creator", + "@curriculum", + "@dashboard", + "@dataset", + "@emails", + "@emails-aws-ses", + "@emails-smtp", + "@families", + "@families-emergency-numbers", + "@feedback", + "@fundae", + "@grades", + "@layout", + "@learning-paths", + "@leebrary", + "@menu-builder", + "@mqtt-aws-iot", + "@mqtt-socket-io", + "@multilanguage", + "@package-manager", + "@scores", + "@scorm", + "@tasks", + "@tests", + "@timetable", + "@users", + "@widgets", + "@xapi", + "@bubbles-ui" + ] + } + ] } } diff --git a/packages/components/src/form/ActionButton/ActionButton.constants.js b/packages/components/src/form/ActionButton/ActionButton.constants.js new file mode 100644 index 000000000..1bf2842c3 --- /dev/null +++ b/packages/components/src/form/ActionButton/ActionButton.constants.js @@ -0,0 +1,28 @@ +import PropTypes from 'prop-types'; + +export const ACTION_BUTTON_SIZES = ['sm', 'md']; +// export const ACTION_BUTTON_COLORS = ['primary', 'negative', 'phatic']; +export const ACTION_BUTTON_COLORS = ['primary']; + +export const ACTION_BUTTON_DEFAULT_PROPS = { + color: ACTION_BUTTON_COLORS[0], + size: ACTION_BUTTON_SIZES[1], + label: '', + rounded: false, + useAria: true, + active: false, +}; +export const ACTION_BUTTON_PROP_TYPES = { + /** Controls the size */ + size: PropTypes.oneOf(ACTION_BUTTON_SIZES), + /** Control the color */ + color: PropTypes.oneOf(ACTION_BUTTON_COLORS), + /** Control the tooltip of the button */ + tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), + /** Controls if ActionButton uses aria role */ + useAria: PropTypes.bool, + /** Aria label for ActionButton */ + ariaLabel: PropTypes.string, + /** Controls the visual state of the Button */ + active: PropTypes.bool, +}; diff --git a/packages/components/src/form/ActionButton/ActionButton.js b/packages/components/src/form/ActionButton/ActionButton.js index dd43346c6..d130d9ad3 100644 --- a/packages/components/src/form/ActionButton/ActionButton.js +++ b/packages/components/src/form/ActionButton/ActionButton.js @@ -1,35 +1,14 @@ import React, { forwardRef } from 'react'; -import PropTypes from 'prop-types'; import { isNil, isString } from 'lodash'; import { Button as MantineButton } from '@mantine/core'; import { ActionButtonStyles } from './ActionButton.styles'; import { Tooltip } from '../../overlay'; - -export const ACTION_BUTTON_SIZES = ['sm', 'md']; -export const ACTION_BUTTON_COLORS = ['primary', 'negative', 'phatic']; - -export const ACTION_BUTTON_DEFAULT_PROPS = { - color: ACTION_BUTTON_COLORS[0], - size: ACTION_BUTTON_SIZES[1], - label: '', - rounded: false, - useAria: true, - active: false, -}; -export const ACTION_BUTTON_PROP_TYPES = { - /** Controls the size */ - size: PropTypes.oneOf(ACTION_BUTTON_SIZES), - /** Control the color */ - color: PropTypes.oneOf(ACTION_BUTTON_COLORS), - /** Control the tooltip of the button */ - tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), - /** Controls if ActionButton uses aria role */ - useAria: PropTypes.bool, - /** Aria label for ActionButton */ - ariaLabel: PropTypes.string, - /** Controls the visual state of the Button */ - active: PropTypes.bool, -}; +import { + ACTION_BUTTON_SIZES, + ACTION_BUTTON_COLORS, + ACTION_BUTTON_DEFAULT_PROPS, + ACTION_BUTTON_PROP_TYPES, +} from './ActionButton.constants'; const TooltipComponent = ({ children, tooltip, useAria }) => { return isString(tooltip) && tooltip !== '' ? ( diff --git a/packages/components/src/form/ActionButton/ActionButton.stories.js b/packages/components/src/form/ActionButton/ActionButton.stories.js index d750c0ea1..72851abd0 100644 --- a/packages/components/src/form/ActionButton/ActionButton.stories.js +++ b/packages/components/src/form/ActionButton/ActionButton.stories.js @@ -1,11 +1,11 @@ import React from 'react'; import { ChevronRightIcon, ExpandDiagonalIcon } from '@bubbles-ui/icons/outline'; +import { ActionButton } from './ActionButton'; import { - ActionButton, ACTION_BUTTON_SIZES, ACTION_BUTTON_COLORS, ACTION_BUTTON_DEFAULT_PROPS, -} from './ActionButton'; +} from './ActionButton.constants'; import mdx from './ActionButton.mdx'; export default { diff --git a/packages/components/src/form/ActionButton/ActionButton.styles.js b/packages/components/src/form/ActionButton/ActionButton.styles.js index 730d32743..8ce074dd1 100644 --- a/packages/components/src/form/ActionButton/ActionButton.styles.js +++ b/packages/components/src/form/ActionButton/ActionButton.styles.js @@ -1,5 +1,5 @@ import { createStyles } from '@mantine/styles'; -import { pxToRem, getPaddings, getFontExpressive } from './../../theme.mixins'; +import { pxToRem, getFocusDefaultBorder } from './../../theme.mixins'; // These are really the styles when it is hovered, but they are applied when `active` prop is `true` const getActiveStyles = (theme, color) => { @@ -9,16 +9,6 @@ const getActiveStyles = (theme, color) => { borderColor: theme.border.color.primary.hover, color: `${theme.content.color.primary.hover} !important`, }, - negative: { - backgroundColor: theme.background.color.primary['hover--reverse'], - borderColor: theme.border.color.primary['hover--reverse'], - color: theme.content.color.primary['hover--reverse'], - }, - phatic: { - backgroundColor: theme.background.color.phatic.hover, - borderColor: theme.border.color.phatic.hover, - color: theme.content.color.phatic.hover, - }, }; return activeStyles[color]; }; @@ -30,50 +20,22 @@ const getSizes = (size, padding) => { }; const getVariant = (color, theme) => { + const buttonActionTheme = theme.other.buttonAction; const variants = { primary: { - backgroundColor: theme.background.color.primary.default, - borderColor: theme.border.color.primary.default, - color: theme.content.color.primary.default, + backgroundColor: buttonActionTheme.background.color.primary.default, + border: 'none', + color: buttonActionTheme.content.color.primary.default, '&:hover': { - backgroundColor: theme.background.color.primary.hover, - borderColor: theme.border.color.primary.hover, - color: theme.content.color.primary.hover, + backgroundColor: buttonActionTheme.background.color.primary.hover, }, '&:active': { - backgroundColor: theme.background.color.primary.down, - borderColor: theme.border.color.primary.down, - color: theme.content.color.primary.down, - }, - }, - negative: { - backgroundColor: theme.background.color.primary.default, - borderColor: theme.border.color.primary.default, - color: theme.content.color.primary['default--reverse'], - '&:hover': { - backgroundColor: theme.background.color.primary['hover--reverse'], - borderColor: theme.border.color.primary['hover--reverse'], - color: theme.content.color.primary['hover--reverse'], + backgroundColor: buttonActionTheme.background.color.primary.pressed, }, - '&:active': { - backgroundColor: theme.background.color.primary['down--reverse'], - borderColor: theme.border.color.primary['down--reverse'], - color: `${theme.content.color.primary['down--reverse']}`, - }, - }, - phatic: { - backgroundColor: theme.background.color.phatic.default, - borderColor: theme.border.color.phatic.default, - color: theme.content.color.phatic.default, - '&:hover': { - backgroundColor: theme.background.color.phatic.hover, - borderColor: theme.border.color.phatic.hover, - color: theme.content.color.phatic.hover, - }, - '&:active': { - backgroundColor: theme.background.color.phatic.down, - borderColor: theme.border.color.phatic.down, - color: theme.content.color.phatic.down, + '&:focus-visible': { + backgroundColor: buttonActionTheme.background.color.primary.hover, + ...getFocusDefaultBorder(theme), + outline: 'none', }, }, }; @@ -84,6 +46,7 @@ export const ActionButtonStyles = createStyles( (theme, { size, color, iconOnly, radius, active }) => { const actionButtonTheme = theme.other.buttonAction; const iconSize = size === 'md' ? 'lg' : 'md'; + console.log(theme); const isActive = active ? getActiveStyles(actionButtonTheme, color) : {}; @@ -93,7 +56,7 @@ export const ActionButtonStyles = createStyles( borderRadius: actionButtonTheme.border.radius[radius], ...actionButtonTheme.content.typo, ...getSizes(size || 'md', actionButtonTheme.spacing.padding), - ...getVariant(color, actionButtonTheme), + ...getVariant(color, theme), ...isActive, }, inner: { gap: iconOnly ? 0 : actionButtonTheme.spacing.gap }, From ff51e72ab461e269a5874d8832b26469ead6fa1a Mon Sep 17 00:00:00 2001 From: fermarinsanchez Date: Mon, 23 Oct 2023 14:39:09 +0200 Subject: [PATCH 6/9] refactor(ActionButton): ActionButton stories refactor Ref: #issue/BubblesDS-5 --- .../src/form/ActionButton/ActionButton.stories.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/src/form/ActionButton/ActionButton.stories.js b/packages/components/src/form/ActionButton/ActionButton.stories.js index 72851abd0..072713571 100644 --- a/packages/components/src/form/ActionButton/ActionButton.stories.js +++ b/packages/components/src/form/ActionButton/ActionButton.stories.js @@ -26,12 +26,12 @@ export default { }, }; -const Template = ({ test_showLeftIcon, test_showRightIcon, ...props }) => { +const Template = ({ testShowLeftIcon, testShowRightIcon, ...props }) => { return ( : null} - icon={test_showLeftIcon ? : null} + rightIcon={testShowRightIcon ? : null} + icon={testShowLeftIcon ? : null} {...props} /> ); @@ -42,6 +42,6 @@ export const Playground = Template.bind({}); Playground.args = { ...ACTION_BUTTON_DEFAULT_PROPS, tooltip: 'Expand', - test_showLeftIcon: true, - test_showRightIcon: false, + testShowLeftIcon: true, + testShowRightIcon: false, }; From d1c95539da879493a6a4d364b7cf3a33c91fbcc1 Mon Sep 17 00:00:00 2001 From: fermarinsanchez Date: Tue, 24 Oct 2023 09:51:31 +0200 Subject: [PATCH 7/9] refactor(IconButton): style refactor Ref: #issue/BubblesDS-5 --- .../form/IconButton/IconButton.constants.js | 29 +++++++++++++++ .../src/form/IconButton/IconButton.js | 35 ++++--------------- .../src/form/IconButton/IconButton.stories.js | 4 +-- .../src/form/IconButton/IconButton.styles.js | 15 ++++---- 4 files changed, 47 insertions(+), 36 deletions(-) create mode 100644 packages/components/src/form/IconButton/IconButton.constants.js diff --git a/packages/components/src/form/IconButton/IconButton.constants.js b/packages/components/src/form/IconButton/IconButton.constants.js new file mode 100644 index 000000000..273e79add --- /dev/null +++ b/packages/components/src/form/IconButton/IconButton.constants.js @@ -0,0 +1,29 @@ +import PropTypes from 'prop-types'; + +export const ICON_BUTTON_SIZES = ['xs', 'sm', 'md', 'lg']; +export const ICON_BUTTON_VARIANTS = ['default', 'transparent']; +export const ICON_BUTTON_COLORS = ['positive', 'negative', 'primary']; + +export const ICON_BUTTON_DEFAULT_PROPS = { + size: 'sm', + color: 'positive', + rounded: false, + variant: 'default', + label: '', + useAria: true, +}; + +export const ICON_BUTTON_PROP_TYPES = { + /** Controls the size */ + size: PropTypes.oneOf(ICON_BUTTON_SIZES), + /** Controls the color */ + color: PropTypes.oneOf(ICON_BUTTON_COLORS), + /** Controls if its rounded */ + rounded: PropTypes.bool, + /** Controls the appearance */ + variant: PropTypes.oneOf(ICON_BUTTON_VARIANTS), + /** Button label */ + label: PropTypes.string, + /** Button icon */ + icon: PropTypes.node, +}; diff --git a/packages/components/src/form/IconButton/IconButton.js b/packages/components/src/form/IconButton/IconButton.js index a8ff0d9e3..b23df5d8e 100644 --- a/packages/components/src/form/IconButton/IconButton.js +++ b/packages/components/src/form/IconButton/IconButton.js @@ -1,21 +1,13 @@ import React, { forwardRef } from 'react'; -import PropTypes from 'prop-types'; import { isNil } from 'lodash'; import { ActionIcon as MantineActionIcon } from '@mantine/core'; import { IconButtonStyles } from './IconButton.styles'; - -export const ICON_BUTTON_SIZES = ['xs', 'sm', 'md', 'lg']; -export const ICON_BUTTON_VARIANTS = ['default', 'transparent']; -export const ICON_BUTTON_COLORS = ['positive', 'negative', 'primary']; - -export const ICON_BUTTON_DEFAULT_PROPS = { - size: 'sm', - color: 'positive', - rounded: false, - variant: 'default', - label: '', - useAria: true, -}; +import { + ICON_BUTTON_COLORS, + ICON_BUTTON_DEFAULT_PROPS, + ICON_BUTTON_VARIANTS, + ICON_BUTTON_PROP_TYPES, +} from './IconButton.constants'; export const IconButton = forwardRef( ( @@ -64,17 +56,4 @@ export const IconButton = forwardRef( IconButton.defaultProps = ICON_BUTTON_DEFAULT_PROPS; -IconButton.propTypes = { - /** Controls the size */ - size: PropTypes.oneOf(ICON_BUTTON_SIZES), - /** Controls the color */ - color: PropTypes.oneOf(ICON_BUTTON_COLORS), - /** Controls if its rounded */ - rounded: PropTypes.bool, - /** Controls the appearance */ - variant: PropTypes.oneOf(ICON_BUTTON_VARIANTS), - /** Button label */ - label: PropTypes.string, - /** Button icon */ - icon: PropTypes.node, -}; +IconButton.propTypes = ICON_BUTTON_PROP_TYPES; diff --git a/packages/components/src/form/IconButton/IconButton.stories.js b/packages/components/src/form/IconButton/IconButton.stories.js index 5386ea076..13de22831 100644 --- a/packages/components/src/form/IconButton/IconButton.stories.js +++ b/packages/components/src/form/IconButton/IconButton.stories.js @@ -1,12 +1,12 @@ import React from 'react'; import { ChevronRightIcon } from '@bubbles-ui/icons/outline'; +import { IconButton } from './IconButton'; import { - IconButton, ICON_BUTTON_SIZES, ICON_BUTTON_COLORS, ICON_BUTTON_VARIANTS, ICON_BUTTON_DEFAULT_PROPS, -} from './IconButton'; +} from './IconButton.constants'; import mdx from './IconButton.mdx'; export default { diff --git a/packages/components/src/form/IconButton/IconButton.styles.js b/packages/components/src/form/IconButton/IconButton.styles.js index c9cdf91af..97d39e168 100644 --- a/packages/components/src/form/IconButton/IconButton.styles.js +++ b/packages/components/src/form/IconButton/IconButton.styles.js @@ -1,5 +1,5 @@ import { createStyles } from '@mantine/styles'; -import { pxToRem, getPaddings, getFontExpressive } from './../../theme.mixins'; +import { pxToRem, getFocusDefaultBorder, getBoxShadowFromToken } from './../../theme.mixins'; const getSizes = (size, spacing) => { return { @@ -32,6 +32,7 @@ const getSizes = (size, spacing) => { }; const getVariant = (variant, theme, color) => { + const buttonIconTheme = theme.other.buttonIcon; const variants = { default: { positive: { @@ -72,14 +73,16 @@ const getVariant = (variant, theme, color) => { }, }, primary: { - backgroundColor: theme.colors.interactive01, - color: theme.colors.text07, + backgroundColor: buttonIconTheme.background.color.primary.default, + color: buttonIconTheme.content.color.primary.default, '&:hover': { - backgroundColor: theme.colors.interactive01h, + ...getBoxShadowFromToken(buttonIconTheme.shadow.hover), + backgroundColor: buttonIconTheme.background.color.primary.default, + border: 'none', }, '&:active': { - backgroundColor: theme.colors.interactive01, - borderColor: theme.colors.interactive01h, + backgroundColor: buttonIconTheme.background.color.primary.pressed, + boxShadow: 'none', }, }, }, From b5179a6601180fc5553a730194b6de40e8910e74 Mon Sep 17 00:00:00 2001 From: fermarinsanchez Date: Tue, 24 Oct 2023 11:17:59 +0200 Subject: [PATCH 8/9] fix(components): eslint errors Ref: #issue/BubblesDS-5 --- .eslintrc.json | 47 +- package.json | 10 + .../src/form/ActionButton/ActionButton.js | 14 +- packages/components/src/form/Button/Button.js | 14 +- .../src/form/Button/Button.stories.js | 13 +- .../src/form/Button/Button.styles.js | 17 +- .../src/form/IconButton/IconButton.js | 9 +- .../src/form/IconButton/IconButton.stories.js | 12 +- .../src/form/IconButton/IconButton.styles.js | 30 +- packages/components/src/theme.mixins.js | 24 +- yarn.lock | 1167 ++++++++++++++++- 11 files changed, 1222 insertions(+), 135 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index ef9eea81e..b38de7ad7 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -42,51 +42,6 @@ "usePrettierrc": true } ], - "import/no-names-as-default": "off", - "import/no-unresolved": [ - 2, - { - "ignore": [ - "@academic-calendar", - "@academic-portfolio", - "@admin", - "@assignables", - "@attendance-control", - "@board-messages", - "@calendar", - "@common", - "@comunica", - "@content-creator", - "@curriculum", - "@dashboard", - "@dataset", - "@emails", - "@emails-aws-ses", - "@emails-smtp", - "@families", - "@families-emergency-numbers", - "@feedback", - "@fundae", - "@grades", - "@layout", - "@learning-paths", - "@leebrary", - "@menu-builder", - "@mqtt-aws-iot", - "@mqtt-socket-io", - "@multilanguage", - "@package-manager", - "@scores", - "@scorm", - "@tasks", - "@tests", - "@timetable", - "@users", - "@widgets", - "@xapi", - "@bubbles-ui" - ] - } - ] + "import/no-names-as-default": "off" } } diff --git a/package.json b/package.json index 93d2b89d4..24bcc07cf 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "release:dev": "yarn changeset version && yarn changeset publish --tag dev" }, "dependencies": { + "@babel/eslint-parser": "^7.22.15", "@changesets/cli": "^2.26.0", "react": "^17.0.1", "react-dom": "^17.0.1" @@ -44,11 +45,20 @@ "better-spawn": "^1.0.4", "chalk": "^4.1.1", "chromatic": "^6.11.4", + "eslint": "^8.48.0", + "eslint-config-airbnb-base": "^15.0.0", + "eslint-config-prettier": "^8.8.0", + "eslint-plugin-import": "^2.27.5", + "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-react": "^7.33.2", + "eslint-plugin-sonarjs": "^0.21.0", "execa": "5.1.1", "fs-extra": "^10.0.0", "generate-template-files": "^3.2.0", "madge": "^5.0.1", "npm-run-all": "^4.1.5", + "prettier": "^2.8.8", + "prettier-eslint": "^15.0.1", "tsc-silent": "^1.2.2", "typescript": "^4.7.3", "webpack": "5", diff --git a/packages/components/src/form/ActionButton/ActionButton.js b/packages/components/src/form/ActionButton/ActionButton.js index d130d9ad3..34b5eb753 100644 --- a/packages/components/src/form/ActionButton/ActionButton.js +++ b/packages/components/src/form/ActionButton/ActionButton.js @@ -1,8 +1,9 @@ +/* eslint-disable react/prop-types */ import React, { forwardRef } from 'react'; import { isNil, isString } from 'lodash'; import { Button as MantineButton } from '@mantine/core'; import { ActionButtonStyles } from './ActionButton.styles'; -import { Tooltip } from '../../overlay'; +import { Tooltip } from '../../overlay/Tooltip'; import { ACTION_BUTTON_SIZES, ACTION_BUTTON_COLORS, @@ -10,8 +11,8 @@ import { ACTION_BUTTON_PROP_TYPES, } from './ActionButton.constants'; -const TooltipComponent = ({ children, tooltip, useAria }) => { - return isString(tooltip) && tooltip !== '' ? ( +const TooltipComponent = ({ children, tooltip, useAria }) => + isString(tooltip) && tooltip !== '' ? ( { ) : ( <>{children} ); -}; -export const ActionButton = forwardRef( +const ActionButton = forwardRef( ( { as, @@ -99,3 +99,7 @@ export const ActionButton = forwardRef( ActionButton.defaultProps = ACTION_BUTTON_DEFAULT_PROPS; ActionButton.propTypes = ACTION_BUTTON_PROP_TYPES; +ActionButton.displayName = 'ActionButton'; + +export { ActionButton }; +export default ActionButton; diff --git a/packages/components/src/form/Button/Button.js b/packages/components/src/form/Button/Button.js index 987baa244..88fa9cd51 100644 --- a/packages/components/src/form/Button/Button.js +++ b/packages/components/src/form/Button/Button.js @@ -9,7 +9,7 @@ import { BUTTON_PROP_TYPES, } from './Button.constants'; -export const Button = forwardRef( +const Button = forwardRef( ( { children, @@ -31,9 +31,9 @@ export const Button = forwardRef( useAria, ariaLabel, textAlign, - compact, //UNUSED - gradient, //UNUSED - radius, //UNUSED + compact, // UNUSED + gradient, // UNUSED + radius, // UNUSED ...props }, ref @@ -67,6 +67,7 @@ export const Button = forwardRef( {...props} ref={ref} component={as} + // eslint-disable-next-line react/no-children-prop children={children} leftIcon={leftIcon} rightIcon={rightIcon} @@ -85,5 +86,8 @@ export const Button = forwardRef( ); Button.defaultProps = BUTTON_DEFAULT_PROPS; - Button.propTypes = BUTTON_PROP_TYPES; +Button.displayName = 'Button'; + +export { Button }; +export default Button; diff --git a/packages/components/src/form/Button/Button.stories.js b/packages/components/src/form/Button/Button.stories.js index df0f9e7b2..60efeda71 100644 --- a/packages/components/src/form/Button/Button.stories.js +++ b/packages/components/src/form/Button/Button.stories.js @@ -1,3 +1,4 @@ +/* eslint-disable react/prop-types */ import React from 'react'; import { AddIcon } from '@bubbles-ui/icons/outline'; import { Button } from './Button'; @@ -33,12 +34,12 @@ const Template = ({ label, rightIcon, leftIcon, - test_showLeftIcon, - test_showRightIcon, + testShowLeftIcon, + testShowRightIcon, ...props }) => { - const buttonLeftIcon = test_showLeftIcon ? leftIcon : undefined; - const buttonRightIcon = test_showRightIcon ? rightIcon : undefined; + const buttonLeftIcon = testShowLeftIcon ? leftIcon : undefined; + const buttonRightIcon = testShowRightIcon ? rightIcon : undefined; return (