diff --git a/.eslintrc.json b/.eslintrc.json index b8fdc313e..9e2d2c7d7 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,39 +1,51 @@ { "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/prefer-default-export": "warn", + "no-param-reassign": "off", + "radix": "off", + "no-unused-vars": "warn" } } diff --git a/.github/workflows/storybook-s3-dev.yml b/.github/workflows/storybook-s3-dev.yml index bdf9458d7..ae83bef61 100644 --- a/.github/workflows/storybook-s3-dev.yml +++ b/.github/workflows/storybook-s3-dev.yml @@ -32,6 +32,7 @@ jobs: '@bubbles-ui/calendars': patch '@bubbles-ui/editors': patch '@bubbles-ui/leemons': patch + '@bubbles-ui/extras': patch '@bubbles-ui/icons': patch --- diff --git a/.gitignore b/.gitignore index 18d0ad27d..9e5f69761 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,13 @@ docs-build *.d.ts *.d.ts.map build-storybook.log +.idea + +# Coverage directory used by tools like istanbul + +coverage +\*.lcov + +# nyc test coverage + +.nyc_output diff --git a/.prettierrc b/.prettierrc index d5a9f0f64..850234775 100644 --- a/.prettierrc +++ b/.prettierrc @@ -6,3 +6,4 @@ "trailingCommas": "es5", "singleQuote": true } + diff --git a/.vscode/settings.json b/.vscode/settings.json index dfde806a1..4ed7a4649 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,18 +1,14 @@ { - "files.exclude": { - "**/.git": false, - "**/.svn": false, - "**/.hg": false, - "**/CVS": false, - "**/.DS_Store": false, - "**/Thumbs.db": false, - }, - "[javascript]": { - "editor.codeActionsOnSave": { - "source.organizeImports": false, - "source.fixAll": true, - }, - "editor.formatOnSave": true, - "editor.defaultFormatter": "esbenp.prettier-vscode" + "[javascript]": { + "editor.codeActionsOnSave": { + "source.organizeImports": "never", + "source.fixAll": "explicit" }, + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "sonarlint.connectedMode.project": { + "connectionId": "leemons", + "projectKey": "leemonade_bubbles" + } } diff --git a/merged_tokens.json b/merged_tokens.json new file mode 100644 index 000000000..14afc5fa4 --- /dev/null +++ b/merged_tokens.json @@ -0,0 +1,7974 @@ +{ + "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" + }, + "125": { + "value": "10", + "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": { + "dark": { + "value": "{core.color.tertiary.100}", + "type": "color" + }, + "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" + }, + "deep": { + "value": "{core.color.secondary.100}", + "type": "color" + } + }, + "icon": { + "deep": { + "value": "{core.color.secondary.100}", + "type": "color" + }, + "dark": { + "value": "{core.color.tertiary.100}", + "type": "color" + }, + "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" + } + }, + "disabled": { + "value": "{core.color.neutral.600}", + "type": "color" + }, + "transparent": { + "value": "transparent", + "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" + } + }, + "info": { + "default": { + "value": "{core.color.info.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.info.600}", + "type": "color" + }, + "muted": { + "value": "{core.color.info.300}", + "type": "color" + }, + "subtle": { + "value": "{core.color.info.100}", + "type": "color" + } + }, + "neutral": { + "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" + } + } + }, + "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.75}" + }, + "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.200}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.200}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.200}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.100}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.100}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}px", + "lineHeight": "{core.font.lineHeight.75}px" + }, + "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}px", + "fontSize": "{core.font.size.50}px" + }, + "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": "{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.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" + } + }, + "tertiary": { + "default": { + "value": "{core.color.tertiary.100}", + "type": "color" + } + }, + "neutral": { + "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" + } + } + } + }, + "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" + } + }, + "tertiary": { + "default": { + "value": "{core.color.tertiary.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" + }, + "xmsm": { + "value": "{core.dimension.static.125}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": { + "1xs": { + "value": "{core.dimension.50}", + "type": "sizing" + }, + "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--medium}", + "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" + }, + "selected": { + "value": "{global.background.color.primary.muted}", + "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.emphasis}", + "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.xmsm}", + "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": "{button.background.color.primary.hover}", + "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" + } + } + }, + "avatar": { + "content": { + "typo": { + "default": { + "value": "{global.content.typo.heading.md}", + "type": "typography" + }, + "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": { + "group": { + "value": "{global.content.color.icon.default}", + "type": "color" + }, + "default": { + "value": "{global.border.color.line.default--reverse}", + "type": "color" + } + } + }, + "border": { + "width": { + "value": "{global.border.width.md}", + "type": "borderWidth" + }, + "radius": { + "circle": { + "value": "{global.border.radius.circle}", + "type": "borderRadius" + }, + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + } + }, + "background": { + "color": { + "10": { + "value": "#EC62D8", + "type": "color" + }, + "default": { + "value": "{global.background.color.surface.default--reverse}", + "type": "color" + }, + "reverse": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "group": { + "value": "{global.background.color.surface.emphasis}", + "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" + } + } + }, + "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" + } + } + }, + "comunica": { + "chat": { + "spacing": { + "padding": { + "default": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + }, + "gap": { + "lg": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + } + } + }, + "border": { + "width": { + "sm": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "md": { + "value": "{global.border.width.md}", + "type": "borderWidth" + } + }, + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "default--alt": { + "value": "{global.border.color.primary.emphasis}", + "type": "color" + } + }, + "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" + } + } + }, + "floatingButton": { + "spacing": { + "padding": { + "xsm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + } + } + } + }, + "message": { + "spacing": { + "padding": { + "xs": { + "value": "{global.spacing.gap.1xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "slg": { + "value": "{global.spacing.gap.slg}", + "type": "spacing" + }, + "xlg": { + "value": "{global.spacing.gap.xlg}", + "type": "spacing" + } + }, + "gap": { + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + } + } + }, + "border": { + "width": { + "value": "{global.border.width.md}", + "type": "borderWidth" + } + } + }, + "toast": { + "spacing": { + "padding": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + }, + "border": { + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + }, + "gap": { + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + } + }, + "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" + } + } + } + }, + "dropzone": { + "content": { + "text": { + "value": "{global.content.typo.body.sm}", + "type": "typography" + }, + "text--medium": { + "value": "{global.content.typo.body.sm--medium}", + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "default--subtle": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "icon": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + }, + "default--icon": { + "value": "{global.content.color.primary.muted}", + "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.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.subtle}", + "type": "color" + } + }, + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "style": { + "value": { + "style": "dashed", + "width": "2px", + "color": "{dropzone.border.color.default}" + }, + "type": "border" + } + } + }, + "toggle": { + "shadow": { + "hover": { + "value": { + "x": "0", + "y": "0", + "blur": "2", + "spread": "0", + "color": "rgba( {global.background.color.primary.strong}, 0.80)", + "type": "dropShadow" + }, + "type": "boxShadow" + } + }, + "content": { + "typo": { + "value": "{global.content.typo.body.sm}", + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.neutral.muted}", + "type": "color" + }, + "selected": { + "value": "{global.content.color.tertiary.default}", + "type": "color" + }, + "label": { + "value": "{global.content.color.neutral.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.muted}", + "type": "color" + } + } + }, + "border": { + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "color": { + "default": { + "value": "{global.border.color.line.default}", + "type": "color" + }, + "select": { + "value": "{global.border.color.tertiary.default}", + "type": "color" + } + }, + "radius": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + }, + "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" + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "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" + } + } + } + } + }, + "buttonText": { + "content": { + "color": { + "primary": { + "default": { + "value": "{global.content.color.icon.default--reverse}", + "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.medium}", + "lineHeight": "{core.font.lineHeight.200}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.200}px", + "fontSize": "{core.font.size.75}px" + }, + "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" + } + }, + "link": { + "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" + }, + "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": { + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.1xsm}", + "type": "spacing" + } + } + }, + "shadow": { + "hover": { + "value": { + "x": "0", + "y": "0", + "blur": "4", + "spread": "0", + "color": "{buttonAction.background.color.primary.hover--reverse-transparent}", + "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" + }, + "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" + }, + "down--reverse": { + "value": "{global.background.color.secondary.muted}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.negative.subtle}", + "type": "color" + }, + "down": { + "value": "{global.content.color.negative.subtle}", + "type": "color" + } + } + } + }, + "border": { + "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" + } + }, + "color": { + "primary": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.border.color.secondary.default}", + "type": "color" + }, + "down--reverse": { + "value": "{global.border.color.secondary.muted}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.negative.subtle}", + "type": "color" + }, + "down": { + "value": "{global.border.color.line.muted}", + "type": "color" + } + } + } + }, + "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" + }, + "placeholder": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "icon": { + "value": "{global.content.color.icon.emphasis}", + "type": "color" + }, + "icon--action": { + "value": "{global.content.color.icon.dark}", + "type": "color" + }, + "selected": { + "value": "{global.content.color.primary.default}", + "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" + }, + "ssm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "sm": { + "value": "3px", + "type": "spacing" + } + }, + "horizontal": { + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "xmsm": { + "value": "{global.spacing.padding.xmsm}", + "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": "{global.content.typo.body.xsm}", + "type": "typography" + } + }, + "phatic": { + "attention": { + "value": "{global.content.color.attention.default}", + "type": "color" + } + } + } + }, + "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": { + "label": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "selected": { + "value": "{global.content.color.tertiary.default}", + "type": "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" + } + } + }, + "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" + }, + "selected": { + "value": "{global.border.color.tertiary.default}", + "type": "color" + }, + "error": { + "value": "{global.border.color.negative.default}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.muted}", + "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" + } + } + }, + "shadow": { + "hover": { + "value": { + "x": "0", + "y": "0", + "blur": "2", + "spread": "0", + "color": "rgba( {global.content.color.primary.strong}, 0.80)", + "type": "dropShadow" + }, + "type": "boxShadow" + } + }, + "label": { + "content": { + "typo": { + "value": "{global.content.typo.body.sm}", + "type": "typography" + } + } + } + }, + "checkbox": { + "shadow": { + "hover": { + "value": { + "x": "0", + "y": "0", + "blur": "2", + "spread": "0", + "color": "rgba( {global.content.color.primary.strong}, 0.80)", + "type": "dropShadow" + }, + "type": "boxShadow" + } + }, + "size": { + "md": { + "value": "{global.control.size.200}", + "type": "sizing" + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.transparent}", + "type": "color" + }, + "label": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "icon": { + "value": "{global.content.color.tertiary.default}", + "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" + }, + "select": { + "value": "{global.border.color.tertiary.default}", + "type": "color" + }, + "negative": { + "value": "{global.border.color.negative.default}", + "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" + } + } + } + }, + "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" + }, + "white": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "grey": { + "value": "{global.background.color.surface.muted}", + "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": { + "value": "{global.background.color.info.default}", + "type": "color" + }, + "succes": { + "value": "{global.background.color.positive.default}", + "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" + }, + "white": { + "value": "{global.border.color.line.default}", + "type": "color" + }, + "grey": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.default}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "md": { + "value": "{global.border.width.md}", + "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" + } + } + } + }, + "AvatarSubjectIcon": { + "content": { + "color": { + "default": { + "value": "{global.content.color.icon.default--reverse}", + "type": "color" + } + } + }, + "border": { + "radius": { + "rounded": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + } + }, + "size": { + "xxs": { + "value": "{global.control.size.50}", + "type": "sizing" + }, + "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" + } + } + }, + "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": "{global.content.typo.body.sm--medium}", + "type": "typography" + }, + "sm--regular": { + "value": "{global.content.typo.body.sm}", + "type": "typography" + }, + "sm": { + "value": "{global.content.typo.body.xsm}", + "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" + } + }, + "shadow": { + "hover": { + "value": "{button.shadow.hover}", + "type": "boxShadow" + } + } + }, + "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" + }, + "type": "typography" + }, + "typo--medium--underline": { + "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.text.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "error": { + "value": "{global.content.color.negative.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.default}", + "type": "color" + } + }, + "typo": { + "sm": { + "value": "{global.content.typo.body.sm}", + "type": "typography" + }, + "sm--medium": { + "value": "{global.content.typo.body.sm--medium}", + "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.line.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.subtle}", + "type": "color" + }, + "selected": { + "value": "{global.border.color.primary.default}", + "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" + }, + "selected": { + "value": "{global.background.color.transparent}", + "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.sm}", + "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" + }, + "typo--medium": { + "value": "{global.content.typo.body.sm--medium}", + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "selected": { + "value": "{global.content.color.icon.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.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "selected": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "color": { + "default": { + "value": "{global.border.color.line.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.tertiary.default}", + "type": "color" + }, + "selected": { + "value": "{global.border.color.tertiary.default}", + "type": "color" + } + }, + "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.50}", + "lineHeight": "{core.font.lineHeight.100}px" + }, + "type": "typography" + }, + "typo-header": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "fontSize": "{core.font.size.30}", + "lineHeight": "{core.font.lineHeight.75}px" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.deep}", + "type": "color" + }, + "default-header": { + "value": "{global.content.color.text.muted}", + "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}", + "type": "spacing" + }, + "horizontal": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "horizontal--lg": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + }, + "horizontal--2xlg": { + "value": "{global.spacing.padding.xlg}", + "type": "spacing" + }, + "horizontal--xxl": { + "value": "{global.spacing.padding.3xlg} + {global.spacing.padding.2xsm}", + "type": "spacing" + } + } + }, + "border": { + "width": { + "value": "{global.border.width.md}", + "type": "borderWidth" + }, + "color": { + "default-alt": { + "value": "{global.border.color.primary.default}", + "type": "color" + }, + "default": { + "value": "{global.border.color.line.default--reverse}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.subtle}", + "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.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "active": { + "value": "{global.background.color.primary.muted}", + "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.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.50}px" + }, + "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.muted}", + "type": "color" + } + } + }, + "spacing": { + "padding": { + "vertical": { + "2xsm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "xsm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + } + }, + "horizontal": { + "2xsm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "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" + } + }, + "shadow": { + "default": { + "value": [ + { + "color": "rgba(221, 225, 230, 0.08)", + "type": "dropShadow", + "x": "0", + "y": "2", + "blur": "0", + "spread": "0" + } + ], + "type": "boxShadow" + } + } + }, + "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.semiBold}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "emphasis": { + "value": "{global.content.color.text.emphasis}", + "type": "color" + }, + "icon": { + "value": "{global.content.color.icon.deep}", + "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.md}", + "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.info.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": { + "grey": { + "default": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + } + }, + "white": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "positive": { + "value": "{global.background.color.positive.subtle}", + "type": "color" + }, + "warning": { + "value": "{global.background.color.attention.subtle}", + "type": "color" + }, + "negative": { + "value": "{global.background.color.negative.subtle}", + "type": "color" + }, + "empty": { + "value": "{global.background.color.transparent}", + "type": "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.md}", + "type": "borderRadius" + } + }, + "spacing": { + "padding": { + "horizontal": { + "sm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "3xsm": { + "value": "{global.spacing.padding.3xsm}", + "type": "spacing" + } + }, + "vertical": { + "sm": { + "value": "{banner.spacing.padding.vertical.xsm}", + "type": "spacing" + }, + "3xsm": { + "value": "{global.spacing.padding.3xsm}", + "type": "spacing" + } + } + } + }, + "avatar": { + "border": { + "radius": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + } + } + }, + "chipSemantic": { + "border": { + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + } + }, + "chipIcon": { + "border": { + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + }, + "content": { + "icon": { + "value": "{global.content.color.icon.default--reverse}", + "type": "color" + } + }, + "background": { + "color": { + "value": "{global.background.color.surface.default--reverse}", + "type": "color" + } + }, + "spacing": { + "padding": { + "horizontal": { + "sm": { + "value": "{global.spacing.padding.3xsm}", + "type": "spacing" + } + }, + "vertical": { + "sm": { + "value": "{badge.spacing.padding.3xsm}", + "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": "{global.content.typo.body.sm--medium}", + "type": "typography" + }, + "typo-pending": { + "value": "{global.content.typo.body.sm}", + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.neutral.muted}", + "type": "color" + }, + "active": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "completed": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "icon": { + "value": "{global.content.color.secondary.default}", + "type": "color" + } + } + }, + "spacing": { + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "xsm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "2xsm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "padding": { + "xsm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.overlay.default}", + "type": "color" + }, + "active--reverse": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "completed": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "active": { + "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" + }, + "transaparet": { + "value": "{global.content.color.transparent}", + "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": { + "xs": { + "value": "6px", + "type": "sizing" + }, + "sm": { + "value": "{global.icon.size.sm}", + "type": "sizing" + }, + "md": { + "value": "{global.icon.size.md}", + "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": "{global.content.typo.body.sm}", + "type": "typography" + }, + "md--medium": { + "value": "{global.content.typo.body.sm--medium}", + "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" + }, + "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" + } + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "subtext": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "icon": { + "value": "{global.content.color.icon.dark}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "grey": { + "value": "{global.background.color.surface.subtle}", + "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.sm}", + "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" + }, + "lg": { + "value": "{global.spacing.gap.lg}", + "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" + } + } + }, + "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": { + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "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": "{global.content.typo.body.xsm}", + "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.md}", + "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" + } + } + } + } + }, + "cardAssignments": { + "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": { + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "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.default}", + "type": "color" + }, + "icon": { + "value": "{global.content.color.icon.default}", + "type": "color" + } + }, + "typo": { + "lg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "19 px", + "fontSize": "{core.font.size.100}" + }, + "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" + }, + "sm": { + "value": "{global.content.typo.body.xsm}", + "type": "typography" + }, + "sm--medium": { + "value": "{global.content.typo.body.sm--medium}", + "type": "typography" + }, + "xxl": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.600}px", + "fontSize": "48px" + }, + "type": "typography" + }, + "xl": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.400}px", + "fontSize": "24px" + }, + "type": "typography" + } + }, + "phatic": { + "positive": { + "value": "{global.content.color.positive.default}", + "type": "color" + }, + "alert": { + "value": "{global.content.color.attention.default}", + "type": "color" + }, + "danger": { + "value": "{global.content.color.negative.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "top": { + "value": "{global.background.color.surface.muted}", + "type": "color" + } + } + }, + "border": { + "color": { + "subtle": { + "value": "{global.border.color.line.subtle}", + "type": "color" + } + }, + "radius": { + "sm": { + "value": "{global.border.radius.md}", + "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" + } + } + }, + "progress": { + "content": { + "color": { + "text": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "porcentage": { + "value": "{global.content.color.text.emphasis}", + "type": "color" + }, + "mutted": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "phatic": { + "positive": { + "value": "{global.border.color.positive.default}", + "type": "color" + }, + "attention": { + "value": "{global.content.color.attention.default}", + "type": "color" + }, + "negative": { + "value": "{global.content.color.negative.default}", + "type": "color" + }, + "info": { + "value": "{global.content.color.info.default}", + "type": "color" + } + } + }, + "typo": { + "value": "{global.content.typo.body.xsm}", + "type": "typography" + }, + "sm--medium": { + "value": "{global.content.typo.body.sm--medium}", + "type": "typography" + } + }, + "background": { + "color": { + "primary": { + "default": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + } + } + } + }, + "spacing": { + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "border": { + "radius": { + "rounded": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + } + } + }, + "ChipModule": { + "spacing": { + "padding": { + "horizontal": { + "sm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + } + }, + "vertical": { + "sm": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + } + } + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + } + }, + "typo": { + "sm": { + "value": "{global.content.typo.body.xsm}", + "type": "typography" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + } + }, + "cardEvaluation": { + "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": { + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "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.default}", + "type": "color" + }, + "icon": { + "value": "{global.content.color.icon.default}", + "type": "color" + } + }, + "phatic": { + "positive": { + "value": "{global.content.color.positive.default}", + "type": "color" + }, + "alert": { + "value": "{global.content.color.attention.default}", + "type": "color" + }, + "danger": { + "value": "{global.content.color.negative.default}", + "type": "color" + }, + "info": { + "value": "{global.content.color.info.default}", + "type": "color" + } + }, + "typo": { + "lg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "19 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" + }, + "sm": { + "value": "{global.content.typo.body.xsm}", + "type": "typography" + }, + "xsm--semiBold": { + "value": "{global.content.typo.body.xsm--semiBold}", + "type": "typography" + }, + "sm--medium": { + "value": "{global.content.typo.body.sm--medium}", + "type": "typography" + }, + "xxl": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.500}px", + "fontSize": "40 px" + }, + "type": "typography" + }, + "xl": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "fontSize": "24px", + "lineHeight": "23px" + }, + "type": "typography" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "top": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "circle": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + } + } + }, + "border": { + "color": { + "subtle": { + "value": "{global.border.color.line.subtle}", + "type": "color" + } + }, + "width": { + "sm": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "lg": { + "value": "{global.border.width.lg}", + "type": "borderWidth" + } + }, + "radius": { + "sm": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "circle": { + "value": "{global.border.radius.circle}", + "type": "borderRadius" + } + } + }, + "shadow": { + "hover": { + "value": "{core.shadow.100}", + "type": "boxShadow" + } + } + }, + "cardModule": { + "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" + }, + "lg": { + "value": "{global.spacing.padding.md}", + "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": { + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "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" + } + }, + "phatic": { + "positive": { + "value": "{global.content.color.positive.default}", + "type": "color" + }, + "alert": { + "value": "{global.content.color.attention.default}", + "type": "color" + }, + "danger": { + "value": "{global.content.color.negative.default}", + "type": "color" + } + }, + "typo": { + "lg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "19 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" + }, + "sm": { + "value": "{global.content.typo.body.xsm}", + "type": "typography" + }, + "sm--medium": { + "value": "{global.content.typo.body.sm--medium}", + "type": "typography" + }, + "xxl": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.600}px", + "fontSize": "48px" + }, + "type": "typography" + }, + "xl": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.400}px", + "fontSize": "24px" + }, + "type": "typography" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "top": { + "value": "{global.background.color.surface.muted}", + "type": "color" + } + } + }, + "border": { + "color": { + "subtle": { + "value": "{global.border.color.line.subtle}", + "type": "color" + } + }, + "radius": { + "sm": { + "value": "{global.border.radius.md}", + "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" + } + } + }, + "buttonGhost": { + "content": { + "default": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px", + "textDecoration": "{button.textDecoration.underLine}" + }, + "type": "typography" + }, + "hover": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px", + "textDecoration": "{button.textDecoration.underLine}" + }, + "type": "typography" + } + } + } + }, + "$themes": [], + "$metadata": { + "tokenSetOrder": [ + "core", + "global", + "component" + ] + } +} \ No newline at end of file diff --git a/old_tokens.json b/old_tokens.json new file mode 100644 index 000000000..37b2a456a --- /dev/null +++ b/old_tokens.json @@ -0,0 +1,5480 @@ +{ + "core": { + "core": { + "color": { + "black": { + "value": "#1a202b", + "type": "color" + }, + "white": { + "value": "#ffffff", + "type": "color" + }, + "neutral": { + "50": { + "value": "hsla({core.color.customPrimary.hue},50%,98%,1)", + "type": "color" + }, + "75": { + "value": "hsla({core.color.customPrimary.hue},45%,96%,1)", + "type": "color" + }, + "100": { + "value": "hsla({core.color.customPrimary.hue},40%,94%,1)", + "type": "color" + }, + "200": { + "value": "hsla({core.color.customPrimary.hue},36%,89%,1)", + "type": "color" + }, + "300": { + "value": "hsla({core.color.customPrimary.hue},20%,80%,1)", + "type": "color" + }, + "400": { + "value": "hsla({core.color.customPrimary.hue},12%,68%,1)", + "type": "color" + }, + "500": { + "value": "hsla({core.color.customPrimary.hue},10%,54%,1)", + "type": "color" + }, + "600": { + "value": "hsla({core.color.customPrimary.hue},10%,44%,1)", + "type": "color" + }, + "700": { + "value": "hsla({core.color.customPrimary.hue},16%,34%,1)", + "type": "color" + }, + "800": { + "value": "hsla({core.color.customPrimary.hue},20%,20%,1)", + "type": "color" + }, + "900": { + "value": "hsla({core.color.customPrimary.hue},20%,12%,1)", + "type": "color" + } + }, + "primary": { + "100": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.up.4}%,1)", + "type": "color" + }, + "200": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.up.3}%,1)", + "type": "color" + }, + "300": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.up.2}%,1)", + "type": "color" + }, + "400": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.up.1}%,1)", + "type": "color" + }, + "500": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{core.color.customPrimary.lightness}%,1)", + "type": "color" + }, + "600": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.down.1}%,1)", + "type": "color" + }, + "700": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.down.2}%,1)", + "type": "color" + }, + "800": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.down.3}%,1)", + "type": "color" + }, + "900": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.down.4}%,1)", + "type": "color" + } + }, + "accent": { + "100": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{util.color.accent.lightness.up.4}%,1)", + "type": "color" + }, + "200": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{util.color.accent.lightness.up.3}%,1)", + "type": "color" + }, + "300": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{util.color.accent.lightness.up.2}%,1)", + "type": "color" + }, + "400": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{util.color.accent.lightness.up.1}%,1)", + "type": "color" + }, + "500": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{core.color.customAccent.lightness}%,1)", + "type": "color" + }, + "600": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{util.color.accent.lightness.down.1}%,1)", + "type": "color" + }, + "700": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{util.color.accent.lightness.down.2}%,1)", + "type": "color" + }, + "800": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{util.color.accent.lightness.down.3}%,1)", + "type": "color" + }, + "900": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{util.color.accent.lightness.down.4}%,1)", + "type": "color" + } + }, + "danger": { + "100": { + "value": "#f7dede", + "type": "color" + }, + "200": { + "value": "#f0bebe", + "type": "color" + }, + "300": { + "value": "#e07c7c", + "type": "color" + }, + "400": { + "value": "#d95c5c", + "type": "color" + }, + "500": { + "value": "#d13b3b", + "type": "color" + }, + "600": { + "value": "#b52a2a", + "type": "color" + }, + "700": { + "value": "#912222", + "type": "color" + }, + "800": { + "value": "#6d1919", + "type": "color" + }, + "900": { + "value": "#481111", + "type": "color" + } + }, + "success": { + "100": { + "value": "#e4f4e6", + "type": "color" + }, + "200": { + "value": "#c9e9cd", + "type": "color" + }, + "300": { + "value": "#aedeb5", + "type": "color" + }, + "400": { + "value": "#77c783", + "type": "color" + }, + "500": { + "value": "#5cbc6a", + "type": "color" + }, + "600": { + "value": "#44a552", + "type": "color" + }, + "700": { + "value": "#368442", + "type": "color" + }, + "800": { + "value": "#296331", + "type": "color" + }, + "900": { + "value": "#1b4221", + "type": "color" + } + }, + "attention": { + "100": { + "value": "#fef3e1", + "type": "color" + }, + "200": { + "value": "#fbdaa6", + "type": "color" + }, + "300": { + "value": "#f8c16b", + "type": "color" + }, + "400": { + "value": "#f6b54d", + "type": "color" + }, + "500": { + "value": "#f39c12", + "type": "color" + }, + "600": { + "value": "#d98a0b", + "type": "color" + }, + "700": { + "value": "#ba7609", + "type": "color" + }, + "800": { + "value": "#9b6208", + "type": "color" + }, + "900": { + "value": "#7c4f06", + "type": "color" + } + }, + "customPrimary": { + "hue": { + "value": "216", + "type": "color" + }, + "saturation": { + "value": "80", + "type": "color" + }, + "lightness": { + "value": "55", + "type": "color" + }, + "hsla": { + "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{core.color.customPrimary.lightness}%,1)", + "type": "color" + } + }, + "customAccent": { + "hue": { + "value": "60", + "type": "color" + }, + "saturation": { + "value": "100", + "type": "color" + }, + "lightness": { + "value": "78", + "type": "color" + }, + "hsla": { + "value": "hsla({core.color.customAccent.hue},{core.color.customAccent.saturation}%,{core.color.customAccent.lightness}%,1)", + "type": "color" + } + } + }, + "dimension": { + "0": { + "value": "0*{core.dimension.root}", + "type": "sizing" + }, + "50": { + "value": "0.25*{core.dimension.root}", + "type": "sizing" + }, + "100": { + "value": "0.5*{core.dimension.root}", + "type": "sizing" + }, + "150": { + "value": "0.75*{core.dimension.root}", + "type": "sizing" + }, + "200": { + "value": "1*{core.dimension.root}", + "type": "sizing" + }, + "250": { + "value": "1.25*{core.dimension.root}", + "type": "sizing" + }, + "300": { + "value": "1.5*{core.dimension.root}", + "type": "sizing" + }, + "350": { + "value": "1.75*{core.dimension.root}", + "type": "sizing" + }, + "400": { + "value": "2*{core.dimension.root}", + "type": "sizing" + }, + "500": { + "value": "2.5*{core.dimension.root}", + "type": "sizing" + }, + "600": { + "value": "3*{core.dimension.root}", + "type": "sizing" + }, + "700": { + "value": "3.5*{core.dimension.root}", + "type": "sizing" + }, + "800": { + "value": "4*{core.dimension.root}", + "type": "sizing" + }, + "900": { + "value": "4.5*{core.dimension.root}", + "type": "sizing" + }, + "1000": { + "value": "5*{core.dimension.root}", + "type": "sizing" + }, + "static": { + "0": { + "value": "0", + "type": "sizing" + }, + "10": { + "value": "1", + "type": "sizing" + }, + "25": { + "value": "2", + "type": "sizing" + }, + "50": { + "value": "4", + "type": "sizing" + }, + "100": { + "value": "8", + "type": "sizing" + }, + "150": { + "value": "12", + "type": "sizing" + }, + "200": { + "value": "16", + "type": "sizing" + }, + "250": { + "value": "20", + "type": "sizing" + }, + "300": { + "value": "24", + "type": "sizing" + }, + "350": { + "value": "28", + "type": "sizing" + }, + "400": { + "value": "32", + "type": "sizing" + }, + "450": { + "value": "36", + "type": "sizing" + }, + "500": { + "value": "40", + "type": "sizing" + }, + "550": { + "value": "44", + "type": "sizing" + }, + "600": { + "value": "48", + "type": "sizing" + }, + "700": { + "value": "56", + "type": "sizing" + }, + "800": { + "value": "64", + "type": "sizing" + }, + "900": { + "value": "72", + "type": "sizing" + }, + "1000": { + "value": "80", + "type": "sizing" + } + }, + "root": { + "value": "16", + "type": "sizing" + }, + "percentage": { + "50": { + "value": "50%", + "type": "sizing" + }, + "100": { + "value": "100%", + "type": "sizing" + } + }, + "breakpoint": { + "xsm": { + "value": "320px", + "type": "sizing" + }, + "sm": { + "value": "640px", + "type": "sizing" + }, + "md": { + "value": "1007px", + "type": "sizing" + }, + "lg": { + "value": "1440px", + "type": "sizing" + } + } + }, + "font": { + "family": { + "main": { + "value": "Lexend", + "type": "fontFamilies" + }, + "alt": { + "value": "Inter", + "type": "fontFamilies" + }, + "code": { + "value": "Courier new", + "type": "fontFamilies" + } + }, + "weight": { + "light": { + "value": "300", + "type": "fontWeights" + }, + "regular": { + "value": "400", + "type": "fontWeights" + }, + "medium": { + "value": "500", + "type": "fontWeights" + }, + "bold": { + "value": "600", + "type": "fontWeights" + } + }, + "lineHeight": { + "100": { + "value": "{core.dimension.200}", + "type": "lineHeights" + }, + "200": { + "value": "{core.dimension.250}", + "type": "lineHeights" + }, + "300": { + "value": "{core.dimension.300}", + "type": "lineHeights" + }, + "400": { + "value": "{core.dimension.350}", + "type": "lineHeights" + }, + "500": { + "value": "{core.dimension.400}", + "type": "lineHeights" + }, + "600": { + "value": "{core.dimension.500}", + "type": "lineHeights" + }, + "700": { + "value": "{core.dimension.600}", + "type": "lineHeights" + } + }, + "size": { + "50": { + "value": "roundTo({core.font.size.75} / {util.font.scale}, 0)", + "type": "fontSizes" + }, + "75": { + "value": "roundTo({util.font.base} / {util.font.scale}, 0)", + "type": "fontSizes" + }, + "100": { + "value": "{util.font.base}", + "type": "fontSizes" + }, + "200": { + "value": "roundTo({util.font.base} * {util.font.scale}, 0)", + "type": "fontSizes" + }, + "300": { + "value": "roundTo({core.font.size.200} * {util.font.scale}, 0)", + "type": "fontSizes" + }, + "400": { + "value": "roundTo({core.font.size.300} * {util.font.scale}, 0)", + "type": "fontSizes" + }, + "500": { + "value": "roundTo({core.font.size.400} * {util.font.scale}, 0)", + "type": "fontSizes" + }, + "600": { + "value": "roundTo({core.font.size.500} * {util.font.scale}, 0)", + "type": "fontSizes" + } + } + } + }, + "util": { + "color": { + "primary": { + "lightness": { + "scale": { + "value": "1.15", + "type": "other" + }, + "up": { + "1": { + "value": "roundTo({core.color.customPrimary.lightness} * {util.color.primary.lightness.scale})", + "type": "other" + }, + "2": { + "value": "roundTo({util.color.primary.lightness.up.1} * {util.color.primary.lightness.scale})", + "type": "other" + }, + "3": { + "value": "roundTo({util.color.primary.lightness.up.2} * {util.color.primary.lightness.scale})", + "type": "other" + }, + "4": { + "value": "roundTo({util.color.primary.lightness.up.3} * {util.color.primary.lightness.scale})", + "type": "other" + } + }, + "down": { + "1": { + "value": "roundTo({core.color.customPrimary.lightness} / {util.color.primary.lightness.scale})", + "type": "other" + }, + "2": { + "value": "roundTo({util.color.primary.lightness.down.1} / {util.color.primary.lightness.scale})", + "type": "other" + }, + "3": { + "value": "roundTo({util.color.primary.lightness.down.2} / {util.color.primary.lightness.scale})", + "type": "other" + }, + "4": { + "value": "roundTo({util.color.primary.lightness.down.3} / {util.color.primary.lightness.scale})", + "type": "other" + } + } + } + }, + "accent": { + "lightness": { + "scale": { + "value": "8", + "type": "other" + }, + "up": { + "1": { + "value": "{core.color.customAccent.lightness} + {util.color.accent.lightness.scale}", + "type": "other" + }, + "2": { + "value": "{util.color.accent.lightness.up.1} + {util.color.accent.lightness.scale}", + "type": "other" + }, + "3": { + "value": "{util.color.accent.lightness.up.2} + {util.color.accent.lightness.scale}", + "type": "other" + }, + "4": { + "value": "{util.color.accent.lightness.up.3} + {util.color.accent.lightness.scale}", + "type": "other" + } + }, + "down": { + "1": { + "value": "{core.color.customAccent.lightness} - {util.color.accent.lightness.scale}", + "type": "other" + }, + "2": { + "value": "{util.color.accent.lightness.down.1} - {util.color.accent.lightness.scale}", + "type": "other" + }, + "3": { + "value": "{util.color.accent.lightness.down.2} - {util.color.accent.lightness.scale}", + "type": "other" + }, + "4": { + "value": "{util.color.accent.lightness.down.3} - {util.color.accent.lightness.scale}", + "type": "other" + } + } + } + }, + "colorDebug": { + "value": "#9747FF", + "type": "color" + }, + "debugColorContainer": { + "value": "#ebdcff", + "type": "color" + } + }, + "font": { + "scale": { + "value": "1.125", + "type": "other" + }, + "base": { + "value": "16", + "type": "other" + } + } + } + }, + "global": { + "global": { + "shadow": { + "100": { + "value": [ + { + "color": "rgba({core.color.neutral.200}, 0.08)", + "type": "dropShadow", + "x": "0", + "y": "2", + "blur": "0", + "spread": "0" + }, + { + "color": "rgba({core.color.black}, 0.08)", + "type": "dropShadow", + "x": "0", + "y": "10", + "blur": "36", + "spread": "0" + } + ], + "type": "boxShadow" + }, + "200": { + "value": [ + { + "color": "rgba({core.color.neutral.200}, 0.16)", + "type": "dropShadow", + "x": "0", + "y": "2", + "blur": "0", + "spread": "0" + }, + { + "color": "rgba({core.color.black}, 0.12)", + "type": "dropShadow", + "x": "0", + "y": "10", + "blur": "36", + "spread": "0" + } + ], + "type": "boxShadow" + }, + "300": { + "value": [ + { + "color": "rgba({core.color.neutral.200}, 0.24)", + "type": "dropShadow", + "x": "0", + "y": "2", + "blur": "0", + "spread": "0" + }, + { + "color": "rgba({core.color.black}, 0.16)", + "type": "dropShadow", + "x": "0", + "y": "10", + "blur": "36", + "spread": "0" + } + ], + "type": "boxShadow" + }, + "400": { + "value": [ + { + "color": "rgba({core.color.neutral.200}, 0.08)", + "type": "dropShadow", + "x": "-100", + "y": "0", + "blur": "60", + "spread": "0" + }, + { + "color": "rgba({core.color.black}, 0.05)", + "type": "dropShadow", + "x": "-32", + "y": "0", + "blur": "32", + "spread": "0" + } + ], + "type": "boxShadow" + } + }, + "focus": { + "default": { + "value": { + "x": "0", + "y": "0", + "blur": "0", + "spread": "3", + "color": "{core.color.primary.300}", + "type": "dropShadow" + }, + "type": "boxShadow" + } + }, + "content": { + "color": { + "text": { + "default": { + "value": "{core.color.neutral.700}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.neutral.800}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.500}", + "type": "color" + }, + "subtle": { + "value": "{core.color.neutral.300}", + "type": "color" + }, + "default--reverse": { + "value": "{core.color.white}", + "type": "color" + } + }, + "icon": { + "default": { + "value": "{core.color.neutral.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.neutral.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.300}", + "type": "color" + }, + "default--reverse": { + "value": "{core.color.white}", + "type": "color" + } + }, + "primary": { + "default": { + "value": "{core.color.primary.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.primary.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.primary.300}", + "type": "color" + }, + "subtle": { + "value": "{core.color.primary.100}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{core.color.neutral.700}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.neutral.800}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.500}", + "type": "color" + }, + "subtle": { + "value": "{core.color.neutral.100}", + "type": "color" + } + }, + "negative": { + "default": { + "value": "{core.color.danger.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.danger.600}", + "type": "color" + }, + "muted": { + "value": "{core.color.danger.300}", + "type": "color" + }, + "subtle": { + "value": "{core.color.danger.100}", + "type": "color" + } + }, + "positive": { + "default": { + "value": "{core.color.success.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.success.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.success.300}", + "type": "color" + }, + "subtle": { + "value": "{core.color.success.100}", + "type": "color" + } + }, + "transparent": { + "value": "transparent", + "type": "color" + }, + "disabled": { + "value": "{core.color.neutral.300}", + "type": "color" + }, + "attention": { + "default": { + "value": "{core.color.attention.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.attention.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.attention.300}", + "type": "color" + }, + "subtle": { + "value": "{core.color.attention.100}", + "type": "color" + } + } + }, + "typo": { + "heading": { + "xlg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.600}px", + "fontSize": "{core.font.size.600}px" + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.500}px", + "fontSize": "{core.font.size.500}px" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.400}px", + "fontSize": "{core.font.size.400}px" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.300}px" + }, + "type": "typography" + }, + "xsm": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.200}px" + }, + "type": "typography" + } + }, + "body": { + "lg": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.200}px" + }, + "type": "typography" + }, + "lg--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.200}px" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + }, + "md--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "sm--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + }, + "caption": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}", + "fontSize": "{core.font.size.50}" + }, + "type": "typography" + } + }, + "typoMobile": { + "heading": { + "xlg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.500}px", + "fontSize": "{core.font.size.500}px" + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.400}px", + "fontSize": "{core.font.size.400}px" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.300}px" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.200}px" + }, + "type": "typography" + }, + "xsm": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + } + }, + "body": { + "lg": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + }, + "lg--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "md--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}px" + }, + "type": "typography" + }, + "sm--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}px" + }, + "type": "typography" + } + }, + "caption": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}", + "fontSize": "{core.font.size.50}" + }, + "type": "typography" + } + } + }, + "background": { + "color": { + "surface": { + "default": { + "value": "{core.color.white}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.neutral.200}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.100}", + "type": "color" + }, + "subtle": { + "value": "{core.color.neutral.50}", + "type": "color" + }, + "default--reverse": { + "value": "{core.color.neutral.700}", + "type": "color" + } + }, + "primary": { + "default": { + "value": "{core.color.primary.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.primary.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.primary.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.primary.100}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{core.color.neutral.700}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.neutral.800}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.500}", + "type": "color" + }, + "subtle": { + "value": "{core.color.neutral.50}", + "type": "color" + } + }, + "accent": { + "default": { + "value": "{core.color.accent.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.accent.900}", + "type": "color" + }, + "subtle": { + "value": "{core.color.accent.300}", + "type": "color" + } + }, + "negative": { + "default": { + "value": "{core.color.danger.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.danger.600}", + "type": "color" + }, + "muted": { + "value": "{core.color.danger.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.danger.100}", + "type": "color" + } + }, + "positive": { + "default": { + "value": "{core.color.success.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.success.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.success.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.success.100}", + "type": "color" + } + }, + "transparent": { + "value": "transparent", + "type": "color" + }, + "disabled": { + "value": "{core.color.neutral.75}", + "type": "color" + }, + "overlay": { + "default": { + "value": "rgb({core.color.neutral.100},0.5)", + "type": "color" + } + }, + "attention": { + "default": { + "value": "{core.color.attention.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.attention.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.attention.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.attention.100}", + "type": "color" + } + } + } + }, + "border": { + "width": { + "sm": { + "value": "{core.dimension.static.10}px", + "type": "borderWidth" + }, + "md": { + "value": "{core.dimension.static.25}px", + "type": "borderWidth" + }, + "lg": { + "value": "{core.dimension.static.50}px", + "type": "borderWidth" + } + }, + "radius": { + "sm": { + "value": "2px", + "type": "borderRadius" + }, + "md": { + "value": "4px", + "type": "borderRadius" + }, + "lg": { + "value": "8px", + "type": "borderRadius" + }, + "rounded": { + "value": "99em", + "type": "borderRadius" + }, + "circle": { + "value": "{core.dimension.percentage.50}", + "type": "borderRadius" + } + }, + "color": { + "line": { + "default": { + "value": "{core.color.neutral.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.neutral.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.300}", + "type": "color" + }, + "subtle": { + "value": "{core.color.neutral.100}", + "type": "color" + }, + "default--reverse": { + "value": "{core.color.white}", + "type": "color" + } + }, + "primary": { + "default": { + "value": "{core.color.primary.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.primary.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.primary.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.primary.100}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{core.color.neutral.700}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.neutral.800}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.500}", + "type": "color" + }, + "subtle": { + "value": "{core.color.neutral.50}", + "type": "color" + } + }, + "negative": { + "default": { + "value": "{core.color.danger.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.danger.600}", + "type": "color" + }, + "muted": { + "value": "{core.color.danger.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.danger.100}", + "type": "color" + } + }, + "positive": { + "default": { + "value": "{core.color.success.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.success.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.success.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.success.100}", + "type": "color" + } + }, + "transparent": { + "value": "transparent", + "type": "color" + }, + "disabled": { + "default": { + "value": "{core.color.neutral.300}", + "type": "color" + }, + "muted": { + "value": "{core.color.neutral.75}", + "type": "color" + } + }, + "overlay": { + "default": { + "value": "rgb({core.color.neutral.100},0.5)", + "type": "color" + } + }, + "attention": { + "default": { + "value": "{core.color.attention.500}", + "type": "color" + }, + "emphasis": { + "value": "{core.color.attention.700}", + "type": "color" + }, + "muted": { + "value": "{core.color.attention.200}", + "type": "color" + }, + "subtle": { + "value": "{core.color.attention.100}", + "type": "color" + } + } + } + }, + "spacing": { + "padding": { + "3xsm": { + "value": "{core.dimension.static.25}px", + "type": "spacing" + }, + "2xsm": { + "value": "{core.dimension.static.50}px", + "type": "spacing" + }, + "xsm": { + "value": "{core.dimension.static.100}px", + "type": "spacing" + }, + "sm": { + "value": "{core.dimension.static.150}px", + "type": "spacing" + }, + "md": { + "value": "{core.dimension.static.200}px", + "type": "spacing" + }, + "lg": { + "value": "{core.dimension.static.300}px", + "type": "spacing" + }, + "xlg": { + "value": "{core.dimension.static.400}px", + "type": "spacing" + }, + "2xlg": { + "value": "{core.dimension.static.500}px", + "type": "spacing" + }, + "3xlg": { + "value": "{core.dimension.static.600}px", + "type": "spacing" + } + }, + "gap": { + "none": { + "value": "{core.dimension.static.0}px", + "type": "spacing" + }, + "sm": { + "value": "{core.dimension.static.50}px", + "type": "spacing" + }, + "md": { + "value": "{core.dimension.static.100}px", + "type": "spacing" + }, + "lg": { + "value": "{core.dimension.static.200}px", + "type": "spacing" + }, + "xlg": { + "value": "{core.dimension.static.400}px", + "type": "spacing" + } + } + }, + "icon": { + "size": { + "xsm": { + "value": "{core.dimension.100}px", + "type": "sizing" + }, + "sm": { + "value": "{core.dimension.150}px", + "type": "sizing" + }, + "md": { + "value": "{core.dimension.200}px", + "type": "sizing" + }, + "lg": { + "value": "{core.dimension.250}px", + "type": "sizing" + }, + "xlg": { + "value": "{core.dimension.300}px", + "type": "sizing" + }, + "2xlg": { + "value": "{core.dimension.400}px", + "type": "sizing" + } + } + }, + "control": { + "size": { + "100": { + "value": "{core.dimension.static.200}px", + "type": "sizing" + }, + "200": { + "value": "{core.dimension.static.250}px", + "type": "sizing" + }, + "300": { + "value": "{core.dimension.static.300}px", + "type": "sizing" + }, + "400": { + "value": "{core.dimension.static.350}px", + "type": "sizing" + }, + "500": { + "value": "{core.dimension.static.400}px", + "type": "sizing" + }, + "600": { + "value": "{core.dimension.static.450}px", + "type": "sizing" + }, + "700": { + "value": "{core.dimension.static.500}px", + "type": "sizing" + }, + "800": { + "value": "{core.dimension.static.550}px", + "type": "sizing" + }, + "900": { + "value": "{core.dimension.static.600}px", + "type": "sizing" + }, + "1000": { + "value": "{core.dimension.static.700}px", + "type": "sizing" + } + } + } + } + }, + "component": { + "button": { + "content": { + "color": { + "primary": { + "default": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.secondary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.content.color.primary.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.muted}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.muted}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.content.color.negative.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "down": { + "value": "{global.content.color.negative.default}", + "type": "color" + } + } + }, + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + }, + "background": { + "color": { + "primary": { + "default": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.background.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.secondary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.background.color.secondary.default}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "down": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.background.color.negative.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.negative.default}", + "type": "color" + }, + "down": { + "value": "{global.background.color.negative.subtle}", + "type": "color" + } + } + } + }, + "border": { + "color": { + "primary": { + "default": { + "value": "{global.border.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.border.color.primary.emphasis}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.border.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.secondary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.border.color.secondary.emphasis}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.border.color.line.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "down": { + "value": "{global.border.color.line.muted}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.border.color.negative.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.negative.default}", + "type": "color" + }, + "down": { + "value": "{global.border.color.negative.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.border.color.negative.default}", + "type": "color" + } + } + }, + "width": { + "value": "{global.border.width.md}", + "type": "borderWidth" + }, + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "rounded": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + } + }, + "spacing": { + "padding": { + "vertical": { + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + } + }, + "horizontal": { + "md": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + } + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + } + }, + "buttonText": { + "content": { + "color": { + "primary": { + "default": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.default}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.secondary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.secondary.default}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.content.color.primary.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.subtle}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.content.color.negative.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.negative.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.negative.default}", + "type": "color" + } + } + }, + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + }, + "background": { + "color": { + "primary": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.transparent}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.secondary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.transparent}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.transparent}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.negative.muted}", + "type": "color" + }, + "down": { + "value": "{global.background.color.transparent}", + "type": "color" + } + } + } + }, + "border": { + "color": { + "primary": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.secondary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.border.color.secondary.subtle}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.negative.muted}", + "type": "color" + }, + "down": { + "value": "{global.border.color.negative.subtle}", + "type": "color" + } + } + }, + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + }, + "width": { + "value": "{global.border.width.md}", + "type": "borderWidth" + } + }, + "spacing": { + "padding": { + "vertical": { + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + } + }, + "horizontal": { + "md": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + } + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + } + }, + "buttonIcon": { + "content": { + "color": { + "primary": { + "default": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.secondary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.content.color.primary.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.subtle}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.muted}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.content.color.negative.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "down": { + "value": "{global.content.color.negative.default}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.content.color.negative.emphasis}", + "type": "color" + } + } + } + }, + "background": { + "color": { + "primary": { + "default": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down--reverse": { + "value": "{global.background.color.transparent}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.background.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.secondary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.background.color.secondary.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.background.color.secondary.subtle}", + "type": "color" + }, + "down--reverse": { + "value": "{global.background.color.transparent}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "down": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "default-reverse": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover-reverse": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down-reverse": { + "value": "{global.background.color.transparent}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.background.color.negative.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.negative.default}", + "type": "color" + }, + "down": { + "value": "{global.background.color.negative.subtle}", + "type": "color" + }, + "default--reverse": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.background.color.negative.muted}", + "type": "color" + }, + "down--reverse": { + "value": "{global.background.color.transparent}", + "type": "color" + } + } + } + }, + "border": { + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "rounded": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + }, + "width": { + "value": "{global.border.width.md}", + "type": "borderWidth" + }, + "color": { + "primary": { + "default": { + "value": "{global.border.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.border.color.primary.emphasis}", + "type": "color" + }, + "default--reverse": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + }, + "down--reverse": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.border.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.secondary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.border.color.secondary.emphasis}", + "type": "color" + }, + "default-reverse": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover-reverse": { + "value": "{global.border.color.secondary.subtle}", + "type": "color" + }, + "down-reverse": { + "value": "{global.border.color.secondary.subtle}", + "type": "color" + } + }, + "terciary": { + "default": { + "value": "{global.border.color.line.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "down": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "default-reverse": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + }, + "down--reverse": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.border.color.negative.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.negative.default}", + "type": "color" + }, + "down": { + "value": "{global.border.color.negative.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.border.color.negative.muted}", + "type": "color" + }, + "down--reverse": { + "value": "{global.border.color.negative.subtle}", + "type": "color" + } + } + } + }, + "spacing": { + "padding": { + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + } + } + } + }, + "buttonAction": { + "content": { + "color": { + "primary": { + "default": { + "value": "{global.content.color.secondary.muted}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.subtle}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "down--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.content.color.secondary.muted}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.negative.default}", + "type": "color" + }, + "down": { + "value": "{global.content.color.negative.default}", + "type": "color" + } + } + }, + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}px" + }, + "type": "typography" + } + }, + "background": { + "color": { + "primary": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.background.color.secondary.default}", + "type": "color" + }, + "down--reverse": { + "value": "{global.background.color.secondary.muted}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.negative.subtle}", + "type": "color" + }, + "down": { + "value": "{global.content.color.negative.subtle}", + "type": "color" + } + } + } + }, + "border": { + "color": { + "primary": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.border.color.secondary.default}", + "type": "color" + }, + "down--reverse": { + "value": "{global.border.color.secondary.muted}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.negative.subtle}", + "type": "color" + }, + "down": { + "value": "{global.border.color.line.muted}", + "type": "color" + } + } + }, + "width": { + "value": "{global.border.width.md}", + "type": "borderWidth" + }, + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "rounded": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + } + }, + "spacing": { + "padding": { + "sm": { + "value": "{global.spacing.padding.3xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + } + }, + "gap": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + } + } + }, + "input": { + "content": { + "color": { + "default": { + "value": "{global.content.color.text.emphasis}", + "type": "color" + }, + "selected": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "placeholder": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "icon": { + "value": "{global.content.color.icon.default}", + "type": "color" + } + }, + "typo": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "subtle": { + "value": "{global.border.color.line.subtle}", + "type": "color" + } + }, + "radius": { + "sm": { + "value": "{global.border.radius.sm}", + "type": "borderRadius" + }, + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + }, + "spacing": { + "padding": { + "vertical": { + "md": { + "value": "7px", + "type": "spacing" + }, + "sm": { + "value": "3px", + "type": "spacing" + } + }, + "horizontal": { + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + } + }, + "all": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + } + }, + "gap": { + "none": { + "value": "{core.dimension.static.0}px", + "type": "spacing" + }, + "sm": { + "value": "{core.dimension.static.50}px", + "type": "spacing" + }, + "md": { + "value": "{core.dimension.static.100}px", + "type": "spacing" + }, + "lg": { + "value": "{core.dimension.static.200}px", + "type": "spacing" + } + } + } + }, + "label": { + "spacing": { + "gap": { + "none": { + "value": "{global.spacing.gap.none}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "subtle": { + "value": "{global.content.color.text.muted}", + "type": "color" + } + }, + "typo": { + "01": { + "value": "{global.content.typo.body.sm--bold}", + "type": "typography" + }, + "02": { + "value": "{global.content.typo.body.sm}", + "type": "typography" + }, + "03": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.light}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + } + } + }, + "helpText": { + "content": { + "color": { + "default": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "emphasis": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "phatic": { + "value": "{global.content.color.negative.default}", + "type": "color" + } + }, + "typo": { + "value": "{global.content.typo.caption}", + "type": "typography" + } + } + }, + "radio": { + "size": { + "sm": { + "value": "10px", + "type": "sizing" + }, + "md": { + "value": "{global.control.size.200}", + "type": "sizing" + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.transparent}", + "type": "color" + }, + "icon": { + "value": "{global.content.color.text.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "selected": { + "value": "{global.content.color.primary.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "selected": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "default--reverse": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "selected--reverse": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.muted}", + "type": "color" + }, + "selected": { + "value": "{global.border.color.primary.default}", + "type": "color" + } + } + }, + "spacing": { + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "paddings": { + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + } + } + } + }, + "checkbox": { + "size": { + "md": { + "value": "{global.control.size.200}", + "type": "sizing" + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.transparent}", + "type": "color" + }, + "selected": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "contrast": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.emphasis}", + "type": "color" + }, + "selected": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.emphasis}", + "type": "color" + }, + "selected": { + "value": "{global.border.color.primary.default}", + "type": "color" + } + }, + "radius": { + "value": "{global.border.radius.sm}", + "type": "borderRadius" + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + }, + "spacing": { + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "paddings": { + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + } + } + } + }, + "toggle": { + "size": { + "inner": { + "value": "{global.control.size.100}", + "type": "sizing" + }, + "width": { + "value": "{global.control.size.500}", + "type": "sizing" + } + }, + "spacing": { + "padding": { + "value": "{global.spacing.padding.3xsm}", + "type": "spacing" + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "selected": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.muted}", + "type": "color" + } + } + }, + "background": { + "color": { + "unselected": { + "default": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.muted}", + "type": "color" + } + }, + "selected": { + "default": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.emphasis}", + "type": "color" + } + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + } + }, + "badge": { + "content": { + "typo": { + "sm": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}px" + }, + "type": "typography" + }, + "sm--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}px" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "md--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + }, + "color": { + "default--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "neutral": { + "default": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + }, + "default--reverse": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + }, + "primary": { + "default": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + }, + "phatic": { + "default": { + "value": "{global.background.color.negative.default}", + "type": "color" + }, + "default--warning": { + "value": "{global.background.color.attention.default}", + "type": "color" + } + }, + "secondary": { + "default": { + "value": "{global.background.color.secondary.default}", + "type": "color" + } + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + }, + "color": { + "default--reverse": { + "value": "{global.border.color.line.default--reverse}", + "type": "color" + }, + "default": { + "value": "{global.border.color.line.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.default}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + }, + "size": { + "sm": { + "value": "{core.dimension.100}px", + "type": "sizing" + }, + "md": { + "value": "{core.dimension.150}px", + "type": "sizing" + }, + "lg": { + "value": "{core.dimension.200}px", + "type": "sizing" + }, + "xlg": { + "value": "{core.dimension.400}px", + "type": "sizing" + }, + "2xlg": { + "value": "{core.dimension.600}px", + "type": "sizing" + } + }, + "spacing": { + "padding": { + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + } + } + } + }, + "avatar": { + "size": { + "xsm": { + "value": "{global.control.size.100}", + "type": "sizing" + }, + "sm": { + "value": "{global.control.size.300}", + "type": "sizing" + }, + "md": { + "value": "{global.control.size.500}", + "type": "sizing" + }, + "lg": { + "value": "{global.control.size.1000}", + "type": "sizing" + }, + "xlg": { + "value": "120px", + "type": "sizing" + } + }, + "content": { + "typo": { + "sm": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "fontSize": "{core.font.size.50}", + "textCase": "uppercase", + "lineHeight": "{core.font.lineHeight.100}" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "fontSize": "{core.font.size.100}", + "textCase": "uppercase" + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "fontSize": "{core.font.size.400}", + "textCase": "uppercase" + }, + "type": "typography" + }, + "xlg": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.bold}", + "fontSize": "56px", + "textCase": "uppercase" + }, + "type": "typography" + } + }, + "color": { + "default": { + "value": "{global.border.color.line.default--reverse}", + "type": "color" + } + } + }, + "background": { + "color": { + "10": { + "value": "#EC62D8", + "type": "color" + }, + "01": { + "value": "#DC5571", + "type": "color" + }, + "02": { + "value": "#F26262", + "type": "color" + }, + "03": { + "value": "#E36B2B", + "type": "color" + }, + "04": { + "value": "#E8C642", + "type": "color" + }, + "05": { + "value": "#96D47F", + "type": "color" + }, + "06": { + "value": "#50B579", + "type": "color" + }, + "07": { + "value": "#4F96FF", + "type": "color" + }, + "08": { + "value": "#7449F4", + "type": "color" + }, + "09": { + "value": "#B462F2", + "type": "color" + } + } + }, + "border": { + "radius": { + "circle": { + "value": "{global.border.radius.circle}", + "type": "borderRadius" + }, + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + } + } + }, + "colorPicker": { + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "border": { + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "rounded": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + }, + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + }, + "spacing": { + "gap": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "padding": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + }, + "size": { + "md": { + "value": "{global.control.size.100}", + "type": "sizing" + } + } + }, + "calendar": { + "content": { + "typo": { + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}px" + }, + "type": "typography" + } + }, + "color": { + "calendarButton": { + "default": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "weekName": { + "default": { + "value": "{global.content.color.text.subtle}", + "type": "color" + } + }, + "weekday": { + "default": { + "value": "{global.content.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "down": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "default--weekend": { + "value": "{global.content.color.negative.default}", + "type": "color" + } + } + } + }, + "spacing": { + "padding": { + "vertical": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "horizontal": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + } + }, + "gap": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + }, + "border": { + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "rounded": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + } + }, + "background": { + "color": { + "calendarButton": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "default--reverse": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "hover--reverse": { + "value": "{global.background.color.primary.emphasis}", + "type": "color" + }, + "down--reverse": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + }, + "weekday": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "default--alt": { + "value": "{global.background.color.primary.muted}", + "type": "color" + } + }, + "range": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + } + } + }, + "size": { + "md": { + "value": "{global.control.size.600}", + "type": "sizing" + } + } + }, + "popover": { + "background": { + "color": { + "enabled": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "spacing": { + "padding": { + "vertical": { + "xsm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + }, + "horizontal": { + "xsm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + } + }, + "gap": { + "value": "{input.spacing.gap.lg}", + "type": "spacing" + } + }, + "border": { + "color": { + "enabled": { + "value": "{global.border.color.secondary.subtle}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + } + }, + "drawer": { + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "spacing": { + "gap": { + "sm": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.xlg}", + "type": "spacing" + } + }, + "padding": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + }, + "shadow": { + "left": { + "value": "{global.shadow.400}", + "type": "boxShadow" + }, + "top": { + "value": [ + { + "x": "0", + "y": "100", + "blur": "60", + "spread": "0", + "color": "rgba({core.color.neutral.200}, 0.08)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "32", + "blur": "32", + "spread": "0", + "color": "rgba({core.color.black},0.05)", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.text.emphasis}", + "type": "color" + } + }, + "typo": { + "value": "{global.content.typo.heading.md}", + "type": "typography" + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + } + }, + "link": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.muted}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.primary.subtle}", + "type": "color" + } + } + }, + "spacing": { + "padding": { + "horizontal": { + "value": "{global.spacing.padding.3xsm}", + "type": "spacing" + } + }, + "gap": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.sm}", + "type": "borderRadius" + } + } + }, + "divider": { + "size": { + "sm": { + "value": "{core.dimension.static.10}px", + "type": "sizing" + } + }, + "background": { + "color": { + "default": { + "value": "{global.border.color.line.subtle}", + "type": "color" + } + } + } + }, + "tab": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.default}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.muted}", + "type": "color" + }, + "down": { + "value": "{global.border.color.primary.default}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.lg}", + "type": "borderWidth" + }, + "radius": { + "value": "{global.border.radius.sm}", + "type": "borderRadius" + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.transparent}", + "type": "color" + } + } + }, + "spacing": { + "padding": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + } + }, + "segmentedControl": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.emphasis}", + "type": "color" + }, + "down": { + "value": "{global.content.color.primary.default}", + "type": "color" + } + } + }, + "spacing": { + "padding": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "selected": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "color": { + "default": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "selected": { + "value": "{global.border.color.primary.default}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + } + }, + "dropzone": { + "spacing": { + "padding": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + }, + "default--subtle": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "default--icon": { + "value": "{global.content.color.primary.muted}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.primary.muted}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.emphasis}", + "type": "color" + } + }, + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + } + }, + "modal": { + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "spacing": { + "padding": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "gap": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + }, + "border": { + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "color": { + "default": { + "value": "{global.border.color.line.default--reverse}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.md}", + "type": "borderWidth" + } + } + }, + "dropdown": { + "content": { + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "default--alt": { + "value": "{global.content.color.text.muted}", + "type": "color" + } + }, + "typo": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + }, + "spacing": { + "padding": { + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + } + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "active": { + "value": "{global.background.color.surface.muted}", + "type": "color" + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + } + } + } + }, + "score": { + "content": { + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "muted": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "typo": { + "sm": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}px", + "textCase": "none" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px", + "textCase": "none" + }, + "type": "typography" + }, + "lg--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px", + "textCase": "none" + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px", + "textCase": "none", + "letterSpacing": "", + "paragraphSpacing": "{core.font.lineHeight.300}px" + }, + "type": "typography" + }, + "xlg": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.500}px", + "fontSize": "{core.font.size.400}px", + "textCase": "none" + }, + "type": "typography" + }, + "2xlg": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.bold}", + "lineHeight": "{core.font.lineHeight.600}px", + "fontSize": "{core.font.size.600}px", + "textCase": "none" + }, + "type": "typography" + } + } + }, + "background": { + "color": { + "neutral": { + "default": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + }, + "subtle": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "active": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + }, + "positive": { + "default": { + "value": "{global.background.color.positive.default}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.positive.emphasis}", + "type": "color" + }, + "muted": { + "value": "{global.background.color.positive.muted}", + "type": "color" + } + }, + "attention": { + "default": { + "value": "{global.background.color.attention.default}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.attention.emphasis}", + "type": "color" + }, + "muted": { + "value": "{global.background.color.attention.subtle}", + "type": "color" + } + }, + "negative": { + "default": { + "value": "{global.background.color.negative.default}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.negative.emphasis}", + "type": "color" + }, + "muted": { + "value": "{global.background.color.negative.muted}", + "type": "color" + } + } + } + }, + "border": { + "color": { + "neutral": { + "default": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + }, + "active": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + }, + "positive": { + "default": { + "value": "{global.background.color.positive.default}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.positive.emphasis}", + "type": "color" + }, + "muted": { + "value": "{global.background.color.positive.muted}", + "type": "color" + } + }, + "attention": { + "default": { + "value": "{global.background.color.attention.default}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.attention.emphasis}", + "type": "color" + }, + "muted": { + "value": "{global.background.color.attention.subtle}", + "type": "color" + } + }, + "negative": { + "default": { + "value": "{global.background.color.negative.default}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.negative.emphasis}", + "type": "color" + }, + "muted": { + "value": "{global.background.color.negative.muted}", + "type": "color" + } + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "radius": { + "md": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "lg": { + "value": "{global.border.radius.lg}", + "type": "borderRadius" + } + } + }, + "spacing": { + "padding": { + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "xlg": { + "value": "{global.spacing.padding.xlg}", + "type": "spacing" + } + }, + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + } + }, + "tree": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.regular}", + "fontSize": "{core.font.size.75}px", + "lineHeight": "{core.font.lineHeight.300}px" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + } + } + }, + "spacing": { + "gap": { + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "padding": { + "vertical": { + "value": "{global.spacing.padding.2xsm} - {tree.border.width}", + "type": "spacing" + }, + "horizontal": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + } + } + }, + "border": { + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "color": { + "default": { + "value": "{global.border.color.line.default--reverse}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.subtle}", + "type": "color" + }, + "default-alt": { + "value": "{global.border.color.primary.default}", + "type": "color" + }, + "hover-alt": { + "value": "{global.border.color.line.default}", + "type": "color" + } + }, + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + } + } + } + }, + "breadcrumbs": { + "content": { + "typo": { + "default": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.light}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + }, + "hover": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.light}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}", + "textDecoration": "underline" + }, + "type": "typography" + }, + "current": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + } + }, + "color": { + "default": { + "value": "{global.content.color.secondary.muted}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.primary.default}", + "type": "color" + }, + "default--alt": { + "value": "{global.content.color.secondary.emphasis}", + "type": "color" + } + } + } + }, + "breadcrumb": { + "spacing": { + "gap": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + } + }, + "pager": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.light}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + }, + "typo--bold": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.secondary.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + }, + "selected": { + "value": "{global.background.color.transparent}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.primary.subtle}", + "type": "color" + }, + "down": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "selected": { + "value": "{global.border.color.primary.muted}", + "type": "color" + } + }, + "radius": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + }, + "size": { + "md": { + "value": "{global.control.size.900}", + "type": "sizing" + } + }, + "spacing": { + "gap": { + "lg": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + } + } + }, + "tooltip": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "default-reverse": { + "value": "{global.content.color.text.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default--reverse}", + "type": "color" + }, + "default--alt": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "default-reverse": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "spacing": { + "padding": { + "vertical": { + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + } + }, + "horizontal": { + "sm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + } + } + }, + "gap": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + }, + "border": { + "radius": { + "value": "{global.border.radius.sm}", + "type": "borderRadius" + } + } + }, + "banner": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.light}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "typo--bold": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "success": { + "value": "{global.content.color.positive.emphasis}", + "type": "color" + }, + "error": { + "value": "{global.content.color.negative.emphasis}", + "type": "color" + }, + "warning": { + "value": "{global.content.color.attention.emphasis}", + "type": "color" + }, + "info": { + "value": "{global.content.color.primary.emphasis}", + "type": "color" + } + } + }, + "spacing": { + "padding": { + "vertical": { + "xsm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "sm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + } + }, + "horizontal": { + "sm": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + } + } + }, + "gap": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + }, + "background": { + "color": { + "success": { + "value": "{global.content.color.positive.subtle}", + "type": "color" + }, + "error": { + "value": "{global.background.color.negative.subtle}", + "type": "color" + }, + "warning": { + "value": "{global.background.color.attention.subtle}", + "type": "color" + }, + "info": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + } + }, + "chip": { + "content": { + "typo": { + "sm": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}px", + "fontSize": "{core.font.size.50}px" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + }, + "default--alt": { + "value": "{global.background.color.transparent}", + "type": "color" + }, + "hover--alt": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "hover": { + "value": "{global.border.color.line.default}", + "type": "color" + }, + "default--alt": { + "value": "{global.border.color.line.default}", + "type": "color" + }, + "hover--alt": { + "value": "{global.border.color.line.emphasis}", + "type": "color" + }, + "empty": { + "value": "{global.border.color.transparent}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "radius": { + "value": "{global.border.radius.rounded}", + "type": "borderRadius" + } + }, + "spacing": { + "padding": { + "horizontal": { + "sm": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + } + }, + "vertical": { + "sm": { + "value": "3px", + "type": "spacing" + } + } + } + } + }, + "toast": { + "spacing": { + "padding": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "gap": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "default--alt": { + "value": "{global.content.color.text.subtle}", + "type": "color" + }, + "default--alt--reverse": { + "value": "{global.content.color.text.muted}", + "type": "color" + } + }, + "typo": { + "sm": { + "value": "{global.content.typo.caption}", + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default--reverse}", + "type": "color" + }, + "default--reverse": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "border": { + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + }, + "color": { + "default": { + "value": "{global.border.color.line.emphasis}", + "type": "color" + }, + "default--reverse": { + "value": "{global.border.color.line.muted}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + } + }, + "menu": { + "spacing": { + "padding": { + "md": { + "value": "{global.spacing.padding.sm}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + } + }, + "gap": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + }, + "content": { + "color": { + "main": { + "default": { + "value": "{global.content.color.text.subtle}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "active": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "sub": { + "default": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "active": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + } + }, + "typo": { + "md": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "fontSize": "{core.font.size.75}px", + "lineHeight": "{core.font.lineHeight.200}px" + }, + "type": "typography" + } + } + }, + "background": { + "color": { + "main": { + "default": { + "value": "{global.background.color.secondary.emphasis}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "active": { + "value": "{global.background.color.secondary.default}", + "type": "color" + } + }, + "sub": { + "default": { + "value": "{global.background.color.secondary.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "active": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + } + } + }, + "size": { + "md": { + "value": "{global.control.size.900}", + "type": "sizing" + } + } + }, + "stepper": { + "content": { + "typo": { + "value": { + "fontFamily": "{core.font.family.main}", + "fontWeight": "{core.font.weight.medium}", + "fontSize": "{core.font.size.75}", + "lineHeight": "{core.font.lineHeight.200}" + }, + "type": "typography" + }, + "color": { + "default": { + "value": "{global.content.color.text.muted}", + "type": "color" + }, + "completed": { + "value": "{global.content.color.positive.default}", + "type": "color" + } + } + }, + "spacing": { + "gap": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "padding": { + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + } + } + }, + "background": { + "color": { + "active": { + "value": "{global.background.color.primary.default}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "active": { + "value": "{global.background.color.primary.default}", + "type": "color" + }, + "completed": { + "value": "{global.background.color.positive.default}", + "type": "color" + } + }, + "radius": { + "value": "{global.border.radius.circle}", + "type": "borderRadius" + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + } + }, + "size": { + "sm": { + "value": "{global.icon.size.sm}", + "type": "sizing" + }, + "md": { + "value": "{global.icon.size.lg}", + "type": "sizing" + } + } + }, + "accordion": { + "content": { + "typo": { + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}px", + "fontSize": "{core.font.size.100}px" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}px", + "fontSize": "{core.font.size.75}px" + }, + "type": "typography" + } + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "default--alt": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.subtle}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "radius": { + "value": "{global.border.radius.lg}", + "type": "borderRadius" + } + }, + "spacing": { + "padding": { + "md": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + } + }, + "gap": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + } + }, + "table": { + "content": { + "typo": { + "md": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + }, + "md--bold": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.200}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.100}", + "fontSize": "{core.font.size.50}" + }, + "type": "typography" + } + }, + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.subtle}", + "type": "color" + }, + "emphasis": { + "value": "{global.border.color.line.default}", + "type": "color" + } + }, + "width": { + "value": "{global.border.width.md}", + "type": "borderWidth" + }, + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + }, + "spacing": { + "padding": { + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + } + }, + "gaps": { + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + } + } + }, + "timeline": { + "content": { + "color": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "default--reverse": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + }, + "typo": { + "value": "{global.content.typo.body.sm--bold}", + "type": "typography" + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.default--reverse}", + "type": "color" + }, + "default--reverse": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + }, + "spacing": { + "gap": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "padding": { + "value": "{global.spacing.padding.lg}", + "type": "spacing" + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.emphasis}", + "type": "color" + }, + "default--reverse": { + "value": "{global.border.color.line.default--reverse}", + "type": "color" + } + }, + "width": { + "sm": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "md": { + "value": "{global.border.width.md}", + "type": "borderWidth" + } + } + } + }, + "swiper": { + "size": { + "md": { + "value": "{global.control.size.900}", + "type": "sizing" + } + }, + "content": { + "color": { + "default": { + "value": "{global.content.color.icon.default}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.muted}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.emphasis}", + "type": "color" + } + } + }, + "spacing": { + "gap": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + }, + "padding": { + "value": "{global.spacing.padding.3xlg}", + "type": "spacing" + } + }, + "border": { + "radius": { + "value": "{global.border.radius.sm}", + "type": "borderRadius" + } + } + }, + "comunica": { + "content": { + "typo": { + "01": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.regular}", + "lineHeight": "{core.font.lineHeight.300}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + }, + "02": { + "value": { + "fontFamily": "{core.font.family.alt}", + "fontWeight": "{core.font.weight.medium}", + "lineHeight": "{core.font.lineHeight.300}", + "fontSize": "{core.font.size.75}" + }, + "type": "typography" + } + }, + "color": { + "default": { + "value": "{global.content.color.text.emphasis}", + "type": "color" + }, + "default--alt": { + "value": "{global.content.color.text.subtle}", + "type": "color" + } + } + }, + "background": { + "color": { + "default": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "muted": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "emphasis": { + "value": "{global.background.color.surface.muted}", + "type": "color" + } + } + }, + "border": { + "color": { + "default": { + "value": "{global.border.color.line.muted}", + "type": "color" + }, + "default--alt": { + "value": "{global.border.color.primary.emphasis}", + "type": "color" + } + }, + "width": { + "sm": { + "value": "{global.border.width.sm}", + "type": "borderWidth" + }, + "md": { + "value": "{global.border.width.md}", + "type": "borderWidth" + } + }, + "radius": { + "value": "{global.border.radius.md}", + "type": "borderRadius" + } + }, + "spacing": { + "padding": { + "sm": { + "value": "{global.spacing.padding.2xsm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.xsm}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.padding.md}", + "type": "spacing" + }, + "xlg": { + "value": "96px", + "type": "spacing" + } + }, + "gap": { + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, + "md": { + "value": "{global.spacing.gap.md}", + "type": "spacing" + }, + "lg": { + "value": "{global.spacing.gap.lg}", + "type": "spacing" + } + } + } + }, + "menuLibrary": { + "content": { + "color": { + "main": { + "default": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "active": { + "value": "{global.content.color.primary.default}", + "type": "color" + } + }, + "sub": { + "default": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "hover": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + }, + "active": { + "value": "{global.content.color.text.default--reverse}", + "type": "color" + } + } + } + }, + "background": { + "color": { + "main": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.subtle}", + "type": "color" + }, + "active": { + "value": "{global.background.color.primary.subtle}", + "type": "color" + } + }, + "sub": { + "default": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "hover": { + "value": "{global.background.color.surface.default}", + "type": "color" + }, + "active": { + "value": "{global.background.color.surface.default}", + "type": "color" + } + } + } + } + } + }, + "$themes": [], + "$metadata": { + "tokenSetOrder": [ + "core", + "global", + "component" + ] + } +} \ No newline at end of file diff --git a/package.json b/package.json index 93d2b89d4..6c6aeb548 100644 --- a/package.json +++ b/package.json @@ -36,19 +36,32 @@ "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" }, "devDependencies": { + "@babel/eslint-parser": "^7.22.15", + "@babel/plugin-transform-export-namespace-from": "^7.23.3", "better-spawn": "^1.0.4", "chalk": "^4.1.1", "chromatic": "^6.11.4", + "eslint": "^8.50.0", + "eslint-config-airbnb-base": "^15.0.0", + "eslint-config-prettier": "^9.0.0", + "eslint-plugin-import": "^2.28.1", + "eslint-plugin-prettier": "^5.0.0", + "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": "^3.0.3", + "prettier-eslint": "^15.0.1", + "react-easy-crop": "5.0.5", "tsc-silent": "^1.2.2", "typescript": "^4.7.3", "webpack": "5", @@ -57,5 +70,6 @@ "engines": { "node": ">=14.0.0", "npm": ">=6.10.0" - } + }, + "packageManager": "yarn@1.22.19" } diff --git a/packages/calendars/CHANGELOG.md b/packages/calendars/CHANGELOG.md index 716d6a31c..784270daf 100644 --- a/packages/calendars/CHANGELOG.md +++ b/packages/calendars/CHANGELOG.md @@ -1,5 +1,2048 @@ # @bubbles-ui/calendars +## 1.2.225 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.225 + - @bubbles-ui/icons@1.2.225 + +## 1.2.224 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.224 + - @bubbles-ui/icons@1.2.224 + +## 1.2.223 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.223 + - @bubbles-ui/icons@1.2.223 + +## 1.2.222 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.222 + - @bubbles-ui/icons@1.2.222 + +## 1.2.221 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.221 + - @bubbles-ui/icons@1.2.221 + +## 1.2.220 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.220 + - @bubbles-ui/icons@1.2.220 + +## 1.2.219 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.219 + - @bubbles-ui/icons@1.2.219 + +## 1.2.218 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.218 + - @bubbles-ui/icons@1.2.218 + +## 1.2.217 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.217 + - @bubbles-ui/icons@1.2.217 + +## 1.2.216 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.216 + - @bubbles-ui/icons@1.2.216 + +## 1.2.215 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.215 + - @bubbles-ui/icons@1.2.215 + +## 1.2.214 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.214 + - @bubbles-ui/icons@1.2.214 + +## 1.2.213 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.213 + - @bubbles-ui/icons@1.2.213 + +## 1.2.212 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.212 + - @bubbles-ui/icons@1.2.212 + +## 1.2.211 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.211 + - @bubbles-ui/icons@1.2.211 + +## 1.2.210 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.210 + - @bubbles-ui/icons@1.2.210 + +## 1.2.209 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.209 + - @bubbles-ui/icons@1.2.209 + +## 1.2.208 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.208 + - @bubbles-ui/icons@1.2.208 + +## 1.2.207 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.207 + - @bubbles-ui/icons@1.2.207 + +## 1.2.206 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.206 + - @bubbles-ui/icons@1.2.206 + +## 1.2.205 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.205 + - @bubbles-ui/icons@1.2.205 + +## 1.2.204 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.204 + - @bubbles-ui/icons@1.2.204 + +## 1.2.203 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.203 + - @bubbles-ui/icons@1.2.203 + +## 1.2.202 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.202 + - @bubbles-ui/icons@1.2.202 + +## 1.2.201 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.201 + - @bubbles-ui/icons@1.2.201 + +## 1.2.200 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.200 + - @bubbles-ui/icons@1.2.200 + +## 1.2.199 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.199 + - @bubbles-ui/icons@1.2.199 + +## 1.2.198 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.198 + - @bubbles-ui/icons@1.2.198 + +## 1.2.197 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.197 + - @bubbles-ui/icons@1.2.197 + +## 1.2.196 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.196 + - @bubbles-ui/icons@1.2.196 + +## 1.2.195 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.195 + - @bubbles-ui/icons@1.2.195 + +## 1.2.194 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.194 + - @bubbles-ui/icons@1.2.194 + +## 1.2.193 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.193 + - @bubbles-ui/icons@1.2.193 + +## 1.2.192 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.192 + - @bubbles-ui/icons@1.2.192 + +## 1.2.191 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.191 + - @bubbles-ui/icons@1.2.191 + +## 1.2.190 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.190 + - @bubbles-ui/icons@1.2.190 + +## 1.2.189 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.189 + - @bubbles-ui/icons@1.2.189 + +## 1.2.188 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.188 + - @bubbles-ui/icons@1.2.188 + +## 1.2.187 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.187 + - @bubbles-ui/icons@1.2.187 + +## 1.2.186 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.186 + - @bubbles-ui/icons@1.2.186 + +## 1.2.185 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.185 + - @bubbles-ui/icons@1.2.185 + +## 1.2.184 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.184 + - @bubbles-ui/icons@1.2.184 + +## 1.2.183 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.183 + - @bubbles-ui/icons@1.2.183 + +## 1.2.182 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.182 + - @bubbles-ui/icons@1.2.182 + +## 1.2.181 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.181 + - @bubbles-ui/icons@1.2.181 + +## 1.2.180 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.180 + - @bubbles-ui/icons@1.2.180 + +## 1.2.179 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.179 + - @bubbles-ui/icons@1.2.179 + +## 1.2.178 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.178 + - @bubbles-ui/icons@1.2.178 + +## 1.2.177 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.177 + - @bubbles-ui/icons@1.2.177 + +## 1.2.176 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.176 + - @bubbles-ui/icons@1.2.176 + +## 1.2.175 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.175 + - @bubbles-ui/icons@1.2.175 + +## 1.2.174 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.174 + - @bubbles-ui/icons@1.2.174 + +## 1.2.173 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.173 + - @bubbles-ui/icons@1.2.173 + +## 1.2.172 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.172 + - @bubbles-ui/icons@1.2.172 + +## 1.2.171 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.171 + - @bubbles-ui/icons@1.2.171 + +## 1.2.170 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.170 + - @bubbles-ui/icons@1.2.170 + +## 1.2.169 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.169 + - @bubbles-ui/icons@1.2.169 + +## 1.2.168 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.168 + - @bubbles-ui/icons@1.2.168 + +## 1.2.167 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.167 + - @bubbles-ui/icons@1.2.167 + +## 1.2.166 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.166 + - @bubbles-ui/icons@1.2.166 + +## 1.2.165 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.165 + - @bubbles-ui/icons@1.2.165 + +## 1.2.164 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.164 + - @bubbles-ui/icons@1.2.164 + +## 1.2.163 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.163 + - @bubbles-ui/icons@1.2.163 + +## 1.2.162 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.162 + - @bubbles-ui/icons@1.2.162 + +## 1.2.161 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.161 + - @bubbles-ui/icons@1.2.161 + +## 1.2.160 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.160 + - @bubbles-ui/icons@1.2.160 + +## 1.2.159 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.159 + - @bubbles-ui/icons@1.2.159 + +## 1.2.158 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.158 + - @bubbles-ui/icons@1.2.158 + +## 1.2.157 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.157 + - @bubbles-ui/icons@1.2.157 + +## 1.2.156 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.156 + - @bubbles-ui/icons@1.2.156 + +## 1.2.155 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.155 + - @bubbles-ui/icons@1.2.155 + +## 1.2.154 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.154 + - @bubbles-ui/icons@1.2.154 + +## 1.2.153 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.153 + - @bubbles-ui/icons@1.2.153 + +## 1.2.152 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.152 + - @bubbles-ui/icons@1.2.152 + +## 1.2.151 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.151 + - @bubbles-ui/icons@1.2.151 + +## 1.2.150 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.150 + - @bubbles-ui/icons@1.2.150 + +## 1.2.149 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.149 + - @bubbles-ui/icons@1.2.149 + +## 1.2.148 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.148 + - @bubbles-ui/icons@1.2.148 + +## 1.2.147 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.147 + - @bubbles-ui/icons@1.2.147 + +## 1.2.146 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.146 + - @bubbles-ui/icons@1.2.146 + +## 1.2.145 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.145 + - @bubbles-ui/icons@1.2.145 + +## 1.2.144 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.144 + - @bubbles-ui/icons@1.2.144 + +## 1.2.143 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.143 + - @bubbles-ui/icons@1.2.143 + +## 1.2.142 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.142 + - @bubbles-ui/icons@1.2.142 + +## 1.2.141 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.141 + - @bubbles-ui/icons@1.2.141 + +## 1.2.140 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.140 + - @bubbles-ui/icons@1.2.140 + +## 1.2.139 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.139 + - @bubbles-ui/icons@1.2.139 + +## 1.2.138 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.138 + - @bubbles-ui/icons@1.2.138 + +## 1.2.137 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.137 + - @bubbles-ui/icons@1.2.137 + +## 1.2.136 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.136 + - @bubbles-ui/icons@1.2.136 + +## 1.2.135 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.135 + - @bubbles-ui/icons@1.2.135 + +## 1.2.134 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.134 + - @bubbles-ui/icons@1.2.134 + +## 1.2.133 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.133 + - @bubbles-ui/icons@1.2.133 + +## 1.2.132 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.132 + - @bubbles-ui/icons@1.2.132 + +## 1.2.131 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.131 + - @bubbles-ui/icons@1.2.131 + +## 1.2.130 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.130 + - @bubbles-ui/icons@1.2.130 + +## 1.2.129 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.129 + - @bubbles-ui/icons@1.2.129 + +## 1.2.128 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.128 + - @bubbles-ui/icons@1.2.128 + +## 1.2.127 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.127 + - @bubbles-ui/icons@1.2.127 + +## 1.2.126 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.126 + - @bubbles-ui/icons@1.2.126 + +## 1.2.125 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.125 + - @bubbles-ui/icons@1.2.125 + +## 1.2.124 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.124 + - @bubbles-ui/icons@1.2.124 + +## 1.2.123 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.123 + - @bubbles-ui/icons@1.2.123 + +## 1.2.122 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.122 + - @bubbles-ui/icons@1.2.122 + +## 1.2.121 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.121 + - @bubbles-ui/icons@1.2.121 + +## 1.2.120 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.120 + - @bubbles-ui/icons@1.2.120 + +## 1.2.119 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.119 + - @bubbles-ui/icons@1.2.119 + +## 1.2.118 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.118 + - @bubbles-ui/icons@1.2.118 + +## 1.2.117 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.117 + - @bubbles-ui/icons@1.2.117 + +## 1.2.116 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.116 + - @bubbles-ui/icons@1.2.116 + +## 1.2.115 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.115 + - @bubbles-ui/icons@1.2.115 + +## 1.2.114 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.114 + - @bubbles-ui/icons@1.2.114 + +## 1.2.113 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.113 + - @bubbles-ui/icons@1.2.113 + +## 1.2.112 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.112 + - @bubbles-ui/icons@1.2.112 + +## 1.2.111 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.111 + - @bubbles-ui/icons@1.2.111 + +## 1.2.110 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.110 + - @bubbles-ui/icons@1.2.110 + +## 1.2.109 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.109 + - @bubbles-ui/icons@1.2.109 + +## 1.2.108 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.108 + - @bubbles-ui/icons@1.2.108 + +## 1.2.107 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.107 + - @bubbles-ui/icons@1.2.107 + +## 1.2.106 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.106 + - @bubbles-ui/icons@1.2.106 + +## 1.2.105 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.105 + - @bubbles-ui/icons@1.2.105 + +## 1.2.104 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.104 + - @bubbles-ui/icons@1.2.104 + +## 1.2.103 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.103 + - @bubbles-ui/icons@1.2.103 + +## 1.2.102 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.102 + - @bubbles-ui/icons@1.2.102 + +## 1.2.101 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.101 + - @bubbles-ui/icons@1.2.101 + +## 1.2.100 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.100 + - @bubbles-ui/icons@1.2.100 + +## 1.2.99 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.99 + - @bubbles-ui/icons@1.2.99 + +## 1.2.98 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.98 + - @bubbles-ui/icons@1.2.98 + +## 1.2.97 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.97 + - @bubbles-ui/icons@1.2.97 + +## 1.2.96 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.96 + - @bubbles-ui/icons@1.2.96 + +## 1.2.95 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.95 + - @bubbles-ui/icons@1.2.95 + +## 1.2.94 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.94 + - @bubbles-ui/icons@1.2.94 + +## 1.2.93 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.93 + - @bubbles-ui/icons@1.2.93 + +## 1.2.92 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.92 + - @bubbles-ui/icons@1.2.92 + +## 1.2.91 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.91 + - @bubbles-ui/icons@1.2.91 + +## 1.2.90 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.90 + - @bubbles-ui/icons@1.2.90 + +## 1.2.89 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.89 + - @bubbles-ui/icons@1.2.89 + +## 1.2.88 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.88 + - @bubbles-ui/icons@1.2.88 + +## 1.2.87 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.87 + - @bubbles-ui/icons@1.2.87 + +## 1.2.86 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.86 + - @bubbles-ui/icons@1.2.86 + +## 1.2.85 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.85 + - @bubbles-ui/icons@1.2.85 + +## 1.2.84 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.84 + - @bubbles-ui/icons@1.2.84 + +## 1.2.83 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.83 + - @bubbles-ui/icons@1.2.83 + +## 1.2.82 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.82 + - @bubbles-ui/icons@1.2.82 + +## 1.2.81 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.81 + - @bubbles-ui/icons@1.2.81 + +## 1.2.80 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.80 + - @bubbles-ui/icons@1.2.80 + +## 1.2.79 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.79 + - @bubbles-ui/icons@1.2.79 + +## 1.2.78 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.78 + - @bubbles-ui/icons@1.2.78 + +## 1.2.77 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.77 + - @bubbles-ui/icons@1.2.77 + +## 1.2.76 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.76 + - @bubbles-ui/icons@1.2.76 + +## 1.2.75 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.75 + - @bubbles-ui/icons@1.2.75 + +## 1.2.74 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.74 + - @bubbles-ui/icons@1.2.74 + +## 1.2.73 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.73 + - @bubbles-ui/icons@1.2.73 + +## 1.2.72 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.72 + - @bubbles-ui/icons@1.2.72 + +## 1.2.71 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.71 + - @bubbles-ui/icons@1.2.71 + +## 1.2.70 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.70 + - @bubbles-ui/icons@1.2.70 + +## 1.2.69 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.69 + - @bubbles-ui/icons@1.2.69 + +## 1.2.68 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.68 + - @bubbles-ui/icons@1.2.68 + +## 1.2.67 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.67 + - @bubbles-ui/icons@1.2.67 + +## 1.2.66 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.66 + - @bubbles-ui/icons@1.2.66 + +## 1.2.65 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.65 + - @bubbles-ui/icons@1.2.65 + +## 1.2.64 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.64 + - @bubbles-ui/icons@1.2.64 + +## 1.2.63 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.63 + - @bubbles-ui/icons@1.2.63 + +## 1.2.62 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.62 + - @bubbles-ui/icons@1.2.62 + +## 1.2.61 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.61 + - @bubbles-ui/icons@1.2.61 + +## 1.2.60 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.60 + - @bubbles-ui/icons@1.2.60 + +## 1.2.59 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.59 + - @bubbles-ui/icons@1.2.59 + +## 1.2.58 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.58 + - @bubbles-ui/icons@1.2.58 + +## 1.2.57 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.57 + - @bubbles-ui/icons@1.2.57 + +## 1.2.56 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.56 + - @bubbles-ui/icons@1.2.56 + +## 1.2.55 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.55 + - @bubbles-ui/icons@1.2.55 + +## 1.2.54 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.54 + - @bubbles-ui/icons@1.2.54 + +## 1.2.53 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.53 + - @bubbles-ui/icons@1.2.53 + +## 1.2.52 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.52 + - @bubbles-ui/icons@1.2.52 + +## 1.2.51 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.51 + - @bubbles-ui/icons@1.2.51 + +## 1.2.50 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.50 + - @bubbles-ui/icons@1.2.50 + +## 1.2.49 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.49 + - @bubbles-ui/icons@1.2.49 + +## 1.2.48 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.48 + - @bubbles-ui/icons@1.2.48 + +## 1.2.47 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.47 + - @bubbles-ui/icons@1.2.47 + +## 1.2.46 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.46 + - @bubbles-ui/icons@1.2.46 + +## 1.2.45 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.45 + - @bubbles-ui/icons@1.2.45 + +## 1.2.44 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.44 + - @bubbles-ui/icons@1.2.44 + +## 1.2.43 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.43 + - @bubbles-ui/icons@1.2.43 + +## 1.2.42 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.42 + - @bubbles-ui/icons@1.2.42 + +## 1.2.41 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.41 + - @bubbles-ui/icons@1.2.41 + +## 1.2.40 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.40 + - @bubbles-ui/icons@1.2.40 + +## 1.2.39 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.39 + - @bubbles-ui/icons@1.2.39 + +## 1.2.38 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.38 + - @bubbles-ui/icons@1.2.38 + +## 1.2.37 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.37 + - @bubbles-ui/icons@1.2.37 + +## 1.2.36 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.36 + - @bubbles-ui/icons@1.2.36 + +## 1.2.35 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.35 + - @bubbles-ui/icons@1.2.35 + +## 1.2.34 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.34 + - @bubbles-ui/icons@1.2.34 + +## 1.2.33 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.33 + - @bubbles-ui/icons@1.2.33 + +## 1.2.32 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.32 + - @bubbles-ui/icons@1.2.32 + +## 1.2.31 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.31 + - @bubbles-ui/icons@1.2.31 + +## 1.2.30 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.30 + - @bubbles-ui/icons@1.2.30 + +## 1.2.29 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.29 + - @bubbles-ui/icons@1.2.29 + +## 1.2.28 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.28 + - @bubbles-ui/icons@1.2.28 + +## 1.2.27 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.27 + - @bubbles-ui/icons@1.2.27 + +## 1.2.26 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.26 + - @bubbles-ui/icons@1.2.26 + +## 1.2.25 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.25 + - @bubbles-ui/icons@1.2.25 + +## 1.2.24 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.24 + - @bubbles-ui/icons@1.2.24 + +## 1.2.23 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.23 + - @bubbles-ui/icons@1.2.23 + +## 1.2.22 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.22 + - @bubbles-ui/icons@1.2.22 + +## 1.2.21 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.21 + - @bubbles-ui/icons@1.2.21 + +## 1.2.20 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.20 + - @bubbles-ui/icons@1.2.20 + +## 1.2.19 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.19 + - @bubbles-ui/icons@1.2.19 + +## 1.2.18 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.18 + - @bubbles-ui/icons@1.2.18 + +## 1.2.17 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.17 + - @bubbles-ui/icons@1.2.17 + +## 1.2.16 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.16 + - @bubbles-ui/icons@1.2.16 + +## 1.2.15 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.15 + - @bubbles-ui/icons@1.2.15 + +## 1.2.14 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.14 + - @bubbles-ui/icons@1.2.14 + +## 1.2.13 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.13 + - @bubbles-ui/icons@1.2.13 + +## 1.2.12 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.12 + - @bubbles-ui/icons@1.2.12 + +## 1.2.11 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.11 + - @bubbles-ui/icons@1.2.11 + +## 1.2.10 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.10 + - @bubbles-ui/icons@1.2.10 + +## 1.2.9 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.9 + - @bubbles-ui/icons@1.2.9 + +## 1.2.8 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.8 + - @bubbles-ui/icons@1.2.8 + +## 1.2.7 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.7 + - @bubbles-ui/icons@1.2.7 + +## 1.2.6 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.6 + - @bubbles-ui/icons@1.2.6 + +## 1.2.5 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.5 + - @bubbles-ui/icons@1.2.5 + +## 1.2.4 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.4 + - @bubbles-ui/icons@1.2.4 + +## 1.2.3 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.3 + - @bubbles-ui/icons@1.2.3 + +## 1.2.2 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.2 + - @bubbles-ui/icons@1.2.2 + +## 1.1.112 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.1.112 + - @bubbles-ui/icons@1.1.112 + +## 1.1.111 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.1.111 + - @bubbles-ui/icons@1.1.111 + +## 1.1.110 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.1.110 + - @bubbles-ui/icons@1.1.110 + ## 1.1.109 ### Patch Changes diff --git a/packages/calendars/babel.config.json b/packages/calendars/babel.config.json new file mode 100644 index 000000000..fda7f779e --- /dev/null +++ b/packages/calendars/babel.config.json @@ -0,0 +1,33 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "modules": "auto", + "targets": { + "browsers": [ + "last 2 Chrome versions", + "not Chrome < 60", + "last 2 Safari versions", + "not Safari < 10.1", + "last 2 iOS versions", + "not iOS < 10.3", + "last 2 Firefox versions", + "not Firefox < 54", + "last 2 Edge versions", + "not Edge < 15" + ] + } + } + ], + "@babel/preset-react" + ], + "plugins": [ + "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-export-default-from" + ] +} diff --git a/packages/calendars/jest.config.js b/packages/calendars/jest.config.js new file mode 100644 index 000000000..1f28b84b6 --- /dev/null +++ b/packages/calendars/jest.config.js @@ -0,0 +1,19 @@ +module.exports = { + collectCoverage: true, + roots: ['./src'], + collectCoverageFrom: ['src/**/*.{js,jsx}'], + coverageDirectory: 'coverage', + testEnvironment: 'jsdom', + setupFilesAfterEnv: ['/jest.setup.js'], + moduleNameMapper: { + '\\.(css|less|scss|sass)$': 'identity-obj-proxy', + '.*\\.min\\.css$': 'identity-obj-proxy', + uuid: require.resolve('uuid'), + }, + transform: { '^.+\\.(js|jsx)$': 'babel-jest' }, + testPathIgnorePatterns: ['/node_modules/'], + transformIgnorePatterns: [ + '/node_modules/(?!swiper|ssr-window|dom7)', + '/node_modules/swiper/swiper.min.css', + ], +}; diff --git a/packages/calendars/jest.setup.js b/packages/calendars/jest.setup.js new file mode 100644 index 000000000..3f8ab6d77 --- /dev/null +++ b/packages/calendars/jest.setup.js @@ -0,0 +1,11 @@ +import '@testing-library/jest-dom'; + +global.ResizeObserver = jest.fn().mockImplementation(() => ({ + observe: jest.fn(), + unobserve: jest.fn(), + disconnect: jest.fn(), +})); + +jest.mock('swiper/css', () => {}); +jest.mock('swiper/css/navigation', () => {}); +export {}; diff --git a/packages/calendars/package.json b/packages/calendars/package.json index 3920b1e03..812496538 100644 --- a/packages/calendars/package.json +++ b/packages/calendars/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/calendars", - "version": "1.2.0", + "version": "1.2.225", "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.", "main": "lib/index.js", "module": "es/index.js", @@ -44,7 +44,9 @@ "build:storybook:clean": "rimraf ../../docs-build/calendars", "storybook": "run-s storybook:clean storybook:start", "storybook:clean": "rimraf node_modules/.cache/storybook", - "storybook:start": "start-storybook -p 9002" + "storybook:start": "start-storybook -p 9002", + "test": "jest", + "coverage": "jest --coverage" }, "dependencies": { "colord": "^2.9.2", @@ -57,8 +59,8 @@ "rrule": "^2.6.8" }, "peerDependencies": { - "@bubbles-ui/components": "1.2.0", - "@bubbles-ui/icons": "1.2.0", + "@bubbles-ui/components": "^1.2.225", + "@bubbles-ui/icons": "^1.2.225", "react": "^17.0.2", "react-dom": "^17.0.2", "webpack": "*" @@ -89,7 +91,14 @@ "load-styles": "^2.0.0", "npm-which": "^3.0.1", "rimraf": "^3.0.2", - "storybook-addon-designs": "^6.2.0" + "storybook-addon-designs": "^6.2.0", + "jest": "^29.7.0", + "@testing-library/jest-dom": "^6.1.3", + "jest-environment-jsdom": "^29.7.0", + "jest-axe": "^8.0.0", + "@testing-library/react": "^12.1.5", + "@testing-library/user-event": "^14.5.1", + "identity-obj-proxy": "^3.0.0" }, "resolutions": { "@storybook/react/webpack": "^5" diff --git a/packages/calendars/src/BigCalendar/BigCalendar.constants.js b/packages/calendars/src/BigCalendar/BigCalendar.constants.js new file mode 100644 index 000000000..7ca698df0 --- /dev/null +++ b/packages/calendars/src/BigCalendar/BigCalendar.constants.js @@ -0,0 +1,65 @@ +import PropTypes from 'prop-types'; +import { DateTime } from 'luxon'; +import { Views } from 'react-big-calendar'; + +export const TIMEZONE = DateTime.local().zoneName; +export const TODAY = DateTime.local().toJSDate(); +export const MONTH_RANGE = 'monthRange'; +export const firstDayOfWeek = 1; + +export const BIGCALENDAR_VIEWS = [Views.MONTH, Views.WEEK, Views.DAY, Views.AGENDA, MONTH_RANGE]; + +export const BIG_CALENDAR_PROP_TYPES = { + timezone: PropTypes.string, + currentView: PropTypes.oneOf(BIGCALENDAR_VIEWS), + defaultDate: PropTypes.instanceOf(Date), + locale: PropTypes.string, + events: PropTypes.array, + messages: PropTypes.shape({ + month: PropTypes.string, + week: PropTypes.string, + day: PropTypes.string, + agenda: PropTypes.string, + today: PropTypes.string, + previous: PropTypes.string, + next: PropTypes.string, + showWeekends: PropTypes.string, + allDay: PropTypes.string, + init: PropTypes.string, + end: PropTypes.string, + }), + validRange: PropTypes.shape({ + start: PropTypes.instanceOf(Date), + end: PropTypes.instanceOf(Date), + }), + hooks: PropTypes.func, + showWeekends: PropTypes.bool, + dateClick: PropTypes.func, + onSelectDay: PropTypes.func, + onRangeChange: PropTypes.func, + onSelectEvent: PropTypes.func, + eventClick: PropTypes.func, + backgroundEventClick: PropTypes.func, + addEventClick: PropTypes.func, +}; + +export const BIG_CALENDAR_DEFAULT_PROPS = { + timezone: TIMEZONE, + defaultDate: TODAY, + currentView: Views.MONTH, + showWeekends: true, + locale: 'en-EN', + messages: { + month: 'Monthly', + week: 'Weekly', + day: 'Day', + agenda: 'Agenda', + today: 'Today', + previous: 'Previous', + next: 'Next', + showWeekends: 'View weekends', + allDay: 'All day', + init: 'Init', + end: 'End', + }, +}; diff --git a/packages/calendars/src/BigCalendar/BigCalendar.js b/packages/calendars/src/BigCalendar/BigCalendar.js index 4f4ab05e4..d2937415a 100644 --- a/packages/calendars/src/BigCalendar/BigCalendar.js +++ b/packages/calendars/src/BigCalendar/BigCalendar.js @@ -1,8 +1,9 @@ +/* eslint-disable sonarjs/cognitive-complexity */ +/* eslint-disable prefer-const */ import React, { forwardRef, useEffect, useMemo, useState } from 'react'; -import PropTypes from 'prop-types'; import { forEach, isArray, isNil } from 'lodash'; import { Box } from '@mantine/core'; -import { Calendar, Views } from 'react-big-calendar'; +import { Calendar } from 'react-big-calendar'; import { DateTime, Interval } from 'luxon'; import { RRule } from 'rrule'; import 'react-big-calendar/lib/css/react-big-calendar.css'; @@ -16,14 +17,14 @@ import { DayView } from './components/DayView/DayView'; import { MonthRangeView } from './components/MonthRangeView/MonthRangeView'; import { EventWrapper } from './components/EventWrapper'; import Agenda from './components/AgentView/AgentView'; +import { + MONTH_RANGE, + BIG_CALENDAR_DEFAULT_PROPS, + firstDayOfWeek, + BIG_CALENDAR_PROP_TYPES, +} from './BigCalendar.constants'; -const TIMEZONE = DateTime.local().zoneName; -const TODAY = DateTime.local().toJSDate(); -const MONTH_RANGE = 'monthRange'; - -export const BIGCALENDAR_VIEWS = [Views.MONTH, Views.WEEK, Views.DAY, Views.AGENDA, MONTH_RANGE]; - -export const BigCalendar = forwardRef( +const BigCalendar = forwardRef( ( { timezone, @@ -50,6 +51,7 @@ export const BigCalendar = forwardRef( showToolbarAddButton = true, showToolbarToggleWeekend = true, showToolbarViewSwitcher = true, + showToolbarPeriodSelector = true, showWeekends: showWeekendsProp, printMode, dateClick = () => {}, @@ -57,30 +59,38 @@ export const BigCalendar = forwardRef( onRangeChange = () => {}, onSelectEvent = () => {}, eventClick = () => {}, - backgroundEventClick = () => {}, addEventClick = () => {}, - ...props }, - ref + ref, ) => { const [showType, setShowType] = useState('full'); const [showWeekends, setShowWeekends] = useState(showWeekendsProp); const [dateRange, setDateRange] = useState(null); - const [date, setDate] = useState(new Date()); const [hooksCreated, setHooksCreated] = useState(false); useEffect(() => setShowWeekends(showWeekendsProp), [showWeekendsProp]); - let { availableViews, showToolbar } = useMemo(() => { - let views = { month: MonthView, week: WeekView, day: DayView, agenda: Agenda }; - let showToolbar = true; + // let { availableViews, showToolbar } = useMemo(() => { + // let views = { month: MonthView, week: WeekView, day: DayView, agenda: Agenda }; + // showToolbar = true; - if (currentView === MONTH_RANGE) { - views = { monthRange: MonthRangeView }; - showToolbar = false; - } - return { availableViews: views, showToolbar }; - }, [currentView]); + // if (currentView === MONTH_RANGE) { + // views = { monthRange: MonthRangeView }; + // showToolbar = false; + // } + // return { availableViews: views, showToolbar }; + // }, [currentView]); + + let availableViews; + let showToolbar; + + if (currentView === MONTH_RANGE) { + availableViews = { monthRange: MonthRangeView }; + showToolbar = false; + } else { + availableViews = { month: MonthView, week: WeekView, day: DayView, agenda: Agenda }; + showToolbar = true; + } if (hideToolbar) { showToolbar = false; @@ -89,25 +99,15 @@ export const BigCalendar = forwardRef( // ················································· // TIMEZONE CONFIG - const firstDayOfWeek = 1; - - const { localizer, defaultDate, scrollToTime, getNow } = useMemo(() => { - // Settings.defaultZone = timezone; - return { + const { localizer, defaultDate, scrollToTime, getNow } = useMemo( + () => ({ localizer: luxonLocalizer(DateTime, { firstDayOfWeek }), defaultDate: defaultDateProp, scrollToTime: DateTime.local().toJSDate(), getNow: () => DateTime.local().toJSDate(), - }; - }, [timezone]); - - /* - useEffect(() => { - return () => { - Settings.defaultZone = timezone; // reset to browser TZ on unmount - }; - }, []); - */ + }), + [timezone], + ); // ················································· // INTERACTION HANDLE @@ -118,7 +118,7 @@ export const BigCalendar = forwardRef( forEach(eventsProp, (ev) => { if (ev.rrule) { const diff = DateTime.fromJSDate(ev.end).diff( - DateTime.fromJSDate(ev.start) + DateTime.fromJSDate(ev.start), ).milliseconds; const rule = new RRule({ @@ -130,8 +130,8 @@ export const BigCalendar = forwardRef( dateRange.start.getDate(), dateRange.start.getHours(), dateRange.start.getMinutes(), - dateRange.start.getSeconds() - ) + dateRange.start.getSeconds(), + ), ), until: new Date( Date.UTC( @@ -140,8 +140,8 @@ export const BigCalendar = forwardRef( dateRange.end.getDate(), dateRange.end.getHours(), dateRange.end.getMinutes(), - dateRange.end.getSeconds() - ) + dateRange.end.getSeconds(), + ), ), }); const dates = rule.all(); @@ -157,12 +157,12 @@ export const BigCalendar = forwardRef( } else { const range = Interval.fromDateTimes( DateTime.fromJSDate(dateRange.start), - DateTime.fromJSDate(dateRange.end) + DateTime.fromJSDate(dateRange.end), ); const e = Interval.fromDateTimes( DateTime.fromJSDate(ev.start), - DateTime.fromJSDate(ev.end) + DateTime.fromJSDate(ev.end), ); if (range.e >= e.s && range.s <= e.e) { @@ -183,29 +183,30 @@ export const BigCalendar = forwardRef( }; const handleRangeChange = (range) => { - if (isArray(range) && range.length > 1) { - const end = range[range.length - 1]; + let newRange = range; + if (isArray(newRange) && newRange.length > 1) { + const end = newRange[newRange.length - 1]; end.setHours(23, 59, 59); - range = { - start: range[0], - end: end, + newRange = { + start: newRange[0], + end, }; - } else if (isArray(range) && range.length === 1) { - const end = new Date(range[0]); + } else if (isArray(newRange) && newRange.length === 1) { + const end = new Date(newRange[0]); end.setHours(23, 59, 59); - range = { - start: range[0], + newRange = { + start: newRange[0], end, }; - } else if (isArray(range)) { - range = null; + } else if (isArray(newRange)) { + newRange = null; } - if (range) { - range.end.setHours(23, 59, 59, 59); - range.start.setHours(0, 0, 0, 0); - onRangeChange(range); - setDateRange(range); + if (newRange) { + newRange.end.setHours(23, 59, 59, 59); + newRange.start.setHours(0, 0, 0, 0); + onRangeChange(newRange); + setDateRange(newRange); } }; @@ -248,6 +249,7 @@ export const BigCalendar = forwardRef( return ( ) : false, @@ -298,60 +301,13 @@ export const BigCalendar = forwardRef( /> ); - } + }, ); -BigCalendar.defaultProps = { - timezone: TIMEZONE, - defaultDate: TODAY, - currentView: Views.MONTH, - showWeekends: true, - locale: 'en-EN', - messages: { - month: 'Monthly', - week: 'Weekly', - day: 'Day', - agenda: 'Agenda', - today: 'Today', - previous: 'Previous', - next: 'Next', - showWeekends: 'View weekends', - allDay: 'All day', - init: 'Init', - end: 'End', - }, -}; +BigCalendar.defaultProps = BIG_CALENDAR_DEFAULT_PROPS; +BigCalendar.propTypes = BIG_CALENDAR_PROP_TYPES; + +export default BigCalendar; +export { BigCalendar }; -BigCalendar.propTypes = { - timezone: PropTypes.string, - currentView: PropTypes.oneOf(BIGCALENDAR_VIEWS), - defaultDate: PropTypes.instanceOf(Date), - locale: PropTypes.string, - events: PropTypes.array, - messages: PropTypes.shape({ - month: PropTypes.string, - week: PropTypes.string, - day: PropTypes.string, - agenda: PropTypes.string, - today: PropTypes.string, - previous: PropTypes.string, - next: PropTypes.string, - showWeekends: PropTypes.string, - allDay: PropTypes.string, - init: PropTypes.string, - end: PropTypes.string, - }), - validRange: PropTypes.shape({ - start: PropTypes.instanceOf(Date), - end: PropTypes.instanceOf(Date), - }), - hooks: PropTypes.func, - showWeekends: PropTypes.bool, - dateClick: PropTypes.func, - onSelectDay: PropTypes.func, - onRangeChange: PropTypes.func, - onSelectEvent: PropTypes.func, - eventClick: PropTypes.func, - backgroundEventClick: PropTypes.func, - addEventClick: PropTypes.func, -}; +BigCalendar.displayName = 'BigCalendar'; diff --git a/packages/calendars/src/BigCalendar/BigCalendar.spec.js b/packages/calendars/src/BigCalendar/BigCalendar.spec.js new file mode 100644 index 000000000..e7fb433f2 --- /dev/null +++ b/packages/calendars/src/BigCalendar/BigCalendar.spec.js @@ -0,0 +1,163 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { userEvent } from '@testing-library/user-event'; +import BigCalendar from './BigCalendar'; +import { BIG_CALENDAR_DEFAULT_PROPS, BIGCALENDAR_VIEWS } from './BigCalendar.constants'; +import { ThemeProvider } from '@bubbles-ui/components'; +import EVENTS from './mocks/events'; + +const messages = { + month: 'Mensual', + week: 'Semanal', + day: 'Diario', + agenda: 'Agenda', + today: 'Hoy', + previous: 'Anterior', + next: 'siguiente', + showWeekends: 'Mostrar fines de semana', + display: 'Mostrar', + entirePeriod: 'Periodo completo', + onlyInitAndEnd: 'Solo mostrar inicio y final', + onlyEnd: 'Solo mostrar fecha límite', +}; + +const props = { + ...BIG_CALENDAR_DEFAULT_PROPS, + messages, + events: EVENTS, + currentView: BIGCALENDAR_VIEWS[0], + locale: 'es-ES', + defaultDate: EVENTS[0].start, +}; + +describe('BigCalendar', () => { + it('renders BigCalendar component', () => { + render( + + + + ); + expect(screen.getByText('Septiembre 2022')).toBeInTheDocument(); + expect(screen.getByText('Mensual')).toBeInTheDocument(); + expect(screen.getByText('Semanal')).toBeInTheDocument(); + expect(screen.getByText('Mostrar fines de semana')).toBeInTheDocument(); + }); + it('Change language if locale prop is changed', () => { + render( + + + + ); + expect(screen.getByText('September 2022')).toBeInTheDocument(); + }); +}); + +describe('BigCalendar header tests', () => { + it('if user click on hide weekends, the calendar should hide weekends and viceversa', async () => { + render( + + + + ); + expect(screen.queryByText('Sáb')).toBeInTheDocument(); + expect(screen.queryByText('Dom')).toBeInTheDocument(); + const switchWeekends = screen.getByTestId('label'); + await userEvent.click(switchWeekends); + expect(screen.queryByText('Sáb')).not.toBeInTheDocument(); + expect(screen.queryByText('Dom')).not.toBeInTheDocument(); + }); + + it('has today button and click it', async () => { + render( + + + + ); + const currentMonth = new Date().toLocaleDateString('es-ES', { + month: 'long', + }); + const todayButton = screen.getByText('Hoy'); + await userEvent.click(todayButton); + const regex = new RegExp(currentMonth, 'i'); + expect(screen.getByText(regex)).toBeInTheDocument(); + }); + + it('has button tho show range of events and if user click, show options', async () => { + render( + + + + ); + const inputElement = screen.getByDisplayValue('Periodo completo'); + await userEvent.click(inputElement); + expect(screen.queryByText('Solo mostrar inicio y final')).toBeInTheDocument(); + expect(screen.queryByText('Solo mostrar fecha límite')).toBeInTheDocument(); + }); + + it('has four buttons to show calendar ranges and Agenda view and every button renders the corresponding view', async () => { + render( + + + + ); + + expect(screen.queryByText('Mensual')).toBeInTheDocument(); + expect(screen.queryByText('Semanal')).toBeInTheDocument(); + expect(screen.queryByText('Diario')).toBeInTheDocument(); + expect(screen.queryByText('Agenda')).toBeInTheDocument(); + + expect(screen.queryByText('Evaluación inicial matemáticas')).toBeInTheDocument(); + expect(screen.queryByText('Proyecto: La historia detrás del cuadro')).toBeInTheDocument(); + + const semanalButton = screen.queryByText('Semanal'); + await userEvent.click(semanalButton); + expect(screen.queryByText('Evaluación inicial matemáticas')).toBeInTheDocument(); + expect(screen.queryByText('Proyecto: La historia detrás del cuadro')).not.toBeInTheDocument(); + const diarioButton = screen.queryByText('Diario'); + await userEvent.click(diarioButton); + expect(screen.queryByText('Evaluación inicial matemáticas')).toBeInTheDocument(); + expect(screen.queryByText('11:00')).toBeInTheDocument(); + const agendaButton = screen.queryByText('Agenda'); + await userEvent.click(agendaButton); + expect(screen.queryAllByText('All Day')).toHaveLength(2); + }); + + it('create event button calls addEventClick when clicked', async () => { + const addEventClick = jest.fn(); + render( + + + + ); + const addEventButton = screen.getByTestId('add-event'); + await userEvent.click(addEventButton); + expect(addEventClick).toHaveBeenCalled(); + }); + + it('if user click on chevrons, navigate on calendar', async () => { + render( + + + + ); + const chevronRight = screen.getByTestId('chevron-right'); + await userEvent.click(chevronRight); + expect(screen.queryByText('Test de Cooper')).toBeInTheDocument(); + expect(screen.queryByText('Entrega trabajo Música')).toBeInTheDocument(); + expect(screen.queryByText('Evaluación inicial matemáticas')).not.toBeInTheDocument(); + }); +}); + +describe('BigCalendar calendar tests', () => { + it('render events and click on event', async () => { + const onSelectEvent = jest.fn(); + render( + + + + ); + const mathEvent = screen.queryByText('Evaluación inicial matemáticas'); + await userEvent.click(mathEvent); + expect(onSelectEvent).toHaveBeenCalled(); + }); +}); diff --git a/packages/calendars/src/BigCalendar/BigCalendar.stories.js b/packages/calendars/src/BigCalendar/BigCalendar.stories.js index 516a29ff9..cd76bebcd 100644 --- a/packages/calendars/src/BigCalendar/BigCalendar.stories.js +++ b/packages/calendars/src/BigCalendar/BigCalendar.stories.js @@ -1,6 +1,8 @@ -import React from 'react'; +/* eslint-disable react/prop-types */ +import React, { useState } from 'react'; import { Box, Button, ColorInput, DatePicker, Select, TextInput } from '@bubbles-ui/components'; -import { BigCalendar, BIGCALENDAR_VIEWS } from './BigCalendar'; +import { BigCalendar } from './BigCalendar'; +import { BIGCALENDAR_VIEWS } from './BigCalendar.constants'; import mdx from './BigCalendar.mdx'; import EVENTS from './mocks/events'; @@ -9,8 +11,8 @@ export default { parameters: { component: BigCalendar, docs: { - page: mdx - } + page: mdx, + }, // design: { // type: 'figma', // url: 'https://www.figma.com/file/kcSXz3QZFByFDTumNgzPpV/?node-id=2962%3A31342', @@ -24,29 +26,32 @@ export default { onSelectDay: { action: 'Day selected' }, onRangeChange: { action: 'Range changed' }, onSelectEvent: { action: 'Event selected' }, - addEventClick: { action: 'Add Event clicked' } - } + addEventClick: { action: 'Add Event clicked' }, + }, }; +const heightValue = 'calc(100vh - 40px)'; + const Template = (props) => { - let messages = undefined; - if (props.locale === 'es-ES') { + let messages; + const { locale } = props; + if (locale === 'es-ES') { messages = { - month: 'Mensual', - week: 'Semanal', - day: 'Diario', + month: 'Mes', + week: 'Semana', + day: 'Día', agenda: 'Agenda', today: 'Hoy', previous: 'Anterior', next: 'siguiente', - showWeekends: 'Mostrar fines de semana', + showWeekends: 'Fines de semana', display: 'Mostrar', entirePeriod: 'Periodo completo', onlyInitAndEnd: 'Solo mostrar inicio y final', - onlyEnd: 'Solo mostrar fecha límite' + onlyEnd: 'Solo mostrar fecha límite', }; } - return ; + return ; }; export const Playground = Template.bind({}); @@ -55,24 +60,10 @@ Playground.args = { events: EVENTS, currentView: BIGCALENDAR_VIEWS[0], locale: 'es-ES', - /* - minWeekDay: 0, - maxWeekDay: 3, - timeslots: 1, - hideToolbar: true, - timeslotHeight: 100, - forceBgColorToEvents: true, - hideAllDayCells: true, - minHour: '12:15', - maxHour: '13:15', - - */ - defaultDate: EVENTS[0].start + defaultDate: EVENTS[0].start, }; -const MonthRangeTemplate = (props) => { - return ; -}; +const MonthRangeTemplate = (props) => ; export const MonthRangeView = MonthRangeTemplate.bind({}); @@ -85,18 +76,19 @@ MonthRangeView.args = { startYear: 2022, startMonth: 8, endYear: 2022, - endMonth: 11 + endMonth: 11, }, - printMode: false + printMode: false, }; const EventCreationTemplate = (props) => { - const [events, setEvents] = React.useState([]); - const [eventTitle, setEventTitle] = React.useState(''); - const [borderStyle, setBorderStyle] = React.useState(''); - const [eventColor, setEventColor] = React.useState('#000000'); - const [borderColor, setBorderColor] = React.useState('#000000'); - const [eventRange, setEventRange] = React.useState([undefined, undefined]); + const [events, setEvents] = useState([]); + const [eventTitle, setEventTitle] = useState(''); + const [borderStyle, setBorderStyle] = useState(''); + const [eventColor, setEventColor] = useState('#000000'); + const [borderColor, setBorderColor] = useState('#000000'); + const [eventStart, setEventStart] = useState(null); + const [eventEnd, setEventEnd] = useState(null); const submitHandler = (e) => { e.preventDefault(); @@ -104,11 +96,11 @@ const EventCreationTemplate = (props) => { const newEvent = { title: eventTitle, allDay: true, - start: eventRange[0], - end: eventRange[1] || eventRange[0], + start: eventStart, + end: eventEnd, originalEvent: { - calendar: { bgColor: eventColor, borderStyle: borderStyle, borderColor: borderColor } - } + calendar: { bgColor: eventColor, borderStyle, borderColor }, + }, }; setEvents([...events, newEvent]); @@ -116,11 +108,12 @@ const EventCreationTemplate = (props) => { setBorderStyle(''); setBorderColor('#000000'); setEventColor('#000000'); - setEventRange([undefined, undefined]); + setEventStart(null); + setEventEnd(null); }; return ( - + @@ -129,17 +122,20 @@ const EventCreationTemplate = (props) => { onSubmit={submitHandler} style={{ display: 'flex', flexDirection: 'column', gap: 24 }} > - + + + {showToolbarPeriodSelector ? ( + setOpened(!opened)} size={18} /> - ) - } - onFocus={handleInputFocus} - onChange={handleInputChange} - onKeyDown={handleInputKeyDown} - spellCheck={false} - /> - } - width={colorPickerComponent ? undefined : 200} - position="bottom-start" - withArrow - trapFocus - > - - {!colorPickerComponent ? ( - + setOpened(false)} + target={ + setOpened(!opened)} + size={18} + /> + ) + } + onFocus={handleInputFocus} + onChange={handleInputChange} + onKeyDown={handleInputKeyDown} + spellCheck={false} + classNames={{ input: inputClassName }} + fullWidth={fullWidth} + /> + } + width={colorPickerComponent ? undefined : 200} + position="bottom-start" + withArrow + trapFocus + > + + {!colorPickerComponent ? ( + + ) : ( + React.createElement(colorPickerComponent, { + inputValue, + onChange: setInputValue, + }) + )} + + + {clearable && inputValue && ( + + } + onClick={() => setInputValue('')} + disabled={disabled} /> - ) : ( - React.createElement(colorPickerComponent, { - inputValue: inputValue, - onChange: setInputValue, - }) - )} - - + + )} + )} ); - } + }, ); +ColorInput.displayName = 'ColorInput'; ColorInput.defaultProps = COLOR_INPUT_DEFAULT_PROPS; ColorInput.propTypes = COLOR_INPUT_PROP_TYPES; diff --git a/packages/components/src/form/DatePicker/DatePicker.js b/packages/components/src/form/DatePicker/DatePicker.js index 07bce6fb4..5f520e562 100644 --- a/packages/components/src/form/DatePicker/DatePicker.js +++ b/packages/components/src/form/DatePicker/DatePicker.js @@ -9,6 +9,7 @@ import { import { useId } from '@mantine/hooks'; import dayjs from 'dayjs'; import localizedFormat from 'dayjs/plugin/localizedFormat'; +import customParseFormat from 'dayjs/plugin/customParseFormat'; import { PluginCalendarIcon, TimeClockCircleIcon } from '@bubbles-ui/icons/outline'; import { CalendarStyles } from '../../dates/Calendar/Calendar.styles'; import { Stack } from '../../layout'; @@ -24,6 +25,31 @@ import { updateDate, updateTime } from './helpers'; import { Paragraph } from '../../typography'; dayjs.extend(localizedFormat); +dayjs.extend(customParseFormat); +function deduceDateFormat(locale) { + const date = new Date(Date.UTC(2022, 11, 20)); // Usar una fecha conocida + const formatter = new Intl.DateTimeFormat(locale, { + year: 'numeric', + month: '2-digit', + day: '2-digit', + }); + + const parts = formatter.formatToParts(date); + return parts + .map(({ type, value }) => { + switch (type) { + case 'day': + return 'DD'; + case 'month': + return 'MM'; + case 'year': + return 'YYYY'; + default: + return value; // Para separadores y otros caracteres + } + }) + .join(''); +} export const DATE_PICKER_SIZES = INPUT_WRAPPER_SIZES; export const DATE_PICKER_ORIENTATIONS = INPUT_WRAPPER_ORIENTATIONS; @@ -69,6 +95,11 @@ function TimeInput({ onChange, size, ...props }) { return ; } +TimeInput.propTypes = { + size: PropTypes.oneOf(DATE_PICKER_SIZES), + onChange: PropTypes.func, +}; + const DatePicker = forwardRef( ( { @@ -95,16 +126,22 @@ const DatePicker = forwardRef( style, ...props }, - ref + ref, ) => { const uuid = useId(); + const [inputFormat, setInputFormat] = useState('--/--/----'); // Formato inicial const [currentLocale, setCurrentLocale] = useState(locale); + const dateFormat = deduceDateFormat(currentLocale); const { classes: calendarClasses } = CalendarStyles({ size }); const Comp = range ? DateRangePicker : MantineDatePicker; const compProps = range ? { amountOfMonths: 2 } : {}; const [ready, setReady] = useState(null); const [date, setDate] = useState(userValue); const { classes } = DatePickerStyles({ size, date, range }); + useEffect(() => { + const format = deduceDateFormat(locale); + setInputFormat(format); + }, [locale]); function render() { setReady(new Date().getTime()); @@ -167,6 +204,10 @@ const DatePicker = forwardRef( dayjs(value, dateFormat, currentLocale).toDate()} disabled={disabled} autoComplete={autoComplete} locale={currentLocale} @@ -177,7 +218,7 @@ const DatePicker = forwardRef( classNames={{ ...classes, ...calendarClasses }} error={!isEmpty(error)} onChange={(v) => (range ? setDate(v) : updateDate(v, date, setDate))} - icon={} + icon={} clearButtonLabel={clearButtonLabel} /> {withTime && !range && ( @@ -196,9 +237,10 @@ const DatePicker = forwardRef( )} ); - } + }, ); +DatePicker.displayName = 'DatePicker'; DatePicker.defaultProps = DATE_PICKER_DEFAULT_PROPS; DatePicker.propTypes = DATE_PICKER_PROP_TYPES; diff --git a/packages/components/src/form/DatePicker/DatePicker.styles.js b/packages/components/src/form/DatePicker/DatePicker.styles.js index d9ec62167..6940e0031 100644 --- a/packages/components/src/form/DatePicker/DatePicker.styles.js +++ b/packages/components/src/form/DatePicker/DatePicker.styles.js @@ -1,8 +1,10 @@ import { createStyles } from '@mantine/styles'; import { getBoxShadowFromToken } from '../../theme.mixins'; -import { getInputStyle, getRightSection, getInputSizes } from '../mixins/fieldStyles.mixins'; +import { getInputStyle, getInputSizes } from '../mixins/fieldStyles.mixins'; -export const DatePickerStyles = createStyles((theme, { size, date, range }) => { +// THIS COMPONENT TAKE STYLES FROM CALENDAR COMPONENT + +const DatePickerStyles = createStyles((theme, { size, date, range }) => { const checkDate = () => { if (range) { if (Array.isArray(date)) return date?.every((value) => !!value); @@ -20,6 +22,7 @@ export const DatePickerStyles = createStyles((theme, { size, date, range }) => { ...getInputStyle(inputTheme, theme.other.global), textOverflow: 'ellipsis !important', paddingRight: checkDate() && 30, + minHeight: 40, }, dropdown: { padding: `${calendarTheme.spacing.padding.vertical} ${calendarTheme.spacing.padding.horizontal}`, @@ -37,3 +40,5 @@ export const DatePickerStyles = createStyles((theme, { size, date, range }) => { }, }; }); + +export { DatePickerStyles }; diff --git a/packages/components/src/form/DropdownButton/DropdownButton.constants.js b/packages/components/src/form/DropdownButton/DropdownButton.constants.js index 5e154f537..80ff4a333 100644 --- a/packages/components/src/form/DropdownButton/DropdownButton.constants.js +++ b/packages/components/src/form/DropdownButton/DropdownButton.constants.js @@ -2,9 +2,13 @@ import PropTypes from 'prop-types'; export const DROPDOWN_BUTTON_DEFAULT_PROPS = { children: '', + chevronUp: false, data: [], + width: 'target', }; export const DROPDOWN_BUTTON_PROP_TYPES = { children: PropTypes.node, data: PropTypes.array, + chevronUp: PropTypes.bool, + width: PropTypes.oneOf(['auto', 'target']), }; diff --git a/packages/components/src/form/DropdownButton/DropdownButton.js b/packages/components/src/form/DropdownButton/DropdownButton.js index 0dec5b1ef..3620136eb 100644 --- a/packages/components/src/form/DropdownButton/DropdownButton.js +++ b/packages/components/src/form/DropdownButton/DropdownButton.js @@ -1,57 +1,65 @@ import React, { useMemo, useState } from 'react'; +import { ChevDownIcon, ChevUpIcon } from '@bubbles-ui/icons/outline'; +import { noop } from 'lodash'; import { DropdownButtonStyles } from './DropdownButton.styles'; import { DROPDOWN_BUTTON_DEFAULT_PROPS, DROPDOWN_BUTTON_PROP_TYPES, } from './DropdownButton.constants'; import { Button } from '../Button'; -import { ChevDownIcon } from '@bubbles-ui/icons/outline'; -import { Popover } from '../../overlay'; +import { Popover } from '../../overlay/Popover'; import { Dropdown, Item } from '../../overlay/Dropdown'; import { ImageLoader } from '../../misc'; -import { isFunction } from 'lodash'; -const DropdownButton = ({ itemComponent, data, ...props }) => { +const DropdownButton = ({ itemComponent, data, chevronUp, width, ...props }) => { const [opened, setOpened] = useState(false); - const handleOnOption = (onOption) => { - return () => { - isFunction(onOption) && onOption(); + const handleOnOption = + (onOption = noop) => + () => { + onOption(); setOpened(false); }; - }; function renderIcon(icon) { - if (!icon) return; + if (!icon) return null; if (typeof icon === 'string') { return ; } return icon; } - const handledData = useMemo(() => { - return data.map((item) => { - const handledOnClick = handleOnOption(item.onClick); - return { ...item, onClick: handledOnClick }; - }); - }, [data]); + const handledData = useMemo( + () => + data.map((item) => { + const handledOnClick = handleOnOption(item.onClick); + return { ...item, onClick: handledOnClick }; + }), + [data], + ); const { classes, cx } = DropdownButtonStyles({}, { name: 'DropdownButton' }); return ( } + rightIcon={ + chevronUp ? ( + + ) : ( + + ) + } onClick={() => setOpened(!opened)} textAlign="appart" /> } - width="target" + width={width} closeOnEscape - closeOnClickOutside + closeOnClickOutside={true} onClose={() => setOpened(false)} trapFocus styles={{ boxShadow: 'none', border: 'none' }} diff --git a/packages/components/src/form/DropdownButton/DropdownButton.stories.js b/packages/components/src/form/DropdownButton/DropdownButton.stories.js index 101b674d7..05d47ab01 100644 --- a/packages/components/src/form/DropdownButton/DropdownButton.stories.js +++ b/packages/components/src/form/DropdownButton/DropdownButton.stories.js @@ -1,5 +1,6 @@ import React from 'react'; -import { Box } from '@mantine/core'; +import { Box } from '../../layout'; +import { Stack } from '../../layout/Stack/Stack'; import { DropdownButton } from './DropdownButton'; import { DROPDOWN_BUTTON_DEFAULT_PROPS } from './DropdownButton.constants'; import mdx from './DropdownButton.mdx'; @@ -22,9 +23,13 @@ export default { }, }; -const Template = ({ ...props }) => { - return ; -}; +const Template = ({ ...props }) => ( + + + + + +); export const Playground = Template.bind({}); @@ -32,7 +37,7 @@ Playground.args = { ...DROPDOWN_BUTTON_DEFAULT_PROPS, children: 'Click me', data: [ - { label: 'Item 1', onClick: () => console.log('Item 1 clicked') }, + { label: 'Item with very long label', onClick: () => console.log('Item 1 clicked') }, { label: 'Item 2', onClick: () => console.log('Item 2 clicked') }, { label: 'Item 3', onClick: () => console.log('Item 3 clicked') }, ], diff --git a/packages/components/src/form/FileUpload/FileUpload.js b/packages/components/src/form/FileUpload/FileUpload.js index 921535ba6..389af5bd1 100644 --- a/packages/components/src/form/FileUpload/FileUpload.js +++ b/packages/components/src/form/FileUpload/FileUpload.js @@ -2,14 +2,26 @@ import React, { useMemo, useRef } from 'react'; import PropTypes from 'prop-types'; import { Group, Text } from '@mantine/core'; import { Dropzone as MantineDropzone } from '@mantine/dropzone'; +import { SynchronizeArrowIcon, RemoveCircleIcon, CheckCircleIcon } from '@bubbles-ui/icons/outline'; +import { DeleteBinIcon } from '@bubbles-ui/icons/solid'; +import { isEmpty, isFunction } from 'lodash'; import { FileUploadStyles } from './FileUpload.styles'; -import { Stack, Box } from '../../layout/'; +import { Stack, Box } from '../../layout'; import { FileItemDisplay } from '../../informative/FileItemDisplay'; import { Alert } from '../../feedback/Alert'; -import { InputWrapper, INPUT_WRAPPER_PROP_TYPES, ActionButton, Button } from '../../form'; -import { DeleteBinIcon } from '@bubbles-ui/icons/solid/'; -import { SynchronizeArrowIcon } from '@bubbles-ui/icons/outline'; -import { isEmpty, isFunction } from 'lodash'; +import { InputWrapper, INPUT_WRAPPER_PROP_TYPES } from '../InputWrapper'; +import { Button } from '../Button'; +import { Loader } from '../../feedback/Loader'; + +function getRemoveButtonLabel(label) { + // return label or "Remove" in brower language + return label || navigator.language === 'es' ? 'Borrar' : 'Remove'; +} + +function getUploadButtonLabel(label) { + // return label or "Upload" in brower language + return label || navigator.language === 'es' ? 'Subir' : 'Upload'; +} export const FILE_UPLOAD_DEFAULT_PROPS = { disabled: false, @@ -21,6 +33,8 @@ export const FILE_UPLOAD_DEFAULT_PROPS = { initialFiles: [], inputWrapperProps: {}, useAria: true, + fullWidth: false, + labels: {}, }; export const FILE_UPLOAD_PROP_TYPES = { @@ -36,12 +50,17 @@ export const FILE_UPLOAD_PROP_TYPES = { title: PropTypes.string, message: PropTypes.string, }), + labels: PropTypes.shape({ + removeButton: PropTypes.string, + uploadButton: PropTypes.string, + }), hideUploadButton: PropTypes.bool, single: PropTypes.bool, inputWrapperProps: PropTypes.shape(INPUT_WRAPPER_PROP_TYPES), initialFiles: PropTypes.arrayOf(PropTypes.object), accept: PropTypes.arrayOf(PropTypes.string), useAria: PropTypes.bool, + fullWidth: PropTypes.bool, }; const FileUpload = ({ @@ -60,6 +79,8 @@ const FileUpload = ({ initialFiles, accept, useAria, + labels, + fullWidth, ...props }) => { const openRef = useRef(); @@ -69,14 +90,14 @@ const FileUpload = ({ const onDropHandler = (acceptedFiles) => { const newFiles = [...files, ...acceptedFiles]; - isFunction(onChange) && onChange(newFiles.length === 1 ? newFiles[0] : newFiles); + if (isFunction(onChange)) onChange(newFiles.length === 1 ? newFiles[0] : newFiles); setFiles(newFiles); setError(false); }; const removeFile = (index) => { const newFiles = files.filter((file, fileIndex) => fileIndex !== index); - isFunction(onChange) && onChange(newFiles.length === 1 ? newFiles[0] : newFiles); + if (isFunction(onChange)) onChange(newFiles.length === 1 ? newFiles[0] : newFiles); setFiles(newFiles); }; @@ -89,13 +110,27 @@ const FileUpload = ({ React.useEffect(() => { if (!initialFiles || (initialFiles && initialFiles.length === 0)) { removeFiles(); + } else { + setFiles(initialFiles); } }, [initialFiles]); - const { classes, cx } = FileUploadStyles( - { disabled, single, files, hasError }, - { name: 'FileUpload' } + const { classes, theme } = FileUploadStyles( + { disabled, single, files, hasError, fullWidth }, + { name: 'FileUpload' }, ); + + const getFileUrl = (file) => { + if ('File' in window && file instanceof File && file.type.indexOf('image') >= 0) { + return URL.createObjectURL(file); + } + if (file?.url && file?.type?.indexOf('image') >= 0) { + return file.url; + } + + return null; + }; + return ( @@ -103,6 +138,7 @@ const FileUpload = ({ {...props} accept={accept} loading={loading} + disabled={disabled || loading} multiple={multipleUpload} onDrop={onDropHandler} classNames={classes} @@ -136,21 +172,82 @@ const FileUpload = ({ {errorMessage.message} )} - {!!files.length && ( - + {files.length > 0 && ( + {files.map((file, index) => ( - - - removeFile(index)}> - } /> - - + + + + {(file.status === 'loading' || loading) && ( + + + + + + )} + {file.status === 'success' && ( + + + + )} + {file.status === 'error' && ( + + + + )} + + {!disabled && ( + + + + )} + ))} )} {!hideUploadButton && ( - + )} diff --git a/packages/components/src/form/FileUpload/FileUpload.stories.js b/packages/components/src/form/FileUpload/FileUpload.stories.js index f22a1e237..235db489a 100644 --- a/packages/components/src/form/FileUpload/FileUpload.stories.js +++ b/packages/components/src/form/FileUpload/FileUpload.stories.js @@ -1,9 +1,9 @@ import React from 'react'; import { Box } from '@mantine/core'; +import { MIME_TYPES } from '@mantine/dropzone'; +import { CloudUploadIcon, DownloadIcon } from '@bubbles-ui/icons/outline'; import { FileUpload, FILE_UPLOAD_DEFAULT_PROPS } from './FileUpload'; import mdx from './FileUpload.mdx'; -import { MIME_TYPES } from '@mantine/dropzone'; -import { CloudUploadIcon } from '@bubbles-ui/icons/outline'; export default { title: 'Molecules/Form/FileUpload', @@ -20,18 +20,41 @@ export default { argTypes: { onChange: { action: 'File dropped' }, accept: { options: MIME_TYPES, control: { type: 'multi-select' } }, + status: { options: ['error', 'loading', 'success'], control: { type: 'select' } }, }, }; -const Template = ({ children, ...props }) => { - return {children}; -}; +const Template = ({ children, ...props }) => {children}; export const Playground = Template.bind({}); Playground.args = { ...FILE_UPLOAD_DEFAULT_PROPS, - icon: , + icon: , + title: 'Click to browse your file', + subtitle: 'or drop here a file from your computer', + errorMessage: { title: 'Error', message: 'File was rejected' }, +}; + +export const WithLoaders = Template.bind({}); + +WithLoaders.args = { + ...FILE_UPLOAD_DEFAULT_PROPS, + initialFiles: [ + { + name: 'My document.docx', + status: 'success', + }, + { + name: 'My awesome image.svg', + status: 'loading', + }, + { + name: 'My boring pdf.pdf', + status: 'error', + }, + ], + icon: , title: 'Click to browse your file', subtitle: 'or drop here a file from your computer', errorMessage: { title: 'Error', message: 'File was rejected' }, diff --git a/packages/components/src/form/FileUpload/FileUpload.styles.js b/packages/components/src/form/FileUpload/FileUpload.styles.js index 9e43bccb2..002623380 100644 --- a/packages/components/src/form/FileUpload/FileUpload.styles.js +++ b/packages/components/src/form/FileUpload/FileUpload.styles.js @@ -1,20 +1,23 @@ import { createStyles } from '@mantine/styles'; -import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../theme.mixins'; +import { pxToRem, getFontExpressive } from '../../theme.mixins'; const getActive = (theme) => ({ - padding: pxToRem(24), - border: `${pxToRem(2)} solid ${theme.colors.interactive01}`, - backgroundColor: theme.colors.interactive01v1, - '.mantine-FileUpload-title': { - color: theme.colors.interactive01, - }, - '.mantine-FileUpload-icon': { - color: theme.colors.interactive01d, - }, + padding: pxToRem(25), + border: `${theme.border.width} solid ${theme.border.color.hover}`, + backgroundColor: theme.background.color.hover, + // '.mantine-FileUpload-title': { + // color: theme.content.color.hover, + // }, + // '.mantine-FileUpload-subtitle': { + // color: theme.content.color.hover, + // }, + // '.mantine-FileUpload-icon': { + // color: theme.content.color.hover, + // }, }); const getDisabledStyles = (disabled, theme) => { - if (!disabled) return; + if (!disabled) return {}; return { backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0], borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2], @@ -26,8 +29,9 @@ const getDisabledStyles = (disabled, theme) => { }; }; -export const FileUploadStyles = createStyles((theme, { disabled, single, files, hasError }) => { +const FileUploadStyles = createStyles((theme, { disabled, single, files, hasError, fullWidth }) => { const hideDropzone = single && files.length > 0; + const dropzoneTheme = theme.other.dropzone; return { root: { @@ -36,14 +40,14 @@ export const FileUploadStyles = createStyles((theme, { disabled, single, files, justifyContent: 'center', padding: pxToRem(25), border: hasError - ? `1px solid ${theme.colors.fatic01}` - : `${pxToRem(1)} solid ${theme.colors.interactive01d}`, - borderRadius: pxToRem(2), - '&:hover': { ...getActive(theme) }, + ? `${dropzoneTheme.border.width} solid ${theme.colors.fatic01}` + : `${dropzoneTheme.border.width} solid ${dropzoneTheme.border.color.default}`, + borderRadius: dropzoneTheme.border.radius, + '&:hover': { ...getActive(dropzoneTheme) }, ...getDisabledStyles(disabled, theme), }, active: { - ...getActive(theme), + ...getActive(dropzoneTheme), }, groupContainer: { pointerEvents: 'none', @@ -55,30 +59,25 @@ export const FileUploadStyles = createStyles((theme, { disabled, single, files, textAlign: 'center', }, icon: { - color: theme.colors.interactive01h, + color: dropzoneTheme.content.color.icon, }, title: { - ...getFontExpressive(theme.fontSizes['2']), + ...(dropzoneTheme.content['text--medium'] ?? {}), marginTop: pxToRem(9), - color: theme.colors.text01, + color: dropzoneTheme.content.color.default, }, subtitle: { - ...getFontProductive(theme.fontSizes['2']), + ...(dropzoneTheme.content.text ?? {}), marginTop: pxToRem(8), - color: theme.colors.text02, + color: dropzoneTheme.content.color['default--subtle'], }, droppedFile: { - padding: `${pxToRem(28)} ${pxToRem(16)} ${pxToRem(28)} ${pxToRem(28)}`, - display: 'flex', - justifyContent: 'space-between', - button: { - color: theme.colors.text05, - }, + width: 468, + // padding: `${pxToRem(28)} ${pxToRem(16)} ${pxToRem(28)} ${pxToRem(28)}`, }, fileList: { marginTop: !hideDropzone && pxToRem(theme.spacing[4]), - border: `1px solid ${theme.colors.interactive01h}`, - borderRadius: pxToRem(2), + width: 'min-content', }, errorAlert: { marginTop: pxToRem(theme.spacing[4]), @@ -86,5 +85,16 @@ export const FileUploadStyles = createStyles((theme, { disabled, single, files, uploadButton: { marginTop: pxToRem(theme.spacing[4]), }, + fileItemDisplay: { + ...theme.other.global.content.typo.body['sm--semiBold'], + padding: '18px 8px', + borderWidth: 1, + borderStyle: 'solid', + borderColor: theme.other.global.border.color.line.muted, + borderRadius: 4, + minWidth: '100%', + }, }; }); + +export { FileUploadStyles }; diff --git a/packages/components/src/form/FileUpload/index.js b/packages/components/src/form/FileUpload/index.js index bb3059df5..fca98b5be 100644 --- a/packages/components/src/form/FileUpload/index.js +++ b/packages/components/src/form/FileUpload/index.js @@ -1,3 +1 @@ -import { FileUpload } from './FileUpload'; - -export { FileUpload }; +export * from './FileUpload'; 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..1146da042 100644 --- a/packages/components/src/form/IconButton/IconButton.js +++ b/packages/components/src/form/IconButton/IconButton.js @@ -1,23 +1,15 @@ 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'; +import { + ICON_BUTTON_COLORS, + ICON_BUTTON_DEFAULT_PROPS, + ICON_BUTTON_VARIANTS, + ICON_BUTTON_PROP_TYPES, +} from './IconButton.constants'; -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 IconButton = forwardRef( +const IconButton = forwardRef( ( { color: colorProp, @@ -33,7 +25,7 @@ export const IconButton = forwardRef( useAria, ...props }, - ref + ref, ) => { const radius = rounded ? 'xl' : 'xs'; const color = ICON_BUTTON_COLORS.includes(colorProp) @@ -42,7 +34,7 @@ export const IconButton = forwardRef( const variant = ICON_BUTTON_VARIANTS.includes(variantProp) ? variantProp : ICON_BUTTON_DEFAULT_PROPS.variant; - const { classes, cx } = IconButtonStyles({ color, size, variant }); + const { classes } = IconButtonStyles({ color, size, variant }); return ( ); - } + }, ); IconButton.defaultProps = ICON_BUTTON_DEFAULT_PROPS; +IconButton.propTypes = ICON_BUTTON_PROP_TYPES; +IconButton.displayName = 'IconButton'; -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, -}; +export { IconButton }; +export default IconButton; diff --git a/packages/components/src/form/IconButton/IconButton.stories.js b/packages/components/src/form/IconButton/IconButton.stories.js index 5386ea076..97ec12e50 100644 --- a/packages/components/src/form/IconButton/IconButton.stories.js +++ b/packages/components/src/form/IconButton/IconButton.stories.js @@ -1,12 +1,13 @@ import React from 'react'; import { ChevronRightIcon } from '@bubbles-ui/icons/outline'; +import { Box } from '../../layout'; +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 { @@ -29,13 +30,11 @@ export default { }, }; -const Template = ({ ...props }) => { - return ( - - - - ); -}; +const Template = ({ ...props }) => ( + + + +); export const Playground = Template.bind({}); diff --git a/packages/components/src/form/IconButton/IconButton.styles.js b/packages/components/src/form/IconButton/IconButton.styles.js index c9cdf91af..ab053f58a 100644 --- a/packages/components/src/form/IconButton/IconButton.styles.js +++ b/packages/components/src/form/IconButton/IconButton.styles.js @@ -1,8 +1,9 @@ +/* eslint-disable import/prefer-default-export */ import { createStyles } from '@mantine/styles'; -import { pxToRem, getPaddings, getFontExpressive } from './../../theme.mixins'; +import { pxToRem, getBoxShadowFromToken } from '../../theme.mixins'; -const getSizes = (size, spacing) => { - return { +const getSizes = (size, spacing) => + ({ xs: { fontSize: pxToRem(14), width: spacing['7'], @@ -28,10 +29,10 @@ const getSizes = (size, spacing) => { height: spacing['10'], svg: { height: spacing['5'] }, }, - }[size]; -}; + }[size]); const getVariant = (variant, theme, color) => { + const buttonIconTheme = theme.other.buttonIcon; const variants = { default: { positive: { @@ -72,30 +73,47 @@ 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', }, }, }, transparent: {}, + menuButton: { + width: 30, + positive: { + backgroundColor: 'transparent', + '&:hover': { + backgroundColor: 'rgba(255, 255, 255, 0.15) !important', + }, + '&:active': { + backgroundColor: 'rgba(255, 255, 255, 0.15) !important', + borderColor: theme.colors.interactive01, + }, + '&:focus': { + backgroundColor: 'rgba(255, 255, 255, 0.15) !important', + borderColor: '#fff', + }, + }, + }, }; return variants[variant][color]; }; -export const IconButtonStyles = createStyles((theme, { size, color, variant }) => { - return { - root: { - marginRight: pxToRem(0), - marginLeft: pxToRem(0), - border: '2px solid transparent', - ...getSizes(size || 'md', theme.spacing), - ...getVariant(variant, theme, color), - }, - }; -}); +export const IconButtonStyles = createStyles((theme, { size, color, variant }) => ({ + root: { + marginRight: pxToRem(0), + marginLeft: pxToRem(0), + border: '2px solid transparent', + ...getSizes(size || 'md', theme.spacing), + ...getVariant(variant, theme, color), + }, +})); diff --git a/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js b/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js index 8c8bae5ae..ac0234d08 100644 --- a/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js +++ b/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js @@ -1,9 +1,11 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { isFunction, isString, isNil } from 'lodash'; -import { CloudUploadIcon, UndoIcon } from '@bubbles-ui/icons/outline/'; -import { Box, Stack } from '../../layout'; -import { Button } from '../../form'; +import { CloudUploadIcon, SynchronizeArrowsIcon } from '@bubbles-ui/icons/outline/'; +import { DeleteBinIcon } from '@bubbles-ui/icons/solid/'; +import { Box } from '../../layout/Box'; +import { Stack } from '../../layout/Stack'; +import { Button } from '../Button'; import { ImageLoader } from '../../misc/ImageLoader'; import { ImagePreviewInputStyles } from './ImagePreviewInput.styles'; @@ -13,17 +15,27 @@ export const IMAGE_PREVIEW_INPUT_DEFAULT_PROPS = { uploadButton: '', }, previewURL: '', + width: 224, + height: 132, }; export const IMAGE_PREVIEW_INPUT_PROP_TYPES = { labels: PropTypes.shape({ uploadButton: PropTypes.string, changeImage: PropTypes.string, + removeButton: PropTypes.string, }), - value: PropTypes.instanceOf(File), - previewURL: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(File)]), + value: PropTypes.any, + previewURL: PropTypes.oneOfType([PropTypes.string, PropTypes.any]), previewStyle: PropTypes.object, control: PropTypes.element, onChange: PropTypes.func, + readonly: PropTypes.bool, + disabled: PropTypes.bool, + useAria: PropTypes.bool, + noPicker: PropTypes.bool, + objectFit: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, }; const ImagePreviewInput = ({ @@ -36,7 +48,11 @@ const ImagePreviewInput = ({ readonly, disabled, useAria, - ...props + noPicker, + onShowDrawer, + objectFit, + width, + height, }) => { const [imagePreview, setImagePreview] = useState(previewURL); const [imageValue, setImageValue] = useState(value); @@ -57,33 +73,37 @@ const ImagePreviewInput = ({ }, [value]); const resetImage = () => { - isFunction(onChange) && onChange(null); + if (isFunction(onChange)) onChange(null); setImagePreview(null); setImageValue(null); }; const openFileBrowser = () => { - let input = document.createElement('input'); + const input = document.createElement('input'); input.type = 'file'; input.accept = 'image/*'; input.onchange = (e) => { const file = e.target.files[0]; file.path = file.name; setImageValue(file); - isFunction(onChange) && onChange(file); + if (isFunction(onChange)) onChange(file); }; input.click(); }; + const handleShowDrawer = () => { + if (isFunction(onShowDrawer)) onShowDrawer(true); + }; + const getControl = () => { - if (!control) + if (!control && !noPicker) return ( - ); - return React.cloneElement(control, { onClick: openFileBrowser }); + return !noPicker ? React.cloneElement(control, { onClick: openFileBrowser }) : null; }; useEffect(() => { @@ -93,31 +113,44 @@ const ImagePreviewInput = ({ } }, [imageValue]); - const { classes, cx } = ImagePreviewInputStyles({}); + const { classes } = ImagePreviewInputStyles({}); return ( {!imagePreview ? ( getControl() ) : ( - + {!readonly && !disabled ? ( - + + diff --git a/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.stories.js b/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.stories.js index b1f06118b..e036a2639 100644 --- a/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.stories.js +++ b/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.stories.js @@ -44,6 +44,7 @@ Playground.args = { labels: { changeImage: 'Change image', uploadButton: 'Upload image', + removeButton: 'Remove', }, previewURL: 'https://images.unsplash.com/photo-1643892593347-d19c62b8cea5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY0NTExNDkyMg&ixlib=rb-1.2.1&q=80&w=1080', diff --git a/packages/components/src/form/ImageProfilePicker/ImageProfilePicker.js b/packages/components/src/form/ImageProfilePicker/ImageProfilePicker.js new file mode 100644 index 000000000..dedc82129 --- /dev/null +++ b/packages/components/src/form/ImageProfilePicker/ImageProfilePicker.js @@ -0,0 +1,208 @@ +import React, { useRef, useState } from 'react'; +import PropTypes from 'prop-types'; +import Cropper from 'react-easy-crop'; +import { noop } from 'lodash'; +import { DeleteBinIcon, RefreshIcon } from '@bubbles-ui/icons/solid'; +import { CloudUploadIcon } from '@bubbles-ui/icons/outline'; +import { getCroppedCanvas } from './helpers/canvasUtils'; +import { ImageProfilePickerStyles } from './ImageProfilePiker.styles'; +import { SkeletonCompact } from './skeletons/SkeletonCompact'; +import { SkeletonDefault } from './skeletons/SkeletonDefault'; +import { Box, Stack } from '../../layout'; +import { Modal } from '../../overlay'; +import { Avatar } from '../../informative'; +import { Button } from '../Button'; +import { Slider } from '../Slider'; + +const CROP_SIZE = 160; +const VARIANTS = { + DEFAULT: 'default', + COMPACT: 'compact', +}; +export const IMAGE_PROFILE_PICKER_VARIANTS = Object.values(VARIANTS); + +const variantLayoutProps = { + [VARIANTS.DEFAULT]: { + direction: 'column', + justifyContent: 'center', + }, + [VARIANTS.COMPACT]: { + direction: 'row', + }, +}; + +const avatarSize = { + [VARIANTS.DEFAULT]: 'xlg', + [VARIANTS.COMPACT]: 'lg', +}; + +function readFile(file) { + return new Promise((resolve) => { + const reader = new FileReader(); + reader.addEventListener('load', () => resolve(reader.result), false); + reader.readAsDataURL(file); + }); +} + +export default function ImageProfilePicker({ + fullName, + url, + onChange = noop, + loading = false, + labels = {}, + variant = 'default', +}) { + const [imageSrc, setImageSrc] = React.useState(null); + const [crop, setCrop] = useState({ x: 0, y: 0 }); + const [rotation, setRotation] = useState(0); + const [zoom, setZoom] = useState(2); + const [isModalOpen, setIsModalOpen] = useState(false); + const [croppedAreaPixels, setCroppedAreaPixels] = useState(null); + const [avatarUrl, setAvatarUrl] = useState(url); + const fileInputRef = useRef(null); + + const { classes } = ImageProfilePickerStyles(); + + const onFileChange = async (e) => { + if (e.target.files && e.target.files.length > 0) { + const file = e.target.files[0]; + const imageDataUrl = await readFile(file); + setImageSrc(imageDataUrl); + setIsModalOpen(true); + } + }; + + const handleButtonClick = () => { + fileInputRef.current.click(); // Disparar el clic del input de tipo file + }; + + const onModalClose = () => { + setIsModalOpen(false); + setZoom(1); + setRotation(0); + setImageSrc(null); + fileInputRef.current.value = ''; + }; + + const onDelete = () => { + setAvatarUrl(null); + onChange(null); + }; + + const showCroppedImage = async () => { + try { + const croppedCanvas = await getCroppedCanvas(imageSrc, croppedAreaPixels, rotation); + croppedCanvas.toBlob((file) => { + file.name = 'avatar.jpeg'; + onChange(file); + setAvatarUrl(URL.createObjectURL(file)); + onModalClose(); + }, 'image/jpeg'); + } catch (e) { + console.error(e); + } + }; + + const onCropComplete = (croppedArea, croppedPixels) => { + setCroppedAreaPixels(croppedPixels); + }; + + if (loading) { + if (variant === VARIANTS.COMPACT) { + return ; + } + return ; + } + + return ( + <> + + + + + {!avatarUrl ? ( + + ) : ( + + + + + )} + + + + + + + + + + + + + + + + + + + + ); +} + +ImageProfilePicker.propTypes = { + fullName: PropTypes.string.isRequired, + labels: PropTypes.any, + url: PropTypes.string, + onChange: PropTypes.func, + loading: PropTypes.bool, + variant: PropTypes.oneOf(['default', 'compact']), +}; diff --git a/packages/components/src/form/ImageProfilePicker/ImageProfilePicker.mdx b/packages/components/src/form/ImageProfilePicker/ImageProfilePicker.mdx new file mode 100644 index 000000000..3cb1cf5bc --- /dev/null +++ b/packages/components/src/form/ImageProfilePicker/ImageProfilePicker.mdx @@ -0,0 +1,55 @@ +import { Story, Props, Source, Preview } from '@storybook/addon-docs'; +import * as stories from './ImageProfilePicker.stories.js'; +import { ImageProfilePicker } from './ImageProfilePicker.js'; +import { Box } from '@mantine/core'; +import { ThemeProvider } from './../../ThemeProvider'; + +# Input + +[Source code](https://github.com/leemonade/bubbles/tree/main/packages/components/src/form/ImageProfilePicker/ImageProfilePicker.js) + +## Table of Contents + + + + +- [Overview](#overview) +- [Component API](#component-api) +- [References](#references) +- [Feedback](#feedback) + +## Overview + +ImageProfilePicker is a picker to choose an image and resize to fit in a profile avatar. + + + + + +## Component API + + + + + + + +## References + +[MDN: ARIA ImageProfilePicker role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/imageprofilepicker_role) + +[W3: Role attribute](https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute) + +## Feedback + +Help us improve this component by providing feedback, asking questions on Slack, or updating this file on +[GitHub](https://github.com/leemonade/bubbles/edit/main/packages/components/src/form/ImageProfilePicker/ImageProfilePicker.mdx) diff --git a/packages/components/src/form/ImageProfilePicker/ImageProfilePicker.stories.js b/packages/components/src/form/ImageProfilePicker/ImageProfilePicker.stories.js new file mode 100644 index 000000000..278a83be0 --- /dev/null +++ b/packages/components/src/form/ImageProfilePicker/ImageProfilePicker.stories.js @@ -0,0 +1,47 @@ +import React from 'react'; +import mdx from './ImageProfilePicker.mdx'; +import ImageProfilePicker, { IMAGE_PROFILE_PICKER_VARIANTS } from './ImageProfilePicker'; + +export default { + title: 'Organisms/Form/ImageProfilePicker', + parameters: { + component: ImageProfilePicker, + docs: { + page: mdx, + }, + design: { + type: 'figma', + // url: 'https://www.figma.com/file/kcSXz3QZFByFDTumNgzPpV/?node-id=2962%3A31342', + }, + }, + argTypes: { + onChange: { action: 'Value changed' }, + variant: { + options: IMAGE_PROFILE_PICKER_VARIANTS, + control: { type: 'select' }, + }, + loading: { + type: 'boolean', + }, + }, +}; + +const Template = ({ ...props }) => ( + +); + +export const Playground = Template.bind({}); + +Playground.args = { + fullName: 'John Doe', + loading: false, +}; diff --git a/packages/components/src/form/ImageProfilePicker/ImageProfilePiker.styles.js b/packages/components/src/form/ImageProfilePicker/ImageProfilePiker.styles.js new file mode 100644 index 000000000..3d9cdb903 --- /dev/null +++ b/packages/components/src/form/ImageProfilePicker/ImageProfilePiker.styles.js @@ -0,0 +1,9 @@ +import { createStyles } from '@mantine/styles'; + +const ImageProfilePickerStyles = createStyles((theme) => ({ + root: { + width: '100%', + }, +})); + +export { ImageProfilePickerStyles }; diff --git a/packages/components/src/form/ImageProfilePicker/helpers/canvasUtils.js b/packages/components/src/form/ImageProfilePicker/helpers/canvasUtils.js new file mode 100644 index 000000000..d3f8ae398 --- /dev/null +++ b/packages/components/src/form/ImageProfilePicker/helpers/canvasUtils.js @@ -0,0 +1,144 @@ +export const createImage = (url) => + new Promise((resolve, reject) => { + const image = new Image(); + image.addEventListener('load', () => resolve(image)); + image.addEventListener('error', (error) => reject(error)); + image.setAttribute('crossOrigin', 'anonymous'); // needed to avoid cross-origin issues on CodeSandbox + image.src = url; + }); + +export function getRadianAngle(degreeValue) { + return (degreeValue * Math.PI) / 180; +} + +/** + * Returns the new bounding area of a rotated rectangle. + */ +export function rotateSize(width, height, rotation) { + const rotRad = getRadianAngle(rotation); + + return { + width: + Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height), + height: + Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height), + }; +} + +/** + * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop + */ +/** + * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop + */ +export async function getCroppedCanvas( + imageSrc, + pixelCrop, + rotation = 0, + flip = { horizontal: false, vertical: false } +) { + const image = await createImage(imageSrc); + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + if (!ctx) { + return null; + } + + const rotRad = getRadianAngle(rotation); + + // calculate bounding box of the rotated image + const { width: bBoxWidth, height: bBoxHeight } = rotateSize( + image.width, + image.height, + rotation + ); + + // set canvas size to match the bounding box + canvas.width = bBoxWidth; + canvas.height = bBoxHeight; + + // translate canvas context to a central location to allow rotating and flipping around the center + ctx.translate(bBoxWidth / 2, bBoxHeight / 2); + ctx.rotate(rotRad); + ctx.scale(flip.horizontal ? -1 : 1, flip.vertical ? -1 : 1); + ctx.translate(-image.width / 2, -image.height / 2); + + // Set background color to white before drawing the rotated image + ctx.fillStyle = 'white'; + ctx.fillRect(-image.width / 2, -image.height / 2, image.width, image.height); + + // draw rotated image + ctx.drawImage(image, 0, 0); + + const croppedCanvas = document.createElement('canvas'); + const croppedCtx = croppedCanvas.getContext('2d'); + + if (!croppedCtx) { + return null; + } + + // Set the size of the cropped canvas + croppedCanvas.width = pixelCrop.width; + croppedCanvas.height = pixelCrop.height; + + // Set background color to white for the cropped canvas + croppedCtx.fillStyle = 'white'; + croppedCtx.fillRect(0, 0, pixelCrop.width, pixelCrop.height); + + // Draw the cropped image onto the new canvas + croppedCtx.drawImage( + canvas, + pixelCrop.x, + pixelCrop.y, + pixelCrop.width, + pixelCrop.height, + 0, + 0, + pixelCrop.width, + pixelCrop.height + ); + + return croppedCanvas; + + // As Base64 string + // return croppedCanvas.toDataURL('image/jpeg'); + + // As a blob + /* + return new Promise((resolve, reject) => { + croppedCanvas.toBlob((file) => { + resolve(URL.createObjectURL(file)); + }, 'image/jpeg'); + }); + */ +} + +export async function getRotatedImage(imageSrc, rotation = 0) { + const image = await createImage(imageSrc); + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + const orientationChanged = + rotation === 90 || + rotation === -90 || + rotation === 270 || + rotation === -270; + if (orientationChanged) { + canvas.width = image.height; + canvas.height = image.width; + } else { + canvas.width = image.width; + canvas.height = image.height; + } + + ctx.translate(canvas.width / 2, canvas.height / 2); + ctx.rotate((rotation * Math.PI) / 180); + ctx.drawImage(image, -image.width / 2, -image.height / 2); + + return new Promise((resolve) => { + canvas.toBlob((file) => { + resolve(URL.createObjectURL(file)); + }, 'image/png'); + }); +} diff --git a/packages/components/src/form/ImageProfilePicker/index.js b/packages/components/src/form/ImageProfilePicker/index.js new file mode 100644 index 000000000..5aaf4a562 --- /dev/null +++ b/packages/components/src/form/ImageProfilePicker/index.js @@ -0,0 +1,3 @@ +import ImageProfilePicker from './ImageProfilePicker'; + +export { ImageProfilePicker }; diff --git a/packages/components/src/form/ImageProfilePicker/skeletons/SkeletonCompact.js b/packages/components/src/form/ImageProfilePicker/skeletons/SkeletonCompact.js new file mode 100644 index 000000000..4d6850310 --- /dev/null +++ b/packages/components/src/form/ImageProfilePicker/skeletons/SkeletonCompact.js @@ -0,0 +1,14 @@ +import React from 'react'; +import { Skeleton } from '@mantine/core'; +import { Stack } from '../../../layout'; + +function SkeletonCompact() { + return ( + + + + + ); +} + +export { SkeletonCompact }; diff --git a/packages/components/src/form/ImageProfilePicker/skeletons/SkeletonDefault.js b/packages/components/src/form/ImageProfilePicker/skeletons/SkeletonDefault.js new file mode 100644 index 000000000..c1207641f --- /dev/null +++ b/packages/components/src/form/ImageProfilePicker/skeletons/SkeletonDefault.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { Skeleton } from '@mantine/core'; +import { Stack } from '../../../layout'; + +function SkeletonDefault() { + return ( + + + + + ); +} + +export { SkeletonDefault }; diff --git a/packages/components/src/form/Input/Input.js b/packages/components/src/form/Input/Input.js index 8af03adf2..c40876306 100644 --- a/packages/components/src/form/Input/Input.js +++ b/packages/components/src/form/Input/Input.js @@ -1,9 +1,10 @@ import React, { forwardRef } from 'react'; +import PropTypes from 'prop-types'; import { Input as MantineInput } from '@mantine/core'; import { InputStyles } from './Input.styles'; export const INPUT_SIZES = ['sm', 'md']; -export const Input = forwardRef( +const Input = forwardRef( ( { radius, @@ -15,20 +16,22 @@ export const Input = forwardRef( size: sizeProp = 'md', autoComplete = 'off', classNames = {}, + fullWidth, ...props }, - ref + ref, ) => { const hasIcon = !!icon; const size = INPUT_SIZES.includes(sizeProp) ? sizeProp : 'md'; - const { classes, cx } = InputStyles({ size, disabled, hasIcon }); + const { classes, cx } = InputStyles( + { size, disabled, hasIcon, hasRightSection: !!rightSection, fullWidth }, + { name: 'Input' }, + ); return ( ); - } + }, ); + +Input.displayName = 'Input'; +Input.propTypes = { + size: PropTypes.oneOf(INPUT_SIZES), + variant: PropTypes.any, + radius: PropTypes.any, + icon: PropTypes.node, + rightSection: PropTypes.node, + invalid: PropTypes.bool, + disabled: PropTypes.bool, + autoComplete: PropTypes.string, + classNames: PropTypes.any, +}; + +export { Input }; diff --git a/packages/components/src/form/Input/Input.styles.js b/packages/components/src/form/Input/Input.styles.js index fc26c6eb5..87c7a19bb 100644 --- a/packages/components/src/form/Input/Input.styles.js +++ b/packages/components/src/form/Input/Input.styles.js @@ -1,20 +1,32 @@ import { createStyles } from '@mantine/styles'; -import { getPaddings, getFocusStyles, getSpacing, pxToRem } from '../../theme.mixins'; import { getInputStyle, getInputSizes } from '../mixins/fieldStyles.mixins'; -export const InputStyles = createStyles((theme, { size, disabled, hasIcon }) => { - const inputTheme = theme.other.input; - return { - root: {}, - input: { - ...getInputSizes(size || 'md', inputTheme.spacing.padding, hasIcon), - ...getInputStyle(inputTheme, theme.other.global, disabled), - height: 'auto', - }, - rightSection: { color: inputTheme.content.color.icon }, - icon: { - width: 32, - color: inputTheme.content.color.icon, - }, - }; -}); +const InputStyles = createStyles( + (theme, { size, disabled, hasIcon, hasRightSection, fullWidth }) => { + const inputTheme = theme.other.input; + const inputSizes = getInputSizes(size || 'md', inputTheme.spacing.padding, hasIcon); + + if (hasRightSection) { + inputSizes.paddingRight = 40; + } + + return { + wrapper: { + width: fullWidth ? '100%' : 'auto', + }, + input: { + ...getInputStyle(inputTheme, theme.other.global, disabled), + ...inputSizes, + height: 'auto', + minHeight: 40, + }, + rightSection: { color: inputTheme.content.color.icon, paddingRight: 6 }, + icon: { + width: 32, + color: inputTheme.content.color.icon, + }, + }; + }, +); + +export { InputStyles }; diff --git a/packages/components/src/form/InputDescription/InputDescription.js b/packages/components/src/form/InputDescription/InputDescription.js index 15395c284..f72092576 100644 --- a/packages/components/src/form/InputDescription/InputDescription.js +++ b/packages/components/src/form/InputDescription/InputDescription.js @@ -1,15 +1,15 @@ import React from 'react'; import { Text } from '@mantine/core'; +import { AlertInformationCircleIcon } from '@bubbles-ui/icons/solid'; +import { Box } from '../../layout/Box'; import { INPUT_DESCRIPTION_DEFAULT_PROPS, INPUT_DESCRIPTION_PROP_TYPES, } from './InputDescription.constants'; import { InputDescriptionStyles } from './InputDescription.styles'; -import { AlertInformationCircleIcon } from '@bubbles-ui/icons/solid'; -import { Box } from '../../layout'; -const InputDescription = ({ message, withIcon, ...props }) => { - const { classes, cx } = InputDescriptionStyles({ withIcon }); +const InputDescription = ({ message, withIcon }) => { + const { classes } = InputDescriptionStyles({ withIcon }); return ( diff --git a/packages/components/src/form/InputDescription/InputDescription.styles.js b/packages/components/src/form/InputDescription/InputDescription.styles.js index 5d687b2bd..598813660 100644 --- a/packages/components/src/form/InputDescription/InputDescription.styles.js +++ b/packages/components/src/form/InputDescription/InputDescription.styles.js @@ -1,6 +1,6 @@ import { createStyles } from '@mantine/styles'; -export const InputDescriptionStyles = createStyles((theme, { withIcon }) => { +const InputDescriptionStyles = createStyles((theme, { withIcon }) => { const labelTheme = theme.other.label; return { container: { @@ -21,3 +21,5 @@ export const InputDescriptionStyles = createStyles((theme, { withIcon }) => { }, }; }); + +export { InputDescriptionStyles }; diff --git a/packages/components/src/form/InputDescription/index.js b/packages/components/src/form/InputDescription/index.js index 5c7c703bf..264c3cb95 100644 --- a/packages/components/src/form/InputDescription/index.js +++ b/packages/components/src/form/InputDescription/index.js @@ -1,3 +1 @@ -import { InputDescription } from './InputDescription'; - -export { InputDescription }; +export * from './InputDescription'; diff --git a/packages/components/src/form/InputError/InputError.js b/packages/components/src/form/InputError/InputError.js index 01e3ddcf6..1398e81c6 100644 --- a/packages/components/src/form/InputError/InputError.js +++ b/packages/components/src/form/InputError/InputError.js @@ -10,7 +10,7 @@ const InputError = ({ message }) => { const { classes } = InputErrorStyles({}); return ( - + {isObjectLike(message) ? message.message : message} diff --git a/packages/components/src/form/InputError/InputError.styles.js b/packages/components/src/form/InputError/InputError.styles.js index 17e1c8d9c..79955c165 100644 --- a/packages/components/src/form/InputError/InputError.styles.js +++ b/packages/components/src/form/InputError/InputError.styles.js @@ -1,13 +1,17 @@ import { createStyles } from '@mantine/styles'; import { getErrorStyle } from '../mixins/fieldStyles.mixins'; -export const InputErrorStyles = createStyles((theme, {}) => { - return { - error: { - ...getErrorStyle(theme), - }, - errorIcon: { - color: theme.colors.fatic01, - }, - }; -}); +const InputErrorStyles = createStyles((theme) => ({ + root: { + flexWrap: 'nowrap', + alignItems: 'start', + }, + error: { + ...getErrorStyle(theme), + }, + errorIcon: { + color: theme.colors.fatic01, + }, +})); + +export { InputErrorStyles }; diff --git a/packages/components/src/form/InputLabel/InputLabel.constants.js b/packages/components/src/form/InputLabel/InputLabel.constants.js index 166df313d..57b674f0d 100644 --- a/packages/components/src/form/InputLabel/InputLabel.constants.js +++ b/packages/components/src/form/InputLabel/InputLabel.constants.js @@ -5,10 +5,12 @@ export const INPUT_LABEL_DEFAULT_PROPS = { description: '', withDescriptionIcon: false, required: false, + showEmptyLabel: false, }; export const INPUT_LABEL_PROP_TYPES = { label: PropTypes.string, description: PropTypes.string, withDescriptionIcon: PropTypes.bool, required: PropTypes.bool, + showEmptyLabel: PropTypes.bool, }; diff --git a/packages/components/src/form/InputLabel/InputLabel.js b/packages/components/src/form/InputLabel/InputLabel.js index 5e6fcf881..3f2fe42e0 100644 --- a/packages/components/src/form/InputLabel/InputLabel.js +++ b/packages/components/src/form/InputLabel/InputLabel.js @@ -1,19 +1,26 @@ import React from 'react'; +import { isEmpty } from 'lodash'; +import { Box } from '../../layout/Box'; +import { Text } from '../../typography/Text'; +import { InputDescription } from '../InputDescription'; import { InputLabelStyles } from './InputLabel.styles'; import { INPUT_LABEL_DEFAULT_PROPS, INPUT_LABEL_PROP_TYPES } from './InputLabel.constants'; -import { Text } from '../../typography'; -import { InputDescription } from '../InputDescription'; -import { isEmpty } from 'lodash'; -import { Box } from '../../layout'; -const InputLabel = ({ label, description, withDescriptionIcon, required, ...props }) => { - const { classes, cx } = InputLabelStyles({}, { name: 'InputLabel' }); +const InputLabel = ({ + label, + description, + withDescriptionIcon, + required, + showEmptyLabel, + ...props +}) => { + const { classes } = InputLabelStyles({}, { name: 'InputLabel' }); return ( - {!isEmpty(label) && ( + {(!isEmpty(label) || showEmptyLabel) && ( - {label} + {!isEmpty(label) ? label : } {required && *} )} diff --git a/packages/components/src/form/InputLabel/InputLabel.stories.js b/packages/components/src/form/InputLabel/InputLabel.stories.js index 8ab75dfbb..512c92232 100644 --- a/packages/components/src/form/InputLabel/InputLabel.stories.js +++ b/packages/components/src/form/InputLabel/InputLabel.stories.js @@ -18,9 +18,7 @@ export default { argTypes: {}, }; -const Template = ({ ...props }) => { - return ; -}; +const Template = ({ ...props }) => ; export const Playground = Template.bind({}); diff --git a/packages/components/src/form/InputLabel/InputLabel.styles.js b/packages/components/src/form/InputLabel/InputLabel.styles.js index 3b51752a9..54235ae3f 100644 --- a/packages/components/src/form/InputLabel/InputLabel.styles.js +++ b/packages/components/src/form/InputLabel/InputLabel.styles.js @@ -1,7 +1,8 @@ import { createStyles } from '@mantine/styles'; -export const InputLabelStyles = createStyles((theme, {}) => { +const InputLabelStyles = createStyles((theme) => { const labelTheme = theme.other.label; + return { container: { display: 'flex', @@ -10,7 +11,7 @@ export const InputLabelStyles = createStyles((theme, {}) => { }, label: { color: labelTheme.content.color.default, - ...labelTheme.content.typo['01'], + ...labelTheme.content.typo['02'], }, required: { marginLeft: labelTheme.spacing.gap.sm, @@ -18,3 +19,5 @@ export const InputLabelStyles = createStyles((theme, {}) => { }, }; }); + +export { InputLabelStyles }; diff --git a/packages/components/src/form/InputWrapper/InputWrapper.constants.js b/packages/components/src/form/InputWrapper/InputWrapper.constants.js index ee57ca0dd..afba554c8 100644 --- a/packages/components/src/form/InputWrapper/InputWrapper.constants.js +++ b/packages/components/src/form/InputWrapper/InputWrapper.constants.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; -export const INPUT_WRAPPER_SIZES = ['sm', 'md']; +export const INPUT_WRAPPER_SIZES = ['xs', 'sm', 'md']; export const INPUT_WRAPPER_ORIENTATIONS = ['horizontal', 'vertical']; export const INPUT_WRAPPER_SHARED_PROPS = { @@ -21,6 +21,7 @@ export const INPUT_WRAPPER_PROP_TYPES = { headerStyle: PropTypes.any, contentStyle: PropTypes.any, autoComplete: PropTypes.string, + showEmptyLabel: PropTypes.bool, }; export const INPUT_WRAPPER_DEFAULT_PROPS = { label: '', diff --git a/packages/components/src/form/InputWrapper/InputWrapper.js b/packages/components/src/form/InputWrapper/InputWrapper.js index 194311053..aeef2686c 100644 --- a/packages/components/src/form/InputWrapper/InputWrapper.js +++ b/packages/components/src/form/InputWrapper/InputWrapper.js @@ -4,6 +4,7 @@ import { Box } from '../../layout/Box'; import { Stack } from '../../layout/Stack'; import { InputError } from '../InputError'; import { InputHelp } from '../InputHelp'; +import { InputLabel } from '../InputLabel'; import { InputWrapperStyles } from './InputWrapper.styles'; import { INPUT_WRAPPER_DEFAULT_PROPS, @@ -11,7 +12,6 @@ import { INPUT_WRAPPER_ORIENTATIONS, INPUT_WRAPPER_SIZES, } from './InputWrapper.constants'; -import { InputLabel } from '../InputLabel'; const InputWrapper = ({ orientation: orientationProp, @@ -31,6 +31,7 @@ const InputWrapper = ({ className, style, formValues, + showEmptyLabel, ...props }) => { const size = INPUT_WRAPPER_SIZES.includes(sizeProp) ? sizeProp : 'md'; @@ -46,7 +47,7 @@ const InputWrapper = ({ return ( {/* Label & Description */} - {hasHeader && ( + {(hasHeader || showEmptyLabel) && ( { - return { - root: { - display: 'flex', - flexDirection: orientation === 'vertical' ? 'column' : 'row', - gap: theme.spacing[2], - position: 'relative', - }, - header: { - width: orientation === 'vertical' ? 'auto' : '35%', - }, - content: { - flex: 1, - width: '100%', - }, - }; -}); +const InputWrapperStyles = createStyles((theme, { size, orientation }) => ({ + root: { + display: 'flex', + flexDirection: orientation === 'vertical' ? 'column' : 'row', + gap: theme.spacing[2], + position: 'relative', + }, + header: { + width: orientation === 'vertical' ? 'auto' : '35%', + }, + content: { + flex: 1, + width: '100%', + }, +})); + +export { InputWrapperStyles }; diff --git a/packages/components/src/form/ListInput/ListInput.js b/packages/components/src/form/ListInput/ListInput.js index 609f1b003..bd66934e1 100644 --- a/packages/components/src/form/ListInput/ListInput.js +++ b/packages/components/src/form/ListInput/ListInput.js @@ -2,20 +2,18 @@ import React, { useEffect, useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; import PropTypes from 'prop-types'; import { findIndex, isFunction, map } from 'lodash'; -import { AddCircleIcon } from '@bubbles-ui/icons/outline'; +import { AddCircleIcon } from '@bubbles-ui/icons/solid'; +import { useId } from '@mantine/hooks'; import { Box } from '../../layout'; import { ListInputStyles } from './ListInput.styles'; import { InputWrapper } from '../InputWrapper'; -import { useId } from '@mantine/hooks'; import { TextInput } from '../TextInput'; import { Button } from '../Button'; import { SortableList } from '../../informative'; -import { ListItem } from './components/ListItem'; +import { ListItem, ItemWrapperWithBorder } from './components/ListItem'; export const LIST_INPUT_DEFAULT_PROPS = { - inputRender: (props) => { - return ; - }, + inputRender: (props) => , listRender: , onChange: () => {}, valueKey: 'value', @@ -23,10 +21,32 @@ export const LIST_INPUT_DEFAULT_PROPS = { errorRequiredMessage: 'Required', hideAddButton: false, useAria: true, + hideInput: false, + withItemBorder: false, + withInputBorder: false, }; export const LIST_INPUT_PROP_TYPES = { hideAddButton: PropTypes.bool, useAria: PropTypes.bool, + valueKey: PropTypes.string, + addButtonLabel: PropTypes.string, + errorRequiredMessage: PropTypes.string, + inputRender: PropTypes.func, + listRender: PropTypes.func, + onChange: PropTypes.func, + required: PropTypes.bool, + readonly: PropTypes.bool, + disabled: PropTypes.bool, + canAdd: PropTypes.bool, + size: PropTypes.any, + value: PropTypes.arrayOf(PropTypes.object), + error: PropTypes.string, + help: PropTypes.string, + description: PropTypes.string, + label: PropTypes.string, + hideInput: PropTypes.bool, + withItemBorder: PropTypes.bool, + withInputBorder: PropTypes.bool, }; const ListInput = ({ @@ -48,6 +68,9 @@ const ListInput = ({ value: originalValue, onChange, useAria, + hideInput, + withItemBorder, + withInputBorder, }) => { const { classes, cx } = ListInputStyles({}); @@ -64,7 +87,7 @@ const ListInput = ({ ...item, __key: uuidv4(), })) - : [] + : [], ); const uuid = useId(); @@ -101,7 +124,7 @@ const ListInput = ({ ...item, __key: uuidv4(), })), - true + true, ); }, [originalValue]); @@ -115,6 +138,8 @@ const ListInput = ({ } }, [value]); + const ListInputWrapper = withInputBorder ? ItemWrapperWithBorder : React.Fragment; + return ( { - return React.cloneElement(ListRender, { - ...props, + itemRender={(itemProps) => + React.cloneElement(ListRender, { + ...itemProps, readonly, + withBorder: withItemBorder, inputRender: InputRender, editingKey, valueKey, errorRequiredMessage, - editItem: () => editItem(props.item), + editItem: () => editItem(itemProps.item), stopEdit: () => setEditingKey(null), onChange: (event) => { - const index = findIndex(value, { __key: props.item.__key }); + const index = findIndex(value, { __key: itemProps.item.__key }); value[index][valueKey] = event; setValue([...value]); setEditingKey(null); }, - }); - }} + }) + } useAria={useAria} /> @@ -158,32 +184,36 @@ const ListInput = ({ ? { display: 'flex', flexDirection: 'row', - gap: theme.spacing[4], + gap: theme.spacing[2], width: '100%', flex: 1, } : {} } > - - {React.cloneElement(InputRender, { - value: valueKey ? activeItem[valueKey] : activeItem, - onChange: (event) => { - setActiveItem(valueKey ? { ...activeItem, [valueKey]: event } : event); - if (event) setHasError(false); - }, - required: true, - error: hasError ? errorRequiredMessage : null, - addItem, - })} - - {!hideAddButton ? ( - - - - ) : null} + {hideInput ? null : ( + + + {React.cloneElement(InputRender, { + value: valueKey ? activeItem[valueKey] : activeItem, + onChange: (event) => { + setActiveItem(valueKey ? { ...activeItem, [valueKey]: event } : event); + if (event) setHasError(false); + }, + required: true, + error: hasError ? errorRequiredMessage : null, + addItem, + })} + + {!hideAddButton ? ( + + + + ) : null} + + )} ) : null} diff --git a/packages/components/src/form/ListInput/ListInput.stories.js b/packages/components/src/form/ListInput/ListInput.stories.js index 422589b0b..4b4506570 100644 --- a/packages/components/src/form/ListInput/ListInput.stories.js +++ b/packages/components/src/form/ListInput/ListInput.stories.js @@ -1,6 +1,8 @@ import React from 'react'; import { LIST_INPUT_DEFAULT_PROPS, ListInput } from './ListInput'; import mdx from './ListInput.mdx'; +import { Box } from '../../layout/Box'; +import { Button } from '../Button'; export default { title: 'Molecules/Form/ListInput', @@ -26,10 +28,16 @@ function ListInputRender({ t, ...props }) { } const Template = ({ children, ...props }) => { + const [showInput, setShowInput] = React.useState(false); return ( - - {children} - + + + {children} + + + ); }; @@ -39,4 +47,5 @@ Playground.args = { // myBooleanProp: false, // mySelectProp: 'Hello' ...LIST_INPUT_DEFAULT_PROPS, + value: [{ value: 'Hola' }, { value: 'Mundo' }], }; diff --git a/packages/components/src/form/ListInput/components/ListItem.js b/packages/components/src/form/ListInput/components/ListItem.js index 69ba32676..f6da0fabf 100644 --- a/packages/components/src/form/ListInput/components/ListItem.js +++ b/packages/components/src/form/ListInput/components/ListItem.js @@ -1,14 +1,40 @@ import React, { forwardRef, useEffect, useState } from 'react'; +import PropTypes from 'prop-types'; import { RemoveIcon, SortDragIcon } from '@bubbles-ui/icons/outline'; import { CheckIcon, DeleteBinIcon, EditWriteIcon } from '@bubbles-ui/icons/solid'; +import { isFunction } from 'lodash'; import { Box, Stack } from '../../../layout'; import { ActionButton } from '../../ActionButton'; -import { isFunction } from 'lodash'; -const ItemValueRender2 = ({ item }) => { - return ({ width: '100%' })} dangerouslySetInnerHTML={{ __html: item }} />; +const ItemValueRender2 = ({ item }) => ( + ({ width: '100%' })} dangerouslySetInnerHTML={{ __html: item }} /> +); + +ItemValueRender2.propTypes = { + item: PropTypes.string, }; +export const ItemWrapperWithBorder = ({ children }) => ( + ({ width: '100%', padding: '4px 0' })}> + ({ + border: `1px solid ${theme.other.global.border.color.line.subtle}`, + borderRadius: 4, + padding: theme.spacing[4], + backgroundColor: 'white', + })} + > + {children} + + +); + +ItemWrapperWithBorder.propTypes = { + children: PropTypes.node, +}; + +const getRenderComponent = (Component) => (isFunction(Component) ? : Component); + const ListItem = forwardRef( ( { @@ -27,20 +53,16 @@ const ListItem = forwardRef( readonly, errorRequiredMessage, index, + withBorder, }, - ref + ref, ) => { const [value, setValue] = useState(item[valueKey]); const [hasError, setHasError] = useState(false); - const InputRender = isFunction(IInputRender) ? : IInputRender; - - const ItemContainerRender = isFunction(IItemContainerRender) ? ( - - ) : ( - IItemContainerRender - ); - const ItemValueRender = isFunction(IItemValueRender) ? : IItemValueRender; + const InputRender = getRenderComponent(IInputRender); + const ItemContainerRender = getRenderComponent(IItemContainerRender); + const ItemValueRender = getRenderComponent(IItemValueRender); function update() { if (value) { @@ -55,34 +77,42 @@ const ListItem = forwardRef( setValue(item[valueKey]); }, [item]); - let children = React.cloneElement(ItemContainerRender, { - children: [ - !readonly ? ( - ({ marginRight: theme.spacing[4] })}> - - - ) : null, + const renderSortableIcon = () => ( + ({ marginRight: theme.spacing[4] })}> + + + ); + const renderActionButtons = () => ( + + } + disabled={!!editingKey} + onClick={editItem} + /> + } + disabled={!!editingKey} + onClick={removeItem} + /> + + ); + + const renderChildren = () => { + let children = [ + !readonly ? renderSortableIcon() : null, React.cloneElement(ItemValueRender, { item: item[valueKey], index, key: 2, }), - !readonly ? ( - - } disabled={!!editingKey} onClick={editItem} /> - } disabled={!!editingKey} onClick={removeItem} /> - - ) : null, - ], - }); - if (editingKey === item.__key) { - children = React.cloneElement(ItemContainerRender, { - children: [ - ({ marginRight: theme.spacing[4] })}> - - , - ({ width: '100%', marginRight: theme.spacing[4] })}> + !readonly ? renderActionButtons() : null, + ]; + + if (editingKey === item.__key) { + children = [ + renderSortableIcon(), + ({ width: '100%', marginRight: theme.spacing[4] })} key={2}> {React.cloneElement(InputRender, { value, onChange: (event) => { @@ -94,7 +124,7 @@ const ListItem = forwardRef( error: hasError ? errorRequiredMessage : null, })} , - + } onClick={update} /> } @@ -104,9 +134,13 @@ const ListItem = forwardRef( }} /> , - ], - }); - } + ]; + } + + return React.cloneElement(ItemContainerRender, { children }); + }; + + const Wrapper = withBorder ? ItemWrapperWithBorder : React.Fragment; return ( ({ display: 'flex' })} > - {children} + {renderChildren()} ); - } + }, ); +ListItem.displayName = 'ListItem'; +ListItem.propTypes = { + provided: PropTypes.any, + item: PropTypes.any, + removeItem: PropTypes.any, + editItem: PropTypes.any, + inputRender: PropTypes.any, + itemContainerRender: PropTypes.any, + itemValueRender: PropTypes.any, + editingKey: PropTypes.any, + valueKey: PropTypes.any, + stopEdit: PropTypes.any, + classes: PropTypes.any, + onChange: PropTypes.any, + readonly: PropTypes.any, + errorRequiredMessage: PropTypes.any, + index: PropTypes.any, + withBorder: PropTypes.bool, +}; + export { ListItem }; diff --git a/packages/components/src/form/MultiSelect/MultiSelect.js b/packages/components/src/form/MultiSelect/MultiSelect.js index f61e01773..076bc59e3 100644 --- a/packages/components/src/form/MultiSelect/MultiSelect.js +++ b/packages/components/src/form/MultiSelect/MultiSelect.js @@ -1,31 +1,35 @@ import React, { forwardRef, useEffect, useMemo, useRef } from 'react'; -import { MultiSelectStyles } from './MultiSelect.styles'; +import Proptypes from 'prop-types'; import { find, isArray, isEmpty, isFunction, isString } from 'lodash'; import { MultiSelect as MantineMultiSelect } from '@mantine/core'; -import { ActionButton } from '../ActionButton'; import { ChevDownIcon, RemoveIcon } from '@bubbles-ui/icons/outline'; -import { InputWrapper } from '../InputWrapper'; import { useId } from '@mantine/hooks'; -import { Badge } from '../../informative'; +import { ActionButton } from '../ActionButton'; +import { InputWrapper } from '../InputWrapper'; +import { Badge } from '../../informative/Badge'; +import { Box } from '../../layout/Box'; +import { Dropdown, Item } from '../../overlay/Dropdown'; +import { MultiSelectStyles } from './MultiSelect.styles'; import { MULTI_SELECT_DEFAULT_PROPS, MULTI_SELECT_ORIENTATIONS, MULTI_SELECT_PROP_TYPES, MULTI_SELECT_SIZES, } from './MultiSelect.constants'; -import { Box } from '../../layout'; -import { Dropdown, Item } from '../../overlay/Dropdown'; const GetValueComponent = forwardRef( - ({ others: { Component, classNames, onRemove, ...others } }, ref) => { - return ( - - - - ); - } + ({ others: { Component, classNames, onRemove, ...others } }, ref) => ( + + + + ), ); +GetValueComponent.displayName = 'GetValueComponent'; +GetValueComponent.propTypes = { + others: Proptypes.any, +}; + const MultiSelect = forwardRef( ( { @@ -56,7 +60,7 @@ const MultiSelect = forwardRef( style, ...props }, - ref + ref, ) => { const hasIcon = !!icon; const [show, setShow] = React.useState(true); @@ -95,7 +99,7 @@ const MultiSelect = forwardRef( // TODO: MEGATODO Por culpa de maxSelectedValues hemos tenido que repintar el MultiSelect de mantine. React.useEffect(() => { - if (!value || !value.length) { + if (!value?.length) { setShow(false); setTimeout(() => { setShow(true); @@ -115,9 +119,9 @@ const MultiSelect = forwardRef( // ······················································ // STYLES - const { classes, cx } = MultiSelectStyles( + const { classes } = MultiSelectStyles( { size, multiple, rightEvents: isClearable && showClear, hasIcon }, - { name: 'MultiSelect' } + { name: 'MultiSelect' }, ); return ( @@ -139,10 +143,9 @@ const MultiSelect = forwardRef( const data = find(props.data, { value: v }); if (data) { if (ValueComponent) { - return ; - } else { - return ; + return ; } + return ; } // return null; @@ -200,9 +203,10 @@ const MultiSelect = forwardRef( )} ); - } + }, ); +MultiSelect.displayName = 'MultiSelect'; MultiSelect.defaultProps = MULTI_SELECT_DEFAULT_PROPS; MultiSelect.propTypes = MULTI_SELECT_PROP_TYPES; diff --git a/packages/components/src/form/MultiSelect/MultiSelect.stories.js b/packages/components/src/form/MultiSelect/MultiSelect.stories.js index d4f72a847..8829065ef 100644 --- a/packages/components/src/form/MultiSelect/MultiSelect.stories.js +++ b/packages/components/src/form/MultiSelect/MultiSelect.stories.js @@ -3,7 +3,7 @@ import { StarIcon } from '@bubbles-ui/icons/solid'; import { RemoveIcon } from '@bubbles-ui/icons/outline'; import { Stack, Box } from '../../layout'; import { UserDisplayItem } from '../../informative'; -import { ActionButton } from '../../form'; +import { ActionButton } from '../ActionButton'; import { MultiSelect } from './MultiSelect'; import { MULTI_SELECT_DEFAULT_PROPS, @@ -34,19 +34,17 @@ export default { }; const Template = ({ children, data, useValueComponent, onChange, showIcon, ...props }) => { - const CustomValueComponent = forwardRef(({ label, onRemove }, ref) => { + const CustomValueComponent = forwardRef(({ label, onRemove }, ref) => ( // return ; - return ( - ({ paddingRight: theme.spacing[1] })}> - - {onRemove ? ( - - } onClick={() => onRemove(value)} /> - - ) : null} - - ); - }); + ({ paddingRight: theme.spacing[1] })}> + + {onRemove ? ( + + } onClick={() => onRemove(value)} /> + + ) : null} + + )); const [state, setState] = useState([]); const [value, setValue] = useState([]); @@ -102,6 +100,7 @@ Playground.args = { value: 'Homer Simpson', description: 'Overweight, lazy, and often ignorant', group: 'Group 1', + disabled: true, }, { image: 'https://img.icons8.com/clouds/256/000000/spongebob-squarepants.png', diff --git a/packages/components/src/form/MultiSelect/MultiSelect.styles.js b/packages/components/src/form/MultiSelect/MultiSelect.styles.js index ea84eb52e..54fb16b9a 100644 --- a/packages/components/src/form/MultiSelect/MultiSelect.styles.js +++ b/packages/components/src/form/MultiSelect/MultiSelect.styles.js @@ -1,7 +1,7 @@ import { createStyles } from '@mantine/styles'; import { getInputSizes, getInputStyle, getSelectDividerStyle } from '../mixins/fieldStyles.mixins'; -export const MultiSelectStyles = createStyles((theme, { size, multiple, rightEvents, hasIcon }) => { +const MultiSelectStyles = createStyles((theme, { size, multiple, rightEvents, hasIcon }) => { const inputTheme = theme.other.input; const inputSizes = getInputSizes(size || 'md', inputTheme.spacing.padding, hasIcon); const inputStyles = getInputStyle(inputTheme, theme.other.global); @@ -39,6 +39,7 @@ export const MultiSelectStyles = createStyles((theme, { size, multiple, rightEve margin: 0, gap: multiple && 4, border: 'none', + minHeight: 38, }, value: { margin: 0, @@ -66,3 +67,5 @@ export const MultiSelectStyles = createStyles((theme, { size, multiple, rightEve ...getSelectDividerStyle(theme, theme.other.global), }; }); + +export { MultiSelectStyles }; diff --git a/packages/components/src/form/NumberInput/NumberInput.js b/packages/components/src/form/NumberInput/NumberInput.js index 0ab78f3f5..5b6530ef3 100644 --- a/packages/components/src/form/NumberInput/NumberInput.js +++ b/packages/components/src/form/NumberInput/NumberInput.js @@ -1,8 +1,9 @@ -import React, { forwardRef } from 'react'; +import React, { forwardRef, useRef } from 'react'; import PropTypes from 'prop-types'; -import { NumberInput as MantineNumberInput } from '@mantine/core'; +import { NumberInput as MantineNumberInput, ActionIcon as MantineActionIcon } from '@mantine/core'; import { isEmpty } from 'lodash'; import { useId } from '@mantine/hooks'; +import { Box } from '@bubbles-ui/components'; import { INPUT_WRAPPER_ORIENTATIONS, INPUT_WRAPPER_SIZES, @@ -17,6 +18,11 @@ export const NUMBER_INPUT_PROP_TYPES = { orientation: PropTypes.oneOf(INPUT_WRAPPER_ORIENTATIONS), size: PropTypes.oneOf(INPUT_WRAPPER_SIZES), autoComplete: PropTypes.string, + label: PropTypes.string, + description: PropTypes.string, + error: PropTypes.string, + required: PropTypes.bool, + customDesign: PropTypes.bool, }; export const NUMBER_INPUT_DEFAULT_PROPS = { @@ -27,6 +33,7 @@ export const NUMBER_INPUT_DEFAULT_PROPS = { error: '', required: false, autoComplete: 'off', + customDesign: false, }; const NumberInput = forwardRef( @@ -46,13 +53,18 @@ const NumberInput = forwardRef( headerClassName, contentClassName, ariaLabel, + customDesign, ...props }, - ref + ref, ) => { const uuid = useId(); const hasIcon = !!icon; - const { classes, cx } = NumberInputStyles({ size, hasIcon }); + const { classes, cx } = NumberInputStyles( + { size, hasIcon, customDesign }, + { name: 'NumberInput' }, + ); + const customDesignRef = useRef(); return ( {props.value || props.defaultValue || ''} ) : ( - + + {customDesign && ( + customDesignRef.current.decrement()} + className={classes.customDesignHandlerRemove} + > + – + + )} + + {customDesign && ( + customDesignRef.current.increment()} + className={classes.customDesignHandlerAdd} + > + + + + )} + )} ); - } + }, ); NumberInput.propTypes = NUMBER_INPUT_PROP_TYPES; NumberInput.defaultProps = NUMBER_INPUT_DEFAULT_PROPS; +NumberInput.displayName = 'NumberInput'; export { NumberInput }; diff --git a/packages/components/src/form/NumberInput/NumberInput.stories.js b/packages/components/src/form/NumberInput/NumberInput.stories.js index 0ecd1f280..126161397 100644 --- a/packages/components/src/form/NumberInput/NumberInput.stories.js +++ b/packages/components/src/form/NumberInput/NumberInput.stories.js @@ -21,9 +21,7 @@ export default { }, }; -const Template = ({ ...props }) => { - return ; -}; +const Template = ({ ...props }) => ; export const Playground = Template.bind({}); @@ -35,4 +33,5 @@ Playground.args = { help: 'Help text for number input', error: 'Descriptive text for error ', readOnly: false, + customDesign: false, }; diff --git a/packages/components/src/form/NumberInput/NumberInput.styles.js b/packages/components/src/form/NumberInput/NumberInput.styles.js index 43c2504de..fbf20ee16 100644 --- a/packages/components/src/form/NumberInput/NumberInput.styles.js +++ b/packages/components/src/form/NumberInput/NumberInput.styles.js @@ -1,15 +1,23 @@ import { createStyles } from '@mantine/styles'; -import { getPaddings, getFocusStyles, getSpacing } from '../../theme.mixins'; -import { getInputStyle, getRightSection, getInputSizes } from '../mixins/fieldStyles.mixins'; +import { getInputStyle, getInputSizes } from '../mixins/fieldStyles.mixins'; -export const NumberInputStyles = createStyles((theme, { size, hasIcon }) => { +const NumberInputStyles = createStyles((theme, { size, hasIcon, customDesign }) => { const inputTheme = theme.other.input; + const customDesignProps = { + paddingLeft: 20, + paddingRight: 20, + textAlign: 'center', + }; return { - root: {}, + root: { + position: 'relative', + }, input: { ...getInputSizes(size || 'md', inputTheme.spacing.padding, hasIcon), ...getInputStyle(inputTheme, theme.other.global), paddingRight: 24, + minHeight: 40, + ...(customDesign && customDesignProps), }, icon: { width: 32, @@ -59,5 +67,23 @@ export const NumberInputStyles = createStyles((theme, { size, hasIcon }) => { transform: 'translateX(-1px)', }, }, + customDesignRoot: { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + width: 'fit-content', + position: 'relative', + }, + customDesignHandlerAdd: { + position: 'absolute', + right: 0, + }, + customDesignHandlerRemove: { + position: 'absolute', + left: 0, + zIndex: 10, + }, }; }); + +export { NumberInputStyles }; diff --git a/packages/components/src/form/PasswordInput/PasswordInput.styles.js b/packages/components/src/form/PasswordInput/PasswordInput.styles.js index 1d7251306..aa8f5aff6 100644 --- a/packages/components/src/form/PasswordInput/PasswordInput.styles.js +++ b/packages/components/src/form/PasswordInput/PasswordInput.styles.js @@ -1,8 +1,7 @@ import { createStyles } from '@mantine/styles'; -import { getBoxShadowFromToken, getFocusStyles, getPaddings } from '../../theme.mixins'; -import { getInputStyle, getRightSection, getInputSizes } from '../mixins/fieldStyles.mixins'; +import { getInputStyle, getInputSizes } from '../mixins/fieldStyles.mixins'; -export const PasswordInputStyles = createStyles((theme, { size, hasIcon, disabled }) => { +const PasswordInputStyles = createStyles((theme, { size, hasIcon, disabled }) => { const inputTheme = theme.other.input; const inputSizes = getInputSizes(size || 'md', inputTheme.spacing.padding, hasIcon); const inputStyles = getInputStyle(inputTheme, theme.other.global); @@ -11,7 +10,10 @@ export const PasswordInputStyles = createStyles((theme, { size, hasIcon, disable input: { ...inputSizes, ...inputStyles, - // padding: 0, + paddingRight: 40, + minHeight: 40, + display: 'flex', + alignItems: 'center', }, innerInput: { ...inputSizes, @@ -27,7 +29,7 @@ export const PasswordInputStyles = createStyles((theme, { size, hasIcon, disable backgroundColor: 'inherit !important', boxShadow: 'none !important', }, - // rightSection: { ...getRightSection(theme) }, + rightSection: { paddingRight: 6 }, visibilityToggle: { color: '#495057', }, @@ -37,3 +39,5 @@ export const PasswordInputStyles = createStyles((theme, { size, hasIcon, disable }, }; }); + +export { PasswordInputStyles }; diff --git a/packages/components/src/form/ProSwitch/ProSwitch.js b/packages/components/src/form/ProSwitch/ProSwitch.js index 736efa3b0..0994c13c0 100644 --- a/packages/components/src/form/ProSwitch/ProSwitch.js +++ b/packages/components/src/form/ProSwitch/ProSwitch.js @@ -1,9 +1,9 @@ import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; import { Box } from '@mantine/core'; -import { Switch } from '../../form'; -import { ProSwitchStyles } from './ProSwitch.styles'; import { isFunction } from 'lodash'; +import { Switch } from '../Switch'; +import { ProSwitchStyles } from './ProSwitch.styles'; export const PRO_SWITCH_DEFAULT_PROPS = { onChange: () => {}, @@ -17,6 +17,8 @@ export const PRO_SWITCH_PROP_TYPES = { checked: PropTypes.bool, ariaLabel: PropTypes.string, useAria: PropTypes.bool, + onChange: PropTypes.func, + classNames: PropTypes.any, }; const ProSwitch = forwardRef( @@ -31,9 +33,9 @@ const ProSwitch = forwardRef( const [state, setState] = React.useState(checked); - const handleOnChange = (checked) => { - setState(checked); - isFunction(onChange) && onChange(checked); + const handleOnChange = (isChecked) => { + setState(isChecked); + if (isFunction(onChange)) onChange(isChecked); }; React.useEffect(() => { @@ -64,9 +66,10 @@ const ProSwitch = forwardRef( /> ); - } + }, ); +ProSwitch.displayName = 'ProSwitch'; ProSwitch.defaultProps = PRO_SWITCH_DEFAULT_PROPS; ProSwitch.propTypes = PRO_SWITCH_PROP_TYPES; diff --git a/packages/components/src/form/Radio/Radio.js b/packages/components/src/form/Radio/Radio.js index 08399cf5a..87d5eadfb 100644 --- a/packages/components/src/form/Radio/Radio.js +++ b/packages/components/src/form/Radio/Radio.js @@ -24,13 +24,14 @@ const Radio = forwardRef( size, useAria, onChange, + noRootPadding, ...props }, - ref + ref, ) => { const { classes, cx } = RadioStyles( - { checked, variant, help, helpPosition, icon, image, children, label }, - { name: 'Radio' } + { checked, variant, help, helpPosition, icon, image, children, label, noRootPadding }, + { name: 'Radio' }, ); const handleOnChange = () => { @@ -73,7 +74,7 @@ const Radio = forwardRef( /> ); - } + }, ); Radio.defaultProps = { diff --git a/packages/components/src/form/Radio/Radio.styles.js b/packages/components/src/form/Radio/Radio.styles.js index 9e7288299..eeb811da3 100644 --- a/packages/components/src/form/Radio/Radio.styles.js +++ b/packages/components/src/form/Radio/Radio.styles.js @@ -1,8 +1,11 @@ import { createStyles } from '@mantine/styles'; -import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../theme.mixins'; +import { getFontProductive, pxToRem } from '../../theme.mixins'; export const RadioStyles = createStyles( - (theme, { variant, help, helpPosition, checked, icon, image, children, label }) => { + ( + theme, + { variant, help, helpPosition, checked, icon, image, children, label, noRootPadding }, + ) => { const isIcon = variant === 'icon'; const isDefault = variant === 'default'; const isImage = variant === 'image'; @@ -22,7 +25,7 @@ export const RadioStyles = createStyles( cursor: isImage && 'pointer', }, root: { - padding: 14, + padding: noRootPadding ? 0 : 14, display: isIcon && 'flex', justifyContent: isIcon && 'center', alignItems: isIcon && 'center', @@ -76,5 +79,5 @@ export const RadioStyles = createStyles( display: isIcon && 'none', }, }; - } + }, ); diff --git a/packages/components/src/form/RadioGroup/RadioGroup.js b/packages/components/src/form/RadioGroup/RadioGroup.js index f30efb5dd..7b03e0a08 100644 --- a/packages/components/src/form/RadioGroup/RadioGroup.js +++ b/packages/components/src/form/RadioGroup/RadioGroup.js @@ -1,6 +1,6 @@ import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react'; import PropTypes from 'prop-types'; -import { isEmpty, map } from 'lodash'; +import { isEmpty, map, noop } from 'lodash'; import { Box, SegmentedControl as MantineSegmentedControl } from '@mantine/core'; import { useId } from '@mantine/hooks'; import { RadioGroupStyles } from './RadioGroup.styles'; @@ -11,7 +11,6 @@ import { INPUT_WRAPPER_SIZES, InputWrapper, } from '../InputWrapper'; -import { isFunction } from 'lodash'; export const RADIOGROUP_DIRECTIONS = ['column', 'row']; @@ -30,6 +29,7 @@ export const RADIOGROUP_DEFAULT_PROPS = { value: '', imageHeight: 100, fullWidth: false, + minWidth: 0, useAria: true, }; export const RADIOGROUP_PROP_TYPES = { @@ -42,10 +42,12 @@ export const RADIOGROUP_PROP_TYPES = { direction: PropTypes.oneOf(RADIOGROUP_DIRECTIONS), orientation: PropTypes.oneOf(INPUT_WRAPPER_ORIENTATIONS), fullWidth: PropTypes.bool, + minWidth: PropTypes.number, onChange: PropTypes.func, value: PropTypes.any, imageHeight: PropTypes.number, useAria: PropTypes.bool, + noRootPadding: PropTypes.bool, }; const RadioGroup = forwardRef( @@ -65,10 +67,13 @@ const RadioGroup = forwardRef( direction, imageHeight, fullWidth, + minWidth, useAria, + onChange = noop, + noRootPadding, ...props }, - ref + ref, ) => { const [value, setValue] = useState(props.value); const [activePosition, setActivePosition] = useState({ height: 0, translate: 0 }); @@ -82,8 +87,8 @@ const RadioGroup = forwardRef( }, [props.value]); const { classes, cx } = RadioGroupStyles( - { variant, value, direction, fullWidth, activePosition, hasError, rounded }, - { name: 'RadioGroup' } + { variant, value, direction, fullWidth, minWidth, activePosition, hasError, rounded }, + { name: 'RadioGroup' }, ); if (!direction) { @@ -97,11 +102,11 @@ const RadioGroup = forwardRef( direction = 'row'; } - const onChange = (value) => { - const item = data.find((item) => item.value === value); - if (!props.disabled && !item.disabled) { - isFunction(props.onChange) && props.onChange(value); - setValue(value); + const handleOnChange = (val) => { + const option = data.find((item) => item.value === val); + if (!props.disabled && !option.disabled) { + onChange(val); + setValue(val); } }; @@ -141,11 +146,11 @@ const RadioGroup = forwardRef( ref={ref} id={uuid} size={size} - onChange={onChange} + onChange={handleOnChange} classNames={classes} - defaultValue={defaultValue ? defaultValue : ' '} + defaultValue={defaultValue || ' '} value={value} - data={map(data, ({ label, ...item }, index) => ({ + data={map(data, ({ label: itemLabel, ...item }, index) => ({ value: item.value, label: ( {}} imageHeight={imageHeight} useAria={useAria} + noRootPadding={noRootPadding} > - {label} + {itemLabel} ), }))} @@ -171,9 +177,10 @@ const RadioGroup = forwardRef( ); - } + }, ); +RadioGroup.displayName = 'RadioGroup'; RadioGroup.propTypes = RADIOGROUP_PROP_TYPES; RadioGroup.defaultProps = RADIOGROUP_DEFAULT_PROPS; diff --git a/packages/components/src/form/RadioGroup/RadioGroup.styles.js b/packages/components/src/form/RadioGroup/RadioGroup.styles.js index d8a6e13cd..340b443e5 100644 --- a/packages/components/src/form/RadioGroup/RadioGroup.styles.js +++ b/packages/components/src/form/RadioGroup/RadioGroup.styles.js @@ -1,14 +1,25 @@ import { createStyles } from '@mantine/styles'; -import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../theme.mixins'; +import { pxToRem, getFontExpressive } from '../../theme.mixins'; -export const RadioGroupStyles = createStyles( - (theme, { variant, value, direction, fullWidth, activePosition, hasError, rounded }) => { +const RadioGroupStyles = createStyles( + ( + theme, + { variant, value, direction, fullWidth, minWidth, activePosition, hasError, rounded }, + ) => { const isColumn = direction === 'column'; - const isDefault = variant == 'default' || variant === 'image'; - const isIcon = variant == 'icon'; + const isDefault = variant === 'default' || variant === 'image'; + const isIcon = variant === 'icon'; const isBoxed = variant === 'boxed'; const isImage = variant === 'image'; + const radioProps = { + pointerEvents: 'none' + }; + + if(minWidth && !isIcon) { + radioProps.paddingRight = 0; + } + return { root: { padding: 0, @@ -23,7 +34,7 @@ export const RadioGroupStyles = createStyles( }, label: { padding: 0, - paddingRight: isDefault ? pxToRem(24) : null, + paddingRight: isDefault && !minWidth ? pxToRem(24) : null, display: 'flex', justifyContent: isIcon && 'center', height: '100%', @@ -35,7 +46,9 @@ export const RadioGroupStyles = createStyles( display: !value || isDefault ? 'none' : null, boxShadow: value && !isDefault - ? `inset 0 0 0 1px ${isIcon ? theme.colors.interactive01d : theme.colors.ui01}` + ? `inset 0 0 0 1px ${ + isIcon ? theme.other.button.border.color.secondary.default : theme.colors.ui01 + }` : null, borderRadius: rounded && !isImage ? 4 : 0, top: 4, @@ -44,14 +57,14 @@ export const RadioGroupStyles = createStyles( height: isColumn ? activePosition.height : 'auto', transitionTimingFunction: 'ease-out', }, - radio: { - pointerEvents: 'none', - }, + radio: radioProps, control: { '&:not(:first-of-type)': { border: 'none', }, }, }; - } + }, ); + +export { RadioGroupStyles }; diff --git a/packages/components/src/form/ScoreInput/ScoreInput.js b/packages/components/src/form/ScoreInput/ScoreInput.js index 7de81e677..ae0247d14 100644 --- a/packages/components/src/form/ScoreInput/ScoreInput.js +++ b/packages/components/src/form/ScoreInput/ScoreInput.js @@ -1,11 +1,14 @@ import React, { useState, useEffect, useMemo } from 'react'; -import { Box } from '../../layout'; -import { Text } from '../../typography'; import { isFunction } from 'lodash'; import { useElementSize } from '@mantine/hooks'; -import { ScoreInputStyles } from './ScoreInput.styles'; import { ChevLeftIcon, ChevRightIcon } from '@bubbles-ui/icons/outline'; -import { InputWrapper, TextInput, NumberInput, Select } from '../'; +import { Box } from '../../layout'; +import { Text } from '../../typography'; +import { ScoreInputStyles } from './ScoreInput.styles'; +import { InputWrapper } from '../InputWrapper'; +import { TextInput } from '../TextInput'; +import { NumberInput } from '../NumberInput'; +import { Select } from '../Select'; import { SCORE_INPUT_DEFAULT_PROPS, SCORE_INPUT_PROP_TYPES } from './ScoreInput.constants'; const ScoreInput = ({ @@ -36,20 +39,25 @@ const ScoreInput = ({ const maxGrades = Math.floor((inputWidth + 2) / 40); const hiddenGrades = useMemo( () => grades.length - (maxGrades - 1) - displacedGrades, - [maxGrades, displacedGrades] + [maxGrades, displacedGrades], ); const isOverflowing = grades.length > maxGrades - 1; const selectedGradeIndex = grades.findIndex(({ score }) => - showLetters ? score === grade.score : score === Math.round(grade.score) + showLetters ? score === grade.score : score === Math.round(grade.score), ); if (!acceptCustom && value?.score && !grades.find(({ score }) => score === value?.score)) { acceptCustom = value?.letter ? 'text' : 'number'; } - const onChangeHandler = (grade) => { - setGrade(grade); - isFunction(onChange) && onChange(grade); + const { classes, cx } = ScoreInputStyles( + { error, gradeWidth, selectedGradeIndex, displacedGrades, gradesLength: grades.length }, + { name: 'ScoreInput' }, + ); + + const onChangeHandler = (newGrade) => { + setGrade(newGrade); + if (isFunction(onChange)) onChange(newGrade); }; const renderCustomInput = () => { @@ -58,11 +66,11 @@ const ScoreInput = ({ + onChange={(newValue) => onChangeHandler({ - score: grades.find(({ letter }) => letter?.toLowerCase() === value.toLowerCase()) + score: grades.find(({ letter }) => letter?.toLowerCase() === newValue.toLowerCase()) ?.score, - letter: value.toUpperCase(), + letter: newValue.toUpperCase(), }) } ariaLabel={customLabel} @@ -77,16 +85,17 @@ const ScoreInput = ({ value={grade?.score} precision={decimalPrecision} decimalSeparator={decimalSeparator === 'dot' ? '.' : ','} - onChange={(value) => + onChange={(newValue) => onChangeHandler({ - score: value, - letter: grades.find(({ score }) => score === value)?.letter || selectValue, + score: newValue, + letter: grades.find(({ score }) => score === newValue)?.letter || selectValue, }) } ariaLabel={customLabel} /> ); } + return null; }; const handleInputResize = () => { @@ -102,12 +111,8 @@ const ScoreInput = ({ if (parentWidth >= widthWithSpace) { if (inputMaxWidth !== widthWithSpace) setInputMaxWidth(widthWithSpace); if (hiddenGrades <= 0) setDisplacedGrades(displacedGrades + hiddenGrades - 1); - } else { - if (inputMaxWidth !== widthWithoutSpace) setInputMaxWidth(widthWithoutSpace); - } - } else { - if (inputMaxWidth !== 10000) setInputMaxWidth(10000); - } + } else if (inputMaxWidth !== widthWithoutSpace) setInputMaxWidth(widthWithoutSpace); + } else if (inputMaxWidth !== 10000) setInputMaxWidth(10000); }; const handleDisplaceToLeftGrades = () => { @@ -122,7 +127,7 @@ const ScoreInput = ({ if (displacedGrades < maxGrades) { setDisplacedGrades(0); } else { - setDisplacedGrades((displacedGrades) => displacedGrades - maxGrades + 2); + setDisplacedGrades((newGrades) => newGrades - maxGrades + 2); } }; @@ -130,8 +135,9 @@ const ScoreInput = ({ const isLeftToRight = direction === 'ltr'; const sortedGrades = grades.sort((a, b) => - !isLeftToRight ? b?.score - a?.score : a?.score - b?.score + !isLeftToRight ? (b?.score ?? 0) - (a?.score ?? 0) : (a?.score ?? 0) - (b?.score ?? 0), ); + const gradesToReturn = sortedGrades.map((arrayGrade) => { const isSelected = arrayGrade.score === grade.score; return ( @@ -162,7 +168,7 @@ const ScoreInput = ({ role={useAria ? 'button' : undefined} > - + , ); } if (hiddenGrades > 0) { @@ -177,20 +183,19 @@ const ScoreInput = ({ role={useAria ? 'button' : undefined} > - + , ); } return gradesToReturn; }; + // -------------------------------------------------------------- + // EFFECTS + useEffect(() => { handleInputResize(); }, [inputWidth, parentWidth, inputMaxWidth]); - const { classes, cx } = ScoreInputStyles( - { error, gradeWidth, selectedGradeIndex, displacedGrades, gradesLength: grades.length }, - { name: 'ScoreInput' } - ); return ( @@ -207,13 +212,13 @@ const ScoreInput = ({ }))} placeholder={placeholder} value={selectValue} - onChange={(value) => { - const parsedValue = parseFloat(value); + onChange={(val) => { + const parsedValue = parseFloat(val); onChangeHandler({ score: parsedValue, letter: tags.find((tag) => tag.score === parsedValue)?.letter, }); - setSelectValue(value); + setSelectValue(val); }} /> diff --git a/packages/components/src/form/SearchInput/SearchInput.js b/packages/components/src/form/SearchInput/SearchInput.js index 688b8fe8f..24fc8dad0 100644 --- a/packages/components/src/form/SearchInput/SearchInput.js +++ b/packages/components/src/form/SearchInput/SearchInput.js @@ -31,7 +31,7 @@ export const SEARCH_INPUT_PROP_TYPES = { }; const SearchInput = React.forwardRef( - ({ wait, minChars, value: valueProp, onChange = () => {}, ariaLabel, ...props }) => { + ({ wait, minChars, value: valueProp, onChange = () => {}, ariaLabel, ...props }, ref) => { const [value, setValue] = useState(valueProp); const [debounced] = useDebouncedValue(value, wait); @@ -46,6 +46,7 @@ const SearchInput = React.forwardRef( return ( setValue(e)} icon={} diff --git a/packages/components/src/form/Select/Select.constants.js b/packages/components/src/form/Select/Select.constants.js index 660338c39..2f2bde4d0 100644 --- a/packages/components/src/form/Select/Select.constants.js +++ b/packages/components/src/form/Select/Select.constants.js @@ -22,6 +22,7 @@ export const SELECT_PROP_TYPES = { description: PropTypes.string, placeholder: PropTypes.string, data: PropTypes.any, + cleanOnMissingValue: PropTypes.bool, required: PropTypes.bool, size: PropTypes.oneOf(SELECT_SIZES), variant: PropTypes.oneOf(SELECT_VARIANTS), diff --git a/packages/components/src/form/Select/Select.js b/packages/components/src/form/Select/Select.js index 1236dd4e9..cd9a2e40b 100644 --- a/packages/components/src/form/Select/Select.js +++ b/packages/components/src/form/Select/Select.js @@ -1,15 +1,15 @@ import React, { forwardRef, useEffect, useMemo, useState } from 'react'; import { ChevDownIcon, RemoveIcon } from '@bubbles-ui/icons/outline'; import { Select as MantineSelect } from '@mantine/core'; -import { isEmpty, isFunction, isNil, isString, map } from 'lodash'; -import { SELECT_PROP_TYPES, SELECT_DEFAULT_PROPS } from './Select.constants'; import { useId } from '@mantine/hooks'; +import { find, isEmpty, isFunction, isNil, isString, map } from 'lodash'; import { InputWrapper } from '../InputWrapper'; import { ActionButton } from '../ActionButton'; import { SelectStyles } from './Select.styles'; import { Paragraph } from '../../typography'; import { MultiSelect } from '../MultiSelect'; import { Dropdown, Item } from '../../overlay/Dropdown'; +import { SELECT_PROP_TYPES, SELECT_DEFAULT_PROPS } from './Select.constants'; const Select = forwardRef( ( @@ -44,11 +44,12 @@ const Select = forwardRef( readOnly, variant, autoSelectOneOption, + cleanOnMissingValue, ariaLabel, withinPortal, ...props }, - ref + ref, ) => { const data = map(_data, (d) => (isString(d) ? d : { ...d, value: d?.value.toString() })); const value = isNil(_value) ? _value : _value.toString(); @@ -95,12 +96,18 @@ const Select = forwardRef( handleChange(valueComponent ? [data[0].value] : data[0].value); }, [autoSelectOneOption, data]); + useEffect(() => { + if (cleanOnMissingValue && !!value && !find(data, { value })) { + handleClear(); + } + }, [data]); + // ······················································ // STYLES - const { classes, cx } = SelectStyles( + const { classes } = SelectStyles( { size, rightEvents: isClearable && showClear, variant }, - { name: 'Select' } + { name: 'Select' }, ); return valueComponent ? ( @@ -185,9 +192,10 @@ const Select = forwardRef( )} ); - } + }, ); +Select.displayName = 'Select'; Select.defaultProps = SELECT_DEFAULT_PROPS; Select.propTypes = SELECT_PROP_TYPES; diff --git a/packages/components/src/form/Select/Select.stories.js b/packages/components/src/form/Select/Select.stories.js index 0dbd97109..7e938167d 100644 --- a/packages/components/src/form/Select/Select.stories.js +++ b/packages/components/src/form/Select/Select.stories.js @@ -27,9 +27,7 @@ export default { }; const Template = ({ value: valueProp, useValueComponent, onChange, data, ...props }) => { - const CustomValueComponent = forwardRef(({ label }, ref) => { - return ; - }); + const CustomValueComponent = forwardRef(({ label }, ref) => ); const [value, setValue] = React.useState(valueProp); return ( @@ -62,6 +60,7 @@ Playground.args = { creatable: false, readOnly: false, autoSelectOneOption: false, + cleanOnMissingValue: false, clearable: 'Clear select field', error: 'Descriptive text for error ', value: 'Carol Miller', diff --git a/packages/components/src/form/Select/Select.styles.js b/packages/components/src/form/Select/Select.styles.js index f7a32cb0d..a21f614d7 100644 --- a/packages/components/src/form/Select/Select.styles.js +++ b/packages/components/src/form/Select/Select.styles.js @@ -1,7 +1,7 @@ import { createStyles } from '@mantine/styles'; import { getInputSizes, getInputStyle, getSelectDividerStyle } from '../mixins/fieldStyles.mixins'; -export const SelectStyles = createStyles((theme, { size, rightEvents, variant, hasIcon }) => { +const SelectStyles = createStyles((theme, { size, rightEvents, variant, hasIcon }) => { const inputTheme = theme.other.input; return { input: { @@ -9,6 +9,7 @@ export const SelectStyles = createStyles((theme, { size, rightEvents, variant, h ...getInputStyle(inputTheme, theme.other.global), paddingRight: 30, textOverflow: 'ellipsis', + minHeight: 40, }, icon: { width: 32, @@ -26,3 +27,5 @@ export const SelectStyles = createStyles((theme, { size, rightEvents, variant, h ...getSelectDividerStyle(theme, theme.other.global), }; }); + +export { SelectStyles }; diff --git a/packages/components/src/form/Slider/Slider.constants.js b/packages/components/src/form/Slider/Slider.constants.js new file mode 100644 index 000000000..2fded99e8 --- /dev/null +++ b/packages/components/src/form/Slider/Slider.constants.js @@ -0,0 +1,10 @@ +import PropTypes from 'prop-types'; + +export const SLIDER_DEFAULT_PROPS = { + label: null, + thumbSize: 16, +}; +export const SLIDER_PROP_TYPES = { + label: PropTypes.string, + thumbSize: PropTypes.number, +}; diff --git a/packages/components/src/form/Slider/Slider.js b/packages/components/src/form/Slider/Slider.js new file mode 100644 index 000000000..861b441bf --- /dev/null +++ b/packages/components/src/form/Slider/Slider.js @@ -0,0 +1,17 @@ +import React, { forwardRef } from 'react'; +import { Slider as MantineSlider } from '@mantine/core'; +import { SliderStyles } from './Slider.styles'; +import { SLIDER_DEFAULT_PROPS, SLIDER_PROP_TYPES } from './Slider.constants'; + +const Slider = forwardRef(({ ...props }, ref) => { + const { classes } = SliderStyles({}, { name: 'Slider' }); + + return ; +}); + +Slider.displayName = 'Slider'; + +Slider.defaultProps = SLIDER_DEFAULT_PROPS; +Slider.propTypes = SLIDER_PROP_TYPES; + +export { Slider }; diff --git a/packages/leemons/src/common/AssetPlayer/AssetPlayer.mdx b/packages/components/src/form/Slider/Slider.mdx similarity index 62% rename from packages/leemons/src/common/AssetPlayer/AssetPlayer.mdx rename to packages/components/src/form/Slider/Slider.mdx index 0849e5ff5..5c1a28db0 100644 --- a/packages/leemons/src/common/AssetPlayer/AssetPlayer.mdx +++ b/packages/components/src/form/Slider/Slider.mdx @@ -1,11 +1,12 @@ import { Story, Props, Source, Preview } from '@storybook/addon-docs'; -import { Box, ThemeProvider } from '@bubbles-ui/components'; -import * as stories from './AssetPlayer.stories.js'; -import { AssetPlayer } from './AssetPlayer.js'; +import * as stories from './Slider.stories.js'; +import { Slider } from './Slider.js'; +import { Box } from '@mantine/core'; +import { ThemeProvider } from './../../ThemeProvider'; -# AssetPlayer +# Slider -[Source code]() +[Source code]() ## Table of Contents @@ -19,29 +20,29 @@ import { AssetPlayer } from './AssetPlayer.js'; ## Overview -AssetPlayer is ... +Slider is ... - Asset player + Slider ## Component API - + - + ## References -[MDN: ARIA **name**(sentenceCase) role]() +[MDN: ARIA **name**(sentenceCase) role]() [W3: Role attribute](https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute) -[W3: ARIA **name**(sentenceCase) role example]() +[W3: ARIA **name**(sentenceCase) role example]() ## Feedback Help us improve this component by providing feedback, asking questions on Slack, or updating this file on -[GitHub]() +[GitHub]() diff --git a/packages/components/src/form/Slider/Slider.stories.js b/packages/components/src/form/Slider/Slider.stories.js new file mode 100644 index 000000000..77de63f98 --- /dev/null +++ b/packages/components/src/form/Slider/Slider.stories.js @@ -0,0 +1,37 @@ +import React from 'react'; +import { Box } from '@mantine/core'; +import { Slider } from './Slider'; +import { SLIDER_DEFAULT_PROPS } from './Slider.constants'; +import mdx from './Slider.mdx'; + +export default { + title: 'Atoms/Form/Slider', + parameters: { + component: Slider, + docs: { + page: mdx, + }, + design: { + type: 'figma', + // url: 'https://www.figma.com/file/kcSXz3QZFByFDTumNgzPpV/?node-id=2962%3A31342', + }, + }, + argTypes: { + // myBooleanProp: { control: { type: 'boolean' } }, + // mySelectProp: { options: ['Hello', 'World'], control: { type: 'select' } }, + }, +}; + +const Template = ({ ...props }) => ( + ({ padding: 40 })}> + + +); + +export const Playground = Template.bind({}); + +Playground.args = { + // myBooleanProp: false, + // mySelectProp: 'Hello' + ...SLIDER_DEFAULT_PROPS, +}; diff --git a/packages/components/src/form/Slider/Slider.styles.js b/packages/components/src/form/Slider/Slider.styles.js new file mode 100644 index 000000000..7aded08d4 --- /dev/null +++ b/packages/components/src/form/Slider/Slider.styles.js @@ -0,0 +1,26 @@ +import { createStyles } from '@mantine/styles'; +import { getBoxShadowFromToken } from '../../theme.mixins'; + +const SliderStyles = createStyles((theme) => { + const checkboxTheme = theme.other.checkbox; + return { + root: {}, + track: { + height: 1, + backgroundColor: checkboxTheme.border.color.default, + }, + bar: { + backgroundColor: checkboxTheme.border.color.select, + }, + thumb: { + borderWidth: 1, + borderColor: checkboxTheme.border.color.default, + '&:hover': { + borderColor: checkboxTheme.border.color.select, + ...getBoxShadowFromToken(checkboxTheme.shadow.hover), + }, + }, + }; +}); + +export { SliderStyles }; diff --git a/packages/components/src/form/Slider/index.js b/packages/components/src/form/Slider/index.js new file mode 100644 index 000000000..97ad4a945 --- /dev/null +++ b/packages/components/src/form/Slider/index.js @@ -0,0 +1,2 @@ +export * from './Slider'; +export * from './Slider.constants'; diff --git a/packages/components/src/form/Switch/Switch.js b/packages/components/src/form/Switch/Switch.js index 2bcd6eed1..76359aa19 100644 --- a/packages/components/src/form/Switch/Switch.js +++ b/packages/components/src/form/Switch/Switch.js @@ -8,10 +8,11 @@ import { export const SWITCH_DEFAULT_PROPS = BOOLEAN_INPUT_DEFAULT_PROPS; export const SWITCH_PROP_TYPES = BOOLEAN_INPUT_PROP_TYPES; -const Switch = forwardRef(({ display, useAria, isPro, ...props }, ref) => { - return ; -}); +const Switch = forwardRef(({ display, useAria, isPro, ...props }, ref) => ( + +)); +Switch.displayName = 'Switch'; Switch.defaultProps = SWITCH_DEFAULT_PROPS; Switch.propTypes = SWITCH_PROP_TYPES; diff --git a/packages/components/src/form/TableInput/TableInput.constants.js b/packages/components/src/form/TableInput/TableInput.constants.js index 4aec792b3..c053a9767 100644 --- a/packages/components/src/form/TableInput/TableInput.constants.js +++ b/packages/components/src/form/TableInput/TableInput.constants.js @@ -13,6 +13,9 @@ export const TABLE_INPUT_DEFAULT_PROPS = { showHeaders: true, forceShowInputs: false, resetOnAdd: false, + canAdd: true, + isOneInput: false, + actionLabel: false, }; export const TABLE_INPUT_PROP_TYPES = { @@ -25,7 +28,7 @@ export const TABLE_INPUT_PROP_TYPES = { node: PropTypes.element, rules: PropTypes.object, }), - }) + }), ), labels: PropTypes.shape({ add: PropTypes.string, @@ -39,4 +42,6 @@ export const TABLE_INPUT_PROP_TYPES = { showHeaders: PropTypes.bool, forceShowInputs: PropTypes.bool, resetOnAdd: PropTypes.bool, + canAdd: PropTypes.bool, + isOneInput: PropTypes.bool, }; diff --git a/packages/components/src/form/TableInput/TableInput.js b/packages/components/src/form/TableInput/TableInput.js index 59407835f..75f2ad5c5 100644 --- a/packages/components/src/form/TableInput/TableInput.js +++ b/packages/components/src/form/TableInput/TableInput.js @@ -1,6 +1,6 @@ import React, { useEffect, useMemo, useState } from 'react'; import update from 'immutability-helper'; -import { isEmpty, isFunction } from 'lodash'; +import { map, forEach, isEmpty, isFunction, noop } from 'lodash'; import { v4 as uuidv4 } from 'uuid'; import { useForm } from 'react-hook-form'; import { Box } from '../../layout/Box'; @@ -40,26 +40,25 @@ const TableInput = ({ resetOnAdd, rowsExpanded, rowStyles, - onChange = () => {}, - onChangeData = () => {}, - onBeforeRemove = () => {}, - onBeforeAdd = () => {}, - onAdd = () => {}, - onUpdate = () => {}, - onRemove = () => {}, - onItemAdd = () => {}, - onSort = () => {}, - renderRowSubComponent = () => {}, + onChange = noop, + onChangeData = noop, + onBeforeRemove = noop, + onBeforeAdd = noop, + onAdd = noop, + onUpdate = noop, + onRemove = noop, + onItemAdd = noop, + onSort = noop, + renderRowSubComponent = noop, + disabled, + isOneInput, + actionLabel, ...props }) => { const [tableData, setTableData] = useState([]); const hasError = useMemo(() => !isEmpty(error), [error]); - let form = formProp; - - if (!form) { - form = useForm(); - } + const form = formProp ?? useForm(); useEffect(() => { const newData = serializeData(data); @@ -77,7 +76,7 @@ const TableInput = ({ const parseItem = (item) => { const result = {}; - _.forEach(props.columns, ({ accessor }) => { + forEach(props.columns, ({ accessor }) => { result[accessor] = item[accessor]; }); return result; @@ -85,9 +84,7 @@ const TableInput = ({ const handleOnAdd = async (item) => { if (unique) { - const values = _.map(tableData, (d) => { - return JSON.stringify(parseItem(d)); - }); + const values = map(tableData, (d) => JSON.stringify(parseItem(d))); if (values.includes(JSON.stringify(parseItem(item)))) { return; } @@ -143,13 +140,18 @@ const TableInput = ({ handleOnChange(newData, { type: 'sort' }); }; - const { classes, cx } = TableInputStyles({ hasError, rowStyles }, { name: 'TableInput' }); + const { classes, cx } = TableInputStyles( + { hasError, disabled, rowStyles, isOneInput }, + { name: 'TableInput' }, + ); return ( {hasError && } diff --git a/packages/components/src/form/TableInput/TableInput.stories.js b/packages/components/src/form/TableInput/TableInput.stories.js index 52b471b6e..52032ba48 100644 --- a/packages/components/src/form/TableInput/TableInput.stories.js +++ b/packages/components/src/form/TableInput/TableInput.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { find } from 'lodash'; import { TableInput } from './TableInput'; import { TABLE_INPUT_DEFAULT_PROPS } from './TableInput.constants'; -import { NumberInput, Select, TextInput } from '../../form'; +import { NumberInput, Select, TextInput } from '..'; import { ContextContainer } from '../../layout/ContextContainer'; import mdx from './TableInput.mdx'; @@ -24,9 +24,15 @@ export default { }; const Template = ({ ...props }) => { + let columns; + if (props.isOneInput) { + columns = [props.columns[0]]; + } else { + columns = props.columns; + } return ( - + ); }; @@ -67,7 +73,7 @@ Playground.args = { rules: { required: 'Required field' }, data: PERIOD_TYPES, }, - valueRender: (value) => find(PERIOD_TYPES, { value })['label'], + valueRender: (value) => find(PERIOD_TYPES, { value }).label, style: { width: '15%' }, }, ], @@ -93,5 +99,6 @@ Playground.args = { edit: 'Edit', accept: 'Accept', cancel: 'Cancel', + actions: 'Actions', }, }; diff --git a/packages/components/src/form/TableInput/TableInput.styles.js b/packages/components/src/form/TableInput/TableInput.styles.js index 3c36f5083..0ae49c0ab 100644 --- a/packages/components/src/form/TableInput/TableInput.styles.js +++ b/packages/components/src/form/TableInput/TableInput.styles.js @@ -1,44 +1,52 @@ import { createStyles } from '@mantine/styles'; -import { pxToRem } from '../../theme.mixins'; -export const TableInputStyles = createStyles((theme, { hasError, rowStyles }) => { - return { - root: {}, - tHead: { - '&:after': { - content: '"@"', - display: 'block', - lineHeight: '16px', - textIndent: -99999, - }, +const TableInputStyles = createStyles((theme, { hasError, disabled, rowStyles, isOneInput }) => ({ + root: {}, + tHead: { + '&:after': !disabled && { + content: '"@"', + display: isOneInput ? 'none' : 'block', + lineHeight: '16px', + textIndent: -99999, }, - wrapper: { - border: hasError && `1px solid ${theme.colors.fatic01}`, - borderRadius: 4, - padding: hasError && theme.spacing[1], - marginBottom: hasError && theme.spacing[1], - }, - inputCell: { - paddingLeft: theme.spacing[2], - paddingRight: theme.spacing[2], - verticalAlign: 'top !important', - }, - actionCell: { - textAlign: 'center', - }, - row: { - backgroundColor: theme.colors.uiBackground01, - ...rowStyles, - }, - rowDragging: { - display: 'table', - boxShadow: theme.shadows.shadow03, - paddingLeft: 10, - }, - sortIcon: { - color: theme.colors.ui01, - cursor: 'grab', - paddingTop: theme.spacing[2], - }, - }; -}); + }, + wrapper: { + border: hasError && `1px solid ${theme.colors.fatic01}`, + borderRadius: 4, + padding: hasError && theme.spacing[1], + marginBottom: hasError && theme.spacing[1], + }, + inputCell: { + paddingLeft: theme.spacing[2], + paddingRight: theme.spacing[2], + verticalAlign: 'top !important', + }, + actionCell: { + textAlign: 'center', + paddingRight: 16, + }, + row: { + backgroundColor: theme.colors.uiBackground01, + ...rowStyles, + }, + rowDragging: { + display: 'table', + boxShadow: theme.shadows.shadow03, + paddingLeft: 10, + }, + sortIcon: { + color: theme.colors.ui01, + cursor: 'grab', + paddingTop: theme.spacing[3], + }, + oneInputContainer: { + width: '100%', + display: 'flex', + }, + oneInput: { + width: '50%', + marginRight: 12, + }, +})); + +export { TableInputStyles }; diff --git a/packages/components/src/form/TableInput/TableInputDisplay.js b/packages/components/src/form/TableInput/TableInputDisplay.js index 24753dc9e..ae283f823 100644 --- a/packages/components/src/form/TableInput/TableInputDisplay.js +++ b/packages/components/src/form/TableInput/TableInputDisplay.js @@ -1,16 +1,16 @@ import React, { useCallback, useState } from 'react'; import PropTypes from 'prop-types'; -import { find, isFunction } from 'lodash'; -import { useTable, useExpanded } from 'react-table'; +import { find, isFunction, noop } from 'lodash'; +import { useTable } from 'react-table'; import { Controller } from 'react-hook-form'; import { AddIcon } from '@bubbles-ui/icons/outline'; import { DragDropContext, Droppable } from 'react-beautiful-dnd'; import { Text } from '../../typography/Text'; +import { Box } from '../../layout/Box'; import { TableStyles } from '../../informative/Table/Table.styles'; import { TABLE_INPUT_DEFAULT_PROPS, TABLE_INPUT_PROP_TYPES } from './TableInput.constants'; -import { Button } from '../Button'; import { TableInputRow } from './TableInputRow'; -import { ActionButton } from '../ActionButton'; +import { Button } from '../Button'; export const TABLE_INPUT_DISPLAY_DEFAULT_PROPS = { ...TABLE_INPUT_DEFAULT_PROPS, @@ -26,6 +26,7 @@ export const TABLE_INPUT_DISPLAY_PROP_TYPES = { onItemAdd: PropTypes.func, classes: PropTypes.any, showHeaders: PropTypes.bool, + renderActionButton: PropTypes.func, }; const TableInputDisplay = ({ @@ -50,8 +51,12 @@ const TableInputDisplay = ({ rowsExpanded, rowStyles, classes, - onChangeRow = () => {}, - renderRowSubComponent = () => {}, + canAdd, + isOneInput = true, + renderActionButton, + actionLabel, + onChangeRow = noop, + renderRowSubComponent = noop, }) => { const [editing, setEditing] = useState(false); const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, visibleColumns } = @@ -70,7 +75,10 @@ const TableInputDisplay = ({ const formValues = watch(); - const { classes: tableClasses, cx } = TableStyles({}, { name: 'Table' }); + const { classes: tableClasses, cx } = TableStyles( + { disabled, hideHeaderBorder: true, canAdd }, + { name: 'Table' }, + ); const getColumnInput = useCallback( (accessor) => { @@ -79,30 +87,32 @@ const TableInputDisplay = ({ } const column = find(columns, { accessor }); - if (column && column.input) { + if (column?.input) { const { node, rules, ...inputProps } = column.input; return ( - - React.cloneElement(node, { - placeholder: column.Header, - ...field, - ...inputProps, - formValues, - error: errors[accessor], - form, - }) - } - /> + + + React.cloneElement(node, { + placeholder: column.placeholder ?? column.Header, + ...field, + ...inputProps, + formValues, + error: errors[accessor], + form, + }) + } + /> + ); } return null; }, - [columns, disabled, errors, formValues] + [columns, disabled, errors, formValues], ); const handleDragEnd = (result) => { @@ -126,14 +136,18 @@ const TableInputDisplay = ({ > {!!showHeaders && - headerGroups.map((headerGroup) => ( - - {(sortable && !disabled) || forceSortable ? : null} - {headerGroup.headers.map((column) => ( + headerGroups.map((headerGroup, i) => ( + + {(sortable && !disabled) || forceSortable ? : null} + {headerGroup.headers.map((column, j) => ( @@ -141,33 +155,49 @@ const TableInputDisplay = ({ ))} - {!disabled ? : null} + {!disabled ? ( + + {actionLabel && labels.actions} + + ) : null} ))} - {(showHeaders || forceShowInputs) && ( + {canAdd && (showHeaders || forceShowInputs) && ( 0 ? tableClasses.tr : ''}> {(sortable && !disabled) || forceSortable ? : null} {columns.map((column, i) => ( {getColumnInput(column.accessor)} + {isOneInput && !disabled && !isFunction(renderActionButton) && ( + + )} + {isOneInput && + !disabled && + isFunction(renderActionButton) && + renderActionButton({ disabled: disabledAddButton, onAdd: handleOnAdd })} ))} - - {!disabled && ( - } - /> + + {!isOneInput && !disabled && !isFunction(renderActionButton) && ( + )} + {!isOneInput && + !disabled && + isFunction(renderActionButton) && + renderActionButton({ disabled: disabledAddButton, onAdd: handleOnAdd })} )} @@ -176,13 +206,14 @@ const TableInputDisplay = ({ {(provided, snapshot) => ( - {rows.map((row, i) => { + {rows.map((row, k) => { prepareRow(row); return ( { if (editing && cell.column.editable !== false) { - const { column, row } = cell; - const fieldName = `${row.original.tableInputRowId}.${column.id}`; + const { column, row: _row } = cell; + const fieldName = `${_row.original.tableInputRowId}.${column.id}`; let node = null; let rules = []; let inputProps = {}; @@ -63,7 +71,7 @@ const TableInputRow = ({ } else { node = column.input.node; rules = column.input.rules; - let { node: _, rules: __, ..._inputProps } = column.input; + const { node: _, rules: __, ..._inputProps } = column.input; inputProps = _inputProps; } @@ -90,6 +98,11 @@ const TableInputRow = ({ return ; }; + const cancelEditing = () => { + setEditing(false); + if (isFunction(onEditing)) onEditing(false); + }; + const handleOnEdit = async () => { const result = await trigger(); if (result) { @@ -107,11 +120,6 @@ const TableInputRow = ({ if (isFunction(onEditing)) onEditing(true); }; - const cancelEditing = () => { - setEditing(false); - if (isFunction(onEditing)) onEditing(false); - }; - return ( - {(provided, snapshot) => { - return ( - <> - - {sortable && ( - - - - - - )} - {row.cells.map((cell) => ( - ( + <> + + {sortable && ( + + - {getColumCellValue(cell)} - - ))} + + + + )} + {row.cells.map((cell, i) => ( - {editing ? ( + {getColumCellValue(cell)} + + ))} + + {editing ? ( + <> + } + tooltip={labels.accept || 'Accept'} + onClick={handleOnEdit} + /> + } + tooltip={labels.cancel || 'Cancel'} + onClick={cancelEditing} + /> + + ) : ( + row.original.editable !== false && ( <> - } - tooltip={labels.accept || 'Accept'} - onClick={handleOnEdit} - /> - } - tooltip={labels.cancel || 'Cancel'} - onClick={cancelEditing} - /> + {addable && ( + } + tooltip={labels.add || 'Add'} + onClick={() => onItemAdd(row)} + /> + )} + {editable && ( + } + tooltip={labels.edit || 'Edit'} + onClick={initEditing} + /> + )} + {removable && ( + } + tooltip={labels.remove || 'Remove'} + onClick={() => onRemove(index)} + /> + )} - ) : ( - row.original.editable !== false && ( - <> - {addable && ( - } - tooltip={labels.add || 'Add'} - onClick={() => onItemAdd(row)} - /> - )} - {editable && ( - } - tooltip={labels.edit || 'Edit'} - onClick={initEditing} - /> - )} - {removable && ( - } - tooltip={labels.remove || 'Remove'} - onClick={() => onRemove(index)} - /> - )} - - ) - )} + ) + )} + + + {rowsExpanded?.includes(row.id) ? ( + + + {renderRowSubComponent({ row })} - {rowsExpanded?.includes(row.id) ? ( - - - {renderRowSubComponent({ row })} - - - ) : null} - - ); - }} + ) : null} + + )} ); }; +TableInputRow.propTypes = { + labels: PropTypes.object, + row: PropTypes.object, + index: PropTypes.number, + onItemAdd: PropTypes.func, + onRemove: PropTypes.func, + classes: PropTypes.object, + tableClasses: PropTypes.object, + visibleColumns: PropTypes.array, + cx: PropTypes.func, + totalRows: PropTypes.number, + sortable: PropTypes.bool, + editable: PropTypes.bool, + addable: PropTypes.bool, + removable: PropTypes.bool, + disabled: PropTypes.bool, + rowsExpanded: PropTypes.array, + editing: PropTypes.bool, + onEditing: PropTypes.func, + onEdit: PropTypes.func, + renderRowSubComponent: PropTypes.func, + onChangeRow: PropTypes.func, +}; + export { TableInputRow }; diff --git a/packages/components/src/form/TagifyInput/tagify/react.tagify.js b/packages/components/src/form/TagifyInput/tagify/react.tagify.js deleted file mode 100644 index 164ef2c8f..000000000 --- a/packages/components/src/form/TagifyInput/tagify/react.tagify.js +++ /dev/null @@ -1,306 +0,0 @@ -import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { renderToStaticMarkup } from 'react-dom/server'; -import { array, bool, func, number, object, oneOfType, string } from 'prop-types'; -import { Box } from '../../../layout'; -import { Badge } from '../../../informative'; -import { isFunction } from 'lodash'; -import Tagify from './tagify'; - -const noop = (_) => _; - -const isSameDeep = (a, b) => { - const trans = (x) => (typeof x == 'string' ? x : JSON.stringify(x)); - return trans(a) == trans(b); -}; - -// if a template is a React component, it should be outputed as a String (and not as a React component) -function templatesToString(templates) { - if (templates) { - for (let templateName in templates) { - let Template = templates[templateName]; - let isReactComp = String(Template).includes('jsxRuntime'); - if (isReactComp) { - templates[templateName] = (...props) => renderToStaticMarkup(