diff --git a/semcore/core/package.json b/semcore/core/package.json index add778c1d8..6b887442c5 100644 --- a/semcore/core/package.json +++ b/semcore/core/package.json @@ -41,6 +41,111 @@ "import": "./lib/theme/themes/highlights-light.css", "require": "./lib/theme/themes/highlights-light.css" }, + "./lib/theme/themes/highlights-light-new": { + "types": "./lib/theme/themes/highlights-light-new.d.ts", + "import": "./lib/theme/themes/highlights-light-new.mjs", + "require": "./lib/theme/themes/highlights-light-new.js" + }, + "./lib/theme/themes/highlights-light": { + "types": "./lib/theme/themes/highlights-light.d.ts", + "import": "./lib/theme/themes/highlights-light.mjs", + "require": "./lib/theme/themes/highlights-light.js" + }, + "./lib/theme/themes/highlights-dark": { + "types": "./lib/theme/themes/highlights-dark.d.ts", + "import": "./lib/theme/themes/highlights-dark.mjs", + "require": "./lib/theme/themes/highlights-dark.js" + }, + "./lib/theme/themes/highlights-new": { + "types": "./lib/theme/themes/highlights-new.d.ts", + "import": "./lib/theme/themes/highlights-new.mjs", + "require": "./lib/theme/themes/highlights-new.js" + }, + "./lib/theme/themes/highlights-new-adjusted": { + "types": "./lib/theme/themes/highlights-new-adjusted.d.ts", + "import": "./lib/theme/themes/highlights-new-adjusted.mjs", + "require": "./lib/theme/themes/highlights-new-adjusted.js" + }, + "./lib/theme/themes/highlights-aqua-green": { + "types": "./lib/theme/themes/highlights-aqua-green.d.ts", + "import": "./lib/theme/themes/highlights-aqua-green.mjs", + "require": "./lib/theme/themes/highlights-aqua-green.js" + }, + "./lib/theme/themes/highlights-lime-green": { + "types": "./lib/theme/themes/highlights-lime-green.d.ts", + "import": "./lib/theme/themes/highlights-lime-green.mjs", + "require": "./lib/theme/themes/highlights-lime-green.js" + }, + "./lib/theme/themes/default": { + "types": "./lib/theme/themes/default.d.ts", + "import": "./lib/theme/themes/default.mjs", + "require": "./lib/theme/themes/default.js" + }, + "./lib/theme/themes/light": { + "types": "./lib/theme/themes/light.d.ts", + "import": "./lib/theme/themes/light.mjs", + "require": "./lib/theme/themes/light.js" + }, + "./lib/theme/themes/dark": { + "types": "./lib/theme/themes/dark.d.ts", + "import": "./lib/theme/themes/dark.mjs", + "require": "./lib/theme/themes/dark.js" + }, + "./lib/theme/themes/new": { + "types": "./lib/theme/themes/new.d.ts", + "import": "./lib/theme/themes/new.mjs", + "require": "./lib/theme/themes/new.js" + }, + "./lib/theme/themes/aqua-green.css": { + "import": "./lib/theme/themes/aqua-green.css", + "require": "./lib/theme/themes/aqua-green.css" + }, + "./lib/theme/themes/aqua-green": { + "types": "./lib/theme/themes/aqua-green.d.ts", + "import": "./lib/theme/themes/aqua-green.mjs", + "require": "./lib/theme/themes/aqua-green.js" + }, + "./lib/theme/themes/lime-green.css": { + "import": "./lib/theme/themes/lime-green.css", + "require": "./lib/theme/themes/lime-green.css" + }, + "./lib/theme/themes/lime-green": { + "types": "./lib/theme/themes/lime-green.d.ts", + "import": "./lib/theme/themes/lime-green.mjs", + "require": "./lib/theme/themes/lime-green.js" + }, + "./lib/theme/themes/new-adjusted.css": { + "import": "./lib/theme/themes/new-adjusted.css", + "require": "./lib/theme/themes/new-adjusted.css" + }, + "./lib/theme/themes/new-adjusted": { + "types": "./lib/theme/themes/new-adjusted.d.ts", + "import": "./lib/theme/themes/new-adjusted.mjs", + "require": "./lib/theme/themes/new-adjusted.js" + }, + "./lib/theme/themes/light-new.css": { + "import": "./lib/theme/themes/light-new.css", + "require": "./lib/theme/themes/light-new.css" + }, + "./lib/theme/themes/light-new": { + "types": "./lib/theme/themes/light-new.d.ts", + "import": "./lib/theme/themes/light-new.mjs", + "require": "./lib/theme/themes/light-new.js" + }, + "./lib/theme/themes/light-new-2ver.css": { + "import": "./lib/theme/themes/light-new-2ver.css", + "require": "./lib/theme/themes/light-new-2ver.css" + }, + "./lib/theme/themes/light-new-2ver": { + "types": "./lib/theme/themes/light-new-2ver.d.ts", + "import": "./lib/theme/themes/light-new-2ver.mjs", + "require": "./lib/theme/themes/light-new-2ver.js" + }, + "./lib/theme/themes/highlights-light-new-2ver": { + "types": "./lib/theme/themes/highlights-light-new-2ver.d.ts", + "import": "./lib/theme/themes/highlights-light-new-2ver.mjs", + "require": "./lib/theme/themes/highlights-light-new-2ver.js" + }, "./lib/utils/focus-lock/getFocusableIn": { "types": "./lib/utils/focus-lock/getFocusableIn.d.ts", "import": "./lib/utils/focus-lock/getFocusableIn.mjs", diff --git a/semcore/core/src/theme/aqua-green.json b/semcore/core/src/theme/aqua-green.json new file mode 100644 index 0000000000..7c15b8226f --- /dev/null +++ b/semcore/core/src/theme/aqua-green.json @@ -0,0 +1,2731 @@ +{ + "base": { + "gray": { + "50": { + "value": "#f7f8f9", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#eaeff1", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#d5dfe2", + "type": "color" + }, + "300": { + "value": "#b0c4c9", + "type": "color" + }, + "400": { + "value": "#85a2ab", + "type": "color" + }, + "500": { + "value": "#668791", + "type": "color" + }, + "600": { + "value": "#516e78", + "type": "color" + }, + "700": { + "value": "#425a62", + "type": "color" + }, + "800": { + "value": "#1e262a", + "type": "color" + }, + "white": { + "value": "#ffffff", + "type": "color" + } + }, + "blue": { + "50": { + "value": "#eaf0ff", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#bdd1ff", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#9dbaff", + "type": "color" + }, + "300": { + "value": "#709bff", + "type": "color" + }, + "400": { + "value": "#5487ff", + "type": "color" + }, + "500": { + "value": "#2969ff", + "type": "color" + }, + "600": { + "value": "#2560e8", + "type": "color" + }, + "700": { + "value": "#1d4bb5", + "type": "color" + }, + "800": { + "value": "#173a8c", + "type": "color" + } + }, + "green": { + "50": { + "value": "#E8FEF9", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#A3F9E5", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#95F8E2", + "type": "color" + }, + "300": { + "value": "#18F0BF", + "type": "color" + }, + "400": { + "value": "#46F3CC", + "type": "color" + }, + "500": { + "value": "#11AA88", + "type": "color" + }, + "600": { + "value": "#16DAAE", + "type": "color" + }, + "700": { + "value": "#11AA88", + "type": "color" + }, + "800": { + "value": "#0D8469", + "type": "color" + } + }, + "red": { + "50": { + "value": "#ffeaea", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#ffbdbd", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#ff9d9d", + "type": "color" + }, + "300": { + "value": "#FF5454", + "type": "color" + }, + "400": { + "value": "#ff5454", + "type": "color" + }, + "500": { + "value": "#E82525", + "type": "color" + }, + "600": { + "value": "#e82525", + "type": "color" + }, + "700": { + "value": "#b51d1d", + "type": "color" + }, + "800": { + "value": "#8c1717", + "type": "color" + } + }, + "orange": { + "50": { + "value": "#fff1ec", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#ffd3c3", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#ffbda5", + "type": "color" + }, + "300": { + "value": "#ff9f7c", + "type": "color" + }, + "400": { + "value": "#ff8d63", + "type": "color" + }, + "500": { + "value": "#ff703c", + "type": "color" + }, + "600": { + "value": "#e86637", + "type": "color" + }, + "700": { + "value": "#b5502b", + "type": "color" + }, + "800": { + "value": "#8c3e21", + "type": "color" + } + }, + "yellow": { + "50": { + "value": "#fff8ea", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#FFE09D", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#ffe09d", + "type": "color" + }, + "300": { + "value": "#FFC954", + "type": "color" + }, + "400": { + "value": "#ffc954", + "type": "color" + }, + "500": { + "value": "#E89325", + "type": "color" + }, + "600": { + "value": "#e8aa25", + "type": "color" + }, + "700": { + "value": "#b5851d", + "type": "color" + }, + "800": { + "value": "#8c6717", + "type": "color" + } + }, + "violet": { + "50": { + "value": "#f3eaff", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#dabdff", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#c99dff", + "type": "color" + }, + "300": { + "value": "#b070ff", + "type": "color" + }, + "400": { + "value": "#a155ff", + "type": "color" + }, + "500": { + "value": "#892aff", + "type": "color" + }, + "600": { + "value": "#7d26e8", + "type": "color" + }, + "700": { + "value": "#611eb5", + "type": "color" + }, + "800": { + "value": "#4b178c", + "type": "color" + }, + "dusty": { + "50": { + "value": "#f5f4ff", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#e2ddff", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#bcb1e9", + "type": "color" + }, + "300": { + "value": "#a79cd6", + "type": "color" + }, + "400": { + "value": "#9083c5", + "type": "color" + }, + "500": { + "value": "#6d619f", + "type": "color" + }, + "600": { + "value": "#4d407e", + "type": "color" + }, + "700": { + "value": "#382e5e", + "type": "color" + }, + "800": { + "value": "#1d113e", + "type": "color" + } + } + }, + "pink": { + "50": { + "value": "#fff0ff", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#ffd3ff", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#ffa9fa", + "type": "color" + }, + "300": { + "value": "#ff87eb", + "type": "color" + }, + "400": { + "value": "#e14adf", + "type": "color" + }, + "500": { + "value": "#b229b9", + "type": "color" + }, + "600": { + "value": "#7d0480", + "type": "color" + }, + "700": { + "value": "#4d0050", + "type": "color" + }, + "800": { + "value": "#340439", + "type": "color" + } + }, + "salad": { + "50": { + "value": "#e8fef9", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#b7faeb", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#95f8e2", + "type": "color" + }, + "300": { + "value": "#64f5d4", + "type": "color" + }, + "400": { + "value": "#46f3cc", + "type": "color" + }, + "500": { + "value": "#18f0bf", + "type": "color" + }, + "600": { + "value": "#16daae", + "type": "color" + }, + "700": { + "value": "#11aa88", + "type": "color" + }, + "800": { + "value": "#0d8469", + "type": "color" + } + } + }, + "tokens": { + "bg": { + "primary": { + "neutral": { + "value": "{gray.white}", + "type": "color", + "description": "Primary background of the interface which contains the main data and information." + }, + "neutral-hover": { + "value": "{gray.50}", + "type": "color", + "description": "Hover state of the primary background of the interface which contains the main data and information." + }, + "neutral-active": { + "value": "{gray.100}", + "type": "color", + "description": "Active (selected) state of the primary background of the interface which contains the main data and information." + }, + "info": { + "value": "{blue.400}", + "type": "color", + "description": "Accent background of the message with regular information." + }, + "success": { + "value": "{green.400}", + "type": "color", + "description": "Accent background of the message or banner with information about the successful result." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Accent background of a message or a banner with a critical information." + }, + "warning": { + "value": "{orange.400}", + "type": "color", + "description": "Accent background of a message or a banner with a warning information." + }, + "highlight": { + "value": "{yellow.100}", + "type": "color", + "description": "Accent background of the information you want to highlight." + }, + "advertising": { + "value": "{violet.700}", + "type": "color", + "description": "Accent background for the advertising banners and controls." + }, + "muted": { + "value": "{gray.500}", + "type": "color", + "description": "Accented muted background for a message with regular information." + }, + "invert": { + "value": "{gray.800}", + "type": "color", + "description": "Inverted version of the primary background of the interface that contains the main data and information." + }, + "invert-hover": { + "value": "{gray.700}", + "type": "color", + "description": "Hover state for the inverted version of the primary background of the interface that contains the main data and information." + }, + "invert-active": { + "value": "{gray.600}", + "type": "color", + "description": "Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information." + } + }, + "secondary": { + "neutral": { + "value": "{gray.50}", + "type": "color", + "description": "Secondary background of the interface which contains the main data and information." + }, + "neutral-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Hover state of the secondary background of the interface which contains the main data and information." + }, + "neutral-active": { + "value": "{gray.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the interface which contains the main data and information." + }, + "info": { + "value": "{blue.50}", + "type": "color", + "description": "Secondary background of a message with regular information." + }, + "info-hover": { + "value": "{blue.100}", + "type": "color", + "description": "Hover state of the secondary background of a message with regular information." + }, + "info-active": { + "value": "{blue.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of a message with regular information." + }, + "success": { + "value": "{green.50}", + "type": "color", + "description": "Secondary background of the message with success information you want to accent." + }, + "success-hover": { + "value": "{green.100}", + "type": "color", + "description": "Hover state of the secondary background of the message with success information you want to accent." + }, + "success-active": { + "value": "{green.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with success information you want to accent." + }, + "critical": { + "value": "{red.50}", + "type": "color", + "description": "Secondary background of the message with critical information you want to accent." + }, + "critical-hover": { + "value": "{red.100}", + "type": "color", + "description": "Hover state of the secondary background of the message with critical information you want to accent." + }, + "critical-active": { + "value": "{red.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with critical information you want to accent." + }, + "warning": { + "value": "{orange.50}", + "type": "color", + "description": "Secondary background of the message with warning information you want to accent." + }, + "warning-hover": { + "value": "{orange.100}", + "type": "color", + "description": "Hover state of the secondary background of the message with warning information you want to accent." + }, + "warning-active": { + "value": "{orange.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with critical information you want to accent." + }, + "highlight": { + "value": "{yellow.50}", + "type": "color", + "description": "Secondary background of the information you want to highlight." + }, + "highlight-hover": { + "value": "{yellow.100}", + "type": "color", + "description": "Hover state of the secondary background of the information you want to highlight." + }, + "highlight-active": { + "value": "{yellow.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the information you want to highlight." + }, + "advertising": { + "value": "{violet.50}", + "type": "color", + "description": "Secondary background for the advertising message you want to accent." + }, + "advertising-hover": { + "value": "{violet.100}", + "type": "color", + "description": "Hover state of the secondary background for the advertising message you want to accent." + }, + "advertising-active": { + "value": "{violet.200}", + "type": "color", + "description": "Active (selected) state of the secondary background for the advertising message you want to accent." + } + }, + "highlight-results": { + "value": "rgba({yellow.300}, 0.4)", + "type": "color", + "description": "Highlighting the search results." + }, + "highlight-focus": { + "value": "rgba({blue.400}, 0.2)", + "type": "color", + "description": "Focusing values in the input." + } + }, + "text": { + "primary": { + "value": "{gray.800}", + "type": "color", + "description": "Primary text." + }, + "secondary": { + "value": "{gray.500}", + "type": "color", + "description": "Secondary text." + }, + "placeholder": { + "value": "{gray.400}", + "type": "color", + "description": "Placeholder text only." + }, + "success": { + "value": "{green.500}", + "type": "color", + "description": "Text associated with success states and data." + }, + "success-hover-active": { + "value": "{green.600}", + "type": "color", + "description": "Hover and active states for the text associated with success states and data." + }, + "critical": { + "value": "{red.500}", + "type": "color", + "description": "Text associated with critical states and data." + }, + "critical-hover-active": { + "value": "{red.600}", + "type": "color", + "description": "Hover and active states for the text associated with critical states and data." + }, + "primary-invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the primary text." + }, + "secondary-invert": { + "value": "rgba({gray.white}, 0.8)", + "type": "color", + "description": "Inverted version of the secondary text." + }, + "link": { + "value": "{blue.500}", + "type": "color", + "description": "Link text." + }, + "link-hover-active": { + "value": "{blue.600}", + "type": "color", + "description": "Hover and active states for the link text." + }, + "link-invert": { + "value": "{blue.200}", + "type": "color", + "description": "Inverted version of the link text. Use on dark background only." + }, + "link-invert-hover": { + "value": "{blue.300}", + "type": "color", + "description": "Hover and active states of the inverted version of the link text. Use on dark background only." + }, + "link-visited": { + "value": "{violet.500}", + "type": "color", + "description": "Visited link text." + }, + "hint": { + "value": "{gray.500}", + "type": "color", + "description": "Hint link text." + }, + "hint-hover-active": { + "value": "{gray.600}", + "type": "color", + "description": "Hover and active states of the hint link text." + }, + "hint-invert": { + "value": "{gray.200}", + "type": "color", + "description": "Inverted version of the hint link text." + }, + "hint-invert-hover-active": { + "value": "{gray.300}", + "type": "color", + "description": "Hover and active states of the inverted version of the hint link text." + }, + "large-secondary": { + "value": "{gray.300}", + "type": "color", + "description": "Secondary text. Use with font-size ≥20px." + }, + "large-info": { + "value": "{blue.400}", + "type": "color", + "description": "Link text with font-size ≥20px." + }, + "large-info-hover-active": { + "value": "{blue.500}", + "type": "color", + "description": "Hover and active states of the link text with font-size ≥20px." + }, + "large-success": { + "value": "{green.400}", + "type": "color", + "description": "Text with font-size ≥20px associated with success states and data." + }, + "large-success-hover-active": { + "value": "{green.500}", + "type": "color", + "description": "Hover and active states of the text with font-size ≥20px associated with success states and data." + }, + "large-critical": { + "value": "{red.400}", + "type": "color", + "description": "Text with font-size ≥20px associated with critical states and data." + }, + "large-critical-hover-active": { + "value": "{red.500}", + "type": "color", + "description": "Hover and active states of the text with font-size ≥20px associated with critical states and data." + }, + "advertising": { + "value": "{violet.700}", + "type": "color", + "description": "Advertising text." + } + }, + "border": { + "primary": { + "value": "{gray.200}", + "type": "color", + "description": "Neutral primary border." + }, + "secondary": { + "value": "{gray.100}", + "type": "color", + "description": "Subtle secondary border." + }, + "info": { + "value": "{blue.200}", + "type": "color", + "description": "Subtle secondary border in the informational message." + }, + "info-active": { + "value": "{gray.800}", + "type": "color", + "description": "Active border in focused input filed." + }, + "success": { + "value": "{green.200}", + "type": "color", + "description": "Subtle secondary border in the successful message and input field." + }, + "success-active": { + "value": "{green.500}", + "type": "color", + "description": "Active border in the focused input field with valid state." + }, + "critical": { + "value": "{red.200}", + "type": "color", + "description": "Subtle secondary border in the critical message and invalid input field." + }, + "critical-active": { + "value": "{red.500}", + "type": "color", + "description": "Active border in the focused input field with invalid state, and active state of the other components with invalid state." + }, + "warning": { + "value": "{orange.200}", + "type": "color", + "description": "Subtle secondary border in the warning message." + }, + "warning-active": { + "value": "{orange.500}", + "type": "color", + "description": "Active border in components with warning intention." + }, + "primary-invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the neutral primary border. Use it for borders on the dark or color background." + }, + "secondary-invert": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background." + }, + "tooltip-invert": { + "value": "{gray.500}", + "type": "color", + "description": "Border of the Tooltip with dark theme." + }, + "table-accent": { + "value": "{gray.300}", + "type": "color", + "description": "Accent borders in the Table: for the accordion in the table and for the header of the secondary table." + }, + "date-picker-range-comparison": { + "value": "{violet.500}", + "type": "color", + "description": "Border color of the second period for the comparison mode in the DatePicker." + }, + "critical-pattern": { + "value": "repeating-linear-gradient(315deg, rgba($border.critical-active, 1) 0, rgba($border.critical-active, 1) 2px, transparent 0, transparent 50%)", + "type": "color", + "description": "Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states." + } + }, + "control": { + "switch-bg": { + "value": "{gray.300}", + "type": "color", + "description": "Subtle background of the Switch control." + }, + "primary": { + "info": { + "value": "{gray.800}", + "type": "color", + "description": "Background of the regular primary control." + }, + "info-hover": { + "value": "{gray.800}", + "type": "color", + "description": "Hover state of the regular primary control." + }, + "info-active": { + "value": "{gray.800}", + "type": "color", + "description": "Active (selected) state of the regular primary control." + }, + "success": { + "value": "{green.400}", + "type": "color", + "description": "Background of the primary control with successful theme." + }, + "success-hover": { + "value": "{green.500}", + "type": "color", + "description": "Hover state of the primary control with successful theme." + }, + "success-active": { + "value": "{green.600}", + "type": "color", + "description": "Active (selected) state of the primary control with successful theme." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Background of the primary control with danger theme." + }, + "critical-hover": { + "value": "{red.500}", + "type": "color", + "description": "Hover state of the primary control with danger theme." + }, + "critical-active": { + "value": "{red.600}", + "type": "color", + "description": "Active (selected) state of the primary control with danger theme." + }, + "brand": { + "value": "{orange.400}", + "type": "color", + "description": "Background of the primary brand colored control." + }, + "brand-hover": { + "value": "{orange.500}", + "type": "color", + "description": "Hover state of the primary brand colored control." + }, + "brand-active": { + "value": "{orange.600}", + "type": "color", + "description": "Active state of the primary brand colored control." + }, + "advertising": { + "value": "{violet.600}", + "type": "color", + "description": "Background of the advertising primary control." + }, + "advertising-hover": { + "value": "{violet.700}", + "type": "color", + "description": "Hover state of the advertising primary control." + }, + "advertising-active": { + "value": "{violet.500}", + "type": "color", + "description": "Active (selected) state of the advertising primary control." + }, + "invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted background of the primary control." + }, + "invert-hover": { + "value": "{gray.50}", + "type": "color", + "description": "Hover state of the inverted primary control." + }, + "invert-active": { + "value": "{gray.100}", + "type": "color", + "description": "Active (selected) state of the inverted primary control." + } + }, + "secondary": { + "neutral": { + "value": "rgba({gray.400}, 0.1)", + "type": "color", + "description": "Background of the regular secondary control." + }, + "neutral-hover": { + "value": "rgba({gray.400}, 0.2)", + "type": "color", + "description": "Hover state of the regular secondary control." + }, + "neutral-active": { + "value": "rgba({gray.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the regular secondary control." + }, + "info": { + "value": "rgba({blue.400}, 0.1)", + "type": "color", + "description": "Background of the accent secondary control." + }, + "info-hover": { + "value": "rgba({blue.400}, 0.2)", + "type": "color", + "description": "Hover state of the accent secondary control." + }, + "info-active": { + "value": "rgba({blue.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the accent secondary control." + }, + "invert": { + "value": "rgba({gray.white}, 0.05)", + "type": "color", + "description": "Background of the inverted version of the secondary control." + }, + "invert-hover": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Hover state of the inverted version of the secondary control." + }, + "invert-active": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Active (selected) state of the inverted version of the secondary control." + } + }, + "tertiary": { + "neutral": { + "value": "rgba({gray.400}, 0)", + "type": "color", + "description": "Background of the regular tertiary control." + }, + "neutral-hover": { + "value": "rgba({gray.400}, 0.2)", + "type": "color", + "description": "Hover state of the regular tertiary control." + }, + "neutral-active": { + "value": "rgba({gray.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the regular tertiary control." + }, + "info": { + "value": "rgba({blue.400}, 0)", + "type": "color", + "description": "Background of the accent and link-lookalike tertiary control." + }, + "info-hover": { + "value": "rgba({blue.400}, 0.2)", + "type": "color", + "description": "Hover state of the accent and link-lookalike tertiary control." + }, + "info-active": { + "value": "rgba({blue.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the accent and link-lookalike tertiary control." + }, + "invert": { + "value": "rgba({gray.white}, 0)", + "type": "color", + "description": "Background of the inverted version of the tertiary control." + }, + "invert-hover": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Hover state of the inverted version of the tertiary control." + }, + "invert-active": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Active (selected) state of the inverted version of the tertiary control." + } + } + }, + "icon": { + "primary": { + "neutral": { + "value": "{gray.500}", + "type": "color", + "description": "Primary neutral icon." + }, + "neutral-hover-active": { + "value": "#565861", + "type": "color", + "description": "Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color." + }, + "info": { + "value": "{blue.500}", + "type": "color", + "description": "Primary link-lookalike icon." + }, + "info-hover-active": { + "value": "#0358a1", + "type": "color", + "description": "Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color." + }, + "success": { + "value": "{green.400}", + "type": "color", + "description": "Primary success icon." + }, + "success-hover-active": { + "value": "#037e68", + "type": "color", + "description": "Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Primary critical icon." + }, + "critical-hover-active": { + "value": "#cc3a42", + "type": "color", + "description": "Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color." + }, + "warning": { + "value": "{orange.400}", + "type": "color", + "description": "Primary warning icon." + }, + "warning-hover-active": { + "value": "#cc5024", + "type": "color", + "description": "Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color." + }, + "invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the primary icon." + }, + "invert-hover-active": { + "value": "{gray.100}", + "type": "color", + "description": "Hover and active (selected) states of the inverted version of the primary icon." + } + }, + "secondary": { + "neutral": { + "value": "{gray.300}", + "type": "color", + "description": "Secondary neutral icon." + }, + "neutral-hover-active": { + "value": "#878992", + "type": "color", + "description": "Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color." + }, + "info": { + "value": "{blue.300}", + "type": "color", + "description": "Secondary link-lookalike icon." + }, + "info-hover-active": { + "value": "#2290cc", + "type": "color", + "description": "Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color." + }, + "success": { + "value": "{green.300}", + "type": "color", + "description": "Secondary success icon." + }, + "success-hover-active": { + "value": "#049b75", + "type": "color", + "description": "Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color." + }, + "critical": { + "value": "{red.300}", + "type": "color", + "description": "Secondary critical icon." + }, + "critical-hover-active": { + "value": "#cc6c6b", + "type": "color", + "description": "Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color." + }, + "warning": { + "value": "{orange.300}", + "type": "color", + "description": "Secondary warning icon." + }, + "warning-hover-active": { + "value": "#cc7036", + "type": "color", + "description": "Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color." + } + }, + "non-interactive": { + "value": "{gray.800}", + "type": "color", + "description": "Color for the default non-interactive icon." + } + }, + "illustration": { + "red": { + "value": "#ff788f", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "orange": { + "value": "#ff9400", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "yellow": { + "value": "#ffe84d", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "salad": { + "value": "#c7fa73", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "green": { + "value": "#45e0a8", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "blue": { + "value": "#6edbff", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "violet": { + "value": "#b880ff", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "pink": { + "value": "#ff7ad1", + "type": "color", + "description": "⚠️ Use only for illustrations." + } + }, + "date-picker": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Default date-picker cell background." + }, + "cell-current": { + "value": "{gray.400}", + "type": "color", + "description": "Color for marking the cell with the current date, month or year in the date-picker." + }, + "cell-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Hover state of the default date-picker cell background." + }, + "cell-range": { + "value": "{blue.100}", + "type": "color", + "description": "Background for the cell which is included in the date range in the date-picker." + }, + "cell-range-hover": { + "value": "{blue.200}", + "type": "color", + "description": "Hover state of the background for the cell which is included in the date range in the date-picker." + }, + "cell-active": { + "value": "{blue.300}", + "type": "color", + "description": "Active (selected) date-picker cell background." + }, + "cell-active-hover": { + "value": "{blue.400}", + "type": "color", + "description": "Hover for the active (selected) date-picker cell background." + }, + "cell-current-invert": { + "value": "rgba({gray.white}, 0.5)", + "type": "color", + "description": "Color for marking the active cell with the current date, month or year in the date-picker." + }, + "cell-comparison-active": { + "value": "{violet.500}", + "type": "color", + "description": "Active (selected) date-picker cell background for comparison periods." + }, + "cell-comparison-active-hover": { + "value": "{violet.600}", + "type": "color", + "description": "Hover for the active (selected) date-picker cell background for comparison periods." + } + }, + "dropdown-menu": { + "item": { + "value": "{gray.white}", + "type": "color", + "description": "Default background color for the list item in the dropdown-menu." + }, + "item-hover": { + "value": "{gray.50}", + "type": "color", + "description": "Hover state of the default background color for the list item in the dropdown-menu." + }, + "item-selected": { + "value": "rgba({blue.100}, 0.7)", + "type": "color", + "description": "Active (selected) state of the default background color for the list item in the dropdown-menu." + }, + "item-selected-hover": { + "value": "{blue.100}", + "type": "color", + "description": "Hover state for the selected state of the default background color for the list item in the dropdown-menu." + } + }, + "feature-popover": { + "bg": { + "value": "{bg.primary.highlight}", + "type": "color", + "description": "Color of the FeaturePopover background with accent theme." + }, + "dot-outer-border": { + "value": "{feature-popover.bg}", + "type": "color", + "description": "Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme." + }, + "bg-neutral": { + "value": "{violet.dusty.800}", + "type": "color", + "description": "Color of the FeaturePopover background with neutral theme." + }, + "dot-neutral": { + "value": "{green.300}", + "type": "color", + "description": "Color of the FeaturePopover.Spot for FeaturePopover with neutral theme." + }, + "dot-neutral-outer-border": { + "value": "{feature-popover.dot-neutral}", + "type": "color", + "description": "Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme." + } + }, + "progress-bar": { + "bg": { + "value": "{gray.100}", + "type": "color", + "description": "Background color of the ProgressBar." + }, + "bg-hover": { + "value": "{gray.200}", + "type": "color", + "description": "Hover state of the background color of the ProgressBar." + }, + "bg-invert": { + "value": "rgba({gray.white}, 0.2)", + "type": "color", + "description": "Inverted version of the background color of the ProgressBar." + }, + "bg-invert-hover": { + "value": "rgba({gray.white}, 0.4)", + "type": "color", + "description": "Hover state for the inverted version of the background color of the ProgressBar." + }, + "value": { + "value": "{green.400}", + "type": "color", + "description": "Value color of the ProgressBar." + }, + "value-gradient": { + "value": "linear-gradient(-45deg, rgba(68, 193, 93, 0.9) 25%, rgba(68, 193, 93, 1) 0%, rgba(68, 193, 93, 1) 50%, rgba(68, 193, 93, 0.9) 0%, rgba(68, 193, 93, 0.9) 75%, rgba(68, 193, 93, 1) 0%)", + "type": "color", + "description": "Value with gradient for the ProgressBar." + }, + "pattern-gradient": { + "value": "linear-gradient(-45deg, rgba(234, 239, 241, 0.9) 25%, rgba(234, 239, 241, 1) 0%, rgba(234, 239, 241, 1) 50%, rgba(234, 239, 241, 0.9) 0%, rgba(234, 239, 241, 0.9) 75%, rgba(234, 239, 241, 1) 0%)", + "type": "color", + "description": "Null value gradient for the ProgressBar." + }, + "value-bg": { + "value": "#000000", + "type": "color", + "description": "Base value background for the ProgressBar. It is used to create gradients for the values." + } + }, + "skeleton": { + "bg": { + "value": "rgba({gray.100}, 0.8)", + "type": "color", + "description": "Default color for the Skeleton." + }, + "bg-invert": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Inverted version of the default color for the Skeleton." + } + }, + "slider-rating": { + "normal": { + "value": "{icon.secondary.neutral}", + "type": "color", + "description": "Icon color for the SliderRating component in its normal state." + }, + "hover-active": { + "value": "{yellow.200}", + "type": "color", + "description": "Icon color for the SliderRating component in its hovered and active states." + } + }, + "table": { + "th": { + "primary": { + "cell": { + "value": "{gray.50}", + "type": "color", + "description": "Background of the header cell in the primary Table." + }, + "cell-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the hovered header cell in the primary Table." + }, + "cell-active": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the active header cell in the primary Table." + } + }, + "secondary": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Background of the header cell in the secondary Table." + } + }, + "gradient": { + "value": "linear-gradient(to right, rgba($gray.100, 0) 0%, rgba($gray.100, 1) 100%)", + "type": "color", + "description": "Background gradient for sorting icon that absolute positioned in the table head." + } + }, + "td": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Background of the default cell in the Table." + }, + "cell-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the default hovered cell in the Table.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.5", + "space": "hsl" + } + } + } + }, + "cell-active": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the default active cell in the Table.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.2", + "space": "hsl" + } + } + } + }, + "cell-unread": { + "value": "{gray.50}", + "type": "color", + "description": "Background of the unread cell in the Table." + }, + "cell-accordion": { + "value": "{gray.50}", + "type": "color", + "description": "Background of the cell inside an Accordion in the Table." + }, + "cell-selected": { + "value": "{blue.50}", + "type": "color", + "description": "Background of the selected cell in the Table." + }, + "cell-selected-hover": { + "value": "{blue.100}", + "type": "color", + "description": "Background of the hovered selected cell in the Table." + }, + "cell-selected-active": { + "value": "{blue.100}", + "type": "color", + "description": "Background of the active selected cell in the Table." + }, + "cell-new": { + "value": "{green.50}", + "type": "color", + "description": "Background of the cell with new information in the Table." + }, + "cell-new-hover": { + "value": "{green.100}", + "type": "color", + "description": "Background of the hovered cell with new information in the Table." + }, + "cell-new-active": { + "value": "{green.100}", + "type": "color", + "description": "Background of the active cell with new information in the Table." + }, + "cell-critical": { + "value": "{red.50}", + "type": "color", + "description": "Background of the cell with critical information in the Table." + }, + "cell-critical-hover": { + "value": "{red.100}", + "type": "color", + "description": "Background of the hovered cell with critical information in the Table." + }, + "cell-critical-active": { + "value": "{red.100}", + "type": "color", + "description": "Background of the active cell with critical information in the Table." + }, + "cell-warning": { + "value": "{orange.50}", + "type": "color", + "description": "Background of the cell with warning information in the Table." + }, + "cell-warning-hover": { + "value": "{orange.100}", + "type": "color", + "description": "Background of the hovered cell with warning information in the Table." + }, + "cell-warning-active": { + "value": "{orange.100}", + "type": "color", + "description": "Background of the active cell with warning information in the Table." + } + } + }, + "brand": { + "primary": { + "value": "{orange.400}", + "type": "color", + "description": "Primary brand color." + }, + "secondary": { + "value": "{violet.700}", + "type": "color", + "description": "Secondary brand color." + }, + "pinterest": { + "value": "#bd081c", + "type": "color", + "description": "Pinterest brand color." + }, + "instagram": { + "value": "#e4405f", + "type": "color", + "description": "Instagram brand color." + }, + "youtube": { + "value": "#ff0000", + "type": "color", + "description": "Youtube brand color." + }, + "facebook": { + "value": "#1877f2", + "type": "color", + "description": "Facebook brand color." + }, + "linkedIn": { + "value": "#0a66c2", + "type": "color", + "description": "LinkedIn brand color." + }, + "twitter": { + "value": "#1d9bf0", + "type": "color", + "description": "Twitter brand color." + }, + "google-blue": { + "value": "#1a0dab", + "type": "color", + "description": "Google brand color for the link." + }, + "google-green": { + "value": "#016723", + "type": "color", + "description": "Google green brand color for the link." + }, + "google-my-business": { + "value": "#1a73e8", + "type": "color", + "description": "Google My Business brand color." + } + }, + "box-shadow": { + "card": { + "value": "0 0 0 1px {gray.100}", + "type": "boxShadow", + "description": "Default shadow of the Card." + }, + "card-hover": { + "value": "3px 3px 30px 0px rgba({gray.800}, 0.15)", + "type": "boxShadow", + "description": "Hover state for the shadow of the Card with hover state." + }, + "dnd": { + "value": "0px 0px 1px 0px rgba({gray.800}, 0.16); 0px 12px 40px 0px rgba({gray.800}, 0.16)", + "type": "boxShadow", + "description": "Shadow for show that element are being drag-and-drop." + }, + "modal": { + "value": "0px 3px 8px 0px rgba({gray.800}, 0.2)", + "type": "boxShadow", + "description": "Default shadow if the Modal window." + }, + "popper": { + "value": "0px 1px 12px 0px rgba({gray.800}, 0.15)", + "type": "boxShadow", + "description": "Default shadow of all Poppers, Dropdowns and Tooltips." + }, + "float-control": { + "value": [ + { + "x": "0", + "y": "0", + "blur": "1", + "spread": "0", + "color": "rgba(0,0,0,0.16)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "1", + "blur": "2", + "spread": "0", + "color": "rgba(0,0,0,0.12)", + "type": "dropShadow" + } + ], + "type": "boxShadow", + "description": "Use it only for controls that float above the whole interface." + }, + "float-control-hover": { + "value": [ + { + "x": "0", + "y": "0", + "blur": "2", + "spread": "0", + "color": "rgba(0,0,0,0.2)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "1", + "blur": "4", + "spread": "0", + "color": "rgba(0,0,0,0.16)", + "type": "dropShadow" + } + ], + "type": "boxShadow", + "description": "Use it only for controls that float above the whole interface." + } + }, + "keyboard-focus": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.outline}, 0.5)", + "type": "boxShadow", + "description": "Default keyboard focus box-shadow styles.", + "outline": { + "value": "{gray.800}", + "type": "color", + "description": "Color for default keyboard focus outline styles." + }, + "invalid": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.invalid.outline}, 0.5)", + "type": "boxShadow", + "description": "Keyboard focus styles for elements with invalid state.", + "outline": { + "value": "{red.400}", + "type": "color", + "description": "Color for keyboard focus outline styles for elements with invalid state." + } + }, + "valid": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.valid.outline}, 0.5)", + "type": "boxShadow", + "description": "Keyboard focus styles for elements with valid state.", + "outline": { + "value": "{green.400}", + "type": "color", + "description": "Color for keyboard focus outline styles for elements with valid state." + } + }, + "invert": { + "value": "0px 0px 0px 3px {keyboard-focus.invert.outline}", + "type": "boxShadow", + "description": "Keyboard focus styles for use on dark backgrounds.", + "outline": { + "value": "rgba({gray.white}, 0.8)", + "type": "color", + "description": "Color for keyboard focus outline styles to use on the dark and color background." + } + } + }, + "base": { + "value": "Inter", + "type": "fontFamilies", + "description": "Base font family." + }, + "lh-800": { + "value": "117%", + "type": "lineHeights", + "description": "Use with font-size-800." + }, + "lh-700": { + "value": "110%", + "type": "lineHeights", + "description": "Use with font-size-700." + }, + "lh-600": { + "value": "125%", + "type": "lineHeights", + "description": "Use with font-size-600." + }, + "lh-500": { + "value": "117%", + "type": "lineHeights", + "description": "Use with font-size-500." + }, + "lh-400": { + "value": "120%", + "type": "lineHeights", + "description": "Use with font-size-400." + }, + "lh-300": { + "value": "150%", + "type": "lineHeights", + "description": "Use with font-size-300." + }, + "lh-200": { + "value": "142%", + "type": "lineHeights", + "description": "Use with font-size-200." + }, + "lh-100": { + "value": "133%", + "type": "lineHeights", + "description": "Use with font-size-100." + }, + "semi-bold": { + "value": "600", + "type": "fontWeights", + "description": "Semi-bold font weight." + }, + "bold": { + "value": "700", + "type": "fontWeights", + "description": "Bold font weight." + }, + "regular": { + "value": "400", + "type": "fontWeights", + "description": "Regular font weight." + }, + "medium": { + "value": "500", + "type": "fontWeights", + "description": "Medium font weight." + }, + "fs-50": { + "value": "10px", + "type": "fontSizes", + "description": "Use only for text in Badge component." + }, + "fs-100": { + "value": "12px", + "type": "fontSizes", + "description": "Use this font-size with caution for text in some additional messages. Always check its contrast and readability." + }, + "fs-200": { + "value": "14px", + "type": "fontSizes" + }, + "fs-300": { + "value": "16px", + "type": "fontSizes" + }, + "fs-400": { + "value": "20px", + "type": "fontSizes" + }, + "fs-500": { + "value": "24px", + "type": "fontSizes" + }, + "fs-600": { + "value": "32px", + "type": "fontSizes" + }, + "fs-700": { + "value": "36px", + "type": "fontSizes" + }, + "fs-800": { + "value": "48px", + "type": "fontSizes" + }, + "compact": { + "value": "0.3", + "type": "letterSpacing", + "description": "Compact letter spacing." + }, + "heading-h1": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-800}", + "fontSize": "{fs-800}" + }, + "type": "typography" + }, + "heading-h2": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-700}", + "fontSize": "{fs-700}" + }, + "type": "typography", + "description": "Landing headings" + }, + "heading-h3": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-600}", + "fontSize": "{fs-600}" + }, + "type": "typography", + "description": "Tool page main heading" + }, + "heading-h4": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-500}", + "fontSize": "{fs-500}" + }, + "type": "typography", + "description": "Tool page heading" + }, + "heading-h5": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-400}", + "fontSize": "{fs-400}" + }, + "type": "typography", + "description": "Widget heading" + }, + "heading-h6": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "lineHeight": "{lh-300}", + "fontSize": "{fs-300}" + }, + "type": "typography", + "description": "Widget, notice & dropdown heading" + }, + "subtitle": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{regular}", + "lineHeight": "{lh-400}", + "fontSize": "{fs-400}" + }, + "type": "typography", + "description": "Use for big subtitles on the landing pages." + }, + "scale-indent": { + "value": "4px", + "type": "spacing", + "description": "Base denominator of the design system." + }, + "form-control-s": { + "value": "{scale-indent}*5", + "type": "sizing", + "description": "Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions." + }, + "form-control-m": { + "value": "{scale-indent}*7", + "type": "sizing", + "description": "Default size of the controls." + }, + "form-control-l": { + "value": "{scale-indent}*10", + "type": "sizing", + "description": "Large size of the controls." + }, + "spacing-05x": { + "value": "{scale-indent}*0.5", + "type": "spacing", + "description": "2px" + }, + "spacing-1x": { + "value": "{scale-indent}*1", + "type": "spacing", + "description": "4px" + }, + "spacing-2x": { + "value": "{scale-indent}*2", + "type": "spacing", + "description": "8px" + }, + "spacing-3x": { + "value": "{scale-indent}*3", + "type": "spacing", + "description": "12px" + }, + "spacing-4x": { + "value": "{scale-indent}*4", + "type": "spacing", + "description": "16px" + }, + "spacing-5x": { + "value": "{scale-indent}*5", + "type": "spacing", + "description": "20px" + }, + "spacing-6x": { + "value": "{scale-indent}*6", + "type": "spacing", + "description": "24px" + }, + "spacing-8x": { + "value": "{scale-indent}*8", + "type": "spacing", + "description": "32px" + }, + "spacing-10x": { + "value": "{scale-indent}*10", + "type": "spacing", + "description": "40px" + }, + "spacing-14x": { + "value": "{scale-indent}*14", + "type": "spacing", + "description": "56px" + }, + "spacing-20x": { + "value": "{scale-indent}*20", + "type": "spacing", + "description": "80px" + }, + "spacing-24x": { + "value": "{scale-indent}*24", + "type": "spacing", + "description": "96px" + }, + "spacing-30x": { + "value": "{scale-indent}*30", + "type": "spacing", + "description": "120px" + }, + "rounded-extra-small": { + "value": "2px", + "type": "borderRadius" + }, + "rounded-small": { + "value": "4px", + "type": "borderRadius" + }, + "rounded-medium": { + "value": "6px", + "type": "borderRadius" + }, + "rounded-large": { + "value": "12px", + "type": "borderRadius" + }, + "rounded-extra-large": { + "value": "24px", + "type": "borderRadius" + }, + "addon-rounded": { + "value": "{rounded-small}", + "type": "borderRadius", + "description": "Use for rounding addons and small controls like Checkbox." + }, + "badge-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding Badge." + }, + "chart-rounded": { + "value": "{rounded-extra-small}", + "type": "borderRadius", + "description": "Use for rounding big and small charts like bar, histogram and others." + }, + "counter-rounded": { + "value": "{rounded-large}", + "type": "borderRadius", + "description": "Use for rounding Counter." + }, + "tag-rounded": { + "value": "{rounded-extra-large}", + "type": "borderRadius", + "description": "Use for rounding Tag." + }, + "switch-rounded": { + "value": "{rounded-extra-large}", + "type": "borderRadius", + "description": "Use for rounding Switch." + }, + "control-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc." + }, + "progress-bar-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding bars: ProgressBar, SliderBar, etc." + }, + "surface-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding surfaces like Card, blocks, widgets, Notice, etc." + }, + "popper-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding all kinds of poppers and dropdowns." + }, + "modal-rounded": { + "value": "{rounded-large}", + "type": "borderRadius", + "description": "Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard)." + }, + "disabled-opacity": { + "value": "0.5", + "type": "opacity", + "description": "Use for the disabled state of all kind of the controls and elements." + }, + "screen-extra-small": { + "value": "320px", + "type": "sizing", + "description": "Extra small screens (small phones)." + }, + "screen-small": { + "value": "768px", + "type": "sizing", + "description": "Small screens (phones and small tablets)." + }, + "screen-medium": { + "value": "1200px", + "type": "sizing", + "description": "Medium screens (tablets and small laptops)." + }, + "screen-large": { + "value": "1920px", + "type": "sizing", + "description": "Large screens (tablets and laptops)." + }, + "overlay": { + "primary": { + "value": "rgba({gray.800}, 0.7)", + "type": "color", + "description": "Use for cover the content under the modal dialogs." + }, + "secondary": { + "value": "rgba({gray.800}, 0.4)", + "type": "color", + "description": "Use for the secondary modal dialogs that were opened upon the other modal dialogs." + }, + "limitation-primary": { + "value": "{gray.50}", + "type": "color", + "description": "Use as a primary cover of the content under the messages about limitations." + }, + "limitation-secondary": { + "value": "rgba({gray.white}, 0.85)", + "type": "color", + "description": "Use as a secondary cover of the content under the messages about limitations." + } + }, + "z-index": { + "deep": { + "value": "-999", + "type": "other" + }, + "overlay": { + "value": "500", + "type": "other" + }, + "modal": { + "value": "900", + "type": "other" + }, + "popper": { + "value": "700", + "type": "other" + }, + "dropdown": { + "value": "750", + "type": "other" + }, + "tooltip": { + "value": "800", + "type": "other" + }, + "notice-bubble": { + "value": "999", + "type": "other" + } + }, + "tooltip": { + "default": { + "value": "{gray.white}", + "type": "color", + "description": "Default Tooltip background." + }, + "warning": { + "value": "{red.100}", + "type": "color", + "description": "Warning Tooltip background." + }, + "invert": { + "value": "{gray.800}", + "type": "color", + "description": "Inverted version of the default Tooltip background." + } + }, + "neighbor-location": { + "neutral": { + "value": "#ffffff80", + "type": "color", + "description": "Neutral border of the components that are combined with neighbor-location property." + }, + "invert": { + "value": "#00000080", + "type": "color", + "description": "Inverted border of the components that are combined with neighbor-location property." + } + }, + "scroll-area": { + "shadow-left": { + "value": "linear-gradient(to right, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)", + "type": "color", + "description": "Left-to-right fade shadow for the ScrollArea." + }, + "shadow-right": { + "value": "linear-gradient(to left, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)", + "type": "color", + "description": "Right-to-left fade shadow for the ScrollArea." + }, + "shadow-top": { + "value": "linear-gradient(to bottom, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)", + "type": "color", + "description": "Top-to-bottom fade shadow for the ScrollArea." + }, + "shadow-bottom": { + "value": "linear-gradient(to top, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)", + "type": "color", + "description": "Bottom-to-top fade shadow for the ScrollArea." + }, + "dropdown-menu-left": { + "value": "linear-gradient(to right, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)", + "type": "color", + "description": "Left-to-right fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-right": { + "value": "linear-gradient(to left, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)", + "type": "color", + "description": "Right-to-left fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-bottom": { + "value": "linear-gradient(to top, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)", + "type": "color", + "description": "Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-top": { + "value": "linear-gradient(to bottom, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)", + "type": "color", + "description": "Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu." + } + }, + "scroll-bar": { + "background": { + "value": "rgba({gray.800}, 0.3)", + "type": "color", + "description": "Background color for ScrollBar." + } + }, + "tag": { + "primary": { + "gray-normal": { + "value": "#ecedf0", + "type": "color", + "description": "Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath." + }, + "gray-hover-active": { + "value": "#e3e4e9", + "type": "color", + "description": "Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath." + }, + "blue-normal": { + "value": "#d0eeff", + "type": "color", + "description": "Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath." + }, + "blue-hover-active": { + "value": "#b7e4ff", + "type": "color", + "description": "Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath." + }, + "green-normal": { + "value": "#cff1ea", + "type": "color", + "description": "Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath." + }, + "green-hover-active": { + "value": "#b7eae0", + "type": "color", + "description": "Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath." + }, + "orange-normal": { + "value": "#ffddd2", + "type": "color", + "description": "Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath." + }, + "orange-hover-active": { + "value": "#ffccbb", + "type": "color", + "description": "Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath." + }, + "red-normal": { + "value": "#ffcedc", + "type": "color", + "description": "Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath." + }, + "red-hover-active": { + "value": "#ffb6ca", + "type": "color", + "description": "Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath." + }, + "violet-normal": { + "value": "#f4e3ff", + "type": "color", + "description": "Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath." + }, + "violet-hover-active": { + "value": "#efd5ff", + "type": "color", + "description": "Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath." + }, + "yellow-normal": { + "value": "#fee6d1", + "type": "color", + "description": "Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath." + }, + "yellow-hover-active": { + "value": "#fedab9", + "type": "color", + "description": "Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath." + }, + "white-normal": { + "value": "rgba({gray.white}, 0.15)", + "type": "color", + "description": "Primary white tag." + }, + "white-hover-active": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Hover and active (selected) state of the primary white tag." + }, + "gray-text": { + "value": "{gray.500}", + "type": "color", + "description": "Gray text for the primary gray tag." + }, + "blue-text": { + "value": "{blue.500}", + "type": "color", + "description": "Blue text for the primary blue tag." + }, + "green-text": { + "value": "{green.500}", + "type": "color", + "description": "Green text for the primary green tag." + }, + "orange-text": { + "value": "{orange.500}", + "type": "color", + "description": "Orange text for the primary orange tag." + }, + "red-text": { + "value": "{red.500}", + "type": "color", + "description": "Red text for the primary red tag." + }, + "violet-text": { + "value": "{violet.500}", + "type": "color", + "description": "Violet text for the primary violet tag." + }, + "yellow-text": { + "value": "{yellow.500}", + "type": "color", + "description": "Yellow text for the primary yellow tag." + }, + "white-text": { + "value": "{gray.white}", + "type": "color", + "description": "White text for the primary white tag." + } + }, + "secondary": { + "normal": { + "value": "{gray.white}", + "type": "color", + "description": "Background color for the default secondary tag." + }, + "hover-active": { + "value": "{gray.50}", + "type": "color", + "description": "Hover and active (selected) states of the background color for the default secondary tag." + }, + "white-normal": { + "value": "rgba({gray.white}, 0)", + "type": "color", + "description": "White secondary tag." + }, + "white-hover-active": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Active state of the secondary white tag." + }, + "gray-text": { + "value": "{gray.500}", + "type": "color", + "description": "Gray text for the default secondary tag." + }, + "white-text": { + "value": "{gray.white}", + "type": "color", + "description": "White text for the secondary white tag." + } + } + }, + "chart": { + "palette-order": { + "1": { + "value": "{blue.300}", + "type": "color", + "description": "1 color in the default list of colors for charts." + }, + "2": { + "value": "{green.200}", + "type": "color", + "description": "2 color in the default list of colors for charts." + }, + "3": { + "value": "{orange.400}", + "type": "color", + "description": "3 color in the default list of colors for charts." + }, + "4": { + "value": "{pink.300}", + "type": "color", + "description": "4 color in the default list of colors for charts." + }, + "5": { + "value": "{yellow.200}", + "type": "color", + "description": "5 color in the default list of colors for charts." + }, + "6": { + "value": "{violet.400}", + "type": "color", + "description": "6 color in the default list of colors for charts." + }, + "7": { + "value": "{red.300}", + "type": "color", + "description": "7 color in the default list of colors for charts." + }, + "8": { + "value": "{salad.200}", + "type": "color", + "description": "8 color in the default list of colors for charts." + }, + "9": { + "value": "{blue.400}", + "type": "color", + "description": "9 color in the default list of colors for charts." + }, + "10": { + "value": "{green.300}", + "type": "color", + "description": "10 color in the default list of colors for charts." + }, + "11": { + "value": "{orange.200}", + "type": "color", + "description": "11 color in the default list of colors for charts." + }, + "12": { + "value": "{pink.400}", + "type": "color", + "description": "12 color in the default list of colors for charts." + }, + "13": { + "value": "{yellow.300}", + "type": "color", + "description": "13 color in the default list of colors for charts." + }, + "14": { + "value": "{violet.200}", + "type": "color", + "description": "14 color in the default list of colors for charts." + }, + "15": { + "value": "{red.400}", + "type": "color", + "description": "15 color in the default list of colors for charts." + }, + "16": { + "value": "{salad.300}", + "type": "color", + "description": "16 color in the default list of colors for charts." + }, + "17": { + "value": "{blue.200}", + "type": "color", + "description": "17 color in the default list of colors for charts." + }, + "18": { + "value": "{green.400}", + "type": "color", + "description": "18 color in the default list of colors for charts." + }, + "19": { + "value": "{orange.300}", + "type": "color", + "description": "19 color in the default list of colors for charts." + }, + "20": { + "value": "{pink.200}", + "type": "color", + "description": "20 color in the default list of colors for charts." + }, + "21": { + "value": "{yellow.400}", + "type": "color", + "description": "21 color in the default list of colors for charts." + }, + "22": { + "value": "{violet.300}", + "type": "color", + "description": "22 color in the default list of colors for charts." + }, + "23": { + "value": "{red.200}", + "type": "color", + "description": "23 color in the default list of colors for charts." + }, + "24": { + "value": "{salad.400}", + "type": "color", + "description": "24 color in the default list of colors for charts." + }, + "total-amount": { + "value": "{gray.400}", + "type": "color", + "description": "Use it to show total value." + }, + "other-data": { + "value": "{gray.200}", + "type": "color", + "description": "Use it to indicate voids, missing or some other data." + }, + "null": { + "value": "{gray.100}", + "type": "color", + "description": "Use it to show null value." + } + }, + "grid": { + "line": { + "value": "{gray.100}", + "type": "color", + "description": "Default chart grid line." + }, + "x-axis": { + "value": "{gray.200}", + "type": "color", + "description": "X-axis line on the chart grid." + }, + "y-accent-hover-line": { + "value": "{gray.300}", + "type": "color", + "description": "Accent line for the hover state on the chart grid." + }, + "text-label": { + "value": "{gray.500}", + "type": "color", + "description": "Text label on the chart grid." + }, + "bar-chart-hover": { + "value": "rgba({gray.200}, 0.3)", + "type": "color", + "description": "Background color for the hover state of a bar on the chart grid." + }, + "bar-chart-base-bg": { + "value": "{gray.100}", + "type": "color", + "description": "Default background color of a bar in the BarChart." + }, + "period-bg": { + "value": "rgba({gray.200}, 0.2)", + "type": "color", + "description": "Use for highlighting a period on the chart grid." + }, + "period-pattern": { + "value": "rgba({gray.800}, 0.15)", + "type": "color", + "description": "Stripe color for diagonal pattern background." + }, + "border": { + "value": "{gray.white}", + "type": "color", + "description": "Border for distinguishing data sets and chart dots on the chart grid." + } + }, + "x-axis-accent": { + "period-active": { + "value": "{gray.500}", + "type": "color", + "description": "Background color for the clickable date on the X-axis of the chart grid." + }, + "data-start-tracking": { + "value": "rgba({green.400}, 0.2)", + "type": "color", + "description": "Background color for the \"Start tracking\" date on the X-axis of the chart grid." + } + }, + "axis-label": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "fontSize": "{fs-100}" + }, + "type": "typography" + }, + "axis-label-bold": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "fontSize": "{fs-100}" + }, + "type": "typography" + } + }, + "header": { + "bg": { + "value": "{violet.dusty.700}", + "type": "color" + }, + "border": { + "primary": { + "value": "{violet.dusty.700}", + "type": "color" + }, + "secondary": { + "value": "#ffffff26", + "type": "color" + } + } + }, + "sidebar-nav": { + "control-hover": { + "value": "rgba({gray.100}, 0.7)", + "type": "color" + }, + "control-active": { + "value": "{violet.dusty.100}", + "type": "color" + }, + "control": { + "text": { + "normal": { + "value": "{violet.dusty.500}", + "type": "color" + }, + "active": { + "value": "{violet.dusty.600}", + "type": "color" + } + }, + "icon": { + "normal": { + "value": "{violet.dusty.400}", + "type": "color" + }, + "active": { + "value": "{violet.dusty.600}", + "type": "color" + } + } + } + }, + "duration": { + "extra-slow": { + "value": "500", + "type": "other", + "description": "Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen)" + }, + "slow": { + "value": "400", + "type": "other", + "description": "Should be used for more larger scale animations (such as page transitions)" + }, + "medium": { + "value": "300", + "type": "other", + "description": "Should be used for more complex effects (such as Modal)" + }, + "fast": { + "value": "200", + "type": "other", + "description": "Should be used for more complex effects (such as Dropdown or Accordion)" + }, + "extra-fast": { + "value": "100", + "type": "other", + "description": "Should be used for simpler effects and relatively small-sized animations (such as fades or color changes)" + }, + "switch": { + "value": "{duration.extra-fast}", + "type": "other", + "description": "Use for small controls like Switch or Slider." + }, + "popper": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for components based on popper like Tooltip, Dropdown or Filter trigger." + }, + "control": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for small controls like Checkbox or Radio." + }, + "modal": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Modal, Fullscreen Modal, Side panel or other kind of windows." + }, + "accordion": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Accordion." + }, + "counter": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Summary or Counter." + } + } + }, + "featureHighlight": { + "bg": { + "primary": { + "feature-highlight": { + "value": "{gray.white}", + "type": "color", + "description": "Primary background for highlighted controls." + }, + "feature-highlight-hover-active": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Primary background for hover and active (selected) state of highlighted controls." + } + }, + "secondary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Secondary background for the highlighted message." + } + } + }, + "border": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.300}, {blue.300})", + "type": "color", + "description": "Primary border for highlighted controls." + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Primary border for the active state of highlighted controls." + }, + "feature-highlight-secondary": { + "value": "linear-gradient(90deg, {violet.200}, {blue.200})", + "type": "color", + "description": "Secondary border for highlighted controls." + } + }, + "control": { + "primary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Background of the highlighted primary control." + }, + "feature-highlight-hover": { + "value": "linear-gradient(90deg, {violet.500}, {blue.500})", + "type": "color", + "description": "Hover state of the highlighted primary control." + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.600}, {blue.600})", + "type": "color", + "description": "Active (selected) state of the highlighted primary control." + } + }, + "secondary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Background of the highlighted secondary control." + }, + "feature-highlight-hover": { + "value": "linear-gradient(90deg, {violet.100}, {blue.100})", + "type": "color", + "description": "Hover state of the highlighted secondary control.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.3", + "space": "hsl" + } + } + } + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.100}, {blue.100})", + "type": "color", + "description": "Active (selected) state of the highlighted secondary control." + } + } + }, + "text": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.500}, {blue.500})", + "type": "color", + "description": "Text for highlighted features." + }, + "feature-highlight-hover-active": { + "value": "linear-gradient(90deg, {violet.700}, {blue.700})", + "type": "color", + "description": "Text for hover and active states of highlighted features." + } + }, + "icon": { + "primary": { + "feature-highlight": { + "value": "{violet.500}", + "type": "color", + "description": "Primary highlighted icon." + }, + "feature-highlight-hover-active": { + "value": "#6B3AB4", + "type": "color", + "description": "Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color." + } + } + }, + "keyboard-focus-feature-highlight": { + "value": { + "width": "3px", + "color": "{keyboard-focus-feature-highlight.outline}" + }, + "type": "border", + "description": "Keyboard focus styles for highlighted controls.", + "outline": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Color for keyboard focus outline styles for highlighted controls." + } + } + } + } + \ No newline at end of file diff --git a/semcore/core/src/theme/dark.json b/semcore/core/src/theme/dark.json index 43b5bbab1d..68198c6656 100644 --- a/semcore/core/src/theme/dark.json +++ b/semcore/core/src/theme/dark.json @@ -634,7 +634,7 @@ "description": "Inverted version of the primary text." }, "secondary-invert": { - "value": "{gray.white}, 0.75", + "value": "rgba({gray.white}, 0.75)", "type": "color", "description": "Inverted version of the secondary text." }, @@ -2155,7 +2155,7 @@ "description": "Violet background color for the hover and active states of the primary tag." }, "yellow-normal": { - "value": "{yellow.100}, 0.5", + "value": "rgba({yellow.100}, 0.5)", "type": "color", "description": "Yellow background color for the primary tag." }, @@ -2165,12 +2165,12 @@ "description": "Yellow background color for the hover and active states of the primary tag." }, "white-normal": { - "value": "{gray.white}, 0.15", + "value": "rgba({gray.white}, 0.15)", "type": "color", "description": "Primary white tag." }, "white-hover-active": { - "value": "{gray.white}, 0.3", + "value": "rgba({gray.white}, 0.3)", "type": "color", "description": "Hover and active (selected) state of the primary white tag." }, diff --git a/semcore/core/src/theme/light-new-2ver.json b/semcore/core/src/theme/light-new-2ver.json new file mode 100644 index 0000000000..5e5cd6f3a7 --- /dev/null +++ b/semcore/core/src/theme/light-new-2ver.json @@ -0,0 +1,2731 @@ +{ + "base": { + "gray": { + "50": { + "value": "oklch(0.958 0.002 247.84)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.904 0.004 277.6)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.864 0.004 271.363)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.01 277.6)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.013 277.6)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.017 277.6)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.013 277.6)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.009 277.6)", + "type": "color" + }, + "800": { + "value": "oklch(0.226 0.019 135.279)", + "type": "color" + }, + "white": { + "value": "oklch(1 0 0)", + "type": "color" + } + }, + "blue": { + "50": { + "value": "oklch(0.966 0.016 263.265)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.904 0.045 263.265)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.861 0.068 266.551)", + "type": "color" + }, + "300": { + "value": "oklch(0.741 0.12 263.227)", + "type": "color" + }, + "400": { + "value": "oklch(0.703 0.154 265.122)", + "type": "color" + }, + "500": { + "value": "oklch(0.575 0.232 263.373)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.164 263.265)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.116 263.265)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.088 263.265)", + "type": "color" + } + }, + "green": { + "50": { + "value": "oklch(0.966 0.038 170.688)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.922 0.088 177.924)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.851 0.165 170.672)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.143 170.688)", + "type": "color" + }, + "400": { + "value": "oklch(0.658 0.126 171.444)", + "type": "color" + }, + "500": { + "value": "oklch(0.541 0.104 170.438)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.079 170.688)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.056 170.688)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.043 170.688)", + "type": "color" + } + }, + "red": { + "50": { + "value": "oklch(0.966 0.022 27.658)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.859 0.076 18.76)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.824 0.119 27.658)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.158 27.477)", + "type": "color" + }, + "400": { + "value": "oklch(0.681 0.207 24.507)", + "type": "color" + }, + "500": { + "value": "oklch(0.598 0.226 27.581)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.154 27.658)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.109 27.658)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.083 27.658)", + "type": "color" + } + }, + "orange": { + "50": { + "value": "oklch(0.966 0.021 39.457)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.904 0.049 39.457)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.824 0.09 39.457)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.134 39.457)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.172 39.457)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.141 39.457)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.107 39.457)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.075 39.457)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.057 39.457)", + "type": "color" + } + }, + "yellow": { + "50": { + "value": "oklch(0.966 0.039 80.292)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.917 0.091 85.811)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.863 0.145 83.727)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.145 80.292)", + "type": "color" + }, + "400": { + "value": "oklch(0.734 0.152 66.496)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.106 80.292)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.08 80.292)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.057 80.292)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.043 80.292)", + "type": "color" + } + }, + "violet": { + "50": { + "value": "oklch(0.966 0.02 295.962)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.869 0.081 305.081)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.824 0.106 295.962)", + "type": "color" + }, + "300": { + "value": "oklch(0.744 0.162 303.047)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.204 295.962)", + "type": "color" + }, + "500": { + "value": "oklch(0.52 0.258 295.842)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.205 295.962)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.145 295.962)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.11 295.962)", + "type": "color" + }, + "dusty": { + "50": { + "value": "oklch(0.966 0.004 189.338)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.935 0.019 184.9)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.824 0.02 189.338)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.03 189.338)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.034 189.338)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.028 189.338)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.021 189.338)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.015 189.338)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.011 189.338)", + "type": "color" + } + } + }, + "pink": { + "50": { + "value": "#fff0ff", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#ffd3ff", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#ffa9fa", + "type": "color" + }, + "300": { + "value": "#ff87eb", + "type": "color" + }, + "400": { + "value": "#e14adf", + "type": "color" + }, + "500": { + "value": "#b229b9", + "type": "color" + }, + "600": { + "value": "#7d0480", + "type": "color" + }, + "700": { + "value": "#4d0050", + "type": "color" + }, + "800": { + "value": "#340439", + "type": "color" + } + }, + "salad": { + "50": { + "value": "oklch(0.966 0.023 147.483)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.943 0.109 140.962)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.901 0.207 140.846)", + "type": "color" + }, + "300": { + "value": "oklch(0.719 0.178 147.099)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.152 147.483)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.124 147.483)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.094 147.483)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.067 147.483)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.051 147.483)", + "type": "color" + } + } + }, + "tokens": { + "bg": { + "primary": { + "neutral": { + "value": "{gray.white}", + "type": "color", + "description": "Primary background of the interface which contains the main data and information." + }, + "neutral-hover": { + "value": "rgba({gray.50}, 0.6)", + "type": "color", + "description": "Hover state of the primary background of the interface which contains the main data and information." + }, + "neutral-active": { + "value": "rgba({gray.100}, 0.8)", + "type": "color", + "description": "Active (selected) state of the primary background of the interface which contains the main data and information." + }, + "info": { + "value": "{blue.500}", + "type": "color", + "description": "Accent background of the message with regular information." + }, + "success": { + "value": "{green.200}", + "type": "color", + "description": "Accent background of the message or banner with information about the successful result." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Accent background of a message or a banner with a critical information." + }, + "warning": { + "value": "{orange.300}", + "type": "color", + "description": "Accent background of a message or a banner with a warning information." + }, + "highlight": { + "value": "{violet.100}", + "type": "color", + "description": "Accent background of the information you want to highlight." + }, + "advertising": { + "value": "{gray.800}", + "type": "color", + "description": "Accent background for the advertising banners and controls." + }, + "muted": { + "value": "{gray.500}", + "type": "color", + "description": "Accented muted background for a message with regular information." + }, + "invert": { + "value": "{gray.800}", + "type": "color", + "description": "Inverted version of the primary background of the interface that contains the main data and information." + }, + "invert-hover": { + "value": "{gray.700}", + "type": "color", + "description": "Hover state for the inverted version of the primary background of the interface that contains the main data and information." + }, + "invert-active": { + "value": "{gray.600}", + "type": "color", + "description": "Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information." + } + }, + "secondary": { + "neutral": { + "value": "rgba({gray.50}, 0.6)", + "type": "color", + "description": "Secondary background of the interface which contains the main data and information." + }, + "neutral-hover": { + "value": "rgba({gray.100}, 0.8)", + "type": "color", + "description": "Hover state of the secondary background of the interface which contains the main data and information." + }, + "neutral-active": { + "value": "{gray.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the interface which contains the main data and information." + }, + "info": { + "value": "rgba({blue.500}, 0.1)", + "type": "color", + "description": "Secondary background of a message with regular information." + }, + "info-hover": { + "value": "rgba({blue.500}, 0.2)", + "type": "color", + "description": "Hover state of the secondary background of a message with regular information." + }, + "info-active": { + "value": "rgba({blue.500}, 0.3)", + "type": "color", + "description": "Active (selected) state of the secondary background of a message with regular information." + }, + "success": { + "value": "rgba({green.200}, 0.2)", + "type": "color", + "description": "Secondary background of the message with success information you want to accent." + }, + "success-hover": { + "value": "rgba({green.200}, 0.4)", + "type": "color", + "description": "Hover state of the secondary background of the message with success information you want to accent." + }, + "success-active": { + "value": "rgba({green.200}, 0.6)", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with success information you want to accent." + }, + "critical": { + "value": "rgba({red.400}, 0.2)", + "type": "color", + "description": "Secondary background of the message with critical information you want to accent." + }, + "critical-hover": { + "value": "rgba({red.400}, 0.4)", + "type": "color", + "description": "Hover state of the secondary background of the message with critical information you want to accent." + }, + "critical-active": { + "value": "rgba({red.400}, 0.6)", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with critical information you want to accent." + }, + "warning": { + "value": "{orange.50}", + "type": "color", + "description": "Secondary background of the message with warning information you want to accent." + }, + "warning-hover": { + "value": "rgba({orange.100}, 0.6)", + "type": "color", + "description": "Hover state of the secondary background of the message with warning information you want to accent." + }, + "warning-active": { + "value": "{orange.100}", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with critical information you want to accent." + }, + "highlight": { + "value": "{violet.50}", + "type": "color", + "description": "Secondary background of the information you want to highlight." + }, + "highlight-hover": { + "value": "rgba({violet.100}, 0.6)", + "type": "color", + "description": "Hover state of the secondary background of the information you want to highlight." + }, + "highlight-active": { + "value": "{violet.100}", + "type": "color", + "description": "Active (selected) state of the secondary background of the information you want to highlight." + }, + "advertising": { + "value": "{green.100}", + "type": "color", + "description": "Secondary background for the advertising message you want to accent." + }, + "advertising-hover": { + "value": "rgba({green.200}, 0.6)", + "type": "color", + "description": "Hover state of the secondary background for the advertising message you want to accent." + }, + "advertising-active": { + "value": "{green.200}", + "type": "color", + "description": "Active (selected) state of the secondary background for the advertising message you want to accent." + } + }, + "highlight-results": { + "value": "rgba({violet.100}, 0.4)", + "type": "color", + "description": "Highlighting the search results." + }, + "highlight-focus": { + "value": "rgba({blue.400}, 0.2)", + "type": "color", + "description": "Focusing values in the input." + } + }, + "text": { + "primary": { + "value": "{gray.800}", + "type": "color", + "description": "Primary text." + }, + "secondary": { + "value": "{gray.500}", + "type": "color", + "description": "Secondary text." + }, + "placeholder": { + "value": "{gray.400}", + "type": "color", + "description": "Placeholder text only." + }, + "success": { + "value": "{green.400}", + "type": "color", + "description": "Text associated with success states and data." + }, + "success-hover-active": { + "value": "{green.500}", + "type": "color", + "description": "Hover and active states for the text associated with success states and data." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Text associated with critical states and data." + }, + "critical-hover-active": { + "value": "{red.500}", + "type": "color", + "description": "Hover and active states for the text associated with critical states and data." + }, + "primary-invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the primary text." + }, + "secondary-invert": { + "value": "rgba({gray.white}, 0.8)", + "type": "color", + "description": "Inverted version of the secondary text." + }, + "link": { + "value": "{blue.500}", + "type": "color", + "description": "Link text." + }, + "link-hover-active": { + "value": "{blue.600}", + "type": "color", + "description": "Hover and active states for the link text." + }, + "link-invert": { + "value": "{blue.100}", + "type": "color", + "description": "Inverted version of the link text. Use on dark background only." + }, + "link-invert-hover": { + "value": "{blue.200}", + "type": "color", + "description": "Hover and active states of the inverted version of the link text. Use on dark background only." + }, + "link-visited": { + "value": "{violet.400}", + "type": "color", + "description": "Visited link text." + }, + "hint": { + "value": "{gray.500}", + "type": "color", + "description": "Hint link text." + }, + "hint-hover-active": { + "value": "{gray.600}", + "type": "color", + "description": "Hover and active states of the hint link text." + }, + "hint-invert": { + "value": "{gray.100}", + "type": "color", + "description": "Inverted version of the hint link text." + }, + "hint-invert-hover-active": { + "value": "{gray.200}", + "type": "color", + "description": "Hover and active states of the inverted version of the hint link text." + }, + "large-secondary": { + "value": "{gray.300}", + "type": "color", + "description": "Secondary text. Use with font-size ≥20px." + }, + "large-info": { + "value": "{blue.500}", + "type": "color", + "description": "Link text with font-size ≥20px." + }, + "large-info-hover-active": { + "value": "{blue.600}", + "type": "color", + "description": "Hover and active states of the link text with font-size ≥20px." + }, + "large-success": { + "value": "{green.300}", + "type": "color", + "description": "Text with font-size ≥20px associated with success states and data." + }, + "large-success-hover-active": { + "value": "{green.400}", + "type": "color", + "description": "Hover and active states of the text with font-size ≥20px associated with success states and data." + }, + "large-critical": { + "value": "{red.400}", + "type": "color", + "description": "Text with font-size ≥20px associated with critical states and data." + }, + "large-critical-hover-active": { + "value": "{red.500}", + "type": "color", + "description": "Hover and active states of the text with font-size ≥20px associated with critical states and data." + }, + "advertising": { + "value": "{violet.500}", + "type": "color", + "description": "Advertising text." + } + }, + "border": { + "primary": { + "value": "rgba({gray.100}, 0.9)", + "type": "color", + "description": "Neutral primary border." + }, + "secondary": { + "value": "rgba({gray.100}, 0.7)", + "type": "color", + "description": "Subtle secondary border." + }, + "info": { + "value": "{blue.200}", + "type": "color", + "description": "Subtle secondary border in the informational message." + }, + "info-active": { + "value": "rgba({blue.500}, 0.5)", + "type": "color", + "description": "Active border in focused input filed." + }, + "success": { + "value": "{green.300}", + "type": "color", + "description": "Subtle secondary border in the successful message and input field." + }, + "success-active": { + "value": "{green.400}", + "type": "color", + "description": "Active border in the focused input field with valid state." + }, + "critical": { + "value": "{red.300}", + "type": "color", + "description": "Subtle secondary border in the critical message and invalid input field." + }, + "critical-active": { + "value": "{red.400}", + "type": "color", + "description": "Active border in the focused input field with invalid state, and active state of the other components with invalid state." + }, + "warning": { + "value": "{orange.200}", + "type": "color", + "description": "Subtle secondary border in the warning message." + }, + "warning-active": { + "value": "{orange.300}", + "type": "color", + "description": "Active border in components with warning intention." + }, + "primary-invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the neutral primary border. Use it for borders on the dark or color background." + }, + "secondary-invert": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background." + }, + "tooltip-invert": { + "value": "{gray.500}", + "type": "color", + "description": "Border of the Tooltip with dark theme." + }, + "table-accent": { + "value": "{border.primary}", + "type": "color", + "description": "Accent borders in the Table: for the accordion in the table and for the header of the secondary table." + }, + "date-picker-range-comparison": { + "value": "{violet.400}", + "type": "color", + "description": "Border color of the second period for the comparison mode in the DatePicker." + }, + "critical-pattern": { + "value": "repeating-linear-gradient(315deg, rgba({ border.critical-active}, 1) 0, rgba({border.critical-active}, 1) 2px, transparent 0, transparent 50%)", + "type": "color", + "description": "Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states." + } + }, + "control": { + "switch-bg": { + "value": "{gray.200}", + "type": "color", + "description": "Subtle background of the Switch control." + }, + "primary": { + "info": { + "value": "{gray.800}", + "type": "color", + "description": "Background of the regular primary control." + }, + "info-hover": { + "value": "{violet.300}", + "type": "color", + "description": "Hover state of the regular primary control." + }, + "info-active": { + "value": "{violet.400}", + "type": "color", + "description": "Active (selected) state of the regular primary control." + }, + "success": { + "value": "{green.300}", + "type": "color", + "description": "Background of the primary control with successful theme." + }, + "success-hover": { + "value": "{green.400}", + "type": "color", + "description": "Hover state of the primary control with successful theme." + }, + "success-active": { + "value": "{green.500}", + "type": "color", + "description": "Active (selected) state of the primary control with successful theme." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Background of the primary control with danger theme." + }, + "critical-hover": { + "value": "{red.500}", + "type": "color", + "description": "Hover state of the primary control with danger theme." + }, + "critical-active": { + "value": "{red.600}", + "type": "color", + "description": "Active (selected) state of the primary control with danger theme." + }, + "brand": { + "value": "{violet.300}", + "type": "color", + "description": "Background of the primary brand colored control." + }, + "brand-hover": { + "value": "{violet.400}", + "type": "color", + "description": "Hover state of the primary brand colored control." + }, + "brand-active": { + "value": "{violet.500}", + "type": "color", + "description": "Active state of the primary brand colored control." + }, + "advertising": { + "value": "{violet.300}", + "type": "color", + "description": "Background of the advertising primary control." + }, + "advertising-hover": { + "value": "{gray.800}", + "type": "color", + "description": "Hover state of the advertising primary control." + }, + "advertising-active": { + "value": "{gray.800}", + "type": "color", + "description": "Active (selected) state of the advertising primary control." + }, + "invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted background of the primary control." + }, + "invert-hover": { + "value": "{gray.50}", + "type": "color", + "description": "Hover state of the inverted primary control." + }, + "invert-active": { + "value": "{gray.100}", + "type": "color", + "description": "Active (selected) state of the inverted primary control." + } + }, + "secondary": { + "neutral": { + "value": "rgba({violet.dusty.400}, 0.1)", + "type": "color", + "description": "Background of the regular secondary control." + }, + "neutral-hover": { + "value": "rgba({violet.dusty.400}, 0.2)", + "type": "color", + "description": "Hover state of the regular secondary control." + }, + "neutral-active": { + "value": "rgba({violet.dusty.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the regular secondary control." + }, + "info": { + "value": "rgba({blue.500}, 0.05)", + "type": "color", + "description": "Background of the accent secondary control." + }, + "info-hover": { + "value": "rgba({blue.500}, 0.2)", + "type": "color", + "description": "Hover state of the accent secondary control." + }, + "info-active": { + "value": "rgba({blue.500}, 0.3)", + "type": "color", + "description": "Active (selected) state of the accent secondary control." + }, + "invert": { + "value": "rgba({gray.white}, 0.05)", + "type": "color", + "description": "Background of the inverted version of the secondary control." + }, + "invert-hover": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Hover state of the inverted version of the secondary control." + }, + "invert-active": { + "value": "rgba({gray.white}, 0.2)", + "type": "color", + "description": "Active (selected) state of the inverted version of the secondary control." + } + }, + "tertiary": { + "neutral": { + "value": "rgba({violet.dusty.400}, 0)", + "type": "color", + "description": "Background of the regular tertiary control." + }, + "neutral-hover": { + "value": "rgba({violet.dusty.400}, 0.1)", + "type": "color", + "description": "Hover state of the regular tertiary control." + }, + "neutral-active": { + "value": "rgba({violet.dusty.400}, 0.2)", + "type": "color", + "description": "Active (selected) state of the regular tertiary control." + }, + "info": { + "value": "rgba({blue.400}, 0)", + "type": "color", + "description": "Background of the accent and link-lookalike tertiary control." + }, + "info-hover": { + "value": "rgba({blue.400}, 0.2)", + "type": "color", + "description": "Hover state of the accent and link-lookalike tertiary control." + }, + "info-active": { + "value": "rgba({blue.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the accent and link-lookalike tertiary control." + }, + "invert": { + "value": "rgba({gray.white}, 0)", + "type": "color", + "description": "Background of the inverted version of the tertiary control." + }, + "invert-hover": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Hover state of the inverted version of the tertiary control." + }, + "invert-active": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Active (selected) state of the inverted version of the tertiary control." + } + } + }, + "icon": { + "primary": { + "neutral": { + "value": "{gray.400}", + "type": "color", + "description": "Primary neutral icon." + }, + "neutral-hover-active": { + "value": "{gray.500}", + "type": "color", + "description": "Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color." + }, + "info": { + "value": "{blue.400}", + "type": "color", + "description": "Primary link-lookalike icon." + }, + "info-hover-active": { + "value": "{blue.500}", + "type": "color", + "description": "Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color." + }, + "success": { + "value": "{green.400}", + "type": "color", + "description": "Primary success icon." + }, + "success-hover-active": { + "value": "{green.500}", + "type": "color", + "description": "Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Primary critical icon." + }, + "critical-hover-active": { + "value": "{red.500}", + "type": "color", + "description": "Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color." + }, + "warning": { + "value": "{orange.400}", + "type": "color", + "description": "Primary warning icon." + }, + "warning-hover-active": { + "value": "{orange.500}", + "type": "color", + "description": "Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color." + }, + "invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the primary icon." + }, + "invert-hover-active": { + "value": "{gray.100}", + "type": "color", + "description": "Hover and active (selected) states of the inverted version of the primary icon." + } + }, + "secondary": { + "neutral": { + "value": "{gray.300}", + "type": "color", + "description": "Secondary neutral icon." + }, + "neutral-hover-active": { + "value": "{gray.400}", + "type": "color", + "description": "Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color." + }, + "info": { + "value": "{blue.300}", + "type": "color", + "description": "Secondary link-lookalike icon." + }, + "info-hover-active": { + "value": "{blue.400}", + "type": "color", + "description": "Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color." + }, + "success": { + "value": "{green.300}", + "type": "color", + "description": "Secondary success icon." + }, + "success-hover-active": { + "value": "{green.400}", + "type": "color", + "description": "Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color." + }, + "critical": { + "value": "{red.300}", + "type": "color", + "description": "Secondary critical icon." + }, + "critical-hover-active": { + "value": "{red.400}", + "type": "color", + "description": "Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color." + }, + "warning": { + "value": "{orange.300}", + "type": "color", + "description": "Secondary warning icon." + }, + "warning-hover-active": { + "value": "{orange.400}", + "type": "color", + "description": "Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color." + } + }, + "non-interactive": { + "value": "{gray.800}", + "type": "color", + "description": "Color for the default non-interactive icon." + } + }, + "illustration": { + "red": { + "value": "{red.400}", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "orange": { + "value": "{orange.300}", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "yellow": { + "value": "{yellow.200}", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "salad": { + "value": "{salad.200}", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "green": { + "value": "{green.200}", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "blue": { + "value": "{blue.400}", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "violet": { + "value": "{violet.300}", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "pink": { + "value": "{pink.400}", + "type": "color", + "description": "⚠️ Use only for illustrations." + } + }, + "date-picker": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Default date-picker cell background." + }, + "cell-current": { + "value": "{gray.800}", + "type": "color", + "description": "Color for marking the cell with the current date, month or year in the date-picker." + }, + "cell-hover": { + "value": "rgba({violet.dusty.400}, 0.1)", + "type": "color", + "description": "Hover state of the default date-picker cell background." + }, + "cell-range": { + "value": "rgba({blue.500}, 0.2)", + "type": "color", + "description": "Background for the cell which is included in the date range in the date-picker." + }, + "cell-range-hover": { + "value": "rgba({blue.500}, 0.3)", + "type": "color", + "description": "Hover state of the background for the cell which is included in the date range in the date-picker." + }, + "cell-active": { + "value": "{blue.500}", + "type": "color", + "description": "Active (selected) date-picker cell background." + }, + "cell-active-hover": { + "value": "{blue.600}", + "type": "color", + "description": "Hover for the active (selected) date-picker cell background." + }, + "cell-current-invert": { + "value": "rgba({gray.white}, 0.5)", + "type": "color", + "description": "Color for marking the active cell with the current date, month or year in the date-picker." + }, + "cell-comparison-active": { + "value": "{violet.400}", + "type": "color", + "description": "Active (selected) date-picker cell background for comparison periods." + }, + "cell-comparison-active-hover": { + "value": "{violet.500}", + "type": "color", + "description": "Hover for the active (selected) date-picker cell background for comparison periods." + } + }, + "dropdown-menu": { + "item": { + "value": "{gray.white}", + "type": "color", + "description": "Default background color for the list item in the dropdown-menu." + }, + "item-hover": { + "value": "rgba({violet.dusty.400}, 0.1)", + "type": "color", + "description": "Hover state of the default background color for the list item in the dropdown-menu." + }, + "item-selected": { + "value": "rgba({violet.dusty.400}, 0.2)", + "type": "color", + "description": "Active (selected) state of the default background color for the list item in the dropdown-menu." + }, + "item-selected-hover": { + "value": "rgba({violet.dusty.400}, 0.2)", + "type": "color", + "description": "Hover state for the selected state of the default background color for the list item in the dropdown-menu." + } + }, + "feature-popover": { + "bg": { + "value": "{bg.primary.highlight}", + "type": "color", + "description": "Color of the FeaturePopover background with accent theme." + }, + "dot-outer-border": { + "value": "{feature-popover.bg}", + "type": "color", + "description": "Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme." + }, + "bg-neutral": { + "value": "{gray.800}", + "type": "color", + "description": "Color of the FeaturePopover background with neutral theme." + }, + "dot-neutral": { + "value": "{violet.300}", + "type": "color", + "description": "Color of the FeaturePopover.Spot for FeaturePopover with neutral theme." + }, + "dot-neutral-outer-border": { + "value": "{feature-popover.dot-neutral}", + "type": "color", + "description": "Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme." + } + }, + "progress-bar": { + "bg": { + "value": "{gray.100}", + "type": "color", + "description": "Background color of the ProgressBar." + }, + "bg-hover": { + "value": "{gray.200}", + "type": "color", + "description": "Hover state of the background color of the ProgressBar." + }, + "bg-invert": { + "value": "rgba({gray.white}, 0.2)", + "type": "color", + "description": "Inverted version of the background color of the ProgressBar." + }, + "bg-invert-hover": { + "value": "rgba({gray.white}, 0.4)", + "type": "color", + "description": "Hover state for the inverted version of the background color of the ProgressBar." + }, + "value": { + "value": "{violet.300}", + "type": "color", + "description": "Value color of the ProgressBar." + }, + "value-gradient": { + "value": "linear-gradient(-45deg, rgba({violet.300}, 0.9) 25%, rgba({violet.300}, 1) 0%, rgba({violet.300}, 1) 50%, rgba({violet.300}, 0.9) 0%, rgba({violet.300}, 0.9) 75%, rgba({violet.300}, 1) 0%)", + "type": "color", + "description": "Value with gradient for the ProgressBar." + }, + "pattern-gradient": { + "value": "linear-gradient(-45deg, rgba({gray.100}, 0.9) 25%, rgba({gray.100}, 1) 0%, rgba({gray.100}, 1) 50%, rgba({gray.100}, 0.9) 0%, rgba({gray.100}, 0.9) 75%, rgba({gray.100}, 1) 0%)", + "type": "color", + "description": "Null value gradient for the ProgressBar." + }, + "value-bg": { + "value": "#000000", + "type": "color", + "description": "Base value background for the ProgressBar. It is used to create gradients for the values." + } + }, + "skeleton": { + "bg": { + "value": "rgba({gray.100}, 0.8)", + "type": "color", + "description": "Default color for the Skeleton." + }, + "bg-invert": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Inverted version of the default color for the Skeleton." + } + }, + "slider-rating": { + "normal": { + "value": "{icon.secondary.neutral}", + "type": "color", + "description": "Icon color for the SliderRating component in its normal state." + }, + "hover-active": { + "value": "{violet.300}", + "type": "color", + "description": "Icon color for the SliderRating component in its hovered and active states." + } + }, + "table": { + "th": { + "primary": { + "cell": { + "value": "rgba({gray.100}, 0.2)", + "type": "color", + "description": "Background of the header cell in the primary Table." + }, + "cell-hover": { + "value": "{gray.50}", + "type": "color", + "description": "Background of the hovered header cell in the primary Table." + }, + "cell-active": { + "value": "{gray.50}", + "type": "color", + "description": "Background of the active header cell in the primary Table." + } + }, + "secondary": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Background of the header cell in the secondary Table." + } + }, + "gradient": { + "value": "linear-gradient(to right, rgba({gray.50}, 0) 0%, rgba({gray.50}, 1) 100%)", + "type": "color", + "description": "Background gradient for sorting icon that absolute positioned in the table head." + } + }, + "td": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Background of the default cell in the Table." + }, + "cell-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the default hovered cell in the Table.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.8", + "space": "hsl" + } + } + } + }, + "cell-active": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the default active cell in the Table.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.5", + "space": "hsl" + } + } + } + }, + "cell-unread": { + "value": "rgba({gray.100}, 0.2)", + "type": "color", + "description": "Background of the unread cell in the Table." + }, + "cell-accordion": { + "value": "rgba({gray.100}, 0.2)", + "type": "color", + "description": "Background of the cell inside an Accordion in the Table." + }, + "cell-selected": { + "value": "rgba({blue.500}, 0.1)", + "type": "color", + "description": "Background of the selected cell in the Table." + }, + "cell-selected-hover": { + "value": "rgba({blue.500}, 0.2)", + "type": "color", + "description": "Background of the hovered selected cell in the Table." + }, + "cell-selected-active": { + "value": "rgba({blue.500}, 0.3)", + "type": "color", + "description": "Background of the active selected cell in the Table." + }, + "cell-new": { + "value": "rgba({green.200}, 0.1)", + "type": "color", + "description": "Background of the cell with new information in the Table." + }, + "cell-new-hover": { + "value": "rgba({green.200}, 0.2)", + "type": "color", + "description": "Background of the hovered cell with new information in the Table." + }, + "cell-new-active": { + "value": "rgba({green.200}, 0.3)", + "type": "color", + "description": "Background of the active cell with new information in the Table." + }, + "cell-critical": { + "value": "rgba({red.500}, 0.1)", + "type": "color", + "description": "Background of the cell with critical information in the Table." + }, + "cell-critical-hover": { + "value": "rgba({red.500}, 0.2)", + "type": "color", + "description": "Background of the hovered cell with critical information in the Table." + }, + "cell-critical-active": { + "value": "rgba({red.500}, 0.3)", + "type": "color", + "description": "Background of the active cell with critical information in the Table." + }, + "cell-warning": { + "value": "rgba({orange.300}, 0.1)", + "type": "color", + "description": "Background of the cell with warning information in the Table." + }, + "cell-warning-hover": { + "value": "rgba({orange.300}, 0.2)", + "type": "color", + "description": "Background of the hovered cell with warning information in the Table." + }, + "cell-warning-active": { + "value": "rgba({orange.300}, 0.3)", + "type": "color", + "description": "Background of the active cell with warning information in the Table." + } + } + }, + "brand": { + "primary": { + "value": "{violet.300}", + "type": "color", + "description": "Primary brand color." + }, + "secondary": { + "value": "{green.200}", + "type": "color", + "description": "Secondary brand color." + }, + "pinterest": { + "value": "#bd081c", + "type": "color", + "description": "Pinterest brand color." + }, + "instagram": { + "value": "#e4405f", + "type": "color", + "description": "Instagram brand color." + }, + "youtube": { + "value": "#ff0000", + "type": "color", + "description": "Youtube brand color." + }, + "facebook": { + "value": "#1877f2", + "type": "color", + "description": "Facebook brand color." + }, + "linkedIn": { + "value": "#0a66c2", + "type": "color", + "description": "LinkedIn brand color." + }, + "twitter": { + "value": "#1d9bf0", + "type": "color", + "description": "Twitter brand color." + }, + "google-blue": { + "value": "#1a0dab", + "type": "color", + "description": "Google brand color for the link." + }, + "google-green": { + "value": "#016723", + "type": "color", + "description": "Google green brand color for the link." + }, + "google-my-business": { + "value": "#1a73e8", + "type": "color", + "description": "Google My Business brand color." + } + }, + "box-shadow": { + "card": { + "value": "0 0 0 1px rgba({border.primary}, 0.5)", + "type": "boxShadow", + "description": "Default shadow of the Card." + }, + "card-hover": { + "value": "3px 3px 30px 0px rgba({gray.800}, 0.15)", + "type": "boxShadow", + "description": "Hover state for the shadow of the Card with hover state." + }, + "dnd": { + "value": "0px 0px 1px 0px rgba({gray.800}, 0.16); 0px 12px 40px 0px rgba({gray.800}, 0.16)", + "type": "boxShadow", + "description": "Shadow for show that element are being drag-and-drop." + }, + "modal": { + "value": "0px 3px 8px 0px rgba({gray.800}, 0.2)", + "type": "boxShadow", + "description": "Default shadow if the Modal window." + }, + "popper": { + "value": "0px 1px 12px 0px rgba({gray.800}, 0.15)", + "type": "boxShadow", + "description": "Default shadow of all Poppers, Dropdowns and Tooltips." + }, + "float-control": { + "value": [ + { + "x": "0", + "y": "0", + "blur": "1", + "spread": "0", + "color": "rgba(0,0,0,0.16)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "1", + "blur": "2", + "spread": "0", + "color": "rgba(0,0,0,0.12)", + "type": "dropShadow" + } + ], + "type": "boxShadow", + "description": "Use it only for controls that float above the whole interface." + }, + "float-control-hover": { + "value": [ + { + "x": "0", + "y": "0", + "blur": "2", + "spread": "0", + "color": "rgba(0,0,0,0.2)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "1", + "blur": "4", + "spread": "0", + "color": "rgba(0,0,0,0.16)", + "type": "dropShadow" + } + ], + "type": "boxShadow", + "description": "Use it only for controls that float above the whole interface." + } + }, + "keyboard-focus": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.outline}, 0.5)", + "type": "boxShadow", + "description": "Default keyboard focus box-shadow styles.", + "outline": { + "value": "{blue.500}", + "type": "color", + "description": "Color for default keyboard focus outline styles." + }, + "invalid": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.invalid.outline}, 0.5)", + "type": "boxShadow", + "description": "Keyboard focus styles for elements with invalid state.", + "outline": { + "value": "{red.400}", + "type": "color", + "description": "Color for keyboard focus outline styles for elements with invalid state." + } + }, + "valid": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.valid.outline}, 0.5)", + "type": "boxShadow", + "description": "Keyboard focus styles for elements with valid state.", + "outline": { + "value": "{green.400}", + "type": "color", + "description": "Color for keyboard focus outline styles for elements with valid state." + } + }, + "invert": { + "value": "0px 0px 0px 3px {keyboard-focus.invert.outline}", + "type": "boxShadow", + "description": "Keyboard focus styles for use on dark backgrounds.", + "outline": { + "value": "rgba({gray.white}, 0.8)", + "type": "color", + "description": "Color for keyboard focus outline styles to use on the dark and color background." + } + } + }, + "base": { + "value": "Inter", + "type": "fontFamilies", + "description": "Base font family." + }, + "lh-800": { + "value": "117%", + "type": "lineHeights", + "description": "Use with font-size-800." + }, + "lh-700": { + "value": "110%", + "type": "lineHeights", + "description": "Use with font-size-700." + }, + "lh-600": { + "value": "125%", + "type": "lineHeights", + "description": "Use with font-size-600." + }, + "lh-500": { + "value": "117%", + "type": "lineHeights", + "description": "Use with font-size-500." + }, + "lh-400": { + "value": "120%", + "type": "lineHeights", + "description": "Use with font-size-400." + }, + "lh-300": { + "value": "150%", + "type": "lineHeights", + "description": "Use with font-size-300." + }, + "lh-200": { + "value": "142%", + "type": "lineHeights", + "description": "Use with font-size-200." + }, + "lh-100": { + "value": "133%", + "type": "lineHeights", + "description": "Use with font-size-100." + }, + "semi-bold": { + "value": "600", + "type": "fontWeights", + "description": "Semi-bold font weight." + }, + "bold": { + "value": "700", + "type": "fontWeights", + "description": "Bold font weight." + }, + "regular": { + "value": "400", + "type": "fontWeights", + "description": "Regular font weight." + }, + "medium": { + "value": "500", + "type": "fontWeights", + "description": "Medium font weight." + }, + "fs-50": { + "value": "10px", + "type": "fontSizes", + "description": "Use only for text in Badge component." + }, + "fs-100": { + "value": "12px", + "type": "fontSizes", + "description": "Use this font-size with caution for text in some additional messages. Always check its contrast and readability." + }, + "fs-200": { + "value": "14px", + "type": "fontSizes" + }, + "fs-300": { + "value": "16px", + "type": "fontSizes" + }, + "fs-400": { + "value": "20px", + "type": "fontSizes" + }, + "fs-500": { + "value": "24px", + "type": "fontSizes" + }, + "fs-600": { + "value": "32px", + "type": "fontSizes" + }, + "fs-700": { + "value": "36px", + "type": "fontSizes" + }, + "fs-800": { + "value": "48px", + "type": "fontSizes" + }, + "compact": { + "value": "0.3", + "type": "letterSpacing", + "description": "Compact letter spacing." + }, + "heading-h1": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-800}", + "fontSize": "{fs-800}" + }, + "type": "typography" + }, + "heading-h2": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-700}", + "fontSize": "{fs-700}" + }, + "type": "typography", + "description": "Landing headings" + }, + "heading-h3": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-600}", + "fontSize": "{fs-600}" + }, + "type": "typography", + "description": "Tool page main heading" + }, + "heading-h4": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-500}", + "fontSize": "{fs-500}" + }, + "type": "typography", + "description": "Tool page heading" + }, + "heading-h5": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-400}", + "fontSize": "{fs-400}" + }, + "type": "typography", + "description": "Widget heading" + }, + "heading-h6": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "lineHeight": "{lh-300}", + "fontSize": "{fs-300}" + }, + "type": "typography", + "description": "Widget, notice & dropdown heading" + }, + "subtitle": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{regular}", + "lineHeight": "{lh-400}", + "fontSize": "{fs-400}" + }, + "type": "typography", + "description": "Use for big subtitles on the landing pages." + }, + "scale-indent": { + "value": "4px", + "type": "spacing", + "description": "Base denominator of the design system." + }, + "form-control-s": { + "value": "{scale-indent}*5", + "type": "sizing", + "description": "Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions." + }, + "form-control-m": { + "value": "{scale-indent}*7", + "type": "sizing", + "description": "Default size of the controls." + }, + "form-control-l": { + "value": "{scale-indent}*10", + "type": "sizing", + "description": "Large size of the controls." + }, + "spacing-05x": { + "value": "{scale-indent}*0.5", + "type": "spacing", + "description": "2px" + }, + "spacing-1x": { + "value": "{scale-indent}*1", + "type": "spacing", + "description": "4px" + }, + "spacing-2x": { + "value": "{scale-indent}*2", + "type": "spacing", + "description": "8px" + }, + "spacing-3x": { + "value": "{scale-indent}*3", + "type": "spacing", + "description": "12px" + }, + "spacing-4x": { + "value": "{scale-indent}*4", + "type": "spacing", + "description": "16px" + }, + "spacing-5x": { + "value": "{scale-indent}*5", + "type": "spacing", + "description": "20px" + }, + "spacing-6x": { + "value": "{scale-indent}*6", + "type": "spacing", + "description": "24px" + }, + "spacing-8x": { + "value": "{scale-indent}*8", + "type": "spacing", + "description": "32px" + }, + "spacing-10x": { + "value": "{scale-indent}*10", + "type": "spacing", + "description": "40px" + }, + "spacing-14x": { + "value": "{scale-indent}*14", + "type": "spacing", + "description": "56px" + }, + "spacing-20x": { + "value": "{scale-indent}*20", + "type": "spacing", + "description": "80px" + }, + "spacing-24x": { + "value": "{scale-indent}*24", + "type": "spacing", + "description": "96px" + }, + "spacing-30x": { + "value": "{scale-indent}*30", + "type": "spacing", + "description": "120px" + }, + "rounded-extra-small": { + "value": "1px", + "type": "borderRadius" + }, + "rounded-small": { + "value": "2px", + "type": "borderRadius" + }, + "rounded-medium": { + "value": "2px", + "type": "borderRadius" + }, + "rounded-large": { + "value": "8px", + "type": "borderRadius" + }, + "rounded-extra-large": { + "value": "12px", + "type": "borderRadius" + }, + "addon-rounded": { + "value": "{rounded-small}", + "type": "borderRadius", + "description": "Use for rounding addons and small controls like Checkbox." + }, + "badge-rounded": { + "value": "{rounded-small}", + "type": "borderRadius", + "description": "Use for rounding Badge." + }, + "chart-rounded": { + "value": "{rounded-small}", + "type": "borderRadius", + "description": "Use for rounding big and small charts like bar, histogram and others." + }, + "counter-rounded": { + "value": "{rounded-small}", + "type": "borderRadius", + "description": "Use for rounding Counter." + }, + "tag-rounded": { + "value": "{rounded-small}", + "type": "borderRadius", + "description": "Use for rounding Tag." + }, + "switch-rounded": { + "value": "{rounded-extra-large}", + "type": "borderRadius", + "description": "Use for rounding Switch." + }, + "control-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc." + }, + "progress-bar-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding bars: ProgressBar, SliderBar, etc." + }, + "surface-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding surfaces like Card, blocks, widgets, Notice, etc." + }, + "popper-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding all kinds of poppers and dropdowns." + }, + "modal-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard)." + }, + "disabled-opacity": { + "value": "0.5", + "type": "opacity", + "description": "Use for the disabled state of all kind of the controls and elements." + }, + "screen-extra-small": { + "value": "320px", + "type": "sizing", + "description": "Extra small screens (small phones)." + }, + "screen-small": { + "value": "768px", + "type": "sizing", + "description": "Small screens (phones and small tablets)." + }, + "screen-medium": { + "value": "1200px", + "type": "sizing", + "description": "Medium screens (tablets and small laptops)." + }, + "screen-large": { + "value": "1920px", + "type": "sizing", + "description": "Large screens (tablets and laptops)." + }, + "overlay": { + "primary": { + "value": "rgba({gray.800}, 0.7)", + "type": "color", + "description": "Use for cover the content under the modal dialogs." + }, + "secondary": { + "value": "rgba({gray.800}, 0.25)", + "type": "color", + "description": "Use for the secondary modal dialogs that were opened upon the other modal dialogs." + }, + "limitation-primary": { + "value": "rgba({gray.50}, 0.6)", + "type": "color", + "description": "Use as a primary cover of the content under the messages about limitations." + }, + "limitation-secondary": { + "value": "rgba({gray.white}, 0.85)", + "type": "color", + "description": "Use as a secondary cover of the content under the messages about limitations." + } + }, + "z-index": { + "deep": { + "value": "-999", + "type": "other" + }, + "overlay": { + "value": "500", + "type": "other" + }, + "modal": { + "value": "900", + "type": "other" + }, + "popper": { + "value": "700", + "type": "other" + }, + "dropdown": { + "value": "750", + "type": "other" + }, + "tooltip": { + "value": "800", + "type": "other" + }, + "notice-bubble": { + "value": "999", + "type": "other" + } + }, + "tooltip": { + "default": { + "value": "{gray.white}", + "type": "color", + "description": "Default Tooltip background." + }, + "warning": { + "value": "{red.100}", + "type": "color", + "description": "Warning Tooltip background." + }, + "invert": { + "value": "{gray.800}", + "type": "color", + "description": "Inverted version of the default Tooltip background." + } + }, + "neighbor-location": { + "neutral": { + "value": "#ffffff80", + "type": "color", + "description": "Neutral border of the components that are combined with neighbor-location property." + }, + "invert": { + "value": "#00000080", + "type": "color", + "description": "Inverted border of the components that are combined with neighbor-location property." + } + }, + "scroll-area": { + "shadow-left": { + "value": "linear-gradient(to right, rgba({gray.800}, 0.1) 20.55%, rgba({gray.white}, 0.0001) 100%)", + "type": "color", + "description": "Left-to-right fade shadow for the ScrollArea." + }, + "shadow-right": { + "value": "linear-gradient(to left, rgba({gray.800}, 0.1) 20.55%, rgba({gray.white}, 0.0001) 100%)", + "type": "color", + "description": "Right-to-left fade shadow for the ScrollArea." + }, + "shadow-top": { + "value": "linear-gradient(to bottom, rgba({gray.800}, 0.1) 20.55%, rgba({gray.white}, 0.0001) 100%)", + "type": "color", + "description": "Top-to-bottom fade shadow for the ScrollArea." + }, + "shadow-bottom": { + "value": "linear-gradient(to top, rgba({gray.800}, 0.1) 20.55%, rgba({gray.white}, 0.0001) 100%)", + "type": "color", + "description": "Bottom-to-top fade shadow for the ScrollArea." + }, + "dropdown-menu-left": { + "value": "linear-gradient(to right, rgba({gray.white}, 1) 34.38%, rgba({gray.white}, 0) 100%)", + "type": "color", + "description": "Left-to-right fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-right": { + "value": "linear-gradient(to left, rgba({gray.white}, 1) 34.38%, rgba({gray.white}, 0) 100%)", + "type": "color", + "description": "Right-to-left fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-bottom": { + "value": "linear-gradient(to top, rgba({gray.white}, 1) 34.38%, rgba({gray.white}, 0) 100%)", + "type": "color", + "description": "Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-top": { + "value": "linear-gradient(to bottom, rgba({gray.white}, 1) 34.38%, rgba({gray.white}, 0) 100%)", + "type": "color", + "description": "Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu." + } + }, + "scroll-bar": { + "background": { + "value": "rgba({gray.800}, 0.3)", + "type": "color", + "description": "Background color for ScrollBar." + } + }, + "tag": { + "primary": { + "gray-normal": { + "value": "#ecedf0", + "type": "color", + "description": "Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath." + }, + "gray-hover-active": { + "value": "#e3e4e9", + "type": "color", + "description": "Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath." + }, + "blue-normal": { + "value": "#d0eeff", + "type": "color", + "description": "Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath." + }, + "blue-hover-active": { + "value": "#b7e4ff", + "type": "color", + "description": "Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath." + }, + "green-normal": { + "value": "#cff1ea", + "type": "color", + "description": "Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath." + }, + "green-hover-active": { + "value": "#b7eae0", + "type": "color", + "description": "Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath." + }, + "orange-normal": { + "value": "#ffddd2", + "type": "color", + "description": "Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath." + }, + "orange-hover-active": { + "value": "#ffccbb", + "type": "color", + "description": "Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath." + }, + "red-normal": { + "value": "#ffcedc", + "type": "color", + "description": "Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath." + }, + "red-hover-active": { + "value": "#ffb6ca", + "type": "color", + "description": "Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath." + }, + "violet-normal": { + "value": "#f4e3ff", + "type": "color", + "description": "Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath." + }, + "violet-hover-active": { + "value": "#efd5ff", + "type": "color", + "description": "Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath." + }, + "yellow-normal": { + "value": "#fee6d1", + "type": "color", + "description": "Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath." + }, + "yellow-hover-active": { + "value": "#fedab9", + "type": "color", + "description": "Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath." + }, + "white-normal": { + "value": "rgba({gray.white}, 0.15)", + "type": "color", + "description": "Primary white tag." + }, + "white-hover-active": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Hover and active (selected) state of the primary white tag." + }, + "gray-text": { + "value": "{gray.500}", + "type": "color", + "description": "Gray text for the primary gray tag." + }, + "blue-text": { + "value": "{blue.500}", + "type": "color", + "description": "Blue text for the primary blue tag." + }, + "green-text": { + "value": "{green.500}", + "type": "color", + "description": "Green text for the primary green tag." + }, + "orange-text": { + "value": "{orange.500}", + "type": "color", + "description": "Orange text for the primary orange tag." + }, + "red-text": { + "value": "{red.500}", + "type": "color", + "description": "Red text for the primary red tag." + }, + "violet-text": { + "value": "{violet.500}", + "type": "color", + "description": "Violet text for the primary violet tag." + }, + "yellow-text": { + "value": "{yellow.500}", + "type": "color", + "description": "Yellow text for the primary yellow tag." + }, + "white-text": { + "value": "{gray.white}", + "type": "color", + "description": "White text for the primary white tag." + } + }, + "secondary": { + "normal": { + "value": "{gray.white}", + "type": "color", + "description": "Background color for the default secondary tag." + }, + "hover-active": { + "value": "{gray.50}", + "type": "color", + "description": "Hover and active (selected) states of the background color for the default secondary tag." + }, + "white-normal": { + "value": "rgba({gray.white}, 0)", + "type": "color", + "description": "White secondary tag." + }, + "white-hover-active": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Active state of the secondary white tag." + }, + "gray-text": { + "value": "{gray.500}", + "type": "color", + "description": "Gray text for the default secondary tag." + }, + "white-text": { + "value": "{gray.white}", + "type": "color", + "description": "White text for the secondary white tag." + } + } + }, + "chart": { + "palette-order": { + "1": { + "value": "{gray.800}", + "type": "color", + "description": "1 color in the default list of colors for charts." + }, + "2": { + "value": "{violet.300}", + "type": "color", + "description": "2 color in the default list of colors for charts." + }, + "3": { + "value": "{green.200}", + "type": "color", + "description": "3 color in the default list of colors for charts." + }, + "4": { + "value": "{violet.dusty.300}", + "type": "color", + "description": "4 color in the default list of colors for charts." + }, + "5": { + "value": "{blue.500}", + "type": "color", + "description": "5 color in the default list of colors for charts." + }, + "6": { + "value": "{red.500}", + "type": "color", + "description": "6 color in the default list of colors for charts." + }, + "7": { + "value": "{orange.500}", + "type": "color", + "description": "7 color in the default list of colors for charts." + }, + "8": { + "value": "{yellow.500}", + "type": "color", + "description": "8 color in the default list of colors for charts." + }, + "9": { + "value": "{salad.500}", + "type": "color", + "description": "9 color in the default list of colors for charts." + }, + "10": { + "value": "{green.500}", + "type": "color", + "description": "10 color in the default list of colors for charts." + }, + "11": { + "value": "{violet.500}", + "type": "color", + "description": "11 color in the default list of colors for charts." + }, + "12": { + "value": "{pink.400}", + "type": "color", + "description": "12 color in the default list of colors for charts." + }, + "13": { + "value": "{blue.400}", + "type": "color", + "description": "13 color in the default list of colors for charts." + }, + "14": { + "value": "{red.400}", + "type": "color", + "description": "14 color in the default list of colors for charts." + }, + "15": { + "value": "{orange.400}", + "type": "color", + "description": "15 color in the default list of colors for charts." + }, + "16": { + "value": "{yellow.400}", + "type": "color", + "description": "16 color in the default list of colors for charts." + }, + "17": { + "value": "{salad.400}", + "type": "color", + "description": "17 color in the default list of colors for charts." + }, + "18": { + "value": "{green.400}", + "type": "color", + "description": "18 color in the default list of colors for charts." + }, + "19": { + "value": "{violet.400}", + "type": "color", + "description": "19 color in the default list of colors for charts." + }, + "20": { + "value": "{pink.300}", + "type": "color", + "description": "20 color in the default list of colors for charts." + }, + "21": { + "value": "{blue.600}", + "type": "color", + "description": "21 color in the default list of colors for charts." + }, + "22": { + "value": "{red.600}", + "type": "color", + "description": "22 color in the default list of colors for charts." + }, + "23": { + "value": "{orange.600}", + "type": "color", + "description": "23 color in the default list of colors for charts." + }, + "24": { + "value": "{green.600}", + "type": "color", + "description": "24 color in the default list of colors for charts." + }, + "total-amount": { + "value": "{gray.400}", + "type": "color", + "description": "Use it to show total value." + }, + "other-data": { + "value": "{gray.200}", + "type": "color", + "description": "Use it to indicate voids, missing or some other data." + }, + "null": { + "value": "{gray.100}", + "type": "color", + "description": "Use it to show null value." + } + }, + "grid": { + "line": { + "value": "{border.secondary}", + "type": "color", + "description": "Default chart grid line." + }, + "x-axis": { + "value": "{border.primary}", + "type": "color", + "description": "X-axis line on the chart grid." + }, + "y-accent-hover-line": { + "value": "{gray.200}", + "type": "color", + "description": "Accent line for the hover state on the chart grid." + }, + "text-label": { + "value": "{gray.500}", + "type": "color", + "description": "Text label on the chart grid." + }, + "bar-chart-hover": { + "value": "rgba({gray.200}, 0.2)", + "type": "color", + "description": "Background color for the hover state of a bar on the chart grid." + }, + "bar-chart-base-bg": { + "value": "{gray.50}", + "type": "color", + "description": "Default background color of a bar in the BarChart." + }, + "period-bg": { + "value": "rgba({gray.200}, 0.2)", + "type": "color", + "description": "Use for highlighting a period on the chart grid." + }, + "period-pattern": { + "value": "rgba({gray.800}, 0.15)", + "type": "color", + "description": "Stripe color for diagonal pattern background." + }, + "border": { + "value": "{gray.white}", + "type": "color", + "description": "Border for distinguishing data sets and chart dots on the chart grid." + } + }, + "x-axis-accent": { + "period-active": { + "value": "{gray.300}", + "type": "color", + "description": "Background color for the clickable date on the X-axis of the chart grid." + }, + "data-start-tracking": { + "value": "rgba({green.300}, 0.2)", + "type": "color", + "description": "Background color for the \"Start tracking\" date on the X-axis of the chart grid." + } + }, + "axis-label": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "fontSize": "{fs-100}" + }, + "type": "typography" + }, + "axis-label-bold": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "fontSize": "{fs-100}" + }, + "type": "typography" + } + }, + "header": { + "bg": { + "value": "{bg.secondary.neutral}", + "type": "color" + }, + "border": { + "primary": { + "value": "{border.primary}", + "type": "color" + }, + "secondary": { + "value": "{border.secondary}", + "type": "color" + } + } + }, + "sidebar-nav": { + "control-hover": { + "value": "rgba({gray.100}, 0.3)", + "type": "color" + }, + "control-active": { + "value": "{gray.100}", + "type": "color" + }, + "control": { + "text": { + "normal": { + "value": "{text.secondary}", + "type": "color" + }, + "active": { + "value": "{text.primary}", + "type": "color" + } + }, + "icon": { + "normal": { + "value": "{icon.secondary.neutral}", + "type": "color" + }, + "active": { + "value": "{icon.primary.neutral}", + "type": "color" + } + } + } + }, + "duration": { + "extra-slow": { + "value": "500", + "type": "other", + "description": "Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen)" + }, + "slow": { + "value": "400", + "type": "other", + "description": "Should be used for more larger scale animations (such as page transitions)" + }, + "medium": { + "value": "300", + "type": "other", + "description": "Should be used for more complex effects (such as Modal)" + }, + "fast": { + "value": "200", + "type": "other", + "description": "Should be used for more complex effects (such as Dropdown or Accordion)" + }, + "extra-fast": { + "value": "100", + "type": "other", + "description": "Should be used for simpler effects and relatively small-sized animations (such as fades or color changes)" + }, + "switch": { + "value": "{duration.extra-fast}", + "type": "other", + "description": "Use for small controls like Switch or Slider." + }, + "popper": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for components based on popper like Tooltip, Dropdown or Filter trigger." + }, + "control": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for small controls like Checkbox or Radio." + }, + "modal": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Modal, Fullscreen Modal, Side panel or other kind of windows." + }, + "accordion": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Accordion." + }, + "counter": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Summary or Counter." + } + } + }, + "featureHighlight": { + "bg": { + "primary": { + "feature-highlight": { + "value": "{gray.white}", + "type": "color", + "description": "Primary background for highlighted controls." + }, + "feature-highlight-hover-active": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Primary background for hover and active (selected) state of highlighted controls." + } + }, + "secondary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Secondary background for the highlighted message." + } + } + }, + "border": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.300}, {blue.300})", + "type": "color", + "description": "Primary border for highlighted controls." + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Primary border for the active state of highlighted controls." + }, + "feature-highlight-secondary": { + "value": "linear-gradient(90deg, {violet.200}, {blue.200})", + "type": "color", + "description": "Secondary border for highlighted controls." + } + }, + "control": { + "primary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Background of the highlighted primary control." + }, + "feature-highlight-hover": { + "value": "linear-gradient(90deg, {violet.500}, {blue.500})", + "type": "color", + "description": "Hover state of the highlighted primary control." + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.600}, {blue.600})", + "type": "color", + "description": "Active (selected) state of the highlighted primary control." + } + }, + "secondary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Background of the highlighted secondary control." + }, + "feature-highlight-hover": { + "value": "linear-gradient(90deg, {violet.100}, {blue.100})", + "type": "color", + "description": "Hover state of the highlighted secondary control.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.3", + "space": "hsl" + } + } + } + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.100}, {blue.100})", + "type": "color", + "description": "Active (selected) state of the highlighted secondary control." + } + } + }, + "text": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.500}, {blue.500})", + "type": "color", + "description": "Text for highlighted features." + }, + "feature-highlight-hover-active": { + "value": "linear-gradient(90deg, {violet.700}, {blue.700})", + "type": "color", + "description": "Text for hover and active states of highlighted features." + } + }, + "icon": { + "primary": { + "feature-highlight": { + "value": "{violet.500}", + "type": "color", + "description": "Primary highlighted icon." + }, + "feature-highlight-hover-active": { + "value": "#6B3AB4", + "type": "color", + "description": "Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color." + } + } + }, + "keyboard-focus-feature-highlight": { + "value": { + "width": "3px", + "color": "{keyboard-focus-feature-highlight.outline}" + }, + "type": "border", + "description": "Keyboard focus styles for highlighted controls.", + "outline": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Color for keyboard focus outline styles for highlighted controls." + } + } + } + } + \ No newline at end of file diff --git a/semcore/core/src/theme/light-new.json b/semcore/core/src/theme/light-new.json new file mode 100644 index 0000000000..63084992c1 --- /dev/null +++ b/semcore/core/src/theme/light-new.json @@ -0,0 +1,2731 @@ +{ + "base": { + "gray": { + "50": { + "value": "oklch(0.958 0.002 247.84)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.904 0.004 277.6)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.864 0.004 271.363)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.01 277.6)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.013 277.6)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.017 277.6)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.013 277.6)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.009 277.6)", + "type": "color" + }, + "800": { + "value": "oklch(0.226 0.019 135.279)", + "type": "color" + }, + "white": { + "value": "oklch(1 0 0)", + "type": "color" + } + }, + "blue": { + "50": { + "value": "oklch(0.966 0.016 263.265)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.904 0.045 263.265)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.861 0.068 266.551)", + "type": "color" + }, + "300": { + "value": "oklch(0.741 0.12 263.227)", + "type": "color" + }, + "400": { + "value": "oklch(0.703 0.154 265.122)", + "type": "color" + }, + "500": { + "value": "oklch(0.575 0.232 263.373)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.164 263.265)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.116 263.265)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.088 263.265)", + "type": "color" + } + }, + "green": { + "50": { + "value": "oklch(0.966 0.038 170.688)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.922 0.088 177.924)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.851 0.165 170.672)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.143 170.688)", + "type": "color" + }, + "400": { + "value": "oklch(0.658 0.126 171.444)", + "type": "color" + }, + "500": { + "value": "oklch(0.541 0.104 170.438)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.079 170.688)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.056 170.688)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.043 170.688)", + "type": "color" + } + }, + "red": { + "50": { + "value": "oklch(0.966 0.022 27.658)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.859 0.076 18.76)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.824 0.119 27.658)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.158 27.477)", + "type": "color" + }, + "400": { + "value": "oklch(0.681 0.207 24.507)", + "type": "color" + }, + "500": { + "value": "oklch(0.598 0.226 27.581)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.154 27.658)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.109 27.658)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.083 27.658)", + "type": "color" + } + }, + "orange": { + "50": { + "value": "oklch(0.966 0.021 39.457)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.904 0.049 39.457)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.824 0.09 39.457)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.134 39.457)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.172 39.457)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.141 39.457)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.107 39.457)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.075 39.457)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.057 39.457)", + "type": "color" + } + }, + "yellow": { + "50": { + "value": "oklch(0.966 0.039 80.292)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.917 0.091 85.811)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.863 0.145 83.727)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.145 80.292)", + "type": "color" + }, + "400": { + "value": "oklch(0.734 0.152 66.496)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.106 80.292)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.08 80.292)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.057 80.292)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.043 80.292)", + "type": "color" + } + }, + "violet": { + "50": { + "value": "oklch(0.966 0.02 295.962)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.869 0.081 305.081)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.824 0.106 295.962)", + "type": "color" + }, + "300": { + "value": "oklch(0.744 0.162 303.047)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.204 295.962)", + "type": "color" + }, + "500": { + "value": "oklch(0.52 0.258 295.842)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.205 295.962)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.145 295.962)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.11 295.962)", + "type": "color" + }, + "dusty": { + "50": { + "value": "oklch(0.966 0.004 189.338)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.935 0.019 184.9)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.824 0.02 189.338)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.03 189.338)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.034 189.338)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.028 189.338)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.021 189.338)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.015 189.338)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.011 189.338)", + "type": "color" + } + } + }, + "pink": { + "50": { + "value": "#fff0ff", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#ffd3ff", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#ffa9fa", + "type": "color" + }, + "300": { + "value": "#ff87eb", + "type": "color" + }, + "400": { + "value": "#e14adf", + "type": "color" + }, + "500": { + "value": "#b229b9", + "type": "color" + }, + "600": { + "value": "#7d0480", + "type": "color" + }, + "700": { + "value": "#4d0050", + "type": "color" + }, + "800": { + "value": "#340439", + "type": "color" + } + }, + "salad": { + "50": { + "value": "oklch(0.966 0.023 147.483)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.943 0.109 140.962)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.901 0.207 140.846)", + "type": "color" + }, + "300": { + "value": "oklch(0.719 0.178 147.099)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.152 147.483)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.124 147.483)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.094 147.483)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.067 147.483)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.051 147.483)", + "type": "color" + } + } + }, + "tokens": { + "bg": { + "primary": { + "neutral": { + "value": "{gray.white}", + "type": "color", + "description": "Primary background of the interface which contains the main data and information." + }, + "neutral-hover": { + "value": "rgba({gray.50}, 0.6)", + "type": "color", + "description": "Hover state of the primary background of the interface which contains the main data and information." + }, + "neutral-active": { + "value": "rgba({gray.100}, 0.8)", + "type": "color", + "description": "Active (selected) state of the primary background of the interface which contains the main data and information." + }, + "info": { + "value": "{blue.500}", + "type": "color", + "description": "Accent background of the message with regular information." + }, + "success": { + "value": "{green.200}", + "type": "color", + "description": "Accent background of the message or banner with information about the successful result." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Accent background of a message or a banner with a critical information." + }, + "warning": { + "value": "{orange.300}", + "type": "color", + "description": "Accent background of a message or a banner with a warning information." + }, + "highlight": { + "value": "{violet.100}", + "type": "color", + "description": "Accent background of the information you want to highlight." + }, + "advertising": { + "value": "{gray.800}", + "type": "color", + "description": "Accent background for the advertising banners and controls." + }, + "muted": { + "value": "{gray.500}", + "type": "color", + "description": "Accented muted background for a message with regular information." + }, + "invert": { + "value": "{gray.800}", + "type": "color", + "description": "Inverted version of the primary background of the interface that contains the main data and information." + }, + "invert-hover": { + "value": "{gray.700}", + "type": "color", + "description": "Hover state for the inverted version of the primary background of the interface that contains the main data and information." + }, + "invert-active": { + "value": "{gray.600}", + "type": "color", + "description": "Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information." + } + }, + "secondary": { + "neutral": { + "value": "rgba({gray.50}, 0.6)", + "type": "color", + "description": "Secondary background of the interface which contains the main data and information." + }, + "neutral-hover": { + "value": "rgba({gray.100}, 0.8)", + "type": "color", + "description": "Hover state of the secondary background of the interface which contains the main data and information." + }, + "neutral-active": { + "value": "{gray.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the interface which contains the main data and information." + }, + "info": { + "value": "rgba({blue.500}, 0.1)", + "type": "color", + "description": "Secondary background of a message with regular information." + }, + "info-hover": { + "value": "rgba({blue.500}, 0.2)", + "type": "color", + "description": "Hover state of the secondary background of a message with regular information." + }, + "info-active": { + "value": "rgba({blue.500}, 0.3)", + "type": "color", + "description": "Active (selected) state of the secondary background of a message with regular information." + }, + "success": { + "value": "rgba({green.200}, 0.2)", + "type": "color", + "description": "Secondary background of the message with success information you want to accent." + }, + "success-hover": { + "value": "rgba({green.200}, 0.4)", + "type": "color", + "description": "Hover state of the secondary background of the message with success information you want to accent." + }, + "success-active": { + "value": "rgba({green.200}, 0.6)", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with success information you want to accent." + }, + "critical": { + "value": "rgba({red.400}, 0.2)", + "type": "color", + "description": "Secondary background of the message with critical information you want to accent." + }, + "critical-hover": { + "value": "rgba({red.400}, 0.4)", + "type": "color", + "description": "Hover state of the secondary background of the message with critical information you want to accent." + }, + "critical-active": { + "value": "rgba({red.400}, 0.6)", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with critical information you want to accent." + }, + "warning": { + "value": "{orange.50}", + "type": "color", + "description": "Secondary background of the message with warning information you want to accent." + }, + "warning-hover": { + "value": "rgba({orange.100}, 0.6)", + "type": "color", + "description": "Hover state of the secondary background of the message with warning information you want to accent." + }, + "warning-active": { + "value": "{orange.100}", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with critical information you want to accent." + }, + "highlight": { + "value": "{violet.50}", + "type": "color", + "description": "Secondary background of the information you want to highlight." + }, + "highlight-hover": { + "value": "rgba({violet.100}, 0.6)", + "type": "color", + "description": "Hover state of the secondary background of the information you want to highlight." + }, + "highlight-active": { + "value": "{violet.100}", + "type": "color", + "description": "Active (selected) state of the secondary background of the information you want to highlight." + }, + "advertising": { + "value": "{green.100}", + "type": "color", + "description": "Secondary background for the advertising message you want to accent." + }, + "advertising-hover": { + "value": "rgba({green.200}, 0.6)", + "type": "color", + "description": "Hover state of the secondary background for the advertising message you want to accent." + }, + "advertising-active": { + "value": "{green.200}", + "type": "color", + "description": "Active (selected) state of the secondary background for the advertising message you want to accent." + } + }, + "highlight-results": { + "value": "rgba({violet.100}, 0.4)", + "type": "color", + "description": "Highlighting the search results." + }, + "highlight-focus": { + "value": "rgba({blue.400}, 0.2)", + "type": "color", + "description": "Focusing values in the input." + } + }, + "text": { + "primary": { + "value": "{gray.800}", + "type": "color", + "description": "Primary text." + }, + "secondary": { + "value": "{gray.500}", + "type": "color", + "description": "Secondary text." + }, + "placeholder": { + "value": "{gray.400}", + "type": "color", + "description": "Placeholder text only." + }, + "success": { + "value": "{green.400}", + "type": "color", + "description": "Text associated with success states and data." + }, + "success-hover-active": { + "value": "{green.500}", + "type": "color", + "description": "Hover and active states for the text associated with success states and data." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Text associated with critical states and data." + }, + "critical-hover-active": { + "value": "{red.500}", + "type": "color", + "description": "Hover and active states for the text associated with critical states and data." + }, + "primary-invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the primary text." + }, + "secondary-invert": { + "value": "rgba({gray.white}, 0.8)", + "type": "color", + "description": "Inverted version of the secondary text." + }, + "link": { + "value": "{blue.500}", + "type": "color", + "description": "Link text." + }, + "link-hover-active": { + "value": "{blue.500}", + "type": "color", + "description": "Hover and active states for the link text." + }, + "link-invert": { + "value": "{blue.100}", + "type": "color", + "description": "Inverted version of the link text. Use on dark background only." + }, + "link-invert-hover": { + "value": "{blue.200}", + "type": "color", + "description": "Hover and active states of the inverted version of the link text. Use on dark background only." + }, + "link-visited": { + "value": "{violet.400}", + "type": "color", + "description": "Visited link text." + }, + "hint": { + "value": "{gray.500}", + "type": "color", + "description": "Hint link text." + }, + "hint-hover-active": { + "value": "{gray.600}", + "type": "color", + "description": "Hover and active states of the hint link text." + }, + "hint-invert": { + "value": "{gray.100}", + "type": "color", + "description": "Inverted version of the hint link text." + }, + "hint-invert-hover-active": { + "value": "{gray.200}", + "type": "color", + "description": "Hover and active states of the inverted version of the hint link text." + }, + "large-secondary": { + "value": "{gray.300}", + "type": "color", + "description": "Secondary text. Use with font-size ≥20px." + }, + "large-info": { + "value": "{blue.500}", + "type": "color", + "description": "Link text with font-size ≥20px." + }, + "large-info-hover-active": { + "value": "{blue.600}", + "type": "color", + "description": "Hover and active states of the link text with font-size ≥20px." + }, + "large-success": { + "value": "{green.300}", + "type": "color", + "description": "Text with font-size ≥20px associated with success states and data." + }, + "large-success-hover-active": { + "value": "{green.400}", + "type": "color", + "description": "Hover and active states of the text with font-size ≥20px associated with success states and data." + }, + "large-critical": { + "value": "{red.400}", + "type": "color", + "description": "Text with font-size ≥20px associated with critical states and data." + }, + "large-critical-hover-active": { + "value": "{red.500}", + "type": "color", + "description": "Hover and active states of the text with font-size ≥20px associated with critical states and data." + }, + "advertising": { + "value": "{violet.500}", + "type": "color", + "description": "Advertising text." + } + }, + "border": { + "primary": { + "value": "rgba({gray.100}, 0.9)", + "type": "color", + "description": "Neutral primary border." + }, + "secondary": { + "value": "rgba({gray.100}, 0.7)", + "type": "color", + "description": "Subtle secondary border." + }, + "info": { + "value": "{blue.200}", + "type": "color", + "description": "Subtle secondary border in the informational message." + }, + "info-active": { + "value": "rgba({blue.500}, 0.5)", + "type": "color", + "description": "Active border in focused input filed." + }, + "success": { + "value": "{green.300}", + "type": "color", + "description": "Subtle secondary border in the successful message and input field." + }, + "success-active": { + "value": "{green.400}", + "type": "color", + "description": "Active border in the focused input field with valid state." + }, + "critical": { + "value": "{red.300}", + "type": "color", + "description": "Subtle secondary border in the critical message and invalid input field." + }, + "critical-active": { + "value": "{red.400}", + "type": "color", + "description": "Active border in the focused input field with invalid state, and active state of the other components with invalid state." + }, + "warning": { + "value": "{orange.200}", + "type": "color", + "description": "Subtle secondary border in the warning message." + }, + "warning-active": { + "value": "{orange.300}", + "type": "color", + "description": "Active border in components with warning intention." + }, + "primary-invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the neutral primary border. Use it for borders on the dark or color background." + }, + "secondary-invert": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background." + }, + "tooltip-invert": { + "value": "{gray.500}", + "type": "color", + "description": "Border of the Tooltip with dark theme." + }, + "table-accent": { + "value": "{border.primary}", + "type": "color", + "description": "Accent borders in the Table: for the accordion in the table and for the header of the secondary table." + }, + "date-picker-range-comparison": { + "value": "{violet.400}", + "type": "color", + "description": "Border color of the second period for the comparison mode in the DatePicker." + }, + "critical-pattern": { + "value": "repeating-linear-gradient(315deg, rgba({ border.critical-active}, 1) 0, rgba({border.critical-active}, 1) 2px, transparent 0, transparent 50%)", + "type": "color", + "description": "Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states." + } + }, + "control": { + "switch-bg": { + "value": "{gray.200}", + "type": "color", + "description": "Subtle background of the Switch control." + }, + "primary": { + "info": { + "value": "{gray.800}", + "type": "color", + "description": "Background of the regular primary control." + }, + "info-hover": { + "value": "{violet.400}", + "type": "color", + "description": "Hover state of the regular primary control." + }, + "info-active": { + "value": "{violet.500}", + "type": "color", + "description": "Active (selected) state of the regular primary control." + }, + "success": { + "value": "{green.300}", + "type": "color", + "description": "Background of the primary control with successful theme." + }, + "success-hover": { + "value": "{green.400}", + "type": "color", + "description": "Hover state of the primary control with successful theme." + }, + "success-active": { + "value": "{green.500}", + "type": "color", + "description": "Active (selected) state of the primary control with successful theme." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Background of the primary control with danger theme." + }, + "critical-hover": { + "value": "{red.500}", + "type": "color", + "description": "Hover state of the primary control with danger theme." + }, + "critical-active": { + "value": "{red.600}", + "type": "color", + "description": "Active (selected) state of the primary control with danger theme." + }, + "brand": { + "value": "{violet.400}", + "type": "color", + "description": "Background of the primary brand colored control." + }, + "brand-hover": { + "value": "{violet.500}", + "type": "color", + "description": "Hover state of the primary brand colored control." + }, + "brand-active": { + "value": "{violet.600}", + "type": "color", + "description": "Active state of the primary brand colored control." + }, + "advertising": { + "value": "{violet.300}", + "type": "color", + "description": "Background of the advertising primary control." + }, + "advertising-hover": { + "value": "{gray.800}", + "type": "color", + "description": "Hover state of the advertising primary control." + }, + "advertising-active": { + "value": "{gray.800}", + "type": "color", + "description": "Active (selected) state of the advertising primary control." + }, + "invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted background of the primary control." + }, + "invert-hover": { + "value": "{gray.50}", + "type": "color", + "description": "Hover state of the inverted primary control." + }, + "invert-active": { + "value": "{gray.100}", + "type": "color", + "description": "Active (selected) state of the inverted primary control." + } + }, + "secondary": { + "neutral": { + "value": "rgba({violet.dusty.400}, 0.1)", + "type": "color", + "description": "Background of the regular secondary control." + }, + "neutral-hover": { + "value": "rgba({violet.dusty.400}, 0.2)", + "type": "color", + "description": "Hover state of the regular secondary control." + }, + "neutral-active": { + "value": "rgba({violet.dusty.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the regular secondary control." + }, + "info": { + "value": "color-mix(in srgb, {gray.white} 90%, {blue.500} 10%)", + "type": "color", + "description": "Background of the accent secondary control (white with 5% blue overlay)." + }, + "info-hover": { + "value": "color-mix(in srgb, {gray.white} 85%, {blue.500} 15%)", + "type": "color", + "description": "Hover state of the accent secondary control (white with 20% blue overlay)." + }, + "info-active": { + "value": "color-mix(in srgb, {gray.white} 80%, {blue.500} 20%)", + "type": "color", + "description": "Active (selected) state of the accent secondary control (white with 30% blue overlay)." + }, + "invert": { + "value": "rgba({gray.white}, 0.05)", + "type": "color", + "description": "Background of the inverted version of the secondary control." + }, + "invert-hover": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Hover state of the inverted version of the secondary control." + }, + "invert-active": { + "value": "rgba({gray.white}, 0.2)", + "type": "color", + "description": "Active (selected) state of the inverted version of the secondary control." + } + }, + "tertiary": { + "neutral": { + "value": "rgba({violet.dusty.400}, 0)", + "type": "color", + "description": "Background of the regular tertiary control." + }, + "neutral-hover": { + "value": "rgba({violet.dusty.400}, 0.1)", + "type": "color", + "description": "Hover state of the regular tertiary control." + }, + "neutral-active": { + "value": "rgba({violet.dusty.400}, 0.2)", + "type": "color", + "description": "Active (selected) state of the regular tertiary control." + }, + "info": { + "value": "rgba({blue.400}, 0)", + "type": "color", + "description": "Background of the accent and link-lookalike tertiary control." + }, + "info-hover": { + "value": "rgba({blue.400}, 0.2)", + "type": "color", + "description": "Hover state of the accent and link-lookalike tertiary control." + }, + "info-active": { + "value": "rgba({blue.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the accent and link-lookalike tertiary control." + }, + "invert": { + "value": "rgba({gray.white}, 0)", + "type": "color", + "description": "Background of the inverted version of the tertiary control." + }, + "invert-hover": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Hover state of the inverted version of the tertiary control." + }, + "invert-active": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Active (selected) state of the inverted version of the tertiary control." + } + } + }, + "icon": { + "primary": { + "neutral": { + "value": "{gray.300}", + "type": "color", + "description": "Primary neutral icon." + }, + "neutral-hover-active": { + "value": "{gray.400}", + "type": "color", + "description": "Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color." + }, + "info": { + "value": "{blue.400}", + "type": "color", + "description": "Primary link-lookalike icon." + }, + "info-hover-active": { + "value": "{blue.500}", + "type": "color", + "description": "Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color." + }, + "success": { + "value": "{green.400}", + "type": "color", + "description": "Primary success icon." + }, + "success-hover-active": { + "value": "{green.500}", + "type": "color", + "description": "Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Primary critical icon." + }, + "critical-hover-active": { + "value": "{red.500}", + "type": "color", + "description": "Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color." + }, + "warning": { + "value": "{orange.400}", + "type": "color", + "description": "Primary warning icon." + }, + "warning-hover-active": { + "value": "{orange.500}", + "type": "color", + "description": "Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color." + }, + "invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the primary icon." + }, + "invert-hover-active": { + "value": "{gray.100}", + "type": "color", + "description": "Hover and active (selected) states of the inverted version of the primary icon." + } + }, + "secondary": { + "neutral": { + "value": "{gray.300}", + "type": "color", + "description": "Secondary neutral icon." + }, + "neutral-hover-active": { + "value": "{gray.400}", + "type": "color", + "description": "Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color." + }, + "info": { + "value": "{blue.300}", + "type": "color", + "description": "Secondary link-lookalike icon." + }, + "info-hover-active": { + "value": "{blue.400}", + "type": "color", + "description": "Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color." + }, + "success": { + "value": "{green.300}", + "type": "color", + "description": "Secondary success icon." + }, + "success-hover-active": { + "value": "{green.400}", + "type": "color", + "description": "Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color." + }, + "critical": { + "value": "{red.300}", + "type": "color", + "description": "Secondary critical icon." + }, + "critical-hover-active": { + "value": "{red.400}", + "type": "color", + "description": "Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color." + }, + "warning": { + "value": "{orange.300}", + "type": "color", + "description": "Secondary warning icon." + }, + "warning-hover-active": { + "value": "{orange.400}", + "type": "color", + "description": "Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color." + } + }, + "non-interactive": { + "value": "{gray.800}", + "type": "color", + "description": "Color for the default non-interactive icon." + } + }, + "illustration": { + "red": { + "value": "{red.400}", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "orange": { + "value": "{orange.300}", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "yellow": { + "value": "{yellow.200}", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "salad": { + "value": "{salad.200}", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "green": { + "value": "{green.200}", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "blue": { + "value": "{blue.400}", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "violet": { + "value": "{violet.300}", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "pink": { + "value": "{pink.400}", + "type": "color", + "description": "⚠️ Use only for illustrations." + } + }, + "date-picker": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Default date-picker cell background." + }, + "cell-current": { + "value": "{gray.800}", + "type": "color", + "description": "Color for marking the cell with the current date, month or year in the date-picker." + }, + "cell-hover": { + "value": "rgba({violet.dusty.400}, 0.1)", + "type": "color", + "description": "Hover state of the default date-picker cell background." + }, + "cell-range": { + "value": "rgba({blue.500}, 0.2)", + "type": "color", + "description": "Background for the cell which is included in the date range in the date-picker." + }, + "cell-range-hover": { + "value": "rgba({blue.500}, 0.3)", + "type": "color", + "description": "Hover state of the background for the cell which is included in the date range in the date-picker." + }, + "cell-active": { + "value": "{blue.500}", + "type": "color", + "description": "Active (selected) date-picker cell background." + }, + "cell-active-hover": { + "value": "{blue.600}", + "type": "color", + "description": "Hover for the active (selected) date-picker cell background." + }, + "cell-current-invert": { + "value": "rgba({gray.white}, 0.5)", + "type": "color", + "description": "Color for marking the active cell with the current date, month or year in the date-picker." + }, + "cell-comparison-active": { + "value": "{violet.400}", + "type": "color", + "description": "Active (selected) date-picker cell background for comparison periods." + }, + "cell-comparison-active-hover": { + "value": "{violet.500}", + "type": "color", + "description": "Hover for the active (selected) date-picker cell background for comparison periods." + } + }, + "dropdown-menu": { + "item": { + "value": "{gray.white}", + "type": "color", + "description": "Default background color for the list item in the dropdown-menu." + }, + "item-hover": { + "value": "rgba({blue.500}, 0.1)", + "type": "color", + "description": "Hover state of the default background color for the list item in the dropdown-menu." + }, + "item-selected": { + "value": "rgba({blue.500}, 0.2)", + "type": "color", + "description": "Active (selected) state of the default background color for the list item in the dropdown-menu." + }, + "item-selected-hover": { + "value": "rgba({blue.500}, 0.3)", + "type": "color", + "description": "Hover state for the selected state of the default background color for the list item in the dropdown-menu." + } + }, + "feature-popover": { + "bg": { + "value": "{bg.primary.highlight}", + "type": "color", + "description": "Color of the FeaturePopover background with accent theme." + }, + "dot-outer-border": { + "value": "{feature-popover.bg}", + "type": "color", + "description": "Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme." + }, + "bg-neutral": { + "value": "{gray.800}", + "type": "color", + "description": "Color of the FeaturePopover background with neutral theme." + }, + "dot-neutral": { + "value": "{violet.300}", + "type": "color", + "description": "Color of the FeaturePopover.Spot for FeaturePopover with neutral theme." + }, + "dot-neutral-outer-border": { + "value": "{feature-popover.dot-neutral}", + "type": "color", + "description": "Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme." + } + }, + "progress-bar": { + "bg": { + "value": "{gray.100}", + "type": "color", + "description": "Background color of the ProgressBar." + }, + "bg-hover": { + "value": "{gray.200}", + "type": "color", + "description": "Hover state of the background color of the ProgressBar." + }, + "bg-invert": { + "value": "rgba({gray.white}, 0.2)", + "type": "color", + "description": "Inverted version of the background color of the ProgressBar." + }, + "bg-invert-hover": { + "value": "rgba({gray.white}, 0.4)", + "type": "color", + "description": "Hover state for the inverted version of the background color of the ProgressBar." + }, + "value": { + "value": "{violet.300}", + "type": "color", + "description": "Value color of the ProgressBar." + }, + "value-gradient": { + "value": "linear-gradient(-45deg, rgba({violet.300}, 0.9) 25%, rgba({violet.300}, 1) 0%, rgba({violet.300}, 1) 50%, rgba({violet.300}, 0.9) 0%, rgba({violet.300}, 0.9) 75%, rgba({violet.300}, 1) 0%)", + "type": "color", + "description": "Value with gradient for the ProgressBar." + }, + "pattern-gradient": { + "value": "linear-gradient(-45deg, rgba({gray.100}, 0.9) 25%, rgba({gray.100}, 1) 0%, rgba({gray.100}, 1) 50%, rgba({gray.100}, 0.9) 0%, rgba({gray.100}, 0.9) 75%, rgba({gray.100}, 1) 0%)", + "type": "color", + "description": "Null value gradient for the ProgressBar." + }, + "value-bg": { + "value": "#000000", + "type": "color", + "description": "Base value background for the ProgressBar. It is used to create gradients for the values." + } + }, + "skeleton": { + "bg": { + "value": "rgba({gray.100}, 0.8)", + "type": "color", + "description": "Default color for the Skeleton." + }, + "bg-invert": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Inverted version of the default color for the Skeleton." + } + }, + "slider-rating": { + "normal": { + "value": "{icon.secondary.neutral}", + "type": "color", + "description": "Icon color for the SliderRating component in its normal state." + }, + "hover-active": { + "value": "{violet.300}", + "type": "color", + "description": "Icon color for the SliderRating component in its hovered and active states." + } + }, + "table": { + "th": { + "primary": { + "cell": { + "value": "rgba({gray.100}, 0.2)", + "type": "color", + "description": "Background of the header cell in the primary Table." + }, + "cell-hover": { + "value": "{gray.50}", + "type": "color", + "description": "Background of the hovered header cell in the primary Table." + }, + "cell-active": { + "value": "{gray.50}", + "type": "color", + "description": "Background of the active header cell in the primary Table." + } + }, + "secondary": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Background of the header cell in the secondary Table." + } + }, + "gradient": { + "value": "linear-gradient(to right, rgba({gray.50}, 0) 0%, rgba({gray.50}, 1) 100%)", + "type": "color", + "description": "Background gradient for sorting icon that absolute positioned in the table head." + } + }, + "td": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Background of the default cell in the Table." + }, + "cell-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the default hovered cell in the Table.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.8", + "space": "hsl" + } + } + } + }, + "cell-active": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the default active cell in the Table.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.5", + "space": "hsl" + } + } + } + }, + "cell-unread": { + "value": "rgba({gray.100}, 0.2)", + "type": "color", + "description": "Background of the unread cell in the Table." + }, + "cell-accordion": { + "value": "rgba({gray.100}, 0.2)", + "type": "color", + "description": "Background of the cell inside an Accordion in the Table." + }, + "cell-selected": { + "value": "rgba({blue.500}, 0.1)", + "type": "color", + "description": "Background of the selected cell in the Table." + }, + "cell-selected-hover": { + "value": "rgba({blue.500}, 0.2)", + "type": "color", + "description": "Background of the hovered selected cell in the Table." + }, + "cell-selected-active": { + "value": "rgba({blue.500}, 0.3)", + "type": "color", + "description": "Background of the active selected cell in the Table." + }, + "cell-new": { + "value": "rgba({green.200}, 0.1)", + "type": "color", + "description": "Background of the cell with new information in the Table." + }, + "cell-new-hover": { + "value": "rgba({green.200}, 0.2)", + "type": "color", + "description": "Background of the hovered cell with new information in the Table." + }, + "cell-new-active": { + "value": "rgba({green.200}, 0.3)", + "type": "color", + "description": "Background of the active cell with new information in the Table." + }, + "cell-critical": { + "value": "rgba({red.500}, 0.1)", + "type": "color", + "description": "Background of the cell with critical information in the Table." + }, + "cell-critical-hover": { + "value": "rgba({red.500}, 0.2)", + "type": "color", + "description": "Background of the hovered cell with critical information in the Table." + }, + "cell-critical-active": { + "value": "rgba({red.500}, 0.3)", + "type": "color", + "description": "Background of the active cell with critical information in the Table." + }, + "cell-warning": { + "value": "rgba({orange.300}, 0.1)", + "type": "color", + "description": "Background of the cell with warning information in the Table." + }, + "cell-warning-hover": { + "value": "rgba({orange.300}, 0.2)", + "type": "color", + "description": "Background of the hovered cell with warning information in the Table." + }, + "cell-warning-active": { + "value": "rgba({orange.300}, 0.3)", + "type": "color", + "description": "Background of the active cell with warning information in the Table." + } + } + }, + "brand": { + "primary": { + "value": "{violet.300}", + "type": "color", + "description": "Primary brand color." + }, + "secondary": { + "value": "{green.200}", + "type": "color", + "description": "Secondary brand color." + }, + "pinterest": { + "value": "#bd081c", + "type": "color", + "description": "Pinterest brand color." + }, + "instagram": { + "value": "#e4405f", + "type": "color", + "description": "Instagram brand color." + }, + "youtube": { + "value": "#ff0000", + "type": "color", + "description": "Youtube brand color." + }, + "facebook": { + "value": "#1877f2", + "type": "color", + "description": "Facebook brand color." + }, + "linkedIn": { + "value": "#0a66c2", + "type": "color", + "description": "LinkedIn brand color." + }, + "twitter": { + "value": "#1d9bf0", + "type": "color", + "description": "Twitter brand color." + }, + "google-blue": { + "value": "#1a0dab", + "type": "color", + "description": "Google brand color for the link." + }, + "google-green": { + "value": "#016723", + "type": "color", + "description": "Google green brand color for the link." + }, + "google-my-business": { + "value": "#1a73e8", + "type": "color", + "description": "Google My Business brand color." + } + }, + "box-shadow": { + "card": { + "value": "0 0 0 1px rgba({border.primary}, 0.5)", + "type": "boxShadow", + "description": "Default shadow of the Card." + }, + "card-hover": { + "value": "3px 3px 30px 0px rgba({gray.800}, 0.15)", + "type": "boxShadow", + "description": "Hover state for the shadow of the Card with hover state." + }, + "dnd": { + "value": "0px 0px 1px 0px rgba({gray.800}, 0.16); 0px 12px 40px 0px rgba({gray.800}, 0.16)", + "type": "boxShadow", + "description": "Shadow for show that element are being drag-and-drop." + }, + "modal": { + "value": "0px 3px 8px 0px rgba({gray.800}, 0.2)", + "type": "boxShadow", + "description": "Default shadow if the Modal window." + }, + "popper": { + "value": "0px 1px 12px 0px rgba({gray.800}, 0.15)", + "type": "boxShadow", + "description": "Default shadow of all Poppers, Dropdowns and Tooltips." + }, + "float-control": { + "value": [ + { + "x": "0", + "y": "0", + "blur": "1", + "spread": "0", + "color": "rgba(0,0,0,0.16)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "1", + "blur": "2", + "spread": "0", + "color": "rgba(0,0,0,0.12)", + "type": "dropShadow" + } + ], + "type": "boxShadow", + "description": "Use it only for controls that float above the whole interface." + }, + "float-control-hover": { + "value": [ + { + "x": "0", + "y": "0", + "blur": "2", + "spread": "0", + "color": "rgba(0,0,0,0.2)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "1", + "blur": "4", + "spread": "0", + "color": "rgba(0,0,0,0.16)", + "type": "dropShadow" + } + ], + "type": "boxShadow", + "description": "Use it only for controls that float above the whole interface." + } + }, + "keyboard-focus": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.outline}, 0.5)", + "type": "boxShadow", + "description": "Default keyboard focus box-shadow styles.", + "outline": { + "value": "{blue.500}", + "type": "color", + "description": "Color for default keyboard focus outline styles." + }, + "invalid": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.invalid.outline}, 0.5)", + "type": "boxShadow", + "description": "Keyboard focus styles for elements with invalid state.", + "outline": { + "value": "{red.400}", + "type": "color", + "description": "Color for keyboard focus outline styles for elements with invalid state." + } + }, + "valid": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.valid.outline}, 0.5)", + "type": "boxShadow", + "description": "Keyboard focus styles for elements with valid state.", + "outline": { + "value": "{green.400}", + "type": "color", + "description": "Color for keyboard focus outline styles for elements with valid state." + } + }, + "invert": { + "value": "0px 0px 0px 3px {keyboard-focus.invert.outline}", + "type": "boxShadow", + "description": "Keyboard focus styles for use on dark backgrounds.", + "outline": { + "value": "rgba({gray.white}, 0.8)", + "type": "color", + "description": "Color for keyboard focus outline styles to use on the dark and color background." + } + } + }, + "base": { + "value": "Inter", + "type": "fontFamilies", + "description": "Base font family." + }, + "lh-800": { + "value": "117%", + "type": "lineHeights", + "description": "Use with font-size-800." + }, + "lh-700": { + "value": "110%", + "type": "lineHeights", + "description": "Use with font-size-700." + }, + "lh-600": { + "value": "125%", + "type": "lineHeights", + "description": "Use with font-size-600." + }, + "lh-500": { + "value": "117%", + "type": "lineHeights", + "description": "Use with font-size-500." + }, + "lh-400": { + "value": "120%", + "type": "lineHeights", + "description": "Use with font-size-400." + }, + "lh-300": { + "value": "150%", + "type": "lineHeights", + "description": "Use with font-size-300." + }, + "lh-200": { + "value": "142%", + "type": "lineHeights", + "description": "Use with font-size-200." + }, + "lh-100": { + "value": "133%", + "type": "lineHeights", + "description": "Use with font-size-100." + }, + "semi-bold": { + "value": "600", + "type": "fontWeights", + "description": "Semi-bold font weight." + }, + "bold": { + "value": "700", + "type": "fontWeights", + "description": "Bold font weight." + }, + "regular": { + "value": "400", + "type": "fontWeights", + "description": "Regular font weight." + }, + "medium": { + "value": "500", + "type": "fontWeights", + "description": "Medium font weight." + }, + "fs-50": { + "value": "10px", + "type": "fontSizes", + "description": "Use only for text in Badge component." + }, + "fs-100": { + "value": "12px", + "type": "fontSizes", + "description": "Use this font-size with caution for text in some additional messages. Always check its contrast and readability." + }, + "fs-200": { + "value": "14px", + "type": "fontSizes" + }, + "fs-300": { + "value": "16px", + "type": "fontSizes" + }, + "fs-400": { + "value": "20px", + "type": "fontSizes" + }, + "fs-500": { + "value": "24px", + "type": "fontSizes" + }, + "fs-600": { + "value": "32px", + "type": "fontSizes" + }, + "fs-700": { + "value": "36px", + "type": "fontSizes" + }, + "fs-800": { + "value": "48px", + "type": "fontSizes" + }, + "compact": { + "value": "0.3", + "type": "letterSpacing", + "description": "Compact letter spacing." + }, + "heading-h1": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-800}", + "fontSize": "{fs-800}" + }, + "type": "typography" + }, + "heading-h2": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-700}", + "fontSize": "{fs-700}" + }, + "type": "typography", + "description": "Landing headings" + }, + "heading-h3": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-600}", + "fontSize": "{fs-600}" + }, + "type": "typography", + "description": "Tool page main heading" + }, + "heading-h4": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-500}", + "fontSize": "{fs-500}" + }, + "type": "typography", + "description": "Tool page heading" + }, + "heading-h5": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-400}", + "fontSize": "{fs-400}" + }, + "type": "typography", + "description": "Widget heading" + }, + "heading-h6": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "lineHeight": "{lh-300}", + "fontSize": "{fs-300}" + }, + "type": "typography", + "description": "Widget, notice & dropdown heading" + }, + "subtitle": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{regular}", + "lineHeight": "{lh-400}", + "fontSize": "{fs-400}" + }, + "type": "typography", + "description": "Use for big subtitles on the landing pages." + }, + "scale-indent": { + "value": "4px", + "type": "spacing", + "description": "Base denominator of the design system." + }, + "form-control-s": { + "value": "{scale-indent}*5", + "type": "sizing", + "description": "Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions." + }, + "form-control-m": { + "value": "{scale-indent}*7", + "type": "sizing", + "description": "Default size of the controls." + }, + "form-control-l": { + "value": "{scale-indent}*10", + "type": "sizing", + "description": "Large size of the controls." + }, + "spacing-05x": { + "value": "{scale-indent}*0.5", + "type": "spacing", + "description": "2px" + }, + "spacing-1x": { + "value": "{scale-indent}*1", + "type": "spacing", + "description": "4px" + }, + "spacing-2x": { + "value": "{scale-indent}*2", + "type": "spacing", + "description": "8px" + }, + "spacing-3x": { + "value": "{scale-indent}*3", + "type": "spacing", + "description": "12px" + }, + "spacing-4x": { + "value": "{scale-indent}*4", + "type": "spacing", + "description": "16px" + }, + "spacing-5x": { + "value": "{scale-indent}*5", + "type": "spacing", + "description": "20px" + }, + "spacing-6x": { + "value": "{scale-indent}*6", + "type": "spacing", + "description": "24px" + }, + "spacing-8x": { + "value": "{scale-indent}*8", + "type": "spacing", + "description": "32px" + }, + "spacing-10x": { + "value": "{scale-indent}*10", + "type": "spacing", + "description": "40px" + }, + "spacing-14x": { + "value": "{scale-indent}*14", + "type": "spacing", + "description": "56px" + }, + "spacing-20x": { + "value": "{scale-indent}*20", + "type": "spacing", + "description": "80px" + }, + "spacing-24x": { + "value": "{scale-indent}*24", + "type": "spacing", + "description": "96px" + }, + "spacing-30x": { + "value": "{scale-indent}*30", + "type": "spacing", + "description": "120px" + }, + "rounded-extra-small": { + "value": "2px", + "type": "borderRadius" + }, + "rounded-small": { + "value": "4px", + "type": "borderRadius" + }, + "rounded-medium": { + "value": "6px", + "type": "borderRadius" + }, + "rounded-large": { + "value": "16px", + "type": "borderRadius" + }, + "rounded-extra-large": { + "value": "24px", + "type": "borderRadius" + }, + "addon-rounded": { + "value": "{rounded-small}", + "type": "borderRadius", + "description": "Use for rounding addons and small controls like Checkbox." + }, + "badge-rounded": { + "value": "{rounded-large}", + "type": "borderRadius", + "description": "Use for rounding Badge." + }, + "chart-rounded": { + "value": "{rounded-extra-small}", + "type": "borderRadius", + "description": "Use for rounding big and small charts like bar, histogram and others." + }, + "counter-rounded": { + "value": "{rounded-large}", + "type": "borderRadius", + "description": "Use for rounding Counter." + }, + "tag-rounded": { + "value": "{rounded-extra-large}", + "type": "borderRadius", + "description": "Use for rounding Tag." + }, + "switch-rounded": { + "value": "{rounded-extra-large}", + "type": "borderRadius", + "description": "Use for rounding Switch." + }, + "control-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc." + }, + "progress-bar-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding bars: ProgressBar, SliderBar, etc." + }, + "surface-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding surfaces like Card, blocks, widgets, Notice, etc." + }, + "popper-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding all kinds of poppers and dropdowns." + }, + "modal-rounded": { + "value": "{rounded-large}", + "type": "borderRadius", + "description": "Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard)." + }, + "disabled-opacity": { + "value": "0.5", + "type": "opacity", + "description": "Use for the disabled state of all kind of the controls and elements." + }, + "screen-extra-small": { + "value": "320px", + "type": "sizing", + "description": "Extra small screens (small phones)." + }, + "screen-small": { + "value": "768px", + "type": "sizing", + "description": "Small screens (phones and small tablets)." + }, + "screen-medium": { + "value": "1200px", + "type": "sizing", + "description": "Medium screens (tablets and small laptops)." + }, + "screen-large": { + "value": "1920px", + "type": "sizing", + "description": "Large screens (tablets and laptops)." + }, + "overlay": { + "primary": { + "value": "rgba({gray.800}, 0.7)", + "type": "color", + "description": "Use for cover the content under the modal dialogs." + }, + "secondary": { + "value": "rgba({gray.800}, 0.25)", + "type": "color", + "description": "Use for the secondary modal dialogs that were opened upon the other modal dialogs." + }, + "limitation-primary": { + "value": "rgba({gray.50}, 0.6)", + "type": "color", + "description": "Use as a primary cover of the content under the messages about limitations." + }, + "limitation-secondary": { + "value": "rgba({gray.white}, 0.85)", + "type": "color", + "description": "Use as a secondary cover of the content under the messages about limitations." + } + }, + "z-index": { + "deep": { + "value": "-999", + "type": "other" + }, + "overlay": { + "value": "500", + "type": "other" + }, + "modal": { + "value": "900", + "type": "other" + }, + "popper": { + "value": "700", + "type": "other" + }, + "dropdown": { + "value": "750", + "type": "other" + }, + "tooltip": { + "value": "800", + "type": "other" + }, + "notice-bubble": { + "value": "999", + "type": "other" + } + }, + "tooltip": { + "default": { + "value": "{gray.white}", + "type": "color", + "description": "Default Tooltip background." + }, + "warning": { + "value": "{red.100}", + "type": "color", + "description": "Warning Tooltip background." + }, + "invert": { + "value": "{gray.800}", + "type": "color", + "description": "Inverted version of the default Tooltip background." + } + }, + "neighbor-location": { + "neutral": { + "value": "#ffffff80", + "type": "color", + "description": "Neutral border of the components that are combined with neighbor-location property." + }, + "invert": { + "value": "#00000080", + "type": "color", + "description": "Inverted border of the components that are combined with neighbor-location property." + } + }, + "scroll-area": { + "shadow-left": { + "value": "linear-gradient(to right, rgba({gray.800}, 0.1) 20.55%, rgba({gray.white}, 0.0001) 100%)", + "type": "color", + "description": "Left-to-right fade shadow for the ScrollArea." + }, + "shadow-right": { + "value": "linear-gradient(to left, rgba({gray.800}, 0.1) 20.55%, rgba({gray.white}, 0.0001) 100%)", + "type": "color", + "description": "Right-to-left fade shadow for the ScrollArea." + }, + "shadow-top": { + "value": "linear-gradient(to bottom, rgba({gray.800}, 0.1) 20.55%, rgba({gray.white}, 0.0001) 100%)", + "type": "color", + "description": "Top-to-bottom fade shadow for the ScrollArea." + }, + "shadow-bottom": { + "value": "linear-gradient(to top, rgba({gray.800}, 0.1) 20.55%, rgba({gray.white}, 0.0001) 100%)", + "type": "color", + "description": "Bottom-to-top fade shadow for the ScrollArea." + }, + "dropdown-menu-left": { + "value": "linear-gradient(to right, rgba({gray.white}, 1) 34.38%, rgba({gray.white}, 0) 100%)", + "type": "color", + "description": "Left-to-right fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-right": { + "value": "linear-gradient(to left, rgba({gray.white}, 1) 34.38%, rgba({gray.white}, 0) 100%)", + "type": "color", + "description": "Right-to-left fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-bottom": { + "value": "linear-gradient(to top, rgba({gray.white}, 1) 34.38%, rgba({gray.white}, 0) 100%)", + "type": "color", + "description": "Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-top": { + "value": "linear-gradient(to bottom, rgba({gray.white}, 1) 34.38%, rgba({gray.white}, 0) 100%)", + "type": "color", + "description": "Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu." + } + }, + "scroll-bar": { + "background": { + "value": "rgba({gray.800}, 0.3)", + "type": "color", + "description": "Background color for ScrollBar." + } + }, + "tag": { + "primary": { + "gray-normal": { + "value": "#ecedf0", + "type": "color", + "description": "Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath." + }, + "gray-hover-active": { + "value": "#e3e4e9", + "type": "color", + "description": "Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath." + }, + "blue-normal": { + "value": "#d0eeff", + "type": "color", + "description": "Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath." + }, + "blue-hover-active": { + "value": "#b7e4ff", + "type": "color", + "description": "Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath." + }, + "green-normal": { + "value": "#cff1ea", + "type": "color", + "description": "Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath." + }, + "green-hover-active": { + "value": "#b7eae0", + "type": "color", + "description": "Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath." + }, + "orange-normal": { + "value": "#ffddd2", + "type": "color", + "description": "Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath." + }, + "orange-hover-active": { + "value": "#ffccbb", + "type": "color", + "description": "Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath." + }, + "red-normal": { + "value": "#ffcedc", + "type": "color", + "description": "Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath." + }, + "red-hover-active": { + "value": "#ffb6ca", + "type": "color", + "description": "Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath." + }, + "violet-normal": { + "value": "#f4e3ff", + "type": "color", + "description": "Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath." + }, + "violet-hover-active": { + "value": "#efd5ff", + "type": "color", + "description": "Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath." + }, + "yellow-normal": { + "value": "#fee6d1", + "type": "color", + "description": "Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath." + }, + "yellow-hover-active": { + "value": "#fedab9", + "type": "color", + "description": "Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath." + }, + "white-normal": { + "value": "rgba({gray.white}, 0.15)", + "type": "color", + "description": "Primary white tag." + }, + "white-hover-active": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Hover and active (selected) state of the primary white tag." + }, + "gray-text": { + "value": "{gray.500}", + "type": "color", + "description": "Gray text for the primary gray tag." + }, + "blue-text": { + "value": "{blue.500}", + "type": "color", + "description": "Blue text for the primary blue tag." + }, + "green-text": { + "value": "{green.500}", + "type": "color", + "description": "Green text for the primary green tag." + }, + "orange-text": { + "value": "{orange.500}", + "type": "color", + "description": "Orange text for the primary orange tag." + }, + "red-text": { + "value": "{red.500}", + "type": "color", + "description": "Red text for the primary red tag." + }, + "violet-text": { + "value": "{violet.500}", + "type": "color", + "description": "Violet text for the primary violet tag." + }, + "yellow-text": { + "value": "{yellow.500}", + "type": "color", + "description": "Yellow text for the primary yellow tag." + }, + "white-text": { + "value": "{gray.white}", + "type": "color", + "description": "White text for the primary white tag." + } + }, + "secondary": { + "normal": { + "value": "{gray.white}", + "type": "color", + "description": "Background color for the default secondary tag." + }, + "hover-active": { + "value": "{gray.50}", + "type": "color", + "description": "Hover and active (selected) states of the background color for the default secondary tag." + }, + "white-normal": { + "value": "rgba({gray.white}, 0)", + "type": "color", + "description": "White secondary tag." + }, + "white-hover-active": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Active state of the secondary white tag." + }, + "gray-text": { + "value": "{gray.500}", + "type": "color", + "description": "Gray text for the default secondary tag." + }, + "white-text": { + "value": "{gray.white}", + "type": "color", + "description": "White text for the secondary white tag." + } + } + }, + "chart": { + "palette-order": { + "1": { + "value": "{blue.500}", + "type": "color", + "description": "1 color in the default list of colors for charts." + }, + "2": { + "value": "{green.200}", + "type": "color", + "description": "2 color in the default list of colors for charts." + }, + "3": { + "value": "{violet.300}", + "type": "color", + "description": "3 color in the default list of colors for charts." + }, + "4": { + "value": "{red.300}", + "type": "color", + "description": "4 color in the default list of colors for charts." + }, + "5": { + "value": "{orange.400}", + "type": "color", + "description": "5 color in the default list of colors for charts." + }, + "6": { + "value": "{yellow.200}", + "type": "color", + "description": "6 color in the default list of colors for charts." + }, + "7": { + "value": "{salad.300}", + "type": "color", + "description": "7 color in the default list of colors for charts." + }, + "8": { + "value": "{pink.400}", + "type": "color", + "description": "8 color in the default list of colors for charts." + }, + "9": { + "value": "{blue.200}", + "type": "color", + "description": "9 color in the default list of colors for charts." + }, + "10": { + "value": "{green.300}", + "type": "color", + "description": "10 color in the default list of colors for charts." + }, + "11": { + "value": "{violet.200}", + "type": "color", + "description": "11 color in the default list of colors for charts." + }, + "12": { + "value": "{red.400}", + "type": "color", + "description": "12 color in the default list of colors for charts." + }, + "13": { + "value": "{orange.200}", + "type": "color", + "description": "13 color in the default list of colors for charts." + }, + "14": { + "value": "{yellow.400}", + "type": "color", + "description": "14 color in the default list of colors for charts." + }, + "15": { + "value": "{salad.400}", + "type": "color", + "description": "15 color in the default list of colors for charts." + }, + "16": { + "value": "{pink.200}", + "type": "color", + "description": "16 color in the default list of colors for charts." + }, + "17": { + "value": "{blue.300}", + "type": "color", + "description": "17 color in the default list of colors for charts." + }, + "18": { + "value": "{green.400}", + "type": "color", + "description": "18 color in the default list of colors for charts." + }, + "19": { + "value": "{violet.300}", + "type": "color", + "description": "19 color in the default list of colors for charts." + }, + "20": { + "value": "{red.200}", + "type": "color", + "description": "20 color in the default list of colors for charts." + }, + "21": { + "value": "{orange.300}", + "type": "color", + "description": "21 color in the default list of colors for charts." + }, + "22": { + "value": "{yellow.300}", + "type": "color", + "description": "22 color in the default list of colors for charts." + }, + "23": { + "value": "{salad.200}", + "type": "color", + "description": "23 color in the default list of colors for charts." + }, + "24": { + "value": "{pink.300}", + "type": "color", + "description": "24 color in the default list of colors for charts." + }, + "total-amount": { + "value": "{gray.400}", + "type": "color", + "description": "Use it to show total value." + }, + "other-data": { + "value": "{gray.200}", + "type": "color", + "description": "Use it to indicate voids, missing or some other data." + }, + "null": { + "value": "{gray.100}", + "type": "color", + "description": "Use it to show null value." + } + }, + "grid": { + "line": { + "value": "{border.secondary}", + "type": "color", + "description": "Default chart grid line." + }, + "x-axis": { + "value": "{border.primary}", + "type": "color", + "description": "X-axis line on the chart grid." + }, + "y-accent-hover-line": { + "value": "{gray.200}", + "type": "color", + "description": "Accent line for the hover state on the chart grid." + }, + "text-label": { + "value": "{gray.500}", + "type": "color", + "description": "Text label on the chart grid." + }, + "bar-chart-hover": { + "value": "rgba({gray.200}, 0.2)", + "type": "color", + "description": "Background color for the hover state of a bar on the chart grid." + }, + "bar-chart-base-bg": { + "value": "{gray.50}", + "type": "color", + "description": "Default background color of a bar in the BarChart." + }, + "period-bg": { + "value": "rgba({gray.200}, 0.2)", + "type": "color", + "description": "Use for highlighting a period on the chart grid." + }, + "period-pattern": { + "value": "rgba({gray.800}, 0.15)", + "type": "color", + "description": "Stripe color for diagonal pattern background." + }, + "border": { + "value": "{gray.white}", + "type": "color", + "description": "Border for distinguishing data sets and chart dots on the chart grid." + } + }, + "x-axis-accent": { + "period-active": { + "value": "{gray.300}", + "type": "color", + "description": "Background color for the clickable date on the X-axis of the chart grid." + }, + "data-start-tracking": { + "value": "rgba({green.300}, 0.2)", + "type": "color", + "description": "Background color for the \"Start tracking\" date on the X-axis of the chart grid." + } + }, + "axis-label": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "fontSize": "{fs-100}" + }, + "type": "typography" + }, + "axis-label-bold": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "fontSize": "{fs-100}" + }, + "type": "typography" + } + }, + "header": { + "bg": { + "value": "{bg.secondary.neutral}", + "type": "color" + }, + "border": { + "primary": { + "value": "{border.primary}", + "type": "color" + }, + "secondary": { + "value": "{border.secondary}", + "type": "color" + } + } + }, + "sidebar-nav": { + "control-hover": { + "value": "rgba({gray.100}, 0.3)", + "type": "color" + }, + "control-active": { + "value": "{gray.100}", + "type": "color" + }, + "control": { + "text": { + "normal": { + "value": "{text.secondary}", + "type": "color" + }, + "active": { + "value": "{text.primary}", + "type": "color" + } + }, + "icon": { + "normal": { + "value": "{icon.secondary.neutral}", + "type": "color" + }, + "active": { + "value": "{icon.primary.neutral}", + "type": "color" + } + } + } + }, + "duration": { + "extra-slow": { + "value": "500", + "type": "other", + "description": "Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen)" + }, + "slow": { + "value": "400", + "type": "other", + "description": "Should be used for more larger scale animations (such as page transitions)" + }, + "medium": { + "value": "300", + "type": "other", + "description": "Should be used for more complex effects (such as Modal)" + }, + "fast": { + "value": "200", + "type": "other", + "description": "Should be used for more complex effects (such as Dropdown or Accordion)" + }, + "extra-fast": { + "value": "100", + "type": "other", + "description": "Should be used for simpler effects and relatively small-sized animations (such as fades or color changes)" + }, + "switch": { + "value": "{duration.extra-fast}", + "type": "other", + "description": "Use for small controls like Switch or Slider." + }, + "popper": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for components based on popper like Tooltip, Dropdown or Filter trigger." + }, + "control": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for small controls like Checkbox or Radio." + }, + "modal": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Modal, Fullscreen Modal, Side panel or other kind of windows." + }, + "accordion": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Accordion." + }, + "counter": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Summary or Counter." + } + } + }, + "featureHighlight": { + "bg": { + "primary": { + "feature-highlight": { + "value": "{gray.white}", + "type": "color", + "description": "Primary background for highlighted controls." + }, + "feature-highlight-hover-active": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Primary background for hover and active (selected) state of highlighted controls." + } + }, + "secondary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Secondary background for the highlighted message." + } + } + }, + "border": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.300}, {blue.300})", + "type": "color", + "description": "Primary border for highlighted controls." + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Primary border for the active state of highlighted controls." + }, + "feature-highlight-secondary": { + "value": "linear-gradient(90deg, {violet.200}, {blue.200})", + "type": "color", + "description": "Secondary border for highlighted controls." + } + }, + "control": { + "primary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Background of the highlighted primary control." + }, + "feature-highlight-hover": { + "value": "linear-gradient(90deg, {violet.500}, {blue.500})", + "type": "color", + "description": "Hover state of the highlighted primary control." + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.600}, {blue.600})", + "type": "color", + "description": "Active (selected) state of the highlighted primary control." + } + }, + "secondary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Background of the highlighted secondary control." + }, + "feature-highlight-hover": { + "value": "linear-gradient(90deg, {violet.100}, {blue.100})", + "type": "color", + "description": "Hover state of the highlighted secondary control.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.3", + "space": "hsl" + } + } + } + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.100}, {blue.100})", + "type": "color", + "description": "Active (selected) state of the highlighted secondary control." + } + } + }, + "text": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.500}, {blue.500})", + "type": "color", + "description": "Text for highlighted features." + }, + "feature-highlight-hover-active": { + "value": "linear-gradient(90deg, {violet.700}, {blue.700})", + "type": "color", + "description": "Text for hover and active states of highlighted features." + } + }, + "icon": { + "primary": { + "feature-highlight": { + "value": "{violet.500}", + "type": "color", + "description": "Primary highlighted icon." + }, + "feature-highlight-hover-active": { + "value": "#6B3AB4", + "type": "color", + "description": "Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color." + } + } + }, + "keyboard-focus-feature-highlight": { + "value": { + "width": "3px", + "color": "{keyboard-focus-feature-highlight.outline}" + }, + "type": "border", + "description": "Keyboard focus styles for highlighted controls.", + "outline": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Color for keyboard focus outline styles for highlighted controls." + } + } + } + } + \ No newline at end of file diff --git a/semcore/core/src/theme/light.json b/semcore/core/src/theme/light.json index 0878488d7b..d290a5011f 100644 --- a/semcore/core/src/theme/light.json +++ b/semcore/core/src/theme/light.json @@ -634,7 +634,7 @@ "description": "Inverted version of the primary text." }, "secondary-invert": { - "value": "{gray.white}, 0.8", + "value": "rgba({gray.white}, 0.8)", "type": "color", "description": "Inverted version of the secondary text." }, @@ -2200,12 +2200,12 @@ "description": "Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath." }, "white-normal": { - "value": "{gray.white}, 0.15", + "value": "rgba({gray.white}, 0.15)", "type": "color", "description": "Primary white tag." }, "white-hover-active": { - "value": "{gray.white}, 0.3", + "value": "rgba({gray.white}, 0.3)", "type": "color", "description": "Hover and active (selected) state of the primary white tag." }, diff --git a/semcore/core/src/theme/lime-green.json b/semcore/core/src/theme/lime-green.json new file mode 100644 index 0000000000..b16b925827 --- /dev/null +++ b/semcore/core/src/theme/lime-green.json @@ -0,0 +1,2731 @@ +{ + "base": { + "gray": { + "50": { + "value": "#f7f8f9", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#eaeff1", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#d5dfe2", + "type": "color" + }, + "300": { + "value": "#b0c4c9", + "type": "color" + }, + "400": { + "value": "#85a2ab", + "type": "color" + }, + "500": { + "value": "#668791", + "type": "color" + }, + "600": { + "value": "#516e78", + "type": "color" + }, + "700": { + "value": "#425a62", + "type": "color" + }, + "800": { + "value": "#1e262a", + "type": "color" + }, + "white": { + "value": "#ffffff", + "type": "color" + } + }, + "blue": { + "50": { + "value": "#eaf0ff", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#bdd1ff", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#9dbaff", + "type": "color" + }, + "300": { + "value": "#709bff", + "type": "color" + }, + "400": { + "value": "#5487ff", + "type": "color" + }, + "500": { + "value": "#2969ff", + "type": "color" + }, + "600": { + "value": "#2560e8", + "type": "color" + }, + "700": { + "value": "#1d4bb5", + "type": "color" + }, + "800": { + "value": "#173a8c", + "type": "color" + } + }, + "green": { + "50": { + "value": "#ECF9EF", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#C4FFBA", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#A9E2B4", + "type": "color" + }, + "300": { + "value": "#89FF75", + "type": "color" + }, + "400": { + "value": "#69CD7D", + "type": "color" + }, + "500": { + "value": "#44C15D", + "type": "color" + }, + "600": { + "value": "#3EB055", + "type": "color" + }, + "700": { + "value": "#308942", + "type": "color" + }, + "800": { + "value": "#256A33", + "type": "color" + } + }, + "red": { + "50": { + "value": "#ffeaea", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#ffbdbd", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#ff9d9d", + "type": "color" + }, + "300": { + "value": "#FF5454", + "type": "color" + }, + "400": { + "value": "#ff5454", + "type": "color" + }, + "500": { + "value": "#E82525", + "type": "color" + }, + "600": { + "value": "#e82525", + "type": "color" + }, + "700": { + "value": "#b51d1d", + "type": "color" + }, + "800": { + "value": "#8c1717", + "type": "color" + } + }, + "orange": { + "50": { + "value": "#fff1ec", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#ffd3c3", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#ffbda5", + "type": "color" + }, + "300": { + "value": "#ff9f7c", + "type": "color" + }, + "400": { + "value": "#ff8d63", + "type": "color" + }, + "500": { + "value": "#ff703c", + "type": "color" + }, + "600": { + "value": "#e86637", + "type": "color" + }, + "700": { + "value": "#b5502b", + "type": "color" + }, + "800": { + "value": "#8c3e21", + "type": "color" + } + }, + "yellow": { + "50": { + "value": "#fff8ea", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#FFE09D", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#ffe09d", + "type": "color" + }, + "300": { + "value": "#FFC954", + "type": "color" + }, + "400": { + "value": "#ffc954", + "type": "color" + }, + "500": { + "value": "#E89325", + "type": "color" + }, + "600": { + "value": "#e8aa25", + "type": "color" + }, + "700": { + "value": "#b5851d", + "type": "color" + }, + "800": { + "value": "#8c6717", + "type": "color" + } + }, + "violet": { + "50": { + "value": "#f3eaff", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#dabdff", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#c99dff", + "type": "color" + }, + "300": { + "value": "#b070ff", + "type": "color" + }, + "400": { + "value": "#a155ff", + "type": "color" + }, + "500": { + "value": "#892aff", + "type": "color" + }, + "600": { + "value": "#7d26e8", + "type": "color" + }, + "700": { + "value": "#611eb5", + "type": "color" + }, + "800": { + "value": "#4b178c", + "type": "color" + }, + "dusty": { + "50": { + "value": "#f5f4ff", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#e2ddff", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#bcb1e9", + "type": "color" + }, + "300": { + "value": "#a79cd6", + "type": "color" + }, + "400": { + "value": "#9083c5", + "type": "color" + }, + "500": { + "value": "#6d619f", + "type": "color" + }, + "600": { + "value": "#4d407e", + "type": "color" + }, + "700": { + "value": "#382e5e", + "type": "color" + }, + "800": { + "value": "#1d113e", + "type": "color" + } + } + }, + "pink": { + "50": { + "value": "#fff0ff", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#ffd3ff", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#ffa9fa", + "type": "color" + }, + "300": { + "value": "#ff87eb", + "type": "color" + }, + "400": { + "value": "#e14adf", + "type": "color" + }, + "500": { + "value": "#b229b9", + "type": "color" + }, + "600": { + "value": "#7d0480", + "type": "color" + }, + "700": { + "value": "#4d0050", + "type": "color" + }, + "800": { + "value": "#340439", + "type": "color" + } + }, + "salad": { + "50": { + "value": "#e8fef9", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#b7faeb", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#95f8e2", + "type": "color" + }, + "300": { + "value": "#64f5d4", + "type": "color" + }, + "400": { + "value": "#46f3cc", + "type": "color" + }, + "500": { + "value": "#18f0bf", + "type": "color" + }, + "600": { + "value": "#16daae", + "type": "color" + }, + "700": { + "value": "#11aa88", + "type": "color" + }, + "800": { + "value": "#0d8469", + "type": "color" + } + } + }, + "tokens": { + "bg": { + "primary": { + "neutral": { + "value": "{gray.white}", + "type": "color", + "description": "Primary background of the interface which contains the main data and information." + }, + "neutral-hover": { + "value": "{gray.50}", + "type": "color", + "description": "Hover state of the primary background of the interface which contains the main data and information." + }, + "neutral-active": { + "value": "{gray.100}", + "type": "color", + "description": "Active (selected) state of the primary background of the interface which contains the main data and information." + }, + "info": { + "value": "{blue.400}", + "type": "color", + "description": "Accent background of the message with regular information." + }, + "success": { + "value": "{green.400}", + "type": "color", + "description": "Accent background of the message or banner with information about the successful result." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Accent background of a message or a banner with a critical information." + }, + "warning": { + "value": "{orange.400}", + "type": "color", + "description": "Accent background of a message or a banner with a warning information." + }, + "highlight": { + "value": "{yellow.100}", + "type": "color", + "description": "Accent background of the information you want to highlight." + }, + "advertising": { + "value": "{violet.700}", + "type": "color", + "description": "Accent background for the advertising banners and controls." + }, + "muted": { + "value": "{gray.500}", + "type": "color", + "description": "Accented muted background for a message with regular information." + }, + "invert": { + "value": "{gray.800}", + "type": "color", + "description": "Inverted version of the primary background of the interface that contains the main data and information." + }, + "invert-hover": { + "value": "{gray.700}", + "type": "color", + "description": "Hover state for the inverted version of the primary background of the interface that contains the main data and information." + }, + "invert-active": { + "value": "{gray.600}", + "type": "color", + "description": "Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information." + } + }, + "secondary": { + "neutral": { + "value": "{gray.50}", + "type": "color", + "description": "Secondary background of the interface which contains the main data and information." + }, + "neutral-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Hover state of the secondary background of the interface which contains the main data and information." + }, + "neutral-active": { + "value": "{gray.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the interface which contains the main data and information." + }, + "info": { + "value": "{blue.50}", + "type": "color", + "description": "Secondary background of a message with regular information." + }, + "info-hover": { + "value": "{blue.100}", + "type": "color", + "description": "Hover state of the secondary background of a message with regular information." + }, + "info-active": { + "value": "{blue.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of a message with regular information." + }, + "success": { + "value": "{green.50}", + "type": "color", + "description": "Secondary background of the message with success information you want to accent." + }, + "success-hover": { + "value": "{green.100}", + "type": "color", + "description": "Hover state of the secondary background of the message with success information you want to accent." + }, + "success-active": { + "value": "{green.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with success information you want to accent." + }, + "critical": { + "value": "{red.50}", + "type": "color", + "description": "Secondary background of the message with critical information you want to accent." + }, + "critical-hover": { + "value": "{red.100}", + "type": "color", + "description": "Hover state of the secondary background of the message with critical information you want to accent." + }, + "critical-active": { + "value": "{red.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with critical information you want to accent." + }, + "warning": { + "value": "{orange.50}", + "type": "color", + "description": "Secondary background of the message with warning information you want to accent." + }, + "warning-hover": { + "value": "{orange.100}", + "type": "color", + "description": "Hover state of the secondary background of the message with warning information you want to accent." + }, + "warning-active": { + "value": "{orange.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with critical information you want to accent." + }, + "highlight": { + "value": "{yellow.50}", + "type": "color", + "description": "Secondary background of the information you want to highlight." + }, + "highlight-hover": { + "value": "{yellow.100}", + "type": "color", + "description": "Hover state of the secondary background of the information you want to highlight." + }, + "highlight-active": { + "value": "{yellow.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the information you want to highlight." + }, + "advertising": { + "value": "{violet.50}", + "type": "color", + "description": "Secondary background for the advertising message you want to accent." + }, + "advertising-hover": { + "value": "{violet.100}", + "type": "color", + "description": "Hover state of the secondary background for the advertising message you want to accent." + }, + "advertising-active": { + "value": "{violet.200}", + "type": "color", + "description": "Active (selected) state of the secondary background for the advertising message you want to accent." + } + }, + "highlight-results": { + "value": "rgba({yellow.300}, 0.4)", + "type": "color", + "description": "Highlighting the search results." + }, + "highlight-focus": { + "value": "rgba({blue.400}, 0.2)", + "type": "color", + "description": "Focusing values in the input." + } + }, + "text": { + "primary": { + "value": "{gray.800}", + "type": "color", + "description": "Primary text." + }, + "secondary": { + "value": "{gray.500}", + "type": "color", + "description": "Secondary text." + }, + "placeholder": { + "value": "{gray.400}", + "type": "color", + "description": "Placeholder text only." + }, + "success": { + "value": "{green.500}", + "type": "color", + "description": "Text associated with success states and data." + }, + "success-hover-active": { + "value": "{green.600}", + "type": "color", + "description": "Hover and active states for the text associated with success states and data." + }, + "critical": { + "value": "{red.500}", + "type": "color", + "description": "Text associated with critical states and data." + }, + "critical-hover-active": { + "value": "{red.600}", + "type": "color", + "description": "Hover and active states for the text associated with critical states and data." + }, + "primary-invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the primary text." + }, + "secondary-invert": { + "value": "rgba({gray.white}, 0.8)", + "type": "color", + "description": "Inverted version of the secondary text." + }, + "link": { + "value": "{blue.500}", + "type": "color", + "description": "Link text." + }, + "link-hover-active": { + "value": "{blue.600}", + "type": "color", + "description": "Hover and active states for the link text." + }, + "link-invert": { + "value": "{blue.200}", + "type": "color", + "description": "Inverted version of the link text. Use on dark background only." + }, + "link-invert-hover": { + "value": "{blue.300}", + "type": "color", + "description": "Hover and active states of the inverted version of the link text. Use on dark background only." + }, + "link-visited": { + "value": "{violet.500}", + "type": "color", + "description": "Visited link text." + }, + "hint": { + "value": "{gray.500}", + "type": "color", + "description": "Hint link text." + }, + "hint-hover-active": { + "value": "{gray.600}", + "type": "color", + "description": "Hover and active states of the hint link text." + }, + "hint-invert": { + "value": "{gray.200}", + "type": "color", + "description": "Inverted version of the hint link text." + }, + "hint-invert-hover-active": { + "value": "{gray.300}", + "type": "color", + "description": "Hover and active states of the inverted version of the hint link text." + }, + "large-secondary": { + "value": "{gray.300}", + "type": "color", + "description": "Secondary text. Use with font-size ≥20px." + }, + "large-info": { + "value": "{blue.400}", + "type": "color", + "description": "Link text with font-size ≥20px." + }, + "large-info-hover-active": { + "value": "{blue.500}", + "type": "color", + "description": "Hover and active states of the link text with font-size ≥20px." + }, + "large-success": { + "value": "{green.400}", + "type": "color", + "description": "Text with font-size ≥20px associated with success states and data." + }, + "large-success-hover-active": { + "value": "{green.500}", + "type": "color", + "description": "Hover and active states of the text with font-size ≥20px associated with success states and data." + }, + "large-critical": { + "value": "{red.400}", + "type": "color", + "description": "Text with font-size ≥20px associated with critical states and data." + }, + "large-critical-hover-active": { + "value": "{red.500}", + "type": "color", + "description": "Hover and active states of the text with font-size ≥20px associated with critical states and data." + }, + "advertising": { + "value": "{violet.700}", + "type": "color", + "description": "Advertising text." + } + }, + "border": { + "primary": { + "value": "{gray.200}", + "type": "color", + "description": "Neutral primary border." + }, + "secondary": { + "value": "{gray.100}", + "type": "color", + "description": "Subtle secondary border." + }, + "info": { + "value": "{blue.200}", + "type": "color", + "description": "Subtle secondary border in the informational message." + }, + "info-active": { + "value": "{gray.800}", + "type": "color", + "description": "Active border in focused input filed." + }, + "success": { + "value": "{green.200}", + "type": "color", + "description": "Subtle secondary border in the successful message and input field." + }, + "success-active": { + "value": "{green.500}", + "type": "color", + "description": "Active border in the focused input field with valid state." + }, + "critical": { + "value": "{red.200}", + "type": "color", + "description": "Subtle secondary border in the critical message and invalid input field." + }, + "critical-active": { + "value": "{red.500}", + "type": "color", + "description": "Active border in the focused input field with invalid state, and active state of the other components with invalid state." + }, + "warning": { + "value": "{orange.200}", + "type": "color", + "description": "Subtle secondary border in the warning message." + }, + "warning-active": { + "value": "{orange.500}", + "type": "color", + "description": "Active border in components with warning intention." + }, + "primary-invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the neutral primary border. Use it for borders on the dark or color background." + }, + "secondary-invert": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background." + }, + "tooltip-invert": { + "value": "{gray.500}", + "type": "color", + "description": "Border of the Tooltip with dark theme." + }, + "table-accent": { + "value": "{gray.300}", + "type": "color", + "description": "Accent borders in the Table: for the accordion in the table and for the header of the secondary table." + }, + "date-picker-range-comparison": { + "value": "{violet.500}", + "type": "color", + "description": "Border color of the second period for the comparison mode in the DatePicker." + }, + "critical-pattern": { + "value": "repeating-linear-gradient(315deg, rgba($border.critical-active, 1) 0, rgba($border.critical-active, 1) 2px, transparent 0, transparent 50%)", + "type": "color", + "description": "Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states." + } + }, + "control": { + "switch-bg": { + "value": "{gray.300}", + "type": "color", + "description": "Subtle background of the Switch control." + }, + "primary": { + "info": { + "value": "{gray.800}", + "type": "color", + "description": "Background of the regular primary control." + }, + "info-hover": { + "value": "{gray.800}", + "type": "color", + "description": "Hover state of the regular primary control." + }, + "info-active": { + "value": "{gray.800}", + "type": "color", + "description": "Active (selected) state of the regular primary control." + }, + "success": { + "value": "{green.400}", + "type": "color", + "description": "Background of the primary control with successful theme." + }, + "success-hover": { + "value": "{green.500}", + "type": "color", + "description": "Hover state of the primary control with successful theme." + }, + "success-active": { + "value": "{green.600}", + "type": "color", + "description": "Active (selected) state of the primary control with successful theme." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Background of the primary control with danger theme." + }, + "critical-hover": { + "value": "{red.500}", + "type": "color", + "description": "Hover state of the primary control with danger theme." + }, + "critical-active": { + "value": "{red.600}", + "type": "color", + "description": "Active (selected) state of the primary control with danger theme." + }, + "brand": { + "value": "{orange.400}", + "type": "color", + "description": "Background of the primary brand colored control." + }, + "brand-hover": { + "value": "{orange.500}", + "type": "color", + "description": "Hover state of the primary brand colored control." + }, + "brand-active": { + "value": "{orange.600}", + "type": "color", + "description": "Active state of the primary brand colored control." + }, + "advertising": { + "value": "{violet.600}", + "type": "color", + "description": "Background of the advertising primary control." + }, + "advertising-hover": { + "value": "{violet.700}", + "type": "color", + "description": "Hover state of the advertising primary control." + }, + "advertising-active": { + "value": "{violet.500}", + "type": "color", + "description": "Active (selected) state of the advertising primary control." + }, + "invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted background of the primary control." + }, + "invert-hover": { + "value": "{gray.50}", + "type": "color", + "description": "Hover state of the inverted primary control." + }, + "invert-active": { + "value": "{gray.100}", + "type": "color", + "description": "Active (selected) state of the inverted primary control." + } + }, + "secondary": { + "neutral": { + "value": "rgba({gray.400}, 0.1)", + "type": "color", + "description": "Background of the regular secondary control." + }, + "neutral-hover": { + "value": "rgba({gray.400}, 0.2)", + "type": "color", + "description": "Hover state of the regular secondary control." + }, + "neutral-active": { + "value": "rgba({gray.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the regular secondary control." + }, + "info": { + "value": "rgba({blue.400}, 0.1)", + "type": "color", + "description": "Background of the accent secondary control." + }, + "info-hover": { + "value": "rgba({blue.400}, 0.2)", + "type": "color", + "description": "Hover state of the accent secondary control." + }, + "info-active": { + "value": "rgba({blue.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the accent secondary control." + }, + "invert": { + "value": "rgba({gray.white}, 0.05)", + "type": "color", + "description": "Background of the inverted version of the secondary control." + }, + "invert-hover": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Hover state of the inverted version of the secondary control." + }, + "invert-active": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Active (selected) state of the inverted version of the secondary control." + } + }, + "tertiary": { + "neutral": { + "value": "rgba({gray.400}, 0)", + "type": "color", + "description": "Background of the regular tertiary control." + }, + "neutral-hover": { + "value": "rgba({gray.400}, 0.2)", + "type": "color", + "description": "Hover state of the regular tertiary control." + }, + "neutral-active": { + "value": "rgba({gray.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the regular tertiary control." + }, + "info": { + "value": "rgba({blue.400}, 0)", + "type": "color", + "description": "Background of the accent and link-lookalike tertiary control." + }, + "info-hover": { + "value": "rgba({blue.400}, 0.2)", + "type": "color", + "description": "Hover state of the accent and link-lookalike tertiary control." + }, + "info-active": { + "value": "rgba({blue.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the accent and link-lookalike tertiary control." + }, + "invert": { + "value": "rgba({gray.white}, 0)", + "type": "color", + "description": "Background of the inverted version of the tertiary control." + }, + "invert-hover": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Hover state of the inverted version of the tertiary control." + }, + "invert-active": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Active (selected) state of the inverted version of the tertiary control." + } + } + }, + "icon": { + "primary": { + "neutral": { + "value": "{gray.500}", + "type": "color", + "description": "Primary neutral icon." + }, + "neutral-hover-active": { + "value": "#565861", + "type": "color", + "description": "Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color." + }, + "info": { + "value": "{blue.500}", + "type": "color", + "description": "Primary link-lookalike icon." + }, + "info-hover-active": { + "value": "#0358a1", + "type": "color", + "description": "Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color." + }, + "success": { + "value": "{green.400}", + "type": "color", + "description": "Primary success icon." + }, + "success-hover-active": { + "value": "#037e68", + "type": "color", + "description": "Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Primary critical icon." + }, + "critical-hover-active": { + "value": "#cc3a42", + "type": "color", + "description": "Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color." + }, + "warning": { + "value": "{orange.400}", + "type": "color", + "description": "Primary warning icon." + }, + "warning-hover-active": { + "value": "#cc5024", + "type": "color", + "description": "Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color." + }, + "invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the primary icon." + }, + "invert-hover-active": { + "value": "{gray.100}", + "type": "color", + "description": "Hover and active (selected) states of the inverted version of the primary icon." + } + }, + "secondary": { + "neutral": { + "value": "{gray.300}", + "type": "color", + "description": "Secondary neutral icon." + }, + "neutral-hover-active": { + "value": "#878992", + "type": "color", + "description": "Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color." + }, + "info": { + "value": "{blue.300}", + "type": "color", + "description": "Secondary link-lookalike icon." + }, + "info-hover-active": { + "value": "#2290cc", + "type": "color", + "description": "Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color." + }, + "success": { + "value": "{green.300}", + "type": "color", + "description": "Secondary success icon." + }, + "success-hover-active": { + "value": "#049b75", + "type": "color", + "description": "Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color." + }, + "critical": { + "value": "{red.300}", + "type": "color", + "description": "Secondary critical icon." + }, + "critical-hover-active": { + "value": "#cc6c6b", + "type": "color", + "description": "Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color." + }, + "warning": { + "value": "{orange.300}", + "type": "color", + "description": "Secondary warning icon." + }, + "warning-hover-active": { + "value": "#cc7036", + "type": "color", + "description": "Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color." + } + }, + "non-interactive": { + "value": "{gray.800}", + "type": "color", + "description": "Color for the default non-interactive icon." + } + }, + "illustration": { + "red": { + "value": "#ff788f", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "orange": { + "value": "#ff9400", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "yellow": { + "value": "#ffe84d", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "salad": { + "value": "#c7fa73", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "green": { + "value": "#45e0a8", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "blue": { + "value": "#6edbff", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "violet": { + "value": "#b880ff", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "pink": { + "value": "#ff7ad1", + "type": "color", + "description": "⚠️ Use only for illustrations." + } + }, + "date-picker": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Default date-picker cell background." + }, + "cell-current": { + "value": "{gray.400}", + "type": "color", + "description": "Color for marking the cell with the current date, month or year in the date-picker." + }, + "cell-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Hover state of the default date-picker cell background." + }, + "cell-range": { + "value": "{blue.100}", + "type": "color", + "description": "Background for the cell which is included in the date range in the date-picker." + }, + "cell-range-hover": { + "value": "{blue.200}", + "type": "color", + "description": "Hover state of the background for the cell which is included in the date range in the date-picker." + }, + "cell-active": { + "value": "{blue.300}", + "type": "color", + "description": "Active (selected) date-picker cell background." + }, + "cell-active-hover": { + "value": "{blue.400}", + "type": "color", + "description": "Hover for the active (selected) date-picker cell background." + }, + "cell-current-invert": { + "value": "rgba({gray.white}, 0.5)", + "type": "color", + "description": "Color for marking the active cell with the current date, month or year in the date-picker." + }, + "cell-comparison-active": { + "value": "{violet.500}", + "type": "color", + "description": "Active (selected) date-picker cell background for comparison periods." + }, + "cell-comparison-active-hover": { + "value": "{violet.600}", + "type": "color", + "description": "Hover for the active (selected) date-picker cell background for comparison periods." + } + }, + "dropdown-menu": { + "item": { + "value": "{gray.white}", + "type": "color", + "description": "Default background color for the list item in the dropdown-menu." + }, + "item-hover": { + "value": "{gray.50}", + "type": "color", + "description": "Hover state of the default background color for the list item in the dropdown-menu." + }, + "item-selected": { + "value": "rgba({blue.100}, 0.7)", + "type": "color", + "description": "Active (selected) state of the default background color for the list item in the dropdown-menu." + }, + "item-selected-hover": { + "value": "{blue.100}", + "type": "color", + "description": "Hover state for the selected state of the default background color for the list item in the dropdown-menu." + } + }, + "feature-popover": { + "bg": { + "value": "{bg.primary.highlight}", + "type": "color", + "description": "Color of the FeaturePopover background with accent theme." + }, + "dot-outer-border": { + "value": "{feature-popover.bg}", + "type": "color", + "description": "Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme." + }, + "bg-neutral": { + "value": "{violet.dusty.800}", + "type": "color", + "description": "Color of the FeaturePopover background with neutral theme." + }, + "dot-neutral": { + "value": "{green.300}", + "type": "color", + "description": "Color of the FeaturePopover.Spot for FeaturePopover with neutral theme." + }, + "dot-neutral-outer-border": { + "value": "{feature-popover.dot-neutral}", + "type": "color", + "description": "Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme." + } + }, + "progress-bar": { + "bg": { + "value": "{gray.100}", + "type": "color", + "description": "Background color of the ProgressBar." + }, + "bg-hover": { + "value": "{gray.200}", + "type": "color", + "description": "Hover state of the background color of the ProgressBar." + }, + "bg-invert": { + "value": "rgba({gray.white}, 0.2)", + "type": "color", + "description": "Inverted version of the background color of the ProgressBar." + }, + "bg-invert-hover": { + "value": "rgba({gray.white}, 0.4)", + "type": "color", + "description": "Hover state for the inverted version of the background color of the ProgressBar." + }, + "value": { + "value": "{green.400}", + "type": "color", + "description": "Value color of the ProgressBar." + }, + "value-gradient": { + "value": "linear-gradient(-45deg, rgba(68, 193, 93, 0.9) 25%, rgba(68, 193, 93, 1) 0%, rgba(68, 193, 93, 1) 50%, rgba(68, 193, 93, 0.9) 0%, rgba(68, 193, 93, 0.9) 75%, rgba(68, 193, 93, 1) 0%)", + "type": "color", + "description": "Value with gradient for the ProgressBar." + }, + "pattern-gradient": { + "value": "linear-gradient(-45deg, rgba(234, 239, 241, 0.9) 25%, rgba(234, 239, 241, 1) 0%, rgba(234, 239, 241, 1) 50%, rgba(234, 239, 241, 0.9) 0%, rgba(234, 239, 241, 0.9) 75%, rgba(234, 239, 241, 1) 0%)", + "type": "color", + "description": "Null value gradient for the ProgressBar." + }, + "value-bg": { + "value": "#000000", + "type": "color", + "description": "Base value background for the ProgressBar. It is used to create gradients for the values." + } + }, + "skeleton": { + "bg": { + "value": "rgba({gray.100}, 0.8)", + "type": "color", + "description": "Default color for the Skeleton." + }, + "bg-invert": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Inverted version of the default color for the Skeleton." + } + }, + "slider-rating": { + "normal": { + "value": "{icon.secondary.neutral}", + "type": "color", + "description": "Icon color for the SliderRating component in its normal state." + }, + "hover-active": { + "value": "{yellow.200}", + "type": "color", + "description": "Icon color for the SliderRating component in its hovered and active states." + } + }, + "table": { + "th": { + "primary": { + "cell": { + "value": "{gray.50}", + "type": "color", + "description": "Background of the header cell in the primary Table." + }, + "cell-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the hovered header cell in the primary Table." + }, + "cell-active": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the active header cell in the primary Table." + } + }, + "secondary": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Background of the header cell in the secondary Table." + } + }, + "gradient": { + "value": "linear-gradient(to right, rgba($gray.100, 0) 0%, rgba($gray.100, 1) 100%)", + "type": "color", + "description": "Background gradient for sorting icon that absolute positioned in the table head." + } + }, + "td": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Background of the default cell in the Table." + }, + "cell-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the default hovered cell in the Table.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.5", + "space": "hsl" + } + } + } + }, + "cell-active": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the default active cell in the Table.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.2", + "space": "hsl" + } + } + } + }, + "cell-unread": { + "value": "{gray.50}", + "type": "color", + "description": "Background of the unread cell in the Table." + }, + "cell-accordion": { + "value": "{gray.50}", + "type": "color", + "description": "Background of the cell inside an Accordion in the Table." + }, + "cell-selected": { + "value": "{blue.50}", + "type": "color", + "description": "Background of the selected cell in the Table." + }, + "cell-selected-hover": { + "value": "{blue.100}", + "type": "color", + "description": "Background of the hovered selected cell in the Table." + }, + "cell-selected-active": { + "value": "{blue.100}", + "type": "color", + "description": "Background of the active selected cell in the Table." + }, + "cell-new": { + "value": "{green.50}", + "type": "color", + "description": "Background of the cell with new information in the Table." + }, + "cell-new-hover": { + "value": "{green.100}", + "type": "color", + "description": "Background of the hovered cell with new information in the Table." + }, + "cell-new-active": { + "value": "{green.100}", + "type": "color", + "description": "Background of the active cell with new information in the Table." + }, + "cell-critical": { + "value": "{red.50}", + "type": "color", + "description": "Background of the cell with critical information in the Table." + }, + "cell-critical-hover": { + "value": "{red.100}", + "type": "color", + "description": "Background of the hovered cell with critical information in the Table." + }, + "cell-critical-active": { + "value": "{red.100}", + "type": "color", + "description": "Background of the active cell with critical information in the Table." + }, + "cell-warning": { + "value": "{orange.50}", + "type": "color", + "description": "Background of the cell with warning information in the Table." + }, + "cell-warning-hover": { + "value": "{orange.100}", + "type": "color", + "description": "Background of the hovered cell with warning information in the Table." + }, + "cell-warning-active": { + "value": "{orange.100}", + "type": "color", + "description": "Background of the active cell with warning information in the Table." + } + } + }, + "brand": { + "primary": { + "value": "{orange.400}", + "type": "color", + "description": "Primary brand color." + }, + "secondary": { + "value": "{violet.700}", + "type": "color", + "description": "Secondary brand color." + }, + "pinterest": { + "value": "#bd081c", + "type": "color", + "description": "Pinterest brand color." + }, + "instagram": { + "value": "#e4405f", + "type": "color", + "description": "Instagram brand color." + }, + "youtube": { + "value": "#ff0000", + "type": "color", + "description": "Youtube brand color." + }, + "facebook": { + "value": "#1877f2", + "type": "color", + "description": "Facebook brand color." + }, + "linkedIn": { + "value": "#0a66c2", + "type": "color", + "description": "LinkedIn brand color." + }, + "twitter": { + "value": "#1d9bf0", + "type": "color", + "description": "Twitter brand color." + }, + "google-blue": { + "value": "#1a0dab", + "type": "color", + "description": "Google brand color for the link." + }, + "google-green": { + "value": "#016723", + "type": "color", + "description": "Google green brand color for the link." + }, + "google-my-business": { + "value": "#1a73e8", + "type": "color", + "description": "Google My Business brand color." + } + }, + "box-shadow": { + "card": { + "value": "0 0 0 1px {gray.100}", + "type": "boxShadow", + "description": "Default shadow of the Card." + }, + "card-hover": { + "value": "3px 3px 30px 0px rgba({gray.800}, 0.15)", + "type": "boxShadow", + "description": "Hover state for the shadow of the Card with hover state." + }, + "dnd": { + "value": "0px 0px 1px 0px rgba({gray.800}, 0.16); 0px 12px 40px 0px rgba({gray.800}, 0.16)", + "type": "boxShadow", + "description": "Shadow for show that element are being drag-and-drop." + }, + "modal": { + "value": "0px 3px 8px 0px rgba({gray.800}, 0.2)", + "type": "boxShadow", + "description": "Default shadow if the Modal window." + }, + "popper": { + "value": "0px 1px 12px 0px rgba({gray.800}, 0.15)", + "type": "boxShadow", + "description": "Default shadow of all Poppers, Dropdowns and Tooltips." + }, + "float-control": { + "value": [ + { + "x": "0", + "y": "0", + "blur": "1", + "spread": "0", + "color": "rgba(0,0,0,0.16)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "1", + "blur": "2", + "spread": "0", + "color": "rgba(0,0,0,0.12)", + "type": "dropShadow" + } + ], + "type": "boxShadow", + "description": "Use it only for controls that float above the whole interface." + }, + "float-control-hover": { + "value": [ + { + "x": "0", + "y": "0", + "blur": "2", + "spread": "0", + "color": "rgba(0,0,0,0.2)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "1", + "blur": "4", + "spread": "0", + "color": "rgba(0,0,0,0.16)", + "type": "dropShadow" + } + ], + "type": "boxShadow", + "description": "Use it only for controls that float above the whole interface." + } + }, + "keyboard-focus": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.outline}, 0.5)", + "type": "boxShadow", + "description": "Default keyboard focus box-shadow styles.", + "outline": { + "value": "{gray.800}", + "type": "color", + "description": "Color for default keyboard focus outline styles." + }, + "invalid": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.invalid.outline}, 0.5)", + "type": "boxShadow", + "description": "Keyboard focus styles for elements with invalid state.", + "outline": { + "value": "{red.400}", + "type": "color", + "description": "Color for keyboard focus outline styles for elements with invalid state." + } + }, + "valid": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.valid.outline}, 0.5)", + "type": "boxShadow", + "description": "Keyboard focus styles for elements with valid state.", + "outline": { + "value": "{green.400}", + "type": "color", + "description": "Color for keyboard focus outline styles for elements with valid state." + } + }, + "invert": { + "value": "0px 0px 0px 3px {keyboard-focus.invert.outline}", + "type": "boxShadow", + "description": "Keyboard focus styles for use on dark backgrounds.", + "outline": { + "value": "rgba({gray.white}, 0.8)", + "type": "color", + "description": "Color for keyboard focus outline styles to use on the dark and color background." + } + } + }, + "base": { + "value": "Inter", + "type": "fontFamilies", + "description": "Base font family." + }, + "lh-800": { + "value": "117%", + "type": "lineHeights", + "description": "Use with font-size-800." + }, + "lh-700": { + "value": "110%", + "type": "lineHeights", + "description": "Use with font-size-700." + }, + "lh-600": { + "value": "125%", + "type": "lineHeights", + "description": "Use with font-size-600." + }, + "lh-500": { + "value": "117%", + "type": "lineHeights", + "description": "Use with font-size-500." + }, + "lh-400": { + "value": "120%", + "type": "lineHeights", + "description": "Use with font-size-400." + }, + "lh-300": { + "value": "150%", + "type": "lineHeights", + "description": "Use with font-size-300." + }, + "lh-200": { + "value": "142%", + "type": "lineHeights", + "description": "Use with font-size-200." + }, + "lh-100": { + "value": "133%", + "type": "lineHeights", + "description": "Use with font-size-100." + }, + "semi-bold": { + "value": "600", + "type": "fontWeights", + "description": "Semi-bold font weight." + }, + "bold": { + "value": "700", + "type": "fontWeights", + "description": "Bold font weight." + }, + "regular": { + "value": "400", + "type": "fontWeights", + "description": "Regular font weight." + }, + "medium": { + "value": "500", + "type": "fontWeights", + "description": "Medium font weight." + }, + "fs-50": { + "value": "10px", + "type": "fontSizes", + "description": "Use only for text in Badge component." + }, + "fs-100": { + "value": "12px", + "type": "fontSizes", + "description": "Use this font-size with caution for text in some additional messages. Always check its contrast and readability." + }, + "fs-200": { + "value": "14px", + "type": "fontSizes" + }, + "fs-300": { + "value": "16px", + "type": "fontSizes" + }, + "fs-400": { + "value": "20px", + "type": "fontSizes" + }, + "fs-500": { + "value": "24px", + "type": "fontSizes" + }, + "fs-600": { + "value": "32px", + "type": "fontSizes" + }, + "fs-700": { + "value": "36px", + "type": "fontSizes" + }, + "fs-800": { + "value": "48px", + "type": "fontSizes" + }, + "compact": { + "value": "0.3", + "type": "letterSpacing", + "description": "Compact letter spacing." + }, + "heading-h1": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-800}", + "fontSize": "{fs-800}" + }, + "type": "typography" + }, + "heading-h2": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-700}", + "fontSize": "{fs-700}" + }, + "type": "typography", + "description": "Landing headings" + }, + "heading-h3": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-600}", + "fontSize": "{fs-600}" + }, + "type": "typography", + "description": "Tool page main heading" + }, + "heading-h4": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-500}", + "fontSize": "{fs-500}" + }, + "type": "typography", + "description": "Tool page heading" + }, + "heading-h5": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-400}", + "fontSize": "{fs-400}" + }, + "type": "typography", + "description": "Widget heading" + }, + "heading-h6": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "lineHeight": "{lh-300}", + "fontSize": "{fs-300}" + }, + "type": "typography", + "description": "Widget, notice & dropdown heading" + }, + "subtitle": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{regular}", + "lineHeight": "{lh-400}", + "fontSize": "{fs-400}" + }, + "type": "typography", + "description": "Use for big subtitles on the landing pages." + }, + "scale-indent": { + "value": "4px", + "type": "spacing", + "description": "Base denominator of the design system." + }, + "form-control-s": { + "value": "{scale-indent}*5", + "type": "sizing", + "description": "Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions." + }, + "form-control-m": { + "value": "{scale-indent}*7", + "type": "sizing", + "description": "Default size of the controls." + }, + "form-control-l": { + "value": "{scale-indent}*10", + "type": "sizing", + "description": "Large size of the controls." + }, + "spacing-05x": { + "value": "{scale-indent}*0.5", + "type": "spacing", + "description": "2px" + }, + "spacing-1x": { + "value": "{scale-indent}*1", + "type": "spacing", + "description": "4px" + }, + "spacing-2x": { + "value": "{scale-indent}*2", + "type": "spacing", + "description": "8px" + }, + "spacing-3x": { + "value": "{scale-indent}*3", + "type": "spacing", + "description": "12px" + }, + "spacing-4x": { + "value": "{scale-indent}*4", + "type": "spacing", + "description": "16px" + }, + "spacing-5x": { + "value": "{scale-indent}*5", + "type": "spacing", + "description": "20px" + }, + "spacing-6x": { + "value": "{scale-indent}*6", + "type": "spacing", + "description": "24px" + }, + "spacing-8x": { + "value": "{scale-indent}*8", + "type": "spacing", + "description": "32px" + }, + "spacing-10x": { + "value": "{scale-indent}*10", + "type": "spacing", + "description": "40px" + }, + "spacing-14x": { + "value": "{scale-indent}*14", + "type": "spacing", + "description": "56px" + }, + "spacing-20x": { + "value": "{scale-indent}*20", + "type": "spacing", + "description": "80px" + }, + "spacing-24x": { + "value": "{scale-indent}*24", + "type": "spacing", + "description": "96px" + }, + "spacing-30x": { + "value": "{scale-indent}*30", + "type": "spacing", + "description": "120px" + }, + "rounded-extra-small": { + "value": "2px", + "type": "borderRadius" + }, + "rounded-small": { + "value": "4px", + "type": "borderRadius" + }, + "rounded-medium": { + "value": "6px", + "type": "borderRadius" + }, + "rounded-large": { + "value": "12px", + "type": "borderRadius" + }, + "rounded-extra-large": { + "value": "24px", + "type": "borderRadius" + }, + "addon-rounded": { + "value": "{rounded-small}", + "type": "borderRadius", + "description": "Use for rounding addons and small controls like Checkbox." + }, + "badge-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding Badge." + }, + "chart-rounded": { + "value": "{rounded-extra-small}", + "type": "borderRadius", + "description": "Use for rounding big and small charts like bar, histogram and others." + }, + "counter-rounded": { + "value": "{rounded-large}", + "type": "borderRadius", + "description": "Use for rounding Counter." + }, + "tag-rounded": { + "value": "{rounded-extra-large}", + "type": "borderRadius", + "description": "Use for rounding Tag." + }, + "switch-rounded": { + "value": "{rounded-extra-large}", + "type": "borderRadius", + "description": "Use for rounding Switch." + }, + "control-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc." + }, + "progress-bar-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding bars: ProgressBar, SliderBar, etc." + }, + "surface-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding surfaces like Card, blocks, widgets, Notice, etc." + }, + "popper-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding all kinds of poppers and dropdowns." + }, + "modal-rounded": { + "value": "{rounded-large}", + "type": "borderRadius", + "description": "Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard)." + }, + "disabled-opacity": { + "value": "0.5", + "type": "opacity", + "description": "Use for the disabled state of all kind of the controls and elements." + }, + "screen-extra-small": { + "value": "320px", + "type": "sizing", + "description": "Extra small screens (small phones)." + }, + "screen-small": { + "value": "768px", + "type": "sizing", + "description": "Small screens (phones and small tablets)." + }, + "screen-medium": { + "value": "1200px", + "type": "sizing", + "description": "Medium screens (tablets and small laptops)." + }, + "screen-large": { + "value": "1920px", + "type": "sizing", + "description": "Large screens (tablets and laptops)." + }, + "overlay": { + "primary": { + "value": "rgba({gray.800}, 0.7)", + "type": "color", + "description": "Use for cover the content under the modal dialogs." + }, + "secondary": { + "value": "rgba({gray.800}, 0.4)", + "type": "color", + "description": "Use for the secondary modal dialogs that were opened upon the other modal dialogs." + }, + "limitation-primary": { + "value": "{gray.50}", + "type": "color", + "description": "Use as a primary cover of the content under the messages about limitations." + }, + "limitation-secondary": { + "value": "rgba({gray.white}, 0.85)", + "type": "color", + "description": "Use as a secondary cover of the content under the messages about limitations." + } + }, + "z-index": { + "deep": { + "value": "-999", + "type": "other" + }, + "overlay": { + "value": "500", + "type": "other" + }, + "modal": { + "value": "900", + "type": "other" + }, + "popper": { + "value": "700", + "type": "other" + }, + "dropdown": { + "value": "750", + "type": "other" + }, + "tooltip": { + "value": "800", + "type": "other" + }, + "notice-bubble": { + "value": "999", + "type": "other" + } + }, + "tooltip": { + "default": { + "value": "{gray.white}", + "type": "color", + "description": "Default Tooltip background." + }, + "warning": { + "value": "{red.100}", + "type": "color", + "description": "Warning Tooltip background." + }, + "invert": { + "value": "{gray.800}", + "type": "color", + "description": "Inverted version of the default Tooltip background." + } + }, + "neighbor-location": { + "neutral": { + "value": "#ffffff80", + "type": "color", + "description": "Neutral border of the components that are combined with neighbor-location property." + }, + "invert": { + "value": "#00000080", + "type": "color", + "description": "Inverted border of the components that are combined with neighbor-location property." + } + }, + "scroll-area": { + "shadow-left": { + "value": "linear-gradient(to right, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)", + "type": "color", + "description": "Left-to-right fade shadow for the ScrollArea." + }, + "shadow-right": { + "value": "linear-gradient(to left, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)", + "type": "color", + "description": "Right-to-left fade shadow for the ScrollArea." + }, + "shadow-top": { + "value": "linear-gradient(to bottom, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)", + "type": "color", + "description": "Top-to-bottom fade shadow for the ScrollArea." + }, + "shadow-bottom": { + "value": "linear-gradient(to top, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)", + "type": "color", + "description": "Bottom-to-top fade shadow for the ScrollArea." + }, + "dropdown-menu-left": { + "value": "linear-gradient(to right, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)", + "type": "color", + "description": "Left-to-right fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-right": { + "value": "linear-gradient(to left, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)", + "type": "color", + "description": "Right-to-left fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-bottom": { + "value": "linear-gradient(to top, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)", + "type": "color", + "description": "Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-top": { + "value": "linear-gradient(to bottom, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)", + "type": "color", + "description": "Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu." + } + }, + "scroll-bar": { + "background": { + "value": "rgba({gray.800}, 0.3)", + "type": "color", + "description": "Background color for ScrollBar." + } + }, + "tag": { + "primary": { + "gray-normal": { + "value": "#ecedf0", + "type": "color", + "description": "Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath." + }, + "gray-hover-active": { + "value": "#e3e4e9", + "type": "color", + "description": "Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath." + }, + "blue-normal": { + "value": "#d0eeff", + "type": "color", + "description": "Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath." + }, + "blue-hover-active": { + "value": "#b7e4ff", + "type": "color", + "description": "Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath." + }, + "green-normal": { + "value": "#cff1ea", + "type": "color", + "description": "Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath." + }, + "green-hover-active": { + "value": "#b7eae0", + "type": "color", + "description": "Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath." + }, + "orange-normal": { + "value": "#ffddd2", + "type": "color", + "description": "Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath." + }, + "orange-hover-active": { + "value": "#ffccbb", + "type": "color", + "description": "Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath." + }, + "red-normal": { + "value": "#ffcedc", + "type": "color", + "description": "Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath." + }, + "red-hover-active": { + "value": "#ffb6ca", + "type": "color", + "description": "Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath." + }, + "violet-normal": { + "value": "#f4e3ff", + "type": "color", + "description": "Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath." + }, + "violet-hover-active": { + "value": "#efd5ff", + "type": "color", + "description": "Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath." + }, + "yellow-normal": { + "value": "#fee6d1", + "type": "color", + "description": "Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath." + }, + "yellow-hover-active": { + "value": "#fedab9", + "type": "color", + "description": "Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath." + }, + "white-normal": { + "value": "rgba({gray.white}, 0.15)", + "type": "color", + "description": "Primary white tag." + }, + "white-hover-active": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Hover and active (selected) state of the primary white tag." + }, + "gray-text": { + "value": "{gray.500}", + "type": "color", + "description": "Gray text for the primary gray tag." + }, + "blue-text": { + "value": "{blue.500}", + "type": "color", + "description": "Blue text for the primary blue tag." + }, + "green-text": { + "value": "{green.500}", + "type": "color", + "description": "Green text for the primary green tag." + }, + "orange-text": { + "value": "{orange.500}", + "type": "color", + "description": "Orange text for the primary orange tag." + }, + "red-text": { + "value": "{red.500}", + "type": "color", + "description": "Red text for the primary red tag." + }, + "violet-text": { + "value": "{violet.500}", + "type": "color", + "description": "Violet text for the primary violet tag." + }, + "yellow-text": { + "value": "{yellow.500}", + "type": "color", + "description": "Yellow text for the primary yellow tag." + }, + "white-text": { + "value": "{gray.white}", + "type": "color", + "description": "White text for the primary white tag." + } + }, + "secondary": { + "normal": { + "value": "{gray.white}", + "type": "color", + "description": "Background color for the default secondary tag." + }, + "hover-active": { + "value": "{gray.50}", + "type": "color", + "description": "Hover and active (selected) states of the background color for the default secondary tag." + }, + "white-normal": { + "value": "rgba({gray.white}, 0)", + "type": "color", + "description": "White secondary tag." + }, + "white-hover-active": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Active state of the secondary white tag." + }, + "gray-text": { + "value": "{gray.500}", + "type": "color", + "description": "Gray text for the default secondary tag." + }, + "white-text": { + "value": "{gray.white}", + "type": "color", + "description": "White text for the secondary white tag." + } + } + }, + "chart": { + "palette-order": { + "1": { + "value": "{blue.300}", + "type": "color", + "description": "1 color in the default list of colors for charts." + }, + "2": { + "value": "{green.200}", + "type": "color", + "description": "2 color in the default list of colors for charts." + }, + "3": { + "value": "{orange.400}", + "type": "color", + "description": "3 color in the default list of colors for charts." + }, + "4": { + "value": "{pink.300}", + "type": "color", + "description": "4 color in the default list of colors for charts." + }, + "5": { + "value": "{yellow.200}", + "type": "color", + "description": "5 color in the default list of colors for charts." + }, + "6": { + "value": "{violet.400}", + "type": "color", + "description": "6 color in the default list of colors for charts." + }, + "7": { + "value": "{red.300}", + "type": "color", + "description": "7 color in the default list of colors for charts." + }, + "8": { + "value": "{salad.200}", + "type": "color", + "description": "8 color in the default list of colors for charts." + }, + "9": { + "value": "{blue.400}", + "type": "color", + "description": "9 color in the default list of colors for charts." + }, + "10": { + "value": "{green.300}", + "type": "color", + "description": "10 color in the default list of colors for charts." + }, + "11": { + "value": "{orange.200}", + "type": "color", + "description": "11 color in the default list of colors for charts." + }, + "12": { + "value": "{pink.400}", + "type": "color", + "description": "12 color in the default list of colors for charts." + }, + "13": { + "value": "{yellow.300}", + "type": "color", + "description": "13 color in the default list of colors for charts." + }, + "14": { + "value": "{violet.200}", + "type": "color", + "description": "14 color in the default list of colors for charts." + }, + "15": { + "value": "{red.400}", + "type": "color", + "description": "15 color in the default list of colors for charts." + }, + "16": { + "value": "{salad.300}", + "type": "color", + "description": "16 color in the default list of colors for charts." + }, + "17": { + "value": "{blue.200}", + "type": "color", + "description": "17 color in the default list of colors for charts." + }, + "18": { + "value": "{green.400}", + "type": "color", + "description": "18 color in the default list of colors for charts." + }, + "19": { + "value": "{orange.300}", + "type": "color", + "description": "19 color in the default list of colors for charts." + }, + "20": { + "value": "{pink.200}", + "type": "color", + "description": "20 color in the default list of colors for charts." + }, + "21": { + "value": "{yellow.400}", + "type": "color", + "description": "21 color in the default list of colors for charts." + }, + "22": { + "value": "{violet.300}", + "type": "color", + "description": "22 color in the default list of colors for charts." + }, + "23": { + "value": "{red.200}", + "type": "color", + "description": "23 color in the default list of colors for charts." + }, + "24": { + "value": "{salad.400}", + "type": "color", + "description": "24 color in the default list of colors for charts." + }, + "total-amount": { + "value": "{gray.400}", + "type": "color", + "description": "Use it to show total value." + }, + "other-data": { + "value": "{gray.200}", + "type": "color", + "description": "Use it to indicate voids, missing or some other data." + }, + "null": { + "value": "{gray.100}", + "type": "color", + "description": "Use it to show null value." + } + }, + "grid": { + "line": { + "value": "{gray.100}", + "type": "color", + "description": "Default chart grid line." + }, + "x-axis": { + "value": "{gray.200}", + "type": "color", + "description": "X-axis line on the chart grid." + }, + "y-accent-hover-line": { + "value": "{gray.300}", + "type": "color", + "description": "Accent line for the hover state on the chart grid." + }, + "text-label": { + "value": "{gray.500}", + "type": "color", + "description": "Text label on the chart grid." + }, + "bar-chart-hover": { + "value": "rgba({gray.200}, 0.3)", + "type": "color", + "description": "Background color for the hover state of a bar on the chart grid." + }, + "bar-chart-base-bg": { + "value": "{gray.100}", + "type": "color", + "description": "Default background color of a bar in the BarChart." + }, + "period-bg": { + "value": "rgba({gray.200}, 0.2)", + "type": "color", + "description": "Use for highlighting a period on the chart grid." + }, + "period-pattern": { + "value": "rgba({gray.800}, 0.15)", + "type": "color", + "description": "Stripe color for diagonal pattern background." + }, + "border": { + "value": "{gray.white}", + "type": "color", + "description": "Border for distinguishing data sets and chart dots on the chart grid." + } + }, + "x-axis-accent": { + "period-active": { + "value": "{gray.500}", + "type": "color", + "description": "Background color for the clickable date on the X-axis of the chart grid." + }, + "data-start-tracking": { + "value": "rgba({green.400}, 0.2)", + "type": "color", + "description": "Background color for the \"Start tracking\" date on the X-axis of the chart grid." + } + }, + "axis-label": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "fontSize": "{fs-100}" + }, + "type": "typography" + }, + "axis-label-bold": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "fontSize": "{fs-100}" + }, + "type": "typography" + } + }, + "header": { + "bg": { + "value": "{violet.dusty.700}", + "type": "color" + }, + "border": { + "primary": { + "value": "{violet.dusty.700}", + "type": "color" + }, + "secondary": { + "value": "#ffffff26", + "type": "color" + } + } + }, + "sidebar-nav": { + "control-hover": { + "value": "rgba({gray.100}, 0.7)", + "type": "color" + }, + "control-active": { + "value": "{violet.dusty.100}", + "type": "color" + }, + "control": { + "text": { + "normal": { + "value": "{violet.dusty.500}", + "type": "color" + }, + "active": { + "value": "{violet.dusty.600}", + "type": "color" + } + }, + "icon": { + "normal": { + "value": "{violet.dusty.400}", + "type": "color" + }, + "active": { + "value": "{violet.dusty.600}", + "type": "color" + } + } + } + }, + "duration": { + "extra-slow": { + "value": "500", + "type": "other", + "description": "Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen)" + }, + "slow": { + "value": "400", + "type": "other", + "description": "Should be used for more larger scale animations (such as page transitions)" + }, + "medium": { + "value": "300", + "type": "other", + "description": "Should be used for more complex effects (such as Modal)" + }, + "fast": { + "value": "200", + "type": "other", + "description": "Should be used for more complex effects (such as Dropdown or Accordion)" + }, + "extra-fast": { + "value": "100", + "type": "other", + "description": "Should be used for simpler effects and relatively small-sized animations (such as fades or color changes)" + }, + "switch": { + "value": "{duration.extra-fast}", + "type": "other", + "description": "Use for small controls like Switch or Slider." + }, + "popper": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for components based on popper like Tooltip, Dropdown or Filter trigger." + }, + "control": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for small controls like Checkbox or Radio." + }, + "modal": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Modal, Fullscreen Modal, Side panel or other kind of windows." + }, + "accordion": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Accordion." + }, + "counter": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Summary or Counter." + } + } + }, + "featureHighlight": { + "bg": { + "primary": { + "feature-highlight": { + "value": "{gray.white}", + "type": "color", + "description": "Primary background for highlighted controls." + }, + "feature-highlight-hover-active": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Primary background for hover and active (selected) state of highlighted controls." + } + }, + "secondary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Secondary background for the highlighted message." + } + } + }, + "border": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.300}, {blue.300})", + "type": "color", + "description": "Primary border for highlighted controls." + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Primary border for the active state of highlighted controls." + }, + "feature-highlight-secondary": { + "value": "linear-gradient(90deg, {violet.200}, {blue.200})", + "type": "color", + "description": "Secondary border for highlighted controls." + } + }, + "control": { + "primary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Background of the highlighted primary control." + }, + "feature-highlight-hover": { + "value": "linear-gradient(90deg, {violet.500}, {blue.500})", + "type": "color", + "description": "Hover state of the highlighted primary control." + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.600}, {blue.600})", + "type": "color", + "description": "Active (selected) state of the highlighted primary control." + } + }, + "secondary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Background of the highlighted secondary control." + }, + "feature-highlight-hover": { + "value": "linear-gradient(90deg, {violet.100}, {blue.100})", + "type": "color", + "description": "Hover state of the highlighted secondary control.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.3", + "space": "hsl" + } + } + } + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.100}, {blue.100})", + "type": "color", + "description": "Active (selected) state of the highlighted secondary control." + } + } + }, + "text": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.500}, {blue.500})", + "type": "color", + "description": "Text for highlighted features." + }, + "feature-highlight-hover-active": { + "value": "linear-gradient(90deg, {violet.700}, {blue.700})", + "type": "color", + "description": "Text for hover and active states of highlighted features." + } + }, + "icon": { + "primary": { + "feature-highlight": { + "value": "{violet.500}", + "type": "color", + "description": "Primary highlighted icon." + }, + "feature-highlight-hover-active": { + "value": "#6B3AB4", + "type": "color", + "description": "Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color." + } + } + }, + "keyboard-focus-feature-highlight": { + "value": { + "width": "3px", + "color": "{keyboard-focus-feature-highlight.outline}" + }, + "type": "border", + "description": "Keyboard focus styles for highlighted controls.", + "outline": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Color for keyboard focus outline styles for highlighted controls." + } + } + } + } + \ No newline at end of file diff --git a/semcore/core/src/theme/new-adjusted.json b/semcore/core/src/theme/new-adjusted.json new file mode 100644 index 0000000000..689f410c11 --- /dev/null +++ b/semcore/core/src/theme/new-adjusted.json @@ -0,0 +1,2730 @@ +{ + "base": { + "gray": { + "50": { + "value": "oklch(0.966 0.001 277.6)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.904 0.004 277.6)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.824 0.007 277.6)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.01 277.6)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.013 277.6)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.017 277.6)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.013 277.6)", + "type": "color" + }, + "700": { + "value": "oklch(0.31 0.009 277.6)", + "type": "color" + }, + "800": { + "value": "oklch(0.19 0.005 277.6)", + "type": "color" + }, + "white": { + "value": "oklch(1 0 0)", + "type": "color" + } + }, + "blue": { + "50": { + "value": "oklch(0.966 0.016 263.265)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.904 0.045 263.265)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.824 0.082 263.265)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.121 263.265)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.158 263.265)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.214 263.265)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.164 263.265)", + "type": "color" + }, + "700": { + "value": "oklch(0.31 0.116 263.265)", + "type": "color" + }, + "800": { + "value": "oklch(0.22 0.073 263.265)", + "type": "color" + } + }, + "green": { + "50": { + "value": "oklch(0.966 0.038 170.688)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.904 0.094 170.688)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.824 0.142 170.688)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.132 170.688)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.122 170.688)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.104 170.688)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.078 170.688)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.055 170.688)", + "type": "color" + }, + "800": { + "value": "oklch(0.19 0.034 170.688)", + "type": "color" + } + }, + "red": { + "50": { + "value": "oklch(0.966 0.022 27.658)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.904 0.065 27.658)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.824 0.119 27.658)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.175 27.658)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.229 27.658)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.203 27.658)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.154 27.658)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.109 27.658)", + "type": "color" + }, + "800": { + "value": "oklch(0.19 0.071 27.658)", + "type": "color" + } + }, + "orange": { + "50": { + "value": "oklch(0.966 0.021 39.457)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.904 0.052 39.457)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.824 0.096 39.457)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.139 39.457)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.18 39.457)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.151 39.457)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.113 39.457)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.078 39.457)", + "type": "color" + }, + "800": { + "value": "oklch(0.19 0.052 39.457)", + "type": "color" + } + }, + "yellow": { + "50": { + "value": "oklch(0.966 0.039 80.292)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.904 0.094 80.292)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.824 0.161 80.292)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.145 80.292)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.129 80.292)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.106 80.292)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.08 80.292)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.057 80.292)", + "type": "color" + }, + "800": { + "value": "oklch(0.19 0.038 80.292)", + "type": "color" + } + }, + "violet": { + "50": { + "value": "oklch(0.966 0.02 295.962)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.904 0.058 295.99)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.824 0.106 295.962)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.156 295.962)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.204 295.962)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.27 295.962)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.205 295.962)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.145 295.962)", + "type": "color" + }, + "800": { + "value": "oklch(0.19 0.098 295.962)", + "type": "color" + }, + "dusty": { + "50": { + "value": "oklch(0.966 0.004 189.338)", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "oklch(0.904 0.011 189.338)", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "oklch(0.824 0.02 189.338)", + "type": "color" + }, + "300": { + "value": "oklch(0.74 0.03 189.338)", + "type": "color" + }, + "400": { + "value": "oklch(0.66 0.034 189.338)", + "type": "color" + }, + "500": { + "value": "oklch(0.54 0.028 189.338)", + "type": "color" + }, + "600": { + "value": "oklch(0.41 0.021 189.338)", + "type": "color" + }, + "700": { + "value": "oklch(0.29 0.015 189.338)", + "type": "color" + }, + "800": { + "value": "oklch(0.19 0.01 189.338)", + "type": "color" + } + } + }, + "pink": { + "50": { + "value": "#fff0ff", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#ffd3ff", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#ffa9fa", + "type": "color" + }, + "300": { + "value": "#ff87eb", + "type": "color" + }, + "400": { + "value": "#e14adf", + "type": "color" + }, + "500": { + "value": "#b229b9", + "type": "color" + }, + "600": { + "value": "#7d0480", + "type": "color" + }, + "700": { + "value": "#4d0050", + "type": "color" + }, + "800": { + "value": "#340439", + "type": "color" + } + }, + "salad": { + "50": { + "value": "#e8fef9", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#b7faeb", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#95f8e2", + "type": "color" + }, + "300": { + "value": "#64f5d4", + "type": "color" + }, + "400": { + "value": "#46f3cc", + "type": "color" + }, + "500": { + "value": "#18f0bf", + "type": "color" + }, + "600": { + "value": "#16daae", + "type": "color" + }, + "700": { + "value": "#11aa88", + "type": "color" + }, + "800": { + "value": "#0d8469", + "type": "color" + } + } + }, + "tokens": { + "bg": { + "primary": { + "neutral": { + "value": "{gray.white}", + "type": "color", + "description": "Primary background of the interface which contains the main data and information." + }, + "neutral-hover": { + "value": "{gray.50}", + "type": "color", + "description": "Hover state of the primary background of the interface which contains the main data and information." + }, + "neutral-active": { + "value": "{gray.100}", + "type": "color", + "description": "Active (selected) state of the primary background of the interface which contains the main data and information." + }, + "info": { + "value": "{blue.400}", + "type": "color", + "description": "Accent background of the message with regular information." + }, + "success": { + "value": "{green.400}", + "type": "color", + "description": "Accent background of the message or banner with information about the successful result." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Accent background of a message or a banner with a critical information." + }, + "warning": { + "value": "{orange.400}", + "type": "color", + "description": "Accent background of a message or a banner with a warning information." + }, + "highlight": { + "value": "{yellow.100}", + "type": "color", + "description": "Accent background of the information you want to highlight." + }, + "advertising": { + "value": "{violet.700}", + "type": "color", + "description": "Accent background for the advertising banners and controls." + }, + "muted": { + "value": "{gray.500}", + "type": "color", + "description": "Accented muted background for a message with regular information." + }, + "invert": { + "value": "{gray.800}", + "type": "color", + "description": "Inverted version of the primary background of the interface that contains the main data and information." + }, + "invert-hover": { + "value": "{gray.700}", + "type": "color", + "description": "Hover state for the inverted version of the primary background of the interface that contains the main data and information." + }, + "invert-active": { + "value": "{gray.600}", + "type": "color", + "description": "Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information." + } + }, + "secondary": { + "neutral": { + "value": "{gray.50}", + "type": "color", + "description": "Secondary background of the interface which contains the main data and information." + }, + "neutral-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Hover state of the secondary background of the interface which contains the main data and information." + }, + "neutral-active": { + "value": "{gray.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the interface which contains the main data and information." + }, + "info": { + "value": "{blue.50}", + "type": "color", + "description": "Secondary background of a message with regular information." + }, + "info-hover": { + "value": "{blue.100}", + "type": "color", + "description": "Hover state of the secondary background of a message with regular information." + }, + "info-active": { + "value": "{blue.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of a message with regular information." + }, + "success": { + "value": "{green.50}", + "type": "color", + "description": "Secondary background of the message with success information you want to accent." + }, + "success-hover": { + "value": "{green.100}", + "type": "color", + "description": "Hover state of the secondary background of the message with success information you want to accent." + }, + "success-active": { + "value": "{green.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with success information you want to accent." + }, + "critical": { + "value": "{red.50}", + "type": "color", + "description": "Secondary background of the message with critical information you want to accent." + }, + "critical-hover": { + "value": "{red.100}", + "type": "color", + "description": "Hover state of the secondary background of the message with critical information you want to accent." + }, + "critical-active": { + "value": "{red.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with critical information you want to accent." + }, + "warning": { + "value": "{orange.50}", + "type": "color", + "description": "Secondary background of the message with warning information you want to accent." + }, + "warning-hover": { + "value": "{orange.100}", + "type": "color", + "description": "Hover state of the secondary background of the message with warning information you want to accent." + }, + "warning-active": { + "value": "{orange.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with critical information you want to accent." + }, + "highlight": { + "value": "{yellow.50}", + "type": "color", + "description": "Secondary background of the information you want to highlight." + }, + "highlight-hover": { + "value": "{yellow.100}", + "type": "color", + "description": "Hover state of the secondary background of the information you want to highlight." + }, + "highlight-active": { + "value": "{yellow.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the information you want to highlight." + }, + "advertising": { + "value": "{violet.50}", + "type": "color", + "description": "Secondary background for the advertising message you want to accent." + }, + "advertising-hover": { + "value": "{violet.100}", + "type": "color", + "description": "Hover state of the secondary background for the advertising message you want to accent." + }, + "advertising-active": { + "value": "{violet.200}", + "type": "color", + "description": "Active (selected) state of the secondary background for the advertising message you want to accent." + } + }, + "highlight-results": { + "value": "rgba({yellow.300}, 0.4)", + "type": "color", + "description": "Highlighting the search results." + }, + "highlight-focus": { + "value": "rgba({blue.400}, 0.2)", + "type": "color", + "description": "Focusing values in the input." + } + }, + "text": { + "primary": { + "value": "{gray.800}", + "type": "color", + "description": "Primary text." + }, + "secondary": { + "value": "{gray.500}", + "type": "color", + "description": "Secondary text." + }, + "placeholder": { + "value": "{gray.400}", + "type": "color", + "description": "Placeholder text only." + }, + "success": { + "value": "{green.500}", + "type": "color", + "description": "Text associated with success states and data." + }, + "success-hover-active": { + "value": "{green.600}", + "type": "color", + "description": "Hover and active states for the text associated with success states and data." + }, + "critical": { + "value": "{red.500}", + "type": "color", + "description": "Text associated with critical states and data." + }, + "critical-hover-active": { + "value": "{red.600}", + "type": "color", + "description": "Hover and active states for the text associated with critical states and data." + }, + "primary-invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the primary text." + }, + "secondary-invert": { + "value": "rgba({gray.white}, 0.8)", + "type": "color", + "description": "Inverted version of the secondary text." + }, + "link": { + "value": "{blue.500}", + "type": "color", + "description": "Link text." + }, + "link-hover-active": { + "value": "{blue.600}", + "type": "color", + "description": "Hover and active states for the link text." + }, + "link-invert": { + "value": "{blue.200}", + "type": "color", + "description": "Inverted version of the link text. Use on dark background only." + }, + "link-invert-hover": { + "value": "{blue.300}", + "type": "color", + "description": "Hover and active states of the inverted version of the link text. Use on dark background only." + }, + "link-visited": { + "value": "{violet.500}", + "type": "color", + "description": "Visited link text." + }, + "hint": { + "value": "{gray.500}", + "type": "color", + "description": "Hint link text." + }, + "hint-hover-active": { + "value": "{gray.600}", + "type": "color", + "description": "Hover and active states of the hint link text." + }, + "hint-invert": { + "value": "{gray.200}", + "type": "color", + "description": "Inverted version of the hint link text." + }, + "hint-invert-hover-active": { + "value": "{gray.300}", + "type": "color", + "description": "Hover and active states of the inverted version of the hint link text." + }, + "large-secondary": { + "value": "{gray.300}", + "type": "color", + "description": "Secondary text. Use with font-size ≥20px." + }, + "large-info": { + "value": "{blue.400}", + "type": "color", + "description": "Link text with font-size ≥20px." + }, + "large-info-hover-active": { + "value": "{blue.500}", + "type": "color", + "description": "Hover and active states of the link text with font-size ≥20px." + }, + "large-success": { + "value": "{green.400}", + "type": "color", + "description": "Text with font-size ≥20px associated with success states and data." + }, + "large-success-hover-active": { + "value": "{green.500}", + "type": "color", + "description": "Hover and active states of the text with font-size ≥20px associated with success states and data." + }, + "large-critical": { + "value": "{red.400}", + "type": "color", + "description": "Text with font-size ≥20px associated with critical states and data." + }, + "large-critical-hover-active": { + "value": "{red.500}", + "type": "color", + "description": "Hover and active states of the text with font-size ≥20px associated with critical states and data." + }, + "advertising": { + "value": "{violet.700}", + "type": "color", + "description": "Advertising text." + } + }, + "border": { + "primary": { + "value": "{gray.200}", + "type": "color", + "description": "Neutral primary border." + }, + "secondary": { + "value": "{gray.100}", + "type": "color", + "description": "Subtle secondary border." + }, + "info": { + "value": "{blue.200}", + "type": "color", + "description": "Subtle secondary border in the informational message." + }, + "info-active": { + "value": "{gray.800}", + "type": "color", + "description": "Active border in focused input filed." + }, + "success": { + "value": "{green.200}", + "type": "color", + "description": "Subtle secondary border in the successful message and input field." + }, + "success-active": { + "value": "{green.500}", + "type": "color", + "description": "Active border in the focused input field with valid state." + }, + "critical": { + "value": "{red.200}", + "type": "color", + "description": "Subtle secondary border in the critical message and invalid input field." + }, + "critical-active": { + "value": "{red.500}", + "type": "color", + "description": "Active border in the focused input field with invalid state, and active state of the other components with invalid state." + }, + "warning": { + "value": "{orange.200}", + "type": "color", + "description": "Subtle secondary border in the warning message." + }, + "warning-active": { + "value": "{orange.500}", + "type": "color", + "description": "Active border in components with warning intention." + }, + "primary-invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the neutral primary border. Use it for borders on the dark or color background." + }, + "secondary-invert": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background." + }, + "tooltip-invert": { + "value": "{gray.500}", + "type": "color", + "description": "Border of the Tooltip with dark theme." + }, + "table-accent": { + "value": "{gray.300}", + "type": "color", + "description": "Accent borders in the Table: for the accordion in the table and for the header of the secondary table." + }, + "date-picker-range-comparison": { + "value": "{violet.500}", + "type": "color", + "description": "Border color of the second period for the comparison mode in the DatePicker." + }, + "critical-pattern": { + "value": "repeating-linear-gradient(315deg, rgba($border.critical-active, 1) 0, rgba($border.critical-active, 1) 2px, transparent 0, transparent 50%)", + "type": "color", + "description": "Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states." + } + }, + "control": { + "switch-bg": { + "value": "{gray.300}", + "type": "color", + "description": "Subtle background of the Switch control." + }, + "primary": { + "info": { + "value": "{gray.800}", + "type": "color", + "description": "Background of the regular primary control." + }, + "info-hover": { + "value": "{gray.800}", + "type": "color", + "description": "Hover state of the regular primary control." + }, + "info-active": { + "value": "{gray.800}", + "type": "color", + "description": "Active (selected) state of the regular primary control." + }, + "success": { + "value": "{green.400}", + "type": "color", + "description": "Background of the primary control with successful theme." + }, + "success-hover": { + "value": "{green.500}", + "type": "color", + "description": "Hover state of the primary control with successful theme." + }, + "success-active": { + "value": "{green.600}", + "type": "color", + "description": "Active (selected) state of the primary control with successful theme." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Background of the primary control with danger theme." + }, + "critical-hover": { + "value": "{red.500}", + "type": "color", + "description": "Hover state of the primary control with danger theme." + }, + "critical-active": { + "value": "{red.600}", + "type": "color", + "description": "Active (selected) state of the primary control with danger theme." + }, + "brand": { + "value": "{orange.400}", + "type": "color", + "description": "Background of the primary brand colored control." + }, + "brand-hover": { + "value": "{orange.500}", + "type": "color", + "description": "Hover state of the primary brand colored control." + }, + "brand-active": { + "value": "{orange.600}", + "type": "color", + "description": "Active state of the primary brand colored control." + }, + "advertising": { + "value": "{violet.600}", + "type": "color", + "description": "Background of the advertising primary control." + }, + "advertising-hover": { + "value": "{violet.700}", + "type": "color", + "description": "Hover state of the advertising primary control." + }, + "advertising-active": { + "value": "{violet.500}", + "type": "color", + "description": "Active (selected) state of the advertising primary control." + }, + "invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted background of the primary control." + }, + "invert-hover": { + "value": "{gray.50}", + "type": "color", + "description": "Hover state of the inverted primary control." + }, + "invert-active": { + "value": "{gray.100}", + "type": "color", + "description": "Active (selected) state of the inverted primary control." + } + }, + "secondary": { + "neutral": { + "value": "rgba({gray.400}, 0.1)", + "type": "color", + "description": "Background of the regular secondary control." + }, + "neutral-hover": { + "value": "rgba({gray.400}, 0.2)", + "type": "color", + "description": "Hover state of the regular secondary control." + }, + "neutral-active": { + "value": "rgba({gray.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the regular secondary control." + }, + "info": { + "value": "rgba({blue.400}, 0.1)", + "type": "color", + "description": "Background of the accent secondary control." + }, + "info-hover": { + "value": "rgba({blue.400}, 0.2)", + "type": "color", + "description": "Hover state of the accent secondary control." + }, + "info-active": { + "value": "rgba({blue.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the accent secondary control." + }, + "invert": { + "value": "rgba({gray.white}, 0.05)", + "type": "color", + "description": "Background of the inverted version of the secondary control." + }, + "invert-hover": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Hover state of the inverted version of the secondary control." + }, + "invert-active": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Active (selected) state of the inverted version of the secondary control." + } + }, + "tertiary": { + "neutral": { + "value": "rgba({gray.400}, 0)", + "type": "color", + "description": "Background of the regular tertiary control." + }, + "neutral-hover": { + "value": "rgba({gray.400}, 0.2)", + "type": "color", + "description": "Hover state of the regular tertiary control." + }, + "neutral-active": { + "value": "rgba({gray.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the regular tertiary control." + }, + "info": { + "value": "rgba({blue.400}, 0)", + "type": "color", + "description": "Background of the accent and link-lookalike tertiary control." + }, + "info-hover": { + "value": "rgba({blue.400}, 0.2)", + "type": "color", + "description": "Hover state of the accent and link-lookalike tertiary control." + }, + "info-active": { + "value": "rgba({blue.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the accent and link-lookalike tertiary control." + }, + "invert": { + "value": "rgba({gray.white}, 0)", + "type": "color", + "description": "Background of the inverted version of the tertiary control." + }, + "invert-hover": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Hover state of the inverted version of the tertiary control." + }, + "invert-active": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Active (selected) state of the inverted version of the tertiary control." + } + } + }, + "icon": { + "primary": { + "neutral": { + "value": "{gray.500}", + "type": "color", + "description": "Primary neutral icon." + }, + "neutral-hover-active": { + "value": "#565861", + "type": "color", + "description": "Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color." + }, + "info": { + "value": "{blue.500}", + "type": "color", + "description": "Primary link-lookalike icon." + }, + "info-hover-active": { + "value": "#0358a1", + "type": "color", + "description": "Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color." + }, + "success": { + "value": "{green.400}", + "type": "color", + "description": "Primary success icon." + }, + "success-hover-active": { + "value": "#037e68", + "type": "color", + "description": "Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Primary critical icon." + }, + "critical-hover-active": { + "value": "#cc3a42", + "type": "color", + "description": "Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color." + }, + "warning": { + "value": "{orange.400}", + "type": "color", + "description": "Primary warning icon." + }, + "warning-hover-active": { + "value": "#cc5024", + "type": "color", + "description": "Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color." + }, + "invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the primary icon." + }, + "invert-hover-active": { + "value": "{gray.100}", + "type": "color", + "description": "Hover and active (selected) states of the inverted version of the primary icon." + } + }, + "secondary": { + "neutral": { + "value": "{gray.300}", + "type": "color", + "description": "Secondary neutral icon." + }, + "neutral-hover-active": { + "value": "#878992", + "type": "color", + "description": "Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color." + }, + "info": { + "value": "{blue.300}", + "type": "color", + "description": "Secondary link-lookalike icon." + }, + "info-hover-active": { + "value": "#2290cc", + "type": "color", + "description": "Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color." + }, + "success": { + "value": "{green.300}", + "type": "color", + "description": "Secondary success icon." + }, + "success-hover-active": { + "value": "#049b75", + "type": "color", + "description": "Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color." + }, + "critical": { + "value": "{red.300}", + "type": "color", + "description": "Secondary critical icon." + }, + "critical-hover-active": { + "value": "#cc6c6b", + "type": "color", + "description": "Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color." + }, + "warning": { + "value": "{orange.300}", + "type": "color", + "description": "Secondary warning icon." + }, + "warning-hover-active": { + "value": "#cc7036", + "type": "color", + "description": "Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color." + } + }, + "non-interactive": { + "value": "{gray.800}", + "type": "color", + "description": "Color for the default non-interactive icon." + } + }, + "illustration": { + "red": { + "value": "#ff788f", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "orange": { + "value": "#ff9400", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "yellow": { + "value": "#ffe84d", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "salad": { + "value": "#c7fa73", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "green": { + "value": "#45e0a8", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "blue": { + "value": "#6edbff", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "violet": { + "value": "#b880ff", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "pink": { + "value": "#ff7ad1", + "type": "color", + "description": "⚠️ Use only for illustrations." + } + }, + "date-picker": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Default date-picker cell background." + }, + "cell-current": { + "value": "{gray.400}", + "type": "color", + "description": "Color for marking the cell with the current date, month or year in the date-picker." + }, + "cell-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Hover state of the default date-picker cell background." + }, + "cell-range": { + "value": "{blue.100}", + "type": "color", + "description": "Background for the cell which is included in the date range in the date-picker." + }, + "cell-range-hover": { + "value": "{blue.200}", + "type": "color", + "description": "Hover state of the background for the cell which is included in the date range in the date-picker." + }, + "cell-active": { + "value": "{blue.300}", + "type": "color", + "description": "Active (selected) date-picker cell background." + }, + "cell-active-hover": { + "value": "{blue.400}", + "type": "color", + "description": "Hover for the active (selected) date-picker cell background." + }, + "cell-current-invert": { + "value": "rgba({gray.white}, 0.5)", + "type": "color", + "description": "Color for marking the active cell with the current date, month or year in the date-picker." + }, + "cell-comparison-active": { + "value": "{violet.500}", + "type": "color", + "description": "Active (selected) date-picker cell background for comparison periods." + }, + "cell-comparison-active-hover": { + "value": "{violet.600}", + "type": "color", + "description": "Hover for the active (selected) date-picker cell background for comparison periods." + } + }, + "dropdown-menu": { + "item": { + "value": "{gray.white}", + "type": "color", + "description": "Default background color for the list item in the dropdown-menu." + }, + "item-hover": { + "value": "{gray.50}", + "type": "color", + "description": "Hover state of the default background color for the list item in the dropdown-menu." + }, + "item-selected": { + "value": "rgba({blue.100}, 0.7)", + "type": "color", + "description": "Active (selected) state of the default background color for the list item in the dropdown-menu." + }, + "item-selected-hover": { + "value": "{blue.100}", + "type": "color", + "description": "Hover state for the selected state of the default background color for the list item in the dropdown-menu." + } + }, + "feature-popover": { + "bg": { + "value": "{bg.primary.highlight}", + "type": "color", + "description": "Color of the FeaturePopover background with accent theme." + }, + "dot-outer-border": { + "value": "{feature-popover.bg}", + "type": "color", + "description": "Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme." + }, + "bg-neutral": { + "value": "{violet.dusty.800}", + "type": "color", + "description": "Color of the FeaturePopover background with neutral theme." + }, + "dot-neutral": { + "value": "{green.300}", + "type": "color", + "description": "Color of the FeaturePopover.Spot for FeaturePopover with neutral theme." + }, + "dot-neutral-outer-border": { + "value": "{feature-popover.dot-neutral}", + "type": "color", + "description": "Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme." + } + }, + "progress-bar": { + "bg": { + "value": "{gray.100}", + "type": "color", + "description": "Background color of the ProgressBar." + }, + "bg-hover": { + "value": "{gray.200}", + "type": "color", + "description": "Hover state of the background color of the ProgressBar." + }, + "bg-invert": { + "value": "rgba({gray.white}, 0.2)", + "type": "color", + "description": "Inverted version of the background color of the ProgressBar." + }, + "bg-invert-hover": { + "value": "rgba({gray.white}, 0.4)", + "type": "color", + "description": "Hover state for the inverted version of the background color of the ProgressBar." + }, + "value": { + "value": "{green.400}", + "type": "color", + "description": "Value color of the ProgressBar." + }, + "value-gradient": { + "value": "linear-gradient(-45deg, rgba(68, 193, 93, 0.9) 25%, rgba(68, 193, 93, 1) 0%, rgba(68, 193, 93, 1) 50%, rgba(68, 193, 93, 0.9) 0%, rgba(68, 193, 93, 0.9) 75%, rgba(68, 193, 93, 1) 0%)", + "type": "color", + "description": "Value with gradient for the ProgressBar." + }, + "pattern-gradient": { + "value": "linear-gradient(-45deg, rgba(234, 239, 241, 0.9) 25%, rgba(234, 239, 241, 1) 0%, rgba(234, 239, 241, 1) 50%, rgba(234, 239, 241, 0.9) 0%, rgba(234, 239, 241, 0.9) 75%, rgba(234, 239, 241, 1) 0%)", + "type": "color", + "description": "Null value gradient for the ProgressBar." + }, + "value-bg": { + "value": "#000000", + "type": "color", + "description": "Base value background for the ProgressBar. It is used to create gradients for the values." + } + }, + "skeleton": { + "bg": { + "value": "rgba({gray.100}, 0.8)", + "type": "color", + "description": "Default color for the Skeleton." + }, + "bg-invert": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Inverted version of the default color for the Skeleton." + } + }, + "slider-rating": { + "normal": { + "value": "{icon.secondary.neutral}", + "type": "color", + "description": "Icon color for the SliderRating component in its normal state." + }, + "hover-active": { + "value": "{yellow.200}", + "type": "color", + "description": "Icon color for the SliderRating component in its hovered and active states." + } + }, + "table": { + "th": { + "primary": { + "cell": { + "value": "{gray.50}", + "type": "color", + "description": "Background of the header cell in the primary Table." + }, + "cell-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the hovered header cell in the primary Table." + }, + "cell-active": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the active header cell in the primary Table." + } + }, + "secondary": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Background of the header cell in the secondary Table." + } + }, + "gradient": { + "value": "linear-gradient(to right, rgba($gray.100, 0) 0%, rgba($gray.100, 1) 100%)", + "type": "color", + "description": "Background gradient for sorting icon that absolute positioned in the table head." + } + }, + "td": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Background of the default cell in the Table." + }, + "cell-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the default hovered cell in the Table.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.5", + "space": "hsl" + } + } + } + }, + "cell-active": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the default active cell in the Table.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.2", + "space": "hsl" + } + } + } + }, + "cell-unread": { + "value": "{gray.50}", + "type": "color", + "description": "Background of the unread cell in the Table." + }, + "cell-accordion": { + "value": "{gray.50}", + "type": "color", + "description": "Background of the cell inside an Accordion in the Table." + }, + "cell-selected": { + "value": "{blue.50}", + "type": "color", + "description": "Background of the selected cell in the Table." + }, + "cell-selected-hover": { + "value": "{blue.100}", + "type": "color", + "description": "Background of the hovered selected cell in the Table." + }, + "cell-selected-active": { + "value": "{blue.100}", + "type": "color", + "description": "Background of the active selected cell in the Table." + }, + "cell-new": { + "value": "{green.50}", + "type": "color", + "description": "Background of the cell with new information in the Table." + }, + "cell-new-hover": { + "value": "{green.100}", + "type": "color", + "description": "Background of the hovered cell with new information in the Table." + }, + "cell-new-active": { + "value": "{green.100}", + "type": "color", + "description": "Background of the active cell with new information in the Table." + }, + "cell-critical": { + "value": "{red.50}", + "type": "color", + "description": "Background of the cell with critical information in the Table." + }, + "cell-critical-hover": { + "value": "{red.100}", + "type": "color", + "description": "Background of the hovered cell with critical information in the Table." + }, + "cell-critical-active": { + "value": "{red.100}", + "type": "color", + "description": "Background of the active cell with critical information in the Table." + }, + "cell-warning": { + "value": "{orange.50}", + "type": "color", + "description": "Background of the cell with warning information in the Table." + }, + "cell-warning-hover": { + "value": "{orange.100}", + "type": "color", + "description": "Background of the hovered cell with warning information in the Table." + }, + "cell-warning-active": { + "value": "{orange.100}", + "type": "color", + "description": "Background of the active cell with warning information in the Table." + } + } + }, + "brand": { + "primary": { + "value": "{orange.400}", + "type": "color", + "description": "Primary brand color." + }, + "secondary": { + "value": "{violet.700}", + "type": "color", + "description": "Secondary brand color." + }, + "pinterest": { + "value": "#bd081c", + "type": "color", + "description": "Pinterest brand color." + }, + "instagram": { + "value": "#e4405f", + "type": "color", + "description": "Instagram brand color." + }, + "youtube": { + "value": "#ff0000", + "type": "color", + "description": "Youtube brand color." + }, + "facebook": { + "value": "#1877f2", + "type": "color", + "description": "Facebook brand color." + }, + "linkedIn": { + "value": "#0a66c2", + "type": "color", + "description": "LinkedIn brand color." + }, + "twitter": { + "value": "#1d9bf0", + "type": "color", + "description": "Twitter brand color." + }, + "google-blue": { + "value": "#1a0dab", + "type": "color", + "description": "Google brand color for the link." + }, + "google-green": { + "value": "#016723", + "type": "color", + "description": "Google green brand color for the link." + }, + "google-my-business": { + "value": "#1a73e8", + "type": "color", + "description": "Google My Business brand color." + } + }, + "box-shadow": { + "card": { + "value": "0 0 0 1px {gray.100}", + "type": "boxShadow", + "description": "Default shadow of the Card." + }, + "card-hover": { + "value": "3px 3px 30px 0px rgba({gray.800}, 0.15)", + "type": "boxShadow", + "description": "Hover state for the shadow of the Card with hover state." + }, + "dnd": { + "value": "0px 0px 1px 0px rgba({gray.800}, 0.16); 0px 12px 40px 0px rgba({gray.800}, 0.16)", + "type": "boxShadow", + "description": "Shadow for show that element are being drag-and-drop." + }, + "modal": { + "value": "0px 3px 8px 0px rgba({gray.800}, 0.2)", + "type": "boxShadow", + "description": "Default shadow if the Modal window." + }, + "popper": { + "value": "0px 1px 12px 0px rgba({gray.800}, 0.15)", + "type": "boxShadow", + "description": "Default shadow of all Poppers, Dropdowns and Tooltips." + }, + "float-control": { + "value": [ + { + "x": "0", + "y": "0", + "blur": "1", + "spread": "0", + "color": "rgba(0,0,0,0.16)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "1", + "blur": "2", + "spread": "0", + "color": "rgba(0,0,0,0.12)", + "type": "dropShadow" + } + ], + "type": "boxShadow", + "description": "Use it only for controls that float above the whole interface." + }, + "float-control-hover": { + "value": [ + { + "x": "0", + "y": "0", + "blur": "2", + "spread": "0", + "color": "rgba(0,0,0,0.2)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "1", + "blur": "4", + "spread": "0", + "color": "rgba(0,0,0,0.16)", + "type": "dropShadow" + } + ], + "type": "boxShadow", + "description": "Use it only for controls that float above the whole interface." + } + }, + "keyboard-focus": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.outline}, 0.5)", + "type": "boxShadow", + "description": "Default keyboard focus box-shadow styles.", + "outline": { + "value": "{gray.800}", + "type": "color", + "description": "Color for default keyboard focus outline styles." + }, + "invalid": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.invalid.outline}, 0.5)", + "type": "boxShadow", + "description": "Keyboard focus styles for elements with invalid state.", + "outline": { + "value": "{red.400}", + "type": "color", + "description": "Color for keyboard focus outline styles for elements with invalid state." + } + }, + "valid": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.valid.outline}, 0.5)", + "type": "boxShadow", + "description": "Keyboard focus styles for elements with valid state.", + "outline": { + "value": "{green.400}", + "type": "color", + "description": "Color for keyboard focus outline styles for elements with valid state." + } + }, + "invert": { + "value": "0px 0px 0px 3px {keyboard-focus.invert.outline}", + "type": "boxShadow", + "description": "Keyboard focus styles for use on dark backgrounds.", + "outline": { + "value": "rgba({gray.white}, 0.8)", + "type": "color", + "description": "Color for keyboard focus outline styles to use on the dark and color background." + } + } + }, + "base": { + "value": "Inter", + "type": "fontFamilies", + "description": "Base font family." + }, + "lh-800": { + "value": "117%", + "type": "lineHeights", + "description": "Use with font-size-800." + }, + "lh-700": { + "value": "110%", + "type": "lineHeights", + "description": "Use with font-size-700." + }, + "lh-600": { + "value": "125%", + "type": "lineHeights", + "description": "Use with font-size-600." + }, + "lh-500": { + "value": "117%", + "type": "lineHeights", + "description": "Use with font-size-500." + }, + "lh-400": { + "value": "120%", + "type": "lineHeights", + "description": "Use with font-size-400." + }, + "lh-300": { + "value": "150%", + "type": "lineHeights", + "description": "Use with font-size-300." + }, + "lh-200": { + "value": "142%", + "type": "lineHeights", + "description": "Use with font-size-200." + }, + "lh-100": { + "value": "133%", + "type": "lineHeights", + "description": "Use with font-size-100." + }, + "semi-bold": { + "value": "600", + "type": "fontWeights", + "description": "Semi-bold font weight." + }, + "bold": { + "value": "700", + "type": "fontWeights", + "description": "Bold font weight." + }, + "regular": { + "value": "400", + "type": "fontWeights", + "description": "Regular font weight." + }, + "medium": { + "value": "500", + "type": "fontWeights", + "description": "Medium font weight." + }, + "fs-50": { + "value": "10px", + "type": "fontSizes", + "description": "Use only for text in Badge component." + }, + "fs-100": { + "value": "12px", + "type": "fontSizes", + "description": "Use this font-size with caution for text in some additional messages. Always check its contrast and readability." + }, + "fs-200": { + "value": "14px", + "type": "fontSizes" + }, + "fs-300": { + "value": "16px", + "type": "fontSizes" + }, + "fs-400": { + "value": "20px", + "type": "fontSizes" + }, + "fs-500": { + "value": "24px", + "type": "fontSizes" + }, + "fs-600": { + "value": "32px", + "type": "fontSizes" + }, + "fs-700": { + "value": "36px", + "type": "fontSizes" + }, + "fs-800": { + "value": "48px", + "type": "fontSizes" + }, + "compact": { + "value": "0.3", + "type": "letterSpacing", + "description": "Compact letter spacing." + }, + "heading-h1": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-800}", + "fontSize": "{fs-800}" + }, + "type": "typography" + }, + "heading-h2": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-700}", + "fontSize": "{fs-700}" + }, + "type": "typography", + "description": "Landing headings" + }, + "heading-h3": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-600}", + "fontSize": "{fs-600}" + }, + "type": "typography", + "description": "Tool page main heading" + }, + "heading-h4": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-500}", + "fontSize": "{fs-500}" + }, + "type": "typography", + "description": "Tool page heading" + }, + "heading-h5": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-400}", + "fontSize": "{fs-400}" + }, + "type": "typography", + "description": "Widget heading" + }, + "heading-h6": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "lineHeight": "{lh-300}", + "fontSize": "{fs-300}" + }, + "type": "typography", + "description": "Widget, notice & dropdown heading" + }, + "subtitle": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{regular}", + "lineHeight": "{lh-400}", + "fontSize": "{fs-400}" + }, + "type": "typography", + "description": "Use for big subtitles on the landing pages." + }, + "scale-indent": { + "value": "4px", + "type": "spacing", + "description": "Base denominator of the design system." + }, + "form-control-s": { + "value": "{scale-indent}*5", + "type": "sizing", + "description": "Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions." + }, + "form-control-m": { + "value": "{scale-indent}*7", + "type": "sizing", + "description": "Default size of the controls." + }, + "form-control-l": { + "value": "{scale-indent}*10", + "type": "sizing", + "description": "Large size of the controls." + }, + "spacing-05x": { + "value": "{scale-indent}*0.5", + "type": "spacing", + "description": "2px" + }, + "spacing-1x": { + "value": "{scale-indent}*1", + "type": "spacing", + "description": "4px" + }, + "spacing-2x": { + "value": "{scale-indent}*2", + "type": "spacing", + "description": "8px" + }, + "spacing-3x": { + "value": "{scale-indent}*3", + "type": "spacing", + "description": "12px" + }, + "spacing-4x": { + "value": "{scale-indent}*4", + "type": "spacing", + "description": "16px" + }, + "spacing-5x": { + "value": "{scale-indent}*5", + "type": "spacing", + "description": "20px" + }, + "spacing-6x": { + "value": "{scale-indent}*6", + "type": "spacing", + "description": "24px" + }, + "spacing-8x": { + "value": "{scale-indent}*8", + "type": "spacing", + "description": "32px" + }, + "spacing-10x": { + "value": "{scale-indent}*10", + "type": "spacing", + "description": "40px" + }, + "spacing-14x": { + "value": "{scale-indent}*14", + "type": "spacing", + "description": "56px" + }, + "spacing-20x": { + "value": "{scale-indent}*20", + "type": "spacing", + "description": "80px" + }, + "spacing-24x": { + "value": "{scale-indent}*24", + "type": "spacing", + "description": "96px" + }, + "spacing-30x": { + "value": "{scale-indent}*30", + "type": "spacing", + "description": "120px" + }, + "rounded-extra-small": { + "value": "2px", + "type": "borderRadius" + }, + "rounded-small": { + "value": "4px", + "type": "borderRadius" + }, + "rounded-medium": { + "value": "6px", + "type": "borderRadius" + }, + "rounded-large": { + "value": "12px", + "type": "borderRadius" + }, + "rounded-extra-large": { + "value": "24px", + "type": "borderRadius" + }, + "addon-rounded": { + "value": "{rounded-small}", + "type": "borderRadius", + "description": "Use for rounding addons and small controls like Checkbox." + }, + "badge-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding Badge." + }, + "chart-rounded": { + "value": "{rounded-extra-small}", + "type": "borderRadius", + "description": "Use for rounding big and small charts like bar, histogram and others." + }, + "counter-rounded": { + "value": "{rounded-large}", + "type": "borderRadius", + "description": "Use for rounding Counter." + }, + "tag-rounded": { + "value": "{rounded-extra-large}", + "type": "borderRadius", + "description": "Use for rounding Tag." + }, + "switch-rounded": { + "value": "{rounded-extra-large}", + "type": "borderRadius", + "description": "Use for rounding Switch." + }, + "control-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc." + }, + "progress-bar-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding bars: ProgressBar, SliderBar, etc." + }, + "surface-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding surfaces like Card, blocks, widgets, Notice, etc." + }, + "popper-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding all kinds of poppers and dropdowns." + }, + "modal-rounded": { + "value": "{rounded-large}", + "type": "borderRadius", + "description": "Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard)." + }, + "disabled-opacity": { + "value": "0.5", + "type": "opacity", + "description": "Use for the disabled state of all kind of the controls and elements." + }, + "screen-extra-small": { + "value": "320px", + "type": "sizing", + "description": "Extra small screens (small phones)." + }, + "screen-small": { + "value": "768px", + "type": "sizing", + "description": "Small screens (phones and small tablets)." + }, + "screen-medium": { + "value": "1200px", + "type": "sizing", + "description": "Medium screens (tablets and small laptops)." + }, + "screen-large": { + "value": "1920px", + "type": "sizing", + "description": "Large screens (tablets and laptops)." + }, + "overlay": { + "primary": { + "value": "rgba({gray.800}, 0.7)", + "type": "color", + "description": "Use for cover the content under the modal dialogs." + }, + "secondary": { + "value": "rgba({gray.800}, 0.4)", + "type": "color", + "description": "Use for the secondary modal dialogs that were opened upon the other modal dialogs." + }, + "limitation-primary": { + "value": "{gray.50}", + "type": "color", + "description": "Use as a primary cover of the content under the messages about limitations." + }, + "limitation-secondary": { + "value": "rgba({gray.white}, 0.85)", + "type": "color", + "description": "Use as a secondary cover of the content under the messages about limitations." + } + }, + "z-index": { + "deep": { + "value": "-999", + "type": "other" + }, + "overlay": { + "value": "500", + "type": "other" + }, + "modal": { + "value": "900", + "type": "other" + }, + "popper": { + "value": "700", + "type": "other" + }, + "dropdown": { + "value": "750", + "type": "other" + }, + "tooltip": { + "value": "800", + "type": "other" + }, + "notice-bubble": { + "value": "999", + "type": "other" + } + }, + "tooltip": { + "default": { + "value": "{gray.white}", + "type": "color", + "description": "Default Tooltip background." + }, + "warning": { + "value": "{red.100}", + "type": "color", + "description": "Warning Tooltip background." + }, + "invert": { + "value": "{gray.800}", + "type": "color", + "description": "Inverted version of the default Tooltip background." + } + }, + "neighbor-location": { + "neutral": { + "value": "#ffffff80", + "type": "color", + "description": "Neutral border of the components that are combined with neighbor-location property." + }, + "invert": { + "value": "#00000080", + "type": "color", + "description": "Inverted border of the components that are combined with neighbor-location property." + } + }, + "scroll-area": { + "shadow-left": { + "value": "linear-gradient(to right, rgba($gray.800, 0.1) 20.55%, rgba({gray.white}, 0.0001) 100%)", + "type": "color", + "description": "Left-to-right fade shadow for the ScrollArea." + }, + "shadow-right": { + "value": "linear-gradient(to left, rgba($gray.800, 0.1) 20.55%, rgba({gray.white}, 0.0001) 100%)", + "type": "color", + "description": "Right-to-left fade shadow for the ScrollArea." + }, + "shadow-top": { + "value": "linear-gradient(to bottom, rgba($gray.800, 0.1) 20.55%, rgba({gray.white}, 0.0001) 100%)", + "type": "color", + "description": "Top-to-bottom fade shadow for the ScrollArea." + }, + "shadow-bottom": { + "value": "linear-gradient(to top, rgba($gray.800, 0.1) 20.55%, rgba({gray.white}, 0.0001) 100%)", + "type": "color", + "description": "Bottom-to-top fade shadow for the ScrollArea." + }, + "dropdown-menu-left": { + "value": "linear-gradient(to right, rgba({gray.white}, 1) 34.38%, rgba({gray.white}, 0) 100%)", + "type": "color", + "description": "Left-to-right fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-right": { + "value": "linear-gradient(to left, rgba({gray.white}, 1) 34.38%, rgba({gray.white}, 0) 100%)", + "type": "color", + "description": "Right-to-left fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-bottom": { + "value": "linear-gradient(to top, rgba({gray.white}, 1) 34.38%, rgba({gray.white}, 0) 100%)", + "type": "color", + "description": "Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-top": { + "value": "linear-gradient(to bottom, rgba({gray.white}, 1) 34.38%, rgba({gray.white}, 0) 100%)", + "type": "color", + "description": "Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu." + } + }, + "scroll-bar": { + "background": { + "value": "rgba({gray.800}, 0.3)", + "type": "color", + "description": "Background color for ScrollBar." + } + }, + "tag": { + "primary": { + "gray-normal": { + "value": "#ecedf0", + "type": "color", + "description": "Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath." + }, + "gray-hover-active": { + "value": "#e3e4e9", + "type": "color", + "description": "Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath." + }, + "blue-normal": { + "value": "#d0eeff", + "type": "color", + "description": "Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath." + }, + "blue-hover-active": { + "value": "#b7e4ff", + "type": "color", + "description": "Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath." + }, + "green-normal": { + "value": "#cff1ea", + "type": "color", + "description": "Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath." + }, + "green-hover-active": { + "value": "#b7eae0", + "type": "color", + "description": "Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath." + }, + "orange-normal": { + "value": "#ffddd2", + "type": "color", + "description": "Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath." + }, + "orange-hover-active": { + "value": "#ffccbb", + "type": "color", + "description": "Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath." + }, + "red-normal": { + "value": "#ffcedc", + "type": "color", + "description": "Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath." + }, + "red-hover-active": { + "value": "#ffb6ca", + "type": "color", + "description": "Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath." + }, + "violet-normal": { + "value": "#f4e3ff", + "type": "color", + "description": "Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath." + }, + "violet-hover-active": { + "value": "#efd5ff", + "type": "color", + "description": "Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath." + }, + "yellow-normal": { + "value": "#fee6d1", + "type": "color", + "description": "Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath." + }, + "yellow-hover-active": { + "value": "#fedab9", + "type": "color", + "description": "Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath." + }, + "white-normal": { + "value": "rgba({gray.white}, 0.15)", + "type": "color", + "description": "Primary white tag." + }, + "white-hover-active": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Hover and active (selected) state of the primary white tag." + }, + "gray-text": { + "value": "{gray.500}", + "type": "color", + "description": "Gray text for the primary gray tag." + }, + "blue-text": { + "value": "{blue.500}", + "type": "color", + "description": "Blue text for the primary blue tag." + }, + "green-text": { + "value": "{green.500}", + "type": "color", + "description": "Green text for the primary green tag." + }, + "orange-text": { + "value": "{orange.500}", + "type": "color", + "description": "Orange text for the primary orange tag." + }, + "red-text": { + "value": "{red.500}", + "type": "color", + "description": "Red text for the primary red tag." + }, + "violet-text": { + "value": "{violet.500}", + "type": "color", + "description": "Violet text for the primary violet tag." + }, + "yellow-text": { + "value": "{yellow.500}", + "type": "color", + "description": "Yellow text for the primary yellow tag." + }, + "white-text": { + "value": "{gray.white}", + "type": "color", + "description": "White text for the primary white tag." + } + }, + "secondary": { + "normal": { + "value": "{gray.white}", + "type": "color", + "description": "Background color for the default secondary tag." + }, + "hover-active": { + "value": "{gray.50}", + "type": "color", + "description": "Hover and active (selected) states of the background color for the default secondary tag." + }, + "white-normal": { + "value": "rgba({gray.white}, 0)", + "type": "color", + "description": "White secondary tag." + }, + "white-hover-active": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Active state of the secondary white tag." + }, + "gray-text": { + "value": "{gray.500}", + "type": "color", + "description": "Gray text for the default secondary tag." + }, + "white-text": { + "value": "{gray.white}", + "type": "color", + "description": "White text for the secondary white tag." + } + } + }, + "chart": { + "palette-order": { + "1": { + "value": "{blue.300}", + "type": "color", + "description": "1 color in the default list of colors for charts." + }, + "2": { + "value": "{green.200}", + "type": "color", + "description": "2 color in the default list of colors for charts." + }, + "3": { + "value": "{orange.400}", + "type": "color", + "description": "3 color in the default list of colors for charts." + }, + "4": { + "value": "{pink.300}", + "type": "color", + "description": "4 color in the default list of colors for charts." + }, + "5": { + "value": "{yellow.200}", + "type": "color", + "description": "5 color in the default list of colors for charts." + }, + "6": { + "value": "{violet.400}", + "type": "color", + "description": "6 color in the default list of colors for charts." + }, + "7": { + "value": "{red.300}", + "type": "color", + "description": "7 color in the default list of colors for charts." + }, + "8": { + "value": "{salad.200}", + "type": "color", + "description": "8 color in the default list of colors for charts." + }, + "9": { + "value": "{blue.400}", + "type": "color", + "description": "9 color in the default list of colors for charts." + }, + "10": { + "value": "{green.300}", + "type": "color", + "description": "10 color in the default list of colors for charts." + }, + "11": { + "value": "{orange.200}", + "type": "color", + "description": "11 color in the default list of colors for charts." + }, + "12": { + "value": "{pink.400}", + "type": "color", + "description": "12 color in the default list of colors for charts." + }, + "13": { + "value": "{yellow.300}", + "type": "color", + "description": "13 color in the default list of colors for charts." + }, + "14": { + "value": "{violet.200}", + "type": "color", + "description": "14 color in the default list of colors for charts." + }, + "15": { + "value": "{red.400}", + "type": "color", + "description": "15 color in the default list of colors for charts." + }, + "16": { + "value": "{salad.300}", + "type": "color", + "description": "16 color in the default list of colors for charts." + }, + "17": { + "value": "{blue.200}", + "type": "color", + "description": "17 color in the default list of colors for charts." + }, + "18": { + "value": "{green.400}", + "type": "color", + "description": "18 color in the default list of colors for charts." + }, + "19": { + "value": "{orange.300}", + "type": "color", + "description": "19 color in the default list of colors for charts." + }, + "20": { + "value": "{pink.200}", + "type": "color", + "description": "20 color in the default list of colors for charts." + }, + "21": { + "value": "{yellow.400}", + "type": "color", + "description": "21 color in the default list of colors for charts." + }, + "22": { + "value": "{violet.300}", + "type": "color", + "description": "22 color in the default list of colors for charts." + }, + "23": { + "value": "{red.200}", + "type": "color", + "description": "23 color in the default list of colors for charts." + }, + "24": { + "value": "{salad.400}", + "type": "color", + "description": "24 color in the default list of colors for charts." + }, + "total-amount": { + "value": "{gray.400}", + "type": "color", + "description": "Use it to show total value." + }, + "other-data": { + "value": "{gray.200}", + "type": "color", + "description": "Use it to indicate voids, missing or some other data." + }, + "null": { + "value": "{gray.100}", + "type": "color", + "description": "Use it to show null value." + } + }, + "grid": { + "line": { + "value": "{gray.100}", + "type": "color", + "description": "Default chart grid line." + }, + "x-axis": { + "value": "{gray.200}", + "type": "color", + "description": "X-axis line on the chart grid." + }, + "y-accent-hover-line": { + "value": "{gray.300}", + "type": "color", + "description": "Accent line for the hover state on the chart grid." + }, + "text-label": { + "value": "{gray.500}", + "type": "color", + "description": "Text label on the chart grid." + }, + "bar-chart-hover": { + "value": "rgba({gray.200}, 0.3)", + "type": "color", + "description": "Background color for the hover state of a bar on the chart grid." + }, + "bar-chart-base-bg": { + "value": "{gray.100}", + "type": "color", + "description": "Default background color of a bar in the BarChart." + }, + "period-bg": { + "value": "rgba({gray.200}, 0.2)", + "type": "color", + "description": "Use for highlighting a period on the chart grid." + }, + "period-pattern": { + "value": "rgba({gray.800}, 0.15)", + "type": "color", + "description": "Stripe color for diagonal pattern background." + }, + "border": { + "value": "{gray.white}", + "type": "color", + "description": "Border for distinguishing data sets and chart dots on the chart grid." + } + }, + "x-axis-accent": { + "period-active": { + "value": "{gray.500}", + "type": "color", + "description": "Background color for the clickable date on the X-axis of the chart grid." + }, + "data-start-tracking": { + "value": "rgba({green.400}, 0.2)", + "type": "color", + "description": "Background color for the \"Start tracking\" date on the X-axis of the chart grid." + } + }, + "axis-label": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "fontSize": "{fs-100}" + }, + "type": "typography" + }, + "axis-label-bold": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "fontSize": "{fs-100}" + }, + "type": "typography" + } + }, + "header": { + "bg": { + "value": "{violet.dusty.700}", + "type": "color" + }, + "border": { + "primary": { + "value": "{violet.dusty.700}", + "type": "color" + }, + "secondary": { + "value": "#ffffff26", + "type": "color" + } + } + }, + "sidebar-nav": { + "control-hover": { + "value": "rgba({gray.100}, 0.7)", + "type": "color" + }, + "control-active": { + "value": "{violet.dusty.100}", + "type": "color" + }, + "control": { + "text": { + "normal": { + "value": "{violet.dusty.500}", + "type": "color" + }, + "active": { + "value": "{violet.dusty.600}", + "type": "color" + } + }, + "icon": { + "normal": { + "value": "{violet.dusty.400}", + "type": "color" + }, + "active": { + "value": "{violet.dusty.600}", + "type": "color" + } + } + } + }, + "duration": { + "extra-slow": { + "value": "500", + "type": "other", + "description": "Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen)" + }, + "slow": { + "value": "400", + "type": "other", + "description": "Should be used for more larger scale animations (such as page transitions)" + }, + "medium": { + "value": "300", + "type": "other", + "description": "Should be used for more complex effects (such as Modal)" + }, + "fast": { + "value": "200", + "type": "other", + "description": "Should be used for more complex effects (such as Dropdown or Accordion)" + }, + "extra-fast": { + "value": "100", + "type": "other", + "description": "Should be used for simpler effects and relatively small-sized animations (such as fades or color changes)" + }, + "switch": { + "value": "{duration.extra-fast}", + "type": "other", + "description": "Use for small controls like Switch or Slider." + }, + "popper": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for components based on popper like Tooltip, Dropdown or Filter trigger." + }, + "control": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for small controls like Checkbox or Radio." + }, + "modal": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Modal, Fullscreen Modal, Side panel or other kind of windows." + }, + "accordion": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Accordion." + }, + "counter": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Summary or Counter." + } + } + }, + "featureHighlight": { + "bg": { + "primary": { + "feature-highlight": { + "value": "{gray.white}", + "type": "color", + "description": "Primary background for highlighted controls." + }, + "feature-highlight-hover-active": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Primary background for hover and active (selected) state of highlighted controls." + } + }, + "secondary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Secondary background for the highlighted message." + } + } + }, + "border": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.300}, {blue.300})", + "type": "color", + "description": "Primary border for highlighted controls." + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Primary border for the active state of highlighted controls." + }, + "feature-highlight-secondary": { + "value": "linear-gradient(90deg, {violet.200}, {blue.200})", + "type": "color", + "description": "Secondary border for highlighted controls." + } + }, + "control": { + "primary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Background of the highlighted primary control." + }, + "feature-highlight-hover": { + "value": "linear-gradient(90deg, {violet.500}, {blue.500})", + "type": "color", + "description": "Hover state of the highlighted primary control." + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.600}, {blue.600})", + "type": "color", + "description": "Active (selected) state of the highlighted primary control." + } + }, + "secondary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Background of the highlighted secondary control." + }, + "feature-highlight-hover": { + "value": "linear-gradient(90deg, {violet.100}, {blue.100})", + "type": "color", + "description": "Hover state of the highlighted secondary control.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.3", + "space": "hsl" + } + } + } + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.100}, {blue.100})", + "type": "color", + "description": "Active (selected) state of the highlighted secondary control." + } + } + }, + "text": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.500}, {blue.500})", + "type": "color", + "description": "Text for highlighted features." + }, + "feature-highlight-hover-active": { + "value": "linear-gradient(90deg, {violet.700}, {blue.700})", + "type": "color", + "description": "Text for hover and active states of highlighted features." + } + }, + "icon": { + "primary": { + "feature-highlight": { + "value": "{violet.500}", + "type": "color", + "description": "Primary highlighted icon." + }, + "feature-highlight-hover-active": { + "value": "#6B3AB4", + "type": "color", + "description": "Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color." + } + } + }, + "keyboard-focus-feature-highlight": { + "value": { + "width": "3px", + "color": "{keyboard-focus-feature-highlight.outline}" + }, + "type": "border", + "description": "Keyboard focus styles for highlighted controls.", + "outline": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Color for keyboard focus outline styles for highlighted controls." + } + } + } +} diff --git a/semcore/core/src/theme/new.json b/semcore/core/src/theme/new.json new file mode 100644 index 0000000000..0030c830ce --- /dev/null +++ b/semcore/core/src/theme/new.json @@ -0,0 +1,2730 @@ +{ + "base": { + "gray": { + "50": { + "value": "#f7f8f9", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#eaeff1", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#d5dfe2", + "type": "color" + }, + "300": { + "value": "#b0c4c9", + "type": "color" + }, + "400": { + "value": "#85a2ab", + "type": "color" + }, + "500": { + "value": "#668791", + "type": "color" + }, + "600": { + "value": "#516e78", + "type": "color" + }, + "700": { + "value": "#425a62", + "type": "color" + }, + "800": { + "value": "#1e262a", + "type": "color" + }, + "white": { + "value": "#ffffff", + "type": "color" + } + }, + "blue": { + "50": { + "value": "#eaf0ff", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#bdd1ff", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#9dbaff", + "type": "color" + }, + "300": { + "value": "#709bff", + "type": "color" + }, + "400": { + "value": "#5487ff", + "type": "color" + }, + "500": { + "value": "#2969ff", + "type": "color" + }, + "600": { + "value": "#2560e8", + "type": "color" + }, + "700": { + "value": "#1d4bb5", + "type": "color" + }, + "800": { + "value": "#173a8c", + "type": "color" + } + }, + "green": { + "50": { + "value": "#ecf9ef", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#c5eccd", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#a9e2b4", + "type": "color" + }, + "300": { + "value": "#82d592", + "type": "color" + }, + "400": { + "value": "#69cd7d", + "type": "color" + }, + "500": { + "value": "#44c15d", + "type": "color" + }, + "600": { + "value": "#3eb055", + "type": "color" + }, + "700": { + "value": "#308942", + "type": "color" + }, + "800": { + "value": "#256a33", + "type": "color" + } + }, + "red": { + "50": { + "value": "#ffeaea", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#ffbdbd", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#ff9d9d", + "type": "color" + }, + "300": { + "value": "#ff7070", + "type": "color" + }, + "400": { + "value": "#ff5454", + "type": "color" + }, + "500": { + "value": "#ff2929", + "type": "color" + }, + "600": { + "value": "#e82525", + "type": "color" + }, + "700": { + "value": "#b51d1d", + "type": "color" + }, + "800": { + "value": "#8c1717", + "type": "color" + } + }, + "orange": { + "50": { + "value": "#fff1ec", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#ffd3c3", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#ffbda5", + "type": "color" + }, + "300": { + "value": "#ff9f7c", + "type": "color" + }, + "400": { + "value": "#ff8d63", + "type": "color" + }, + "500": { + "value": "#ff703c", + "type": "color" + }, + "600": { + "value": "#e86637", + "type": "color" + }, + "700": { + "value": "#b5502b", + "type": "color" + }, + "800": { + "value": "#8c3e21", + "type": "color" + } + }, + "yellow": { + "50": { + "value": "#fff8ea", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#ffeabd", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#ffe09d", + "type": "color" + }, + "300": { + "value": "#ffd170", + "type": "color" + }, + "400": { + "value": "#ffc954", + "type": "color" + }, + "500": { + "value": "#ffbb29", + "type": "color" + }, + "600": { + "value": "#e8aa25", + "type": "color" + }, + "700": { + "value": "#b5851d", + "type": "color" + }, + "800": { + "value": "#8c6717", + "type": "color" + } + }, + "violet": { + "50": { + "value": "#f3eaff", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#dabdff", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#c99dff", + "type": "color" + }, + "300": { + "value": "#b070ff", + "type": "color" + }, + "400": { + "value": "#a155ff", + "type": "color" + }, + "500": { + "value": "#892aff", + "type": "color" + }, + "600": { + "value": "#7d26e8", + "type": "color" + }, + "700": { + "value": "#611eb5", + "type": "color" + }, + "800": { + "value": "#4b178c", + "type": "color" + }, + "dusty": { + "50": { + "value": "#f5f4ff", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#e2ddff", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#bcb1e9", + "type": "color" + }, + "300": { + "value": "#a79cd6", + "type": "color" + }, + "400": { + "value": "#9083c5", + "type": "color" + }, + "500": { + "value": "#6d619f", + "type": "color" + }, + "600": { + "value": "#4d407e", + "type": "color" + }, + "700": { + "value": "#382e5e", + "type": "color" + }, + "800": { + "value": "#1d113e", + "type": "color" + } + } + }, + "pink": { + "50": { + "value": "#fff0ff", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#ffd3ff", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#ffa9fa", + "type": "color" + }, + "300": { + "value": "#ff87eb", + "type": "color" + }, + "400": { + "value": "#e14adf", + "type": "color" + }, + "500": { + "value": "#b229b9", + "type": "color" + }, + "600": { + "value": "#7d0480", + "type": "color" + }, + "700": { + "value": "#4d0050", + "type": "color" + }, + "800": { + "value": "#340439", + "type": "color" + } + }, + "salad": { + "50": { + "value": "#e8fef9", + "type": "color", + "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." + }, + "100": { + "value": "#b7faeb", + "type": "color", + "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." + }, + "200": { + "value": "#95f8e2", + "type": "color" + }, + "300": { + "value": "#64f5d4", + "type": "color" + }, + "400": { + "value": "#46f3cc", + "type": "color" + }, + "500": { + "value": "#18f0bf", + "type": "color" + }, + "600": { + "value": "#16daae", + "type": "color" + }, + "700": { + "value": "#11aa88", + "type": "color" + }, + "800": { + "value": "#0d8469", + "type": "color" + } + } + }, + "tokens": { + "bg": { + "primary": { + "neutral": { + "value": "{gray.white}", + "type": "color", + "description": "Primary background of the interface which contains the main data and information." + }, + "neutral-hover": { + "value": "{gray.50}", + "type": "color", + "description": "Hover state of the primary background of the interface which contains the main data and information." + }, + "neutral-active": { + "value": "{gray.100}", + "type": "color", + "description": "Active (selected) state of the primary background of the interface which contains the main data and information." + }, + "info": { + "value": "{blue.400}", + "type": "color", + "description": "Accent background of the message with regular information." + }, + "success": { + "value": "{green.400}", + "type": "color", + "description": "Accent background of the message or banner with information about the successful result." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Accent background of a message or a banner with a critical information." + }, + "warning": { + "value": "{orange.400}", + "type": "color", + "description": "Accent background of a message or a banner with a warning information." + }, + "highlight": { + "value": "{yellow.100}", + "type": "color", + "description": "Accent background of the information you want to highlight." + }, + "advertising": { + "value": "{violet.700}", + "type": "color", + "description": "Accent background for the advertising banners and controls." + }, + "muted": { + "value": "{gray.500}", + "type": "color", + "description": "Accented muted background for a message with regular information." + }, + "invert": { + "value": "{gray.800}", + "type": "color", + "description": "Inverted version of the primary background of the interface that contains the main data and information." + }, + "invert-hover": { + "value": "{gray.700}", + "type": "color", + "description": "Hover state for the inverted version of the primary background of the interface that contains the main data and information." + }, + "invert-active": { + "value": "{gray.600}", + "type": "color", + "description": "Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information." + } + }, + "secondary": { + "neutral": { + "value": "{gray.50}", + "type": "color", + "description": "Secondary background of the interface which contains the main data and information." + }, + "neutral-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Hover state of the secondary background of the interface which contains the main data and information." + }, + "neutral-active": { + "value": "{gray.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the interface which contains the main data and information." + }, + "info": { + "value": "{blue.50}", + "type": "color", + "description": "Secondary background of a message with regular information." + }, + "info-hover": { + "value": "{blue.100}", + "type": "color", + "description": "Hover state of the secondary background of a message with regular information." + }, + "info-active": { + "value": "{blue.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of a message with regular information." + }, + "success": { + "value": "{green.50}", + "type": "color", + "description": "Secondary background of the message with success information you want to accent." + }, + "success-hover": { + "value": "{green.100}", + "type": "color", + "description": "Hover state of the secondary background of the message with success information you want to accent." + }, + "success-active": { + "value": "{green.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with success information you want to accent." + }, + "critical": { + "value": "{red.50}", + "type": "color", + "description": "Secondary background of the message with critical information you want to accent." + }, + "critical-hover": { + "value": "{red.100}", + "type": "color", + "description": "Hover state of the secondary background of the message with critical information you want to accent." + }, + "critical-active": { + "value": "{red.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with critical information you want to accent." + }, + "warning": { + "value": "{orange.50}", + "type": "color", + "description": "Secondary background of the message with warning information you want to accent." + }, + "warning-hover": { + "value": "{orange.100}", + "type": "color", + "description": "Hover state of the secondary background of the message with warning information you want to accent." + }, + "warning-active": { + "value": "{orange.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the message with critical information you want to accent." + }, + "highlight": { + "value": "{yellow.50}", + "type": "color", + "description": "Secondary background of the information you want to highlight." + }, + "highlight-hover": { + "value": "{yellow.100}", + "type": "color", + "description": "Hover state of the secondary background of the information you want to highlight." + }, + "highlight-active": { + "value": "{yellow.200}", + "type": "color", + "description": "Active (selected) state of the secondary background of the information you want to highlight." + }, + "advertising": { + "value": "{violet.50}", + "type": "color", + "description": "Secondary background for the advertising message you want to accent." + }, + "advertising-hover": { + "value": "{violet.100}", + "type": "color", + "description": "Hover state of the secondary background for the advertising message you want to accent." + }, + "advertising-active": { + "value": "{violet.200}", + "type": "color", + "description": "Active (selected) state of the secondary background for the advertising message you want to accent." + } + }, + "highlight-results": { + "value": "rgba({yellow.300}, 0.4)", + "type": "color", + "description": "Highlighting the search results." + }, + "highlight-focus": { + "value": "rgba({blue.400}, 0.2)", + "type": "color", + "description": "Focusing values in the input." + } + }, + "text": { + "primary": { + "value": "{gray.800}", + "type": "color", + "description": "Primary text." + }, + "secondary": { + "value": "{gray.500}", + "type": "color", + "description": "Secondary text." + }, + "placeholder": { + "value": "{gray.400}", + "type": "color", + "description": "Placeholder text only." + }, + "success": { + "value": "{green.500}", + "type": "color", + "description": "Text associated with success states and data." + }, + "success-hover-active": { + "value": "{green.600}", + "type": "color", + "description": "Hover and active states for the text associated with success states and data." + }, + "critical": { + "value": "{red.500}", + "type": "color", + "description": "Text associated with critical states and data." + }, + "critical-hover-active": { + "value": "{red.600}", + "type": "color", + "description": "Hover and active states for the text associated with critical states and data." + }, + "primary-invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the primary text." + }, + "secondary-invert": { + "value": "rgba({gray.white}, 0.8)", + "type": "color", + "description": "Inverted version of the secondary text." + }, + "link": { + "value": "{blue.500}", + "type": "color", + "description": "Link text." + }, + "link-hover-active": { + "value": "{blue.600}", + "type": "color", + "description": "Hover and active states for the link text." + }, + "link-invert": { + "value": "{blue.200}", + "type": "color", + "description": "Inverted version of the link text. Use on dark background only." + }, + "link-invert-hover": { + "value": "{blue.300}", + "type": "color", + "description": "Hover and active states of the inverted version of the link text. Use on dark background only." + }, + "link-visited": { + "value": "{violet.500}", + "type": "color", + "description": "Visited link text." + }, + "hint": { + "value": "{gray.500}", + "type": "color", + "description": "Hint link text." + }, + "hint-hover-active": { + "value": "{gray.600}", + "type": "color", + "description": "Hover and active states of the hint link text." + }, + "hint-invert": { + "value": "{gray.200}", + "type": "color", + "description": "Inverted version of the hint link text." + }, + "hint-invert-hover-active": { + "value": "{gray.300}", + "type": "color", + "description": "Hover and active states of the inverted version of the hint link text." + }, + "large-secondary": { + "value": "{gray.300}", + "type": "color", + "description": "Secondary text. Use with font-size ≥20px." + }, + "large-info": { + "value": "{blue.400}", + "type": "color", + "description": "Link text with font-size ≥20px." + }, + "large-info-hover-active": { + "value": "{blue.500}", + "type": "color", + "description": "Hover and active states of the link text with font-size ≥20px." + }, + "large-success": { + "value": "{green.400}", + "type": "color", + "description": "Text with font-size ≥20px associated with success states and data." + }, + "large-success-hover-active": { + "value": "{green.500}", + "type": "color", + "description": "Hover and active states of the text with font-size ≥20px associated with success states and data." + }, + "large-critical": { + "value": "{red.400}", + "type": "color", + "description": "Text with font-size ≥20px associated with critical states and data." + }, + "large-critical-hover-active": { + "value": "{red.500}", + "type": "color", + "description": "Hover and active states of the text with font-size ≥20px associated with critical states and data." + }, + "advertising": { + "value": "{violet.700}", + "type": "color", + "description": "Advertising text." + } + }, + "border": { + "primary": { + "value": "{gray.200}", + "type": "color", + "description": "Neutral primary border." + }, + "secondary": { + "value": "{gray.100}", + "type": "color", + "description": "Subtle secondary border." + }, + "info": { + "value": "{blue.200}", + "type": "color", + "description": "Subtle secondary border in the informational message." + }, + "info-active": { + "value": "{gray.800}", + "type": "color", + "description": "Active border in focused input filed." + }, + "success": { + "value": "{green.200}", + "type": "color", + "description": "Subtle secondary border in the successful message and input field." + }, + "success-active": { + "value": "{green.500}", + "type": "color", + "description": "Active border in the focused input field with valid state." + }, + "critical": { + "value": "{red.200}", + "type": "color", + "description": "Subtle secondary border in the critical message and invalid input field." + }, + "critical-active": { + "value": "{red.500}", + "type": "color", + "description": "Active border in the focused input field with invalid state, and active state of the other components with invalid state." + }, + "warning": { + "value": "{orange.200}", + "type": "color", + "description": "Subtle secondary border in the warning message." + }, + "warning-active": { + "value": "{orange.500}", + "type": "color", + "description": "Active border in components with warning intention." + }, + "primary-invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the neutral primary border. Use it for borders on the dark or color background." + }, + "secondary-invert": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background." + }, + "tooltip-invert": { + "value": "{gray.500}", + "type": "color", + "description": "Border of the Tooltip with dark theme." + }, + "table-accent": { + "value": "{gray.300}", + "type": "color", + "description": "Accent borders in the Table: for the accordion in the table and for the header of the secondary table." + }, + "date-picker-range-comparison": { + "value": "{violet.500}", + "type": "color", + "description": "Border color of the second period for the comparison mode in the DatePicker." + }, + "critical-pattern": { + "value": "repeating-linear-gradient(315deg, rgba($border.critical-active, 1) 0, rgba($border.critical-active, 1) 2px, transparent 0, transparent 50%)", + "type": "color", + "description": "Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states." + } + }, + "control": { + "switch-bg": { + "value": "{gray.300}", + "type": "color", + "description": "Subtle background of the Switch control." + }, + "primary": { + "info": { + "value": "{gray.800}", + "type": "color", + "description": "Background of the regular primary control." + }, + "info-hover": { + "value": "{gray.800}", + "type": "color", + "description": "Hover state of the regular primary control." + }, + "info-active": { + "value": "{gray.800}", + "type": "color", + "description": "Active (selected) state of the regular primary control." + }, + "success": { + "value": "{green.400}", + "type": "color", + "description": "Background of the primary control with successful theme." + }, + "success-hover": { + "value": "{green.500}", + "type": "color", + "description": "Hover state of the primary control with successful theme." + }, + "success-active": { + "value": "{green.600}", + "type": "color", + "description": "Active (selected) state of the primary control with successful theme." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Background of the primary control with danger theme." + }, + "critical-hover": { + "value": "{red.500}", + "type": "color", + "description": "Hover state of the primary control with danger theme." + }, + "critical-active": { + "value": "{red.600}", + "type": "color", + "description": "Active (selected) state of the primary control with danger theme." + }, + "brand": { + "value": "{orange.400}", + "type": "color", + "description": "Background of the primary brand colored control." + }, + "brand-hover": { + "value": "{orange.500}", + "type": "color", + "description": "Hover state of the primary brand colored control." + }, + "brand-active": { + "value": "{orange.600}", + "type": "color", + "description": "Active state of the primary brand colored control." + }, + "advertising": { + "value": "{violet.600}", + "type": "color", + "description": "Background of the advertising primary control." + }, + "advertising-hover": { + "value": "{violet.700}", + "type": "color", + "description": "Hover state of the advertising primary control." + }, + "advertising-active": { + "value": "{violet.500}", + "type": "color", + "description": "Active (selected) state of the advertising primary control." + }, + "invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted background of the primary control." + }, + "invert-hover": { + "value": "{gray.50}", + "type": "color", + "description": "Hover state of the inverted primary control." + }, + "invert-active": { + "value": "{gray.100}", + "type": "color", + "description": "Active (selected) state of the inverted primary control." + } + }, + "secondary": { + "neutral": { + "value": "rgba({gray.400}, 0.1)", + "type": "color", + "description": "Background of the regular secondary control." + }, + "neutral-hover": { + "value": "rgba({gray.400}, 0.2)", + "type": "color", + "description": "Hover state of the regular secondary control." + }, + "neutral-active": { + "value": "rgba({gray.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the regular secondary control." + }, + "info": { + "value": "rgba({blue.400}, 0.1)", + "type": "color", + "description": "Background of the accent secondary control." + }, + "info-hover": { + "value": "rgba({blue.400}, 0.2)", + "type": "color", + "description": "Hover state of the accent secondary control." + }, + "info-active": { + "value": "rgba({blue.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the accent secondary control." + }, + "invert": { + "value": "rgba({gray.white}, 0.05)", + "type": "color", + "description": "Background of the inverted version of the secondary control." + }, + "invert-hover": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Hover state of the inverted version of the secondary control." + }, + "invert-active": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Active (selected) state of the inverted version of the secondary control." + } + }, + "tertiary": { + "neutral": { + "value": "rgba({gray.400}, 0)", + "type": "color", + "description": "Background of the regular tertiary control." + }, + "neutral-hover": { + "value": "rgba({gray.400}, 0.2)", + "type": "color", + "description": "Hover state of the regular tertiary control." + }, + "neutral-active": { + "value": "rgba({gray.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the regular tertiary control." + }, + "info": { + "value": "rgba({blue.400}, 0)", + "type": "color", + "description": "Background of the accent and link-lookalike tertiary control." + }, + "info-hover": { + "value": "rgba({blue.400}, 0.2)", + "type": "color", + "description": "Hover state of the accent and link-lookalike tertiary control." + }, + "info-active": { + "value": "rgba({blue.400}, 0.3)", + "type": "color", + "description": "Active (selected) state of the accent and link-lookalike tertiary control." + }, + "invert": { + "value": "rgba({gray.white}, 0)", + "type": "color", + "description": "Background of the inverted version of the tertiary control." + }, + "invert-hover": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Hover state of the inverted version of the tertiary control." + }, + "invert-active": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Active (selected) state of the inverted version of the tertiary control." + } + } + }, + "icon": { + "primary": { + "neutral": { + "value": "{gray.500}", + "type": "color", + "description": "Primary neutral icon." + }, + "neutral-hover-active": { + "value": "#565861", + "type": "color", + "description": "Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color." + }, + "info": { + "value": "{blue.500}", + "type": "color", + "description": "Primary link-lookalike icon." + }, + "info-hover-active": { + "value": "#0358a1", + "type": "color", + "description": "Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color." + }, + "success": { + "value": "{green.400}", + "type": "color", + "description": "Primary success icon." + }, + "success-hover-active": { + "value": "#037e68", + "type": "color", + "description": "Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color." + }, + "critical": { + "value": "{red.400}", + "type": "color", + "description": "Primary critical icon." + }, + "critical-hover-active": { + "value": "#cc3a42", + "type": "color", + "description": "Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color." + }, + "warning": { + "value": "{orange.400}", + "type": "color", + "description": "Primary warning icon." + }, + "warning-hover-active": { + "value": "#cc5024", + "type": "color", + "description": "Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color." + }, + "invert": { + "value": "{gray.white}", + "type": "color", + "description": "Inverted version of the primary icon." + }, + "invert-hover-active": { + "value": "{gray.100}", + "type": "color", + "description": "Hover and active (selected) states of the inverted version of the primary icon." + } + }, + "secondary": { + "neutral": { + "value": "{gray.300}", + "type": "color", + "description": "Secondary neutral icon." + }, + "neutral-hover-active": { + "value": "#878992", + "type": "color", + "description": "Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color." + }, + "info": { + "value": "{blue.300}", + "type": "color", + "description": "Secondary link-lookalike icon." + }, + "info-hover-active": { + "value": "#2290cc", + "type": "color", + "description": "Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color." + }, + "success": { + "value": "{green.300}", + "type": "color", + "description": "Secondary success icon." + }, + "success-hover-active": { + "value": "#049b75", + "type": "color", + "description": "Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color." + }, + "critical": { + "value": "{red.300}", + "type": "color", + "description": "Secondary critical icon." + }, + "critical-hover-active": { + "value": "#cc6c6b", + "type": "color", + "description": "Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color." + }, + "warning": { + "value": "{orange.300}", + "type": "color", + "description": "Secondary warning icon." + }, + "warning-hover-active": { + "value": "#cc7036", + "type": "color", + "description": "Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color." + } + }, + "non-interactive": { + "value": "{gray.800}", + "type": "color", + "description": "Color for the default non-interactive icon." + } + }, + "illustration": { + "red": { + "value": "#ff788f", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "orange": { + "value": "#ff9400", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "yellow": { + "value": "#ffe84d", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "salad": { + "value": "#c7fa73", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "green": { + "value": "#45e0a8", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "blue": { + "value": "#6edbff", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "violet": { + "value": "#b880ff", + "type": "color", + "description": "⚠️ Use only for illustrations." + }, + "pink": { + "value": "#ff7ad1", + "type": "color", + "description": "⚠️ Use only for illustrations." + } + }, + "date-picker": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Default date-picker cell background." + }, + "cell-current": { + "value": "{gray.400}", + "type": "color", + "description": "Color for marking the cell with the current date, month or year in the date-picker." + }, + "cell-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Hover state of the default date-picker cell background." + }, + "cell-range": { + "value": "{blue.100}", + "type": "color", + "description": "Background for the cell which is included in the date range in the date-picker." + }, + "cell-range-hover": { + "value": "{blue.200}", + "type": "color", + "description": "Hover state of the background for the cell which is included in the date range in the date-picker." + }, + "cell-active": { + "value": "{blue.300}", + "type": "color", + "description": "Active (selected) date-picker cell background." + }, + "cell-active-hover": { + "value": "{blue.400}", + "type": "color", + "description": "Hover for the active (selected) date-picker cell background." + }, + "cell-current-invert": { + "value": "rgba({gray.white}, 0.5)", + "type": "color", + "description": "Color for marking the active cell with the current date, month or year in the date-picker." + }, + "cell-comparison-active": { + "value": "{violet.500}", + "type": "color", + "description": "Active (selected) date-picker cell background for comparison periods." + }, + "cell-comparison-active-hover": { + "value": "{violet.600}", + "type": "color", + "description": "Hover for the active (selected) date-picker cell background for comparison periods." + } + }, + "dropdown-menu": { + "item": { + "value": "{gray.white}", + "type": "color", + "description": "Default background color for the list item in the dropdown-menu." + }, + "item-hover": { + "value": "{gray.50}", + "type": "color", + "description": "Hover state of the default background color for the list item in the dropdown-menu." + }, + "item-selected": { + "value": "rgba({blue.100}, 0.7)", + "type": "color", + "description": "Active (selected) state of the default background color for the list item in the dropdown-menu." + }, + "item-selected-hover": { + "value": "{blue.100}", + "type": "color", + "description": "Hover state for the selected state of the default background color for the list item in the dropdown-menu." + } + }, + "feature-popover": { + "bg": { + "value": "{bg.primary.highlight}", + "type": "color", + "description": "Color of the FeaturePopover background with accent theme." + }, + "dot-outer-border": { + "value": "{feature-popover.bg}", + "type": "color", + "description": "Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme." + }, + "bg-neutral": { + "value": "{violet.dusty.800}", + "type": "color", + "description": "Color of the FeaturePopover background with neutral theme." + }, + "dot-neutral": { + "value": "{green.300}", + "type": "color", + "description": "Color of the FeaturePopover.Spot for FeaturePopover with neutral theme." + }, + "dot-neutral-outer-border": { + "value": "{feature-popover.dot-neutral}", + "type": "color", + "description": "Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme." + } + }, + "progress-bar": { + "bg": { + "value": "{gray.100}", + "type": "color", + "description": "Background color of the ProgressBar." + }, + "bg-hover": { + "value": "{gray.200}", + "type": "color", + "description": "Hover state of the background color of the ProgressBar." + }, + "bg-invert": { + "value": "rgba({gray.white}, 0.2)", + "type": "color", + "description": "Inverted version of the background color of the ProgressBar." + }, + "bg-invert-hover": { + "value": "rgba({gray.white}, 0.4)", + "type": "color", + "description": "Hover state for the inverted version of the background color of the ProgressBar." + }, + "value": { + "value": "{green.400}", + "type": "color", + "description": "Value color of the ProgressBar." + }, + "value-gradient": { + "value": "linear-gradient(-45deg, rgba(68, 193, 93, 0.9) 25%, rgba(68, 193, 93, 1) 0%, rgba(68, 193, 93, 1) 50%, rgba(68, 193, 93, 0.9) 0%, rgba(68, 193, 93, 0.9) 75%, rgba(68, 193, 93, 1) 0%)", + "type": "color", + "description": "Value with gradient for the ProgressBar." + }, + "pattern-gradient": { + "value": "linear-gradient(-45deg, rgba(234, 239, 241, 0.9) 25%, rgba(234, 239, 241, 1) 0%, rgba(234, 239, 241, 1) 50%, rgba(234, 239, 241, 0.9) 0%, rgba(234, 239, 241, 0.9) 75%, rgba(234, 239, 241, 1) 0%)", + "type": "color", + "description": "Null value gradient for the ProgressBar." + }, + "value-bg": { + "value": "#000000", + "type": "color", + "description": "Base value background for the ProgressBar. It is used to create gradients for the values." + } + }, + "skeleton": { + "bg": { + "value": "rgba({gray.100}, 0.8)", + "type": "color", + "description": "Default color for the Skeleton." + }, + "bg-invert": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Inverted version of the default color for the Skeleton." + } + }, + "slider-rating": { + "normal": { + "value": "{icon.secondary.neutral}", + "type": "color", + "description": "Icon color for the SliderRating component in its normal state." + }, + "hover-active": { + "value": "{yellow.200}", + "type": "color", + "description": "Icon color for the SliderRating component in its hovered and active states." + } + }, + "table": { + "th": { + "primary": { + "cell": { + "value": "{gray.50}", + "type": "color", + "description": "Background of the header cell in the primary Table." + }, + "cell-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the hovered header cell in the primary Table." + }, + "cell-active": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the active header cell in the primary Table." + } + }, + "secondary": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Background of the header cell in the secondary Table." + } + }, + "gradient": { + "value": "linear-gradient(to right, rgba($gray.100, 0) 0%, rgba($gray.100, 1) 100%)", + "type": "color", + "description": "Background gradient for sorting icon that absolute positioned in the table head." + } + }, + "td": { + "cell": { + "value": "{gray.white}", + "type": "color", + "description": "Background of the default cell in the Table." + }, + "cell-hover": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the default hovered cell in the Table.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.5", + "space": "hsl" + } + } + } + }, + "cell-active": { + "value": "{gray.100}", + "type": "color", + "description": "Background of the default active cell in the Table.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.2", + "space": "hsl" + } + } + } + }, + "cell-unread": { + "value": "{gray.50}", + "type": "color", + "description": "Background of the unread cell in the Table." + }, + "cell-accordion": { + "value": "{gray.50}", + "type": "color", + "description": "Background of the cell inside an Accordion in the Table." + }, + "cell-selected": { + "value": "{blue.50}", + "type": "color", + "description": "Background of the selected cell in the Table." + }, + "cell-selected-hover": { + "value": "{blue.100}", + "type": "color", + "description": "Background of the hovered selected cell in the Table." + }, + "cell-selected-active": { + "value": "{blue.100}", + "type": "color", + "description": "Background of the active selected cell in the Table." + }, + "cell-new": { + "value": "{green.50}", + "type": "color", + "description": "Background of the cell with new information in the Table." + }, + "cell-new-hover": { + "value": "{green.100}", + "type": "color", + "description": "Background of the hovered cell with new information in the Table." + }, + "cell-new-active": { + "value": "{green.100}", + "type": "color", + "description": "Background of the active cell with new information in the Table." + }, + "cell-critical": { + "value": "{red.50}", + "type": "color", + "description": "Background of the cell with critical information in the Table." + }, + "cell-critical-hover": { + "value": "{red.100}", + "type": "color", + "description": "Background of the hovered cell with critical information in the Table." + }, + "cell-critical-active": { + "value": "{red.100}", + "type": "color", + "description": "Background of the active cell with critical information in the Table." + }, + "cell-warning": { + "value": "{orange.50}", + "type": "color", + "description": "Background of the cell with warning information in the Table." + }, + "cell-warning-hover": { + "value": "{orange.100}", + "type": "color", + "description": "Background of the hovered cell with warning information in the Table." + }, + "cell-warning-active": { + "value": "{orange.100}", + "type": "color", + "description": "Background of the active cell with warning information in the Table." + } + } + }, + "brand": { + "primary": { + "value": "{orange.400}", + "type": "color", + "description": "Primary brand color." + }, + "secondary": { + "value": "{violet.700}", + "type": "color", + "description": "Secondary brand color." + }, + "pinterest": { + "value": "#bd081c", + "type": "color", + "description": "Pinterest brand color." + }, + "instagram": { + "value": "#e4405f", + "type": "color", + "description": "Instagram brand color." + }, + "youtube": { + "value": "#ff0000", + "type": "color", + "description": "Youtube brand color." + }, + "facebook": { + "value": "#1877f2", + "type": "color", + "description": "Facebook brand color." + }, + "linkedIn": { + "value": "#0a66c2", + "type": "color", + "description": "LinkedIn brand color." + }, + "twitter": { + "value": "#1d9bf0", + "type": "color", + "description": "Twitter brand color." + }, + "google-blue": { + "value": "#1a0dab", + "type": "color", + "description": "Google brand color for the link." + }, + "google-green": { + "value": "#016723", + "type": "color", + "description": "Google green brand color for the link." + }, + "google-my-business": { + "value": "#1a73e8", + "type": "color", + "description": "Google My Business brand color." + } + }, + "box-shadow": { + "card": { + "value": "0 0 0 1px {gray.100}", + "type": "boxShadow", + "description": "Default shadow of the Card." + }, + "card-hover": { + "value": "3px 3px 30px 0px rgba({gray.800}, 0.15)", + "type": "boxShadow", + "description": "Hover state for the shadow of the Card with hover state." + }, + "dnd": { + "value": "0px 0px 1px 0px rgba({gray.800}, 0.16); 0px 12px 40px 0px rgba({gray.800}, 0.16)", + "type": "boxShadow", + "description": "Shadow for show that element are being drag-and-drop." + }, + "modal": { + "value": "0px 3px 8px 0px rgba({gray.800}, 0.2)", + "type": "boxShadow", + "description": "Default shadow if the Modal window." + }, + "popper": { + "value": "0px 1px 12px 0px rgba({gray.800}, 0.15)", + "type": "boxShadow", + "description": "Default shadow of all Poppers, Dropdowns and Tooltips." + }, + "float-control": { + "value": [ + { + "x": "0", + "y": "0", + "blur": "1", + "spread": "0", + "color": "rgba(0,0,0,0.16)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "1", + "blur": "2", + "spread": "0", + "color": "rgba(0,0,0,0.12)", + "type": "dropShadow" + } + ], + "type": "boxShadow", + "description": "Use it only for controls that float above the whole interface." + }, + "float-control-hover": { + "value": [ + { + "x": "0", + "y": "0", + "blur": "2", + "spread": "0", + "color": "rgba(0,0,0,0.2)", + "type": "dropShadow" + }, + { + "x": "0", + "y": "1", + "blur": "4", + "spread": "0", + "color": "rgba(0,0,0,0.16)", + "type": "dropShadow" + } + ], + "type": "boxShadow", + "description": "Use it only for controls that float above the whole interface." + } + }, + "keyboard-focus": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.outline}, 0.5)", + "type": "boxShadow", + "description": "Default keyboard focus box-shadow styles.", + "outline": { + "value": "{gray.800}", + "type": "color", + "description": "Color for default keyboard focus outline styles." + }, + "invalid": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.invalid.outline}, 0.5)", + "type": "boxShadow", + "description": "Keyboard focus styles for elements with invalid state.", + "outline": { + "value": "{red.400}", + "type": "color", + "description": "Color for keyboard focus outline styles for elements with invalid state." + } + }, + "valid": { + "value": "0px 0px 0px 3px rgba({keyboard-focus.valid.outline}, 0.5)", + "type": "boxShadow", + "description": "Keyboard focus styles for elements with valid state.", + "outline": { + "value": "{green.400}", + "type": "color", + "description": "Color for keyboard focus outline styles for elements with valid state." + } + }, + "invert": { + "value": "0px 0px 0px 3px {keyboard-focus.invert.outline}", + "type": "boxShadow", + "description": "Keyboard focus styles for use on dark backgrounds.", + "outline": { + "value": "rgba({gray.white}, 0.8)", + "type": "color", + "description": "Color for keyboard focus outline styles to use on the dark and color background." + } + } + }, + "base": { + "value": "Inter", + "type": "fontFamilies", + "description": "Base font family." + }, + "lh-800": { + "value": "117%", + "type": "lineHeights", + "description": "Use with font-size-800." + }, + "lh-700": { + "value": "110%", + "type": "lineHeights", + "description": "Use with font-size-700." + }, + "lh-600": { + "value": "125%", + "type": "lineHeights", + "description": "Use with font-size-600." + }, + "lh-500": { + "value": "117%", + "type": "lineHeights", + "description": "Use with font-size-500." + }, + "lh-400": { + "value": "120%", + "type": "lineHeights", + "description": "Use with font-size-400." + }, + "lh-300": { + "value": "150%", + "type": "lineHeights", + "description": "Use with font-size-300." + }, + "lh-200": { + "value": "142%", + "type": "lineHeights", + "description": "Use with font-size-200." + }, + "lh-100": { + "value": "133%", + "type": "lineHeights", + "description": "Use with font-size-100." + }, + "semi-bold": { + "value": "600", + "type": "fontWeights", + "description": "Semi-bold font weight." + }, + "bold": { + "value": "700", + "type": "fontWeights", + "description": "Bold font weight." + }, + "regular": { + "value": "400", + "type": "fontWeights", + "description": "Regular font weight." + }, + "medium": { + "value": "500", + "type": "fontWeights", + "description": "Medium font weight." + }, + "fs-50": { + "value": "10px", + "type": "fontSizes", + "description": "Use only for text in Badge component." + }, + "fs-100": { + "value": "12px", + "type": "fontSizes", + "description": "Use this font-size with caution for text in some additional messages. Always check its contrast and readability." + }, + "fs-200": { + "value": "14px", + "type": "fontSizes" + }, + "fs-300": { + "value": "16px", + "type": "fontSizes" + }, + "fs-400": { + "value": "20px", + "type": "fontSizes" + }, + "fs-500": { + "value": "24px", + "type": "fontSizes" + }, + "fs-600": { + "value": "32px", + "type": "fontSizes" + }, + "fs-700": { + "value": "36px", + "type": "fontSizes" + }, + "fs-800": { + "value": "48px", + "type": "fontSizes" + }, + "compact": { + "value": "0.3", + "type": "letterSpacing", + "description": "Compact letter spacing." + }, + "heading-h1": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-800}", + "fontSize": "{fs-800}" + }, + "type": "typography" + }, + "heading-h2": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-700}", + "fontSize": "{fs-700}" + }, + "type": "typography", + "description": "Landing headings" + }, + "heading-h3": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-600}", + "fontSize": "{fs-600}" + }, + "type": "typography", + "description": "Tool page main heading" + }, + "heading-h4": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-500}", + "fontSize": "{fs-500}" + }, + "type": "typography", + "description": "Tool page heading" + }, + "heading-h5": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{semi-bold}", + "lineHeight": "{lh-400}", + "fontSize": "{fs-400}" + }, + "type": "typography", + "description": "Widget heading" + }, + "heading-h6": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "lineHeight": "{lh-300}", + "fontSize": "{fs-300}" + }, + "type": "typography", + "description": "Widget, notice & dropdown heading" + }, + "subtitle": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{regular}", + "lineHeight": "{lh-400}", + "fontSize": "{fs-400}" + }, + "type": "typography", + "description": "Use for big subtitles on the landing pages." + }, + "scale-indent": { + "value": "4px", + "type": "spacing", + "description": "Base denominator of the design system." + }, + "form-control-s": { + "value": "{scale-indent}*5", + "type": "sizing", + "description": "Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions." + }, + "form-control-m": { + "value": "{scale-indent}*7", + "type": "sizing", + "description": "Default size of the controls." + }, + "form-control-l": { + "value": "{scale-indent}*10", + "type": "sizing", + "description": "Large size of the controls." + }, + "spacing-05x": { + "value": "{scale-indent}*0.5", + "type": "spacing", + "description": "2px" + }, + "spacing-1x": { + "value": "{scale-indent}*1", + "type": "spacing", + "description": "4px" + }, + "spacing-2x": { + "value": "{scale-indent}*2", + "type": "spacing", + "description": "8px" + }, + "spacing-3x": { + "value": "{scale-indent}*3", + "type": "spacing", + "description": "12px" + }, + "spacing-4x": { + "value": "{scale-indent}*4", + "type": "spacing", + "description": "16px" + }, + "spacing-5x": { + "value": "{scale-indent}*5", + "type": "spacing", + "description": "20px" + }, + "spacing-6x": { + "value": "{scale-indent}*6", + "type": "spacing", + "description": "24px" + }, + "spacing-8x": { + "value": "{scale-indent}*8", + "type": "spacing", + "description": "32px" + }, + "spacing-10x": { + "value": "{scale-indent}*10", + "type": "spacing", + "description": "40px" + }, + "spacing-14x": { + "value": "{scale-indent}*14", + "type": "spacing", + "description": "56px" + }, + "spacing-20x": { + "value": "{scale-indent}*20", + "type": "spacing", + "description": "80px" + }, + "spacing-24x": { + "value": "{scale-indent}*24", + "type": "spacing", + "description": "96px" + }, + "spacing-30x": { + "value": "{scale-indent}*30", + "type": "spacing", + "description": "120px" + }, + "rounded-extra-small": { + "value": "2px", + "type": "borderRadius" + }, + "rounded-small": { + "value": "4px", + "type": "borderRadius" + }, + "rounded-medium": { + "value": "6px", + "type": "borderRadius" + }, + "rounded-large": { + "value": "12px", + "type": "borderRadius" + }, + "rounded-extra-large": { + "value": "24px", + "type": "borderRadius" + }, + "addon-rounded": { + "value": "{rounded-small}", + "type": "borderRadius", + "description": "Use for rounding addons and small controls like Checkbox." + }, + "badge-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding Badge." + }, + "chart-rounded": { + "value": "{rounded-extra-small}", + "type": "borderRadius", + "description": "Use for rounding big and small charts like bar, histogram and others." + }, + "counter-rounded": { + "value": "{rounded-large}", + "type": "borderRadius", + "description": "Use for rounding Counter." + }, + "tag-rounded": { + "value": "{rounded-extra-large}", + "type": "borderRadius", + "description": "Use for rounding Tag." + }, + "switch-rounded": { + "value": "{rounded-extra-large}", + "type": "borderRadius", + "description": "Use for rounding Switch." + }, + "control-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc." + }, + "progress-bar-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding bars: ProgressBar, SliderBar, etc." + }, + "surface-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding surfaces like Card, blocks, widgets, Notice, etc." + }, + "popper-rounded": { + "value": "{rounded-medium}", + "type": "borderRadius", + "description": "Use for rounding all kinds of poppers and dropdowns." + }, + "modal-rounded": { + "value": "{rounded-large}", + "type": "borderRadius", + "description": "Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard)." + }, + "disabled-opacity": { + "value": "0.5", + "type": "opacity", + "description": "Use for the disabled state of all kind of the controls and elements." + }, + "screen-extra-small": { + "value": "320px", + "type": "sizing", + "description": "Extra small screens (small phones)." + }, + "screen-small": { + "value": "768px", + "type": "sizing", + "description": "Small screens (phones and small tablets)." + }, + "screen-medium": { + "value": "1200px", + "type": "sizing", + "description": "Medium screens (tablets and small laptops)." + }, + "screen-large": { + "value": "1920px", + "type": "sizing", + "description": "Large screens (tablets and laptops)." + }, + "overlay": { + "primary": { + "value": "rgba({gray.800}, 0.7)", + "type": "color", + "description": "Use for cover the content under the modal dialogs." + }, + "secondary": { + "value": "rgba({gray.800}, 0.4)", + "type": "color", + "description": "Use for the secondary modal dialogs that were opened upon the other modal dialogs." + }, + "limitation-primary": { + "value": "{gray.50}", + "type": "color", + "description": "Use as a primary cover of the content under the messages about limitations." + }, + "limitation-secondary": { + "value": "rgba({gray.white}, 0.85)", + "type": "color", + "description": "Use as a secondary cover of the content under the messages about limitations." + } + }, + "z-index": { + "deep": { + "value": "-999", + "type": "other" + }, + "overlay": { + "value": "500", + "type": "other" + }, + "modal": { + "value": "900", + "type": "other" + }, + "popper": { + "value": "700", + "type": "other" + }, + "dropdown": { + "value": "750", + "type": "other" + }, + "tooltip": { + "value": "800", + "type": "other" + }, + "notice-bubble": { + "value": "999", + "type": "other" + } + }, + "tooltip": { + "default": { + "value": "{gray.white}", + "type": "color", + "description": "Default Tooltip background." + }, + "warning": { + "value": "{red.100}", + "type": "color", + "description": "Warning Tooltip background." + }, + "invert": { + "value": "{gray.800}", + "type": "color", + "description": "Inverted version of the default Tooltip background." + } + }, + "neighbor-location": { + "neutral": { + "value": "#ffffff80", + "type": "color", + "description": "Neutral border of the components that are combined with neighbor-location property." + }, + "invert": { + "value": "#00000080", + "type": "color", + "description": "Inverted border of the components that are combined with neighbor-location property." + } + }, + "scroll-area": { + "shadow-left": { + "value": "linear-gradient(to right, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)", + "type": "color", + "description": "Left-to-right fade shadow for the ScrollArea." + }, + "shadow-right": { + "value": "linear-gradient(to left, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)", + "type": "color", + "description": "Right-to-left fade shadow for the ScrollArea." + }, + "shadow-top": { + "value": "linear-gradient(to bottom, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)", + "type": "color", + "description": "Top-to-bottom fade shadow for the ScrollArea." + }, + "shadow-bottom": { + "value": "linear-gradient(to top, rgba($gray.800, 0.1) 20.55%, rgba($gray.white, 0.0001) 100%)", + "type": "color", + "description": "Bottom-to-top fade shadow for the ScrollArea." + }, + "dropdown-menu-left": { + "value": "linear-gradient(to right, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)", + "type": "color", + "description": "Left-to-right fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-right": { + "value": "linear-gradient(to left, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)", + "type": "color", + "description": "Right-to-left fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-bottom": { + "value": "linear-gradient(to top, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)", + "type": "color", + "description": "Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu." + }, + "dropdown-menu-top": { + "value": "linear-gradient(to bottom, rgba($gray.white, 1) 34.38%, rgba($gray.white, 0) 100%)", + "type": "color", + "description": "Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu." + } + }, + "scroll-bar": { + "background": { + "value": "rgba({gray.800}, 0.3)", + "type": "color", + "description": "Background color for ScrollBar." + } + }, + "tag": { + "primary": { + "gray-normal": { + "value": "#ecedf0", + "type": "color", + "description": "Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath." + }, + "gray-hover-active": { + "value": "#e3e4e9", + "type": "color", + "description": "Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath." + }, + "blue-normal": { + "value": "#d0eeff", + "type": "color", + "description": "Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath." + }, + "blue-hover-active": { + "value": "#b7e4ff", + "type": "color", + "description": "Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath." + }, + "green-normal": { + "value": "#cff1ea", + "type": "color", + "description": "Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath." + }, + "green-hover-active": { + "value": "#b7eae0", + "type": "color", + "description": "Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath." + }, + "orange-normal": { + "value": "#ffddd2", + "type": "color", + "description": "Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath." + }, + "orange-hover-active": { + "value": "#ffccbb", + "type": "color", + "description": "Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath." + }, + "red-normal": { + "value": "#ffcedc", + "type": "color", + "description": "Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath." + }, + "red-hover-active": { + "value": "#ffb6ca", + "type": "color", + "description": "Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath." + }, + "violet-normal": { + "value": "#f4e3ff", + "type": "color", + "description": "Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath." + }, + "violet-hover-active": { + "value": "#efd5ff", + "type": "color", + "description": "Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath." + }, + "yellow-normal": { + "value": "#fee6d1", + "type": "color", + "description": "Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath." + }, + "yellow-hover-active": { + "value": "#fedab9", + "type": "color", + "description": "Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath." + }, + "white-normal": { + "value": "rgba({gray.white}, 0.15)", + "type": "color", + "description": "Primary white tag." + }, + "white-hover-active": { + "value": "rgba({gray.white}, 0.3)", + "type": "color", + "description": "Hover and active (selected) state of the primary white tag." + }, + "gray-text": { + "value": "{gray.500}", + "type": "color", + "description": "Gray text for the primary gray tag." + }, + "blue-text": { + "value": "{blue.500}", + "type": "color", + "description": "Blue text for the primary blue tag." + }, + "green-text": { + "value": "{green.500}", + "type": "color", + "description": "Green text for the primary green tag." + }, + "orange-text": { + "value": "{orange.500}", + "type": "color", + "description": "Orange text for the primary orange tag." + }, + "red-text": { + "value": "{red.500}", + "type": "color", + "description": "Red text for the primary red tag." + }, + "violet-text": { + "value": "{violet.500}", + "type": "color", + "description": "Violet text for the primary violet tag." + }, + "yellow-text": { + "value": "{yellow.500}", + "type": "color", + "description": "Yellow text for the primary yellow tag." + }, + "white-text": { + "value": "{gray.white}", + "type": "color", + "description": "White text for the primary white tag." + } + }, + "secondary": { + "normal": { + "value": "{gray.white}", + "type": "color", + "description": "Background color for the default secondary tag." + }, + "hover-active": { + "value": "{gray.50}", + "type": "color", + "description": "Hover and active (selected) states of the background color for the default secondary tag." + }, + "white-normal": { + "value": "rgba({gray.white}, 0)", + "type": "color", + "description": "White secondary tag." + }, + "white-hover-active": { + "value": "rgba({gray.white}, 0.1)", + "type": "color", + "description": "Active state of the secondary white tag." + }, + "gray-text": { + "value": "{gray.500}", + "type": "color", + "description": "Gray text for the default secondary tag." + }, + "white-text": { + "value": "{gray.white}", + "type": "color", + "description": "White text for the secondary white tag." + } + } + }, + "chart": { + "palette-order": { + "1": { + "value": "{blue.300}", + "type": "color", + "description": "1 color in the default list of colors for charts." + }, + "2": { + "value": "{green.200}", + "type": "color", + "description": "2 color in the default list of colors for charts." + }, + "3": { + "value": "{orange.400}", + "type": "color", + "description": "3 color in the default list of colors for charts." + }, + "4": { + "value": "{pink.300}", + "type": "color", + "description": "4 color in the default list of colors for charts." + }, + "5": { + "value": "{yellow.200}", + "type": "color", + "description": "5 color in the default list of colors for charts." + }, + "6": { + "value": "{violet.400}", + "type": "color", + "description": "6 color in the default list of colors for charts." + }, + "7": { + "value": "{red.300}", + "type": "color", + "description": "7 color in the default list of colors for charts." + }, + "8": { + "value": "{salad.200}", + "type": "color", + "description": "8 color in the default list of colors for charts." + }, + "9": { + "value": "{blue.400}", + "type": "color", + "description": "9 color in the default list of colors for charts." + }, + "10": { + "value": "{green.300}", + "type": "color", + "description": "10 color in the default list of colors for charts." + }, + "11": { + "value": "{orange.200}", + "type": "color", + "description": "11 color in the default list of colors for charts." + }, + "12": { + "value": "{pink.400}", + "type": "color", + "description": "12 color in the default list of colors for charts." + }, + "13": { + "value": "{yellow.300}", + "type": "color", + "description": "13 color in the default list of colors for charts." + }, + "14": { + "value": "{violet.200}", + "type": "color", + "description": "14 color in the default list of colors for charts." + }, + "15": { + "value": "{red.400}", + "type": "color", + "description": "15 color in the default list of colors for charts." + }, + "16": { + "value": "{salad.300}", + "type": "color", + "description": "16 color in the default list of colors for charts." + }, + "17": { + "value": "{blue.200}", + "type": "color", + "description": "17 color in the default list of colors for charts." + }, + "18": { + "value": "{green.400}", + "type": "color", + "description": "18 color in the default list of colors for charts." + }, + "19": { + "value": "{orange.300}", + "type": "color", + "description": "19 color in the default list of colors for charts." + }, + "20": { + "value": "{pink.200}", + "type": "color", + "description": "20 color in the default list of colors for charts." + }, + "21": { + "value": "{yellow.400}", + "type": "color", + "description": "21 color in the default list of colors for charts." + }, + "22": { + "value": "{violet.300}", + "type": "color", + "description": "22 color in the default list of colors for charts." + }, + "23": { + "value": "{red.200}", + "type": "color", + "description": "23 color in the default list of colors for charts." + }, + "24": { + "value": "{salad.400}", + "type": "color", + "description": "24 color in the default list of colors for charts." + }, + "total-amount": { + "value": "{gray.400}", + "type": "color", + "description": "Use it to show total value." + }, + "other-data": { + "value": "{gray.200}", + "type": "color", + "description": "Use it to indicate voids, missing or some other data." + }, + "null": { + "value": "{gray.100}", + "type": "color", + "description": "Use it to show null value." + } + }, + "grid": { + "line": { + "value": "{gray.100}", + "type": "color", + "description": "Default chart grid line." + }, + "x-axis": { + "value": "{gray.200}", + "type": "color", + "description": "X-axis line on the chart grid." + }, + "y-accent-hover-line": { + "value": "{gray.300}", + "type": "color", + "description": "Accent line for the hover state on the chart grid." + }, + "text-label": { + "value": "{gray.500}", + "type": "color", + "description": "Text label on the chart grid." + }, + "bar-chart-hover": { + "value": "rgba({gray.200}, 0.3)", + "type": "color", + "description": "Background color for the hover state of a bar on the chart grid." + }, + "bar-chart-base-bg": { + "value": "{gray.100}", + "type": "color", + "description": "Default background color of a bar in the BarChart." + }, + "period-bg": { + "value": "rgba({gray.200}, 0.2)", + "type": "color", + "description": "Use for highlighting a period on the chart grid." + }, + "period-pattern": { + "value": "rgba({gray.800}, 0.15)", + "type": "color", + "description": "Stripe color for diagonal pattern background." + }, + "border": { + "value": "{gray.white}", + "type": "color", + "description": "Border for distinguishing data sets and chart dots on the chart grid." + } + }, + "x-axis-accent": { + "period-active": { + "value": "{gray.500}", + "type": "color", + "description": "Background color for the clickable date on the X-axis of the chart grid." + }, + "data-start-tracking": { + "value": "rgba({green.400}, 0.2)", + "type": "color", + "description": "Background color for the \"Start tracking\" date on the X-axis of the chart grid." + } + }, + "axis-label": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "fontSize": "{fs-100}" + }, + "type": "typography" + }, + "axis-label-bold": { + "value": { + "fontFamily": "{base}", + "fontWeight": "{bold}", + "fontSize": "{fs-100}" + }, + "type": "typography" + } + }, + "header": { + "bg": { + "value": "{violet.dusty.700}", + "type": "color" + }, + "border": { + "primary": { + "value": "{violet.dusty.700}", + "type": "color" + }, + "secondary": { + "value": "#ffffff26", + "type": "color" + } + } + }, + "sidebar-nav": { + "control-hover": { + "value": "rgba({gray.100}, 0.7)", + "type": "color" + }, + "control-active": { + "value": "{violet.dusty.100}", + "type": "color" + }, + "control": { + "text": { + "normal": { + "value": "{violet.dusty.500}", + "type": "color" + }, + "active": { + "value": "{violet.dusty.600}", + "type": "color" + } + }, + "icon": { + "normal": { + "value": "{violet.dusty.400}", + "type": "color" + }, + "active": { + "value": "{violet.dusty.600}", + "type": "color" + } + } + } + }, + "duration": { + "extra-slow": { + "value": "500", + "type": "other", + "description": "Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen)" + }, + "slow": { + "value": "400", + "type": "other", + "description": "Should be used for more larger scale animations (such as page transitions)" + }, + "medium": { + "value": "300", + "type": "other", + "description": "Should be used for more complex effects (such as Modal)" + }, + "fast": { + "value": "200", + "type": "other", + "description": "Should be used for more complex effects (such as Dropdown or Accordion)" + }, + "extra-fast": { + "value": "100", + "type": "other", + "description": "Should be used for simpler effects and relatively small-sized animations (such as fades or color changes)" + }, + "switch": { + "value": "{duration.extra-fast}", + "type": "other", + "description": "Use for small controls like Switch or Slider." + }, + "popper": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for components based on popper like Tooltip, Dropdown or Filter trigger." + }, + "control": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for small controls like Checkbox or Radio." + }, + "modal": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Modal, Fullscreen Modal, Side panel or other kind of windows." + }, + "accordion": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Accordion." + }, + "counter": { + "value": "{duration.fast}", + "type": "other", + "description": "Use for Summary or Counter." + } + } + }, + "featureHighlight": { + "bg": { + "primary": { + "feature-highlight": { + "value": "{gray.white}", + "type": "color", + "description": "Primary background for highlighted controls." + }, + "feature-highlight-hover-active": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Primary background for hover and active (selected) state of highlighted controls." + } + }, + "secondary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Secondary background for the highlighted message." + } + } + }, + "border": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.300}, {blue.300})", + "type": "color", + "description": "Primary border for highlighted controls." + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Primary border for the active state of highlighted controls." + }, + "feature-highlight-secondary": { + "value": "linear-gradient(90deg, {violet.200}, {blue.200})", + "type": "color", + "description": "Secondary border for highlighted controls." + } + }, + "control": { + "primary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Background of the highlighted primary control." + }, + "feature-highlight-hover": { + "value": "linear-gradient(90deg, {violet.500}, {blue.500})", + "type": "color", + "description": "Hover state of the highlighted primary control." + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.600}, {blue.600})", + "type": "color", + "description": "Active (selected) state of the highlighted primary control." + } + }, + "secondary": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.50}, {blue.50})", + "type": "color", + "description": "Background of the highlighted secondary control." + }, + "feature-highlight-hover": { + "value": "linear-gradient(90deg, {violet.100}, {blue.100})", + "type": "color", + "description": "Hover state of the highlighted secondary control.", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "lighten", + "value": "0.3", + "space": "hsl" + } + } + } + }, + "feature-highlight-active": { + "value": "linear-gradient(90deg, {violet.100}, {blue.100})", + "type": "color", + "description": "Active (selected) state of the highlighted secondary control." + } + } + }, + "text": { + "feature-highlight": { + "value": "linear-gradient(90deg, {violet.500}, {blue.500})", + "type": "color", + "description": "Text for highlighted features." + }, + "feature-highlight-hover-active": { + "value": "linear-gradient(90deg, {violet.700}, {blue.700})", + "type": "color", + "description": "Text for hover and active states of highlighted features." + } + }, + "icon": { + "primary": { + "feature-highlight": { + "value": "{violet.500}", + "type": "color", + "description": "Primary highlighted icon." + }, + "feature-highlight-hover-active": { + "value": "#6B3AB4", + "type": "color", + "description": "Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color." + } + } + }, + "keyboard-focus-feature-highlight": { + "value": { + "width": "3px", + "color": "{keyboard-focus-feature-highlight.outline}" + }, + "type": "border", + "description": "Keyboard focus styles for highlighted controls.", + "outline": { + "value": "linear-gradient(90deg, {violet.400}, {blue.400})", + "type": "color", + "description": "Color for keyboard focus outline styles for highlighted controls." + } + } + } +} diff --git a/semcore/core/src/theme/processor.ts b/semcore/core/src/theme/processor.ts index cfe2e7cb1f..475f9fa886 100644 --- a/semcore/core/src/theme/processor.ts +++ b/semcore/core/src/theme/processor.ts @@ -26,7 +26,7 @@ export const writeIfChanged = async (path: string, content: string) => { }; const defaultTheme = 'light'; -const themes = ['light', 'dark']; +const themes = ['light', 'dark', 'new', 'new-adjusted', 'light-new', 'light-new-2ver', 'aqua-green', 'lime-green']; const warning = !process.argv.includes('--no-warning'); diff --git a/semcore/core/src/theme/themes/aqua-green.css b/semcore/core/src/theme/themes/aqua-green.css new file mode 100644 index 0000000000..4672d64ae4 --- /dev/null +++ b/semcore/core/src/theme/themes/aqua-green.css @@ -0,0 +1,877 @@ +:root { + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --gray-50: #f7f8f9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --gray-100: #eaeff1; + --gray-200: #d5dfe2; + --gray-300: #b0c4c9; + --gray-400: #85a2ab; + --gray-500: #668791; + --gray-600: #516e78; + --gray-700: #425a62; + --gray-800: #1e262a; + --gray-white: #ffffff; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --blue-50: #eaf0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --blue-100: #bdd1ff; + --blue-200: #9dbaff; + --blue-300: #709bff; + --blue-400: #5487ff; + --blue-500: #2969ff; + --blue-600: #2560e8; + --blue-700: #1d4bb5; + --blue-800: #173a8c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --green-50: #E8FEF9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --green-100: #A3F9E5; + --green-200: #95F8E2; + --green-300: #18F0BF; + --green-400: #46F3CC; + --green-500: #11AA88; + --green-600: #16DAAE; + --green-700: #11AA88; + --green-800: #0D8469; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --red-50: #ffeaea; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --red-100: #ffbdbd; + --red-200: #ff9d9d; + --red-300: #FF5454; + --red-400: #ff5454; + --red-500: #E82525; + --red-600: #e82525; + --red-700: #b51d1d; + --red-800: #8c1717; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --orange-50: #fff1ec; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --orange-100: #ffd3c3; + --orange-200: #ffbda5; + --orange-300: #ff9f7c; + --orange-400: #ff8d63; + --orange-500: #ff703c; + --orange-600: #e86637; + --orange-700: #b5502b; + --orange-800: #8c3e21; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --yellow-50: #fff8ea; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --yellow-100: #FFE09D; + --yellow-200: #ffe09d; + --yellow-300: #FFC954; + --yellow-400: #ffc954; + --yellow-500: #E89325; + --yellow-600: #e8aa25; + --yellow-700: #b5851d; + --yellow-800: #8c6717; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-50: #f3eaff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-100: #dabdff; + --violet-200: #c99dff; + --violet-300: #b070ff; + --violet-400: #a155ff; + --violet-500: #892aff; + --violet-600: #7d26e8; + --violet-700: #611eb5; + --violet-800: #4b178c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-dusty-50: #f5f4ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-dusty-100: #e2ddff; + --violet-dusty-200: #bcb1e9; + --violet-dusty-300: #a79cd6; + --violet-dusty-400: #9083c5; + --violet-dusty-500: #6d619f; + --violet-dusty-600: #4d407e; + --violet-dusty-700: #382e5e; + --violet-dusty-800: #1d113e; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --pink-50: #fff0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --pink-100: #ffd3ff; + --pink-200: #ffa9fa; + --pink-300: #ff87eb; + --pink-400: #e14adf; + --pink-500: #b229b9; + --pink-600: #7d0480; + --pink-700: #4d0050; + --pink-800: #340439; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --salad-50: #e8fef9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --salad-100: #b7faeb; + --salad-200: #95f8e2; + --salad-300: #64f5d4; + --salad-400: #46f3cc; + --salad-500: #18f0bf; + --salad-600: #16daae; + --salad-700: #11aa88; + --salad-800: #0d8469; + /* Primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral: #ffffff; + /* Hover state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-hover: #f7f8f9; + /* Active (selected) state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-active: #eaeff1; + /* Accent background of the message with regular information. */ + --intergalactic-bg-primary-info: #5487ff; + /* Accent background of the message or banner with information about the successful result. */ + --intergalactic-bg-primary-success: #46F3CC; + /* Accent background of a message or a banner with a critical information. */ + --intergalactic-bg-primary-critical: #ff5454; + /* Accent background of a message or a banner with a warning information. */ + --intergalactic-bg-primary-warning: #ff8d63; + /* Accent background of the information you want to highlight. */ + --intergalactic-bg-primary-highlight: #FFE09D; + /* Accent background for the advertising banners and controls. */ + --intergalactic-bg-primary-advertising: #611eb5; + /* Accented muted background for a message with regular information. */ + --intergalactic-bg-primary-muted: #668791; + /* Inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert: #1e262a; + /* Hover state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-hover: #425a62; + /* Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-active: #516e78; + /* Secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral: #f7f8f9; + /* Hover state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-hover: #eaeff1; + /* Active (selected) state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-active: #d5dfe2; + /* Secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info: #eaf0ff; + /* Hover state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-hover: #bdd1ff; + /* Active (selected) state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-active: #9dbaff; + /* Secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success: #E8FEF9; + /* Hover state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-hover: #A3F9E5; + /* Active (selected) state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-active: #95F8E2; + /* Secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical: #ffeaea; + /* Hover state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-hover: #ffbdbd; + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-active: #ff9d9d; + /* Secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning: #fff1ec; + /* Hover state of the secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning-hover: #ffd3c3; + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-warning-active: #ffbda5; + /* Secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight: #fff8ea; + /* Hover state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-hover: #FFE09D; + /* Active (selected) state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-active: #ffe09d; + /* Secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising: #f3eaff; + /* Hover state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-hover: #dabdff; + /* Active (selected) state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-active: #c99dff; + /* Highlighting the search results. */ + --intergalactic-bg-highlight-results: rgba(255, 201, 84, 0.4); + /* Focusing values in the input. */ + --intergalactic-bg-highlight-focus: rgba(84, 135, 255, 0.2); + /* Primary text. */ + --intergalactic-text-primary: #1e262a; + /* Secondary text. */ + --intergalactic-text-secondary: #668791; + /* Placeholder text only. */ + --intergalactic-text-placeholder: #85a2ab; + /* Text associated with success states and data. */ + --intergalactic-text-success: #11AA88; + /* Hover and active states for the text associated with success states and data. */ + --intergalactic-text-success-hover-active: #16DAAE; + /* Text associated with critical states and data. */ + --intergalactic-text-critical: #E82525; + /* Hover and active states for the text associated with critical states and data. */ + --intergalactic-text-critical-hover-active: #e82525; + /* Inverted version of the primary text. */ + --intergalactic-text-primary-invert: #ffffff; + /* Inverted version of the secondary text. */ + --intergalactic-text-secondary-invert: rgba(255, 255, 255, 0.8); + /* Link text. */ + --intergalactic-text-link: #2969ff; + /* Hover and active states for the link text. */ + --intergalactic-text-link-hover-active: #2560e8; + /* Inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert: #9dbaff; + /* Hover and active states of the inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert-hover: #709bff; + /* Visited link text. */ + --intergalactic-text-link-visited: #892aff; + /* Hint link text. */ + --intergalactic-text-hint: #668791; + /* Hover and active states of the hint link text. */ + --intergalactic-text-hint-hover-active: #516e78; + /* Inverted version of the hint link text. */ + --intergalactic-text-hint-invert: #d5dfe2; + /* Hover and active states of the inverted version of the hint link text. */ + --intergalactic-text-hint-invert-hover-active: #b0c4c9; + /* Secondary text. Use with font-size ≥20px. */ + --intergalactic-text-large-secondary: #b0c4c9; + /* Link text with font-size ≥20px. */ + --intergalactic-text-large-info: #5487ff; + /* Hover and active states of the link text with font-size ≥20px. */ + --intergalactic-text-large-info-hover-active: #2969ff; + /* Text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success: #46F3CC; + /* Hover and active states of the text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success-hover-active: #11AA88; + /* Text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical: #ff5454; + /* Hover and active states of the text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical-hover-active: #E82525; + /* Advertising text. */ + --intergalactic-text-advertising: #611eb5; + /* Neutral primary border. */ + --intergalactic-border-primary: #d5dfe2; + /* Subtle secondary border. */ + --intergalactic-border-secondary: #eaeff1; + /* Subtle secondary border in the informational message. */ + --intergalactic-border-info: #9dbaff; + /* Active border in focused input filed. */ + --intergalactic-border-info-active: #1e262a; + /* Subtle secondary border in the successful message and input field. */ + --intergalactic-border-success: #95F8E2; + /* Active border in the focused input field with valid state. */ + --intergalactic-border-success-active: #11AA88; + /* Subtle secondary border in the critical message and invalid input field. */ + --intergalactic-border-critical: #ff9d9d; + /* Active border in the focused input field with invalid state, and active state of the other components with invalid state. */ + --intergalactic-border-critical-active: #E82525; + /* Subtle secondary border in the warning message. */ + --intergalactic-border-warning: #ffbda5; + /* Active border in components with warning intention. */ + --intergalactic-border-warning-active: #ff703c; + /* Inverted version of the neutral primary border. Use it for borders on the dark or color background. */ + --intergalactic-border-primary-invert: #ffffff; + /* Inverted version of the neutral secondary border. Use it for borders on the dark or color background. */ + --intergalactic-border-secondary-invert: rgba(255, 255, 255, 0.3); + /* Border of the Tooltip with dark theme. */ + --intergalactic-border-tooltip-invert: #668791; + /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */ + --intergalactic-border-table-accent: #b0c4c9; + /* Border color of the second period for the comparison mode in the DatePicker. */ + --intergalactic-border-date-picker-range-comparison: #892aff; + /* Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states. */ + --intergalactic-border-critical-pattern: repeating-linear-gradient(315deg, rgba(232, 37, 37, 1) 0, rgba(232, 37, 37, 1) 2px, transparent 0, transparent 50%); + /* Subtle background of the Switch control. */ + --intergalactic-control-switch-bg: #b0c4c9; + /* Background of the regular primary control. */ + --intergalactic-control-primary-info: #1e262a; + /* Hover state of the regular primary control. */ + --intergalactic-control-primary-info-hover: #1e262a; + /* Active (selected) state of the regular primary control. */ + --intergalactic-control-primary-info-active: #1e262a; + /* Background of the primary control with successful theme. */ + --intergalactic-control-primary-success: #46F3CC; + /* Hover state of the primary control with successful theme. */ + --intergalactic-control-primary-success-hover: #11AA88; + /* Active (selected) state of the primary control with successful theme. */ + --intergalactic-control-primary-success-active: #16DAAE; + /* Background of the primary control with danger theme. */ + --intergalactic-control-primary-critical: #ff5454; + /* Hover state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-hover: #E82525; + /* Active (selected) state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-active: #e82525; + /* Background of the primary brand colored control. */ + --intergalactic-control-primary-brand: #ff8d63; + /* Hover state of the primary brand colored control. */ + --intergalactic-control-primary-brand-hover: #ff703c; + /* Active state of the primary brand colored control. */ + --intergalactic-control-primary-brand-active: #e86637; + /* Background of the advertising primary control. */ + --intergalactic-control-primary-advertising: #7d26e8; + /* Hover state of the advertising primary control. */ + --intergalactic-control-primary-advertising-hover: #611eb5; + /* Active (selected) state of the advertising primary control. */ + --intergalactic-control-primary-advertising-active: #892aff; + /* Inverted background of the primary control. */ + --intergalactic-control-primary-invert: #ffffff; + /* Hover state of the inverted primary control. */ + --intergalactic-control-primary-invert-hover: #f7f8f9; + /* Active (selected) state of the inverted primary control. */ + --intergalactic-control-primary-invert-active: #eaeff1; + /* Background of the regular secondary control. */ + --intergalactic-control-secondary-neutral: rgba(133, 162, 171, 0.1); + /* Hover state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-hover: rgba(133, 162, 171, 0.2); + /* Active (selected) state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-active: rgba(133, 162, 171, 0.3); + /* Background of the accent secondary control. */ + --intergalactic-control-secondary-info: rgba(84, 135, 255, 0.1); + /* Hover state of the accent secondary control. */ + --intergalactic-control-secondary-info-hover: rgba(84, 135, 255, 0.2); + /* Active (selected) state of the accent secondary control. */ + --intergalactic-control-secondary-info-active: rgba(84, 135, 255, 0.3); + /* Background of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert: rgba(255, 255, 255, 0.05); + /* Hover state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-active: rgba(255, 255, 255, 0.3); + /* Background of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral: rgba(133, 162, 171, 0); + /* Hover state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-hover: rgba(133, 162, 171, 0.2); + /* Active (selected) state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-active: rgba(133, 162, 171, 0.3); + /* Background of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info: rgba(84, 135, 255, 0); + /* Hover state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-hover: rgba(84, 135, 255, 0.2); + /* Active (selected) state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-active: rgba(84, 135, 255, 0.3); + /* Background of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert: rgba(255, 255, 255, 0); + /* Hover state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-active: rgba(255, 255, 255, 0.3); + /* Primary neutral icon. */ + --intergalactic-icon-primary-neutral: #668791; + /* Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color. */ + --intergalactic-icon-primary-neutral-hover-active: #565861; + /* Primary link-lookalike icon. */ + --intergalactic-icon-primary-info: #2969ff; + /* Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color. */ + --intergalactic-icon-primary-info-hover-active: #0358a1; + /* Primary success icon. */ + --intergalactic-icon-primary-success: #46F3CC; + /* Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color. */ + --intergalactic-icon-primary-success-hover-active: #037e68; + /* Primary critical icon. */ + --intergalactic-icon-primary-critical: #ff5454; + /* Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color. */ + --intergalactic-icon-primary-critical-hover-active: #cc3a42; + /* Primary warning icon. */ + --intergalactic-icon-primary-warning: #ff8d63; + /* Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color. */ + --intergalactic-icon-primary-warning-hover-active: #cc5024; + /* Inverted version of the primary icon. */ + --intergalactic-icon-primary-invert: #ffffff; + /* Hover and active (selected) states of the inverted version of the primary icon. */ + --intergalactic-icon-primary-invert-hover-active: #eaeff1; + /* Secondary neutral icon. */ + --intergalactic-icon-secondary-neutral: #b0c4c9; + /* Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color. */ + --intergalactic-icon-secondary-neutral-hover-active: #878992; + /* Secondary link-lookalike icon. */ + --intergalactic-icon-secondary-info: #709bff; + /* Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color. */ + --intergalactic-icon-secondary-info-hover-active: #2290cc; + /* Secondary success icon. */ + --intergalactic-icon-secondary-success: #18F0BF; + /* Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color. */ + --intergalactic-icon-secondary-success-hover-active: #049b75; + /* Secondary critical icon. */ + --intergalactic-icon-secondary-critical: #FF5454; + /* Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color. */ + --intergalactic-icon-secondary-critical-hover-active: #cc6c6b; + /* Secondary warning icon. */ + --intergalactic-icon-secondary-warning: #ff9f7c; + /* Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color. */ + --intergalactic-icon-secondary-warning-hover-active: #cc7036; + /* Color for the default non-interactive icon. */ + --intergalactic-icon-non-interactive: #1e262a; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-red: #ff788f; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-orange: #ff9400; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-yellow: #ffe84d; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-salad: #c7fa73; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-green: #45e0a8; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-blue: #6edbff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-violet: #b880ff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-pink: #ff7ad1; + /* Default date-picker cell background. */ + --intergalactic-date-picker-cell: #ffffff; + /* Color for marking the cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current: #85a2ab; + /* Hover state of the default date-picker cell background. */ + --intergalactic-date-picker-cell-hover: #eaeff1; + /* Background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range: #bdd1ff; + /* Hover state of the background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range-hover: #9dbaff; + /* Active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active: #709bff; + /* Hover for the active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active-hover: #5487ff; + /* Color for marking the active cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5); + /* Active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active: #892aff; + /* Hover for the active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active-hover: #7d26e8; + /* Default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item: #ffffff; + /* Hover state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-hover: #f7f8f9; + /* Active (selected) state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected: rgba(189, 209, 255, 0.7); + /* Hover state for the selected state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected-hover: #bdd1ff; + /* Color of the FeaturePopover background with accent theme. */ + --intergalactic-feature-popover-bg: #FFE09D; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */ + --intergalactic-feature-popover-dot-outer-border: #FFE09D; + /* Color of the FeaturePopover background with neutral theme. */ + --intergalactic-feature-popover-bg-neutral: #1d113e; + /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral: #18F0BF; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral-outer-border: #18F0BF; + /* Background color of the ProgressBar. */ + --intergalactic-progress-bar-bg: #eaeff1; + /* Hover state of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-hover: #d5dfe2; + /* Inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert: rgba(255, 255, 255, 0.2); + /* Hover state for the inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert-hover: rgba(255, 255, 255, 0.4); + /* Value with gradient for the ProgressBar. */ + --intergalactic-progress-bar-value-gradient: linear-gradient(-45deg, rgba(68, 193, 93, 0.9) 25%, rgba(68, 193, 93, 1) 0%, rgba(68, 193, 93, 1) 50%, rgba(68, 193, 93, 0.9) 0%, rgba(68, 193, 93, 0.9) 75%, rgba(68, 193, 93, 1) 0%); + /* Null value gradient for the ProgressBar. */ + --intergalactic-progress-bar-pattern-gradient: linear-gradient(-45deg, rgba(234, 239, 241, 0.9) 25%, rgba(234, 239, 241, 1) 0%, rgba(234, 239, 241, 1) 50%, rgba(234, 239, 241, 0.9) 0%, rgba(234, 239, 241, 0.9) 75%, rgba(234, 239, 241, 1) 0%); + /* Base value background for the ProgressBar. It is used to create gradients for the values. */ + --intergalactic-progress-bar-value-bg: #000000; + /* Default color for the Skeleton. */ + --intergalactic-skeleton-bg: rgba(234, 239, 241, 0.8); + /* Inverted version of the default color for the Skeleton. */ + --intergalactic-skeleton-bg-invert: rgba(255, 255, 255, 0.3); + /* Icon color for the SliderRating component in its normal state. */ + --intergalactic-slider-rating-normal: #b0c4c9; + /* Icon color for the SliderRating component in its hovered and active states. */ + --intergalactic-slider-rating-hover-active: #ffe09d; + /* Background of the header cell in the primary Table. */ + --intergalactic-table-th-primary-cell: #f7f8f9; + /* Background of the hovered header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-hover: #eaeff1; + /* Background of the active header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-active: #eaeff1; + /* Background of the header cell in the secondary Table. */ + --intergalactic-table-th-secondary-cell: #ffffff; + /* Background gradient for sorting icon that absolute positioned in the table head. */ + --intergalactic-table-th-gradient: linear-gradient(to right, rgba(234, 239, 241, 0) 0%, rgba(234, 239, 241, 1) 100%); + /* Background of the default cell in the Table. */ + --intergalactic-table-td-cell: #ffffff; + /* Background of the default hovered cell in the Table. */ + --intergalactic-table-td-cell-hover: #f4f7f8; + /* Background of the default active cell in the Table. */ + --intergalactic-table-td-cell-active: #eef2f4; + /* Background of the unread cell in the Table. */ + --intergalactic-table-td-cell-unread: #f7f8f9; + /* Background of the cell inside an Accordion in the Table. */ + --intergalactic-table-td-cell-accordion: #f7f8f9; + /* Background of the selected cell in the Table. */ + --intergalactic-table-td-cell-selected: #eaf0ff; + /* Background of the hovered selected cell in the Table. */ + --intergalactic-table-td-cell-selected-hover: #bdd1ff; + /* Background of the active selected cell in the Table. */ + --intergalactic-table-td-cell-selected-active: #bdd1ff; + /* Background of the cell with new information in the Table. */ + --intergalactic-table-td-cell-new: #E8FEF9; + /* Background of the hovered cell with new information in the Table. */ + --intergalactic-table-td-cell-new-hover: #A3F9E5; + /* Background of the active cell with new information in the Table. */ + --intergalactic-table-td-cell-new-active: #A3F9E5; + /* Background of the cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical: #ffeaea; + /* Background of the hovered cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-hover: #ffbdbd; + /* Background of the active cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-active: #ffbdbd; + /* Background of the cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning: #fff1ec; + /* Background of the hovered cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-hover: #ffd3c3; + /* Background of the active cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-active: #ffd3c3; + /* Primary brand color. */ + --intergalactic-brand-primary: #ff8d63; + /* Secondary brand color. */ + --intergalactic-brand-secondary: #611eb5; + /* Pinterest brand color. */ + --intergalactic-brand-pinterest: #bd081c; + /* Instagram brand color. */ + --intergalactic-brand-instagram: #e4405f; + /* Youtube brand color. */ + --intergalactic-brand-youtube: #ff0000; + /* Facebook brand color. */ + --intergalactic-brand-facebook: #1877f2; + /* LinkedIn brand color. */ + --intergalactic-brand-linkedIn: #0a66c2; + /* Twitter brand color. */ + --intergalactic-brand-twitter: #1d9bf0; + /* Google brand color for the link. */ + --intergalactic-brand-google-blue: #1a0dab; + /* Google green brand color for the link. */ + --intergalactic-brand-google-green: #016723; + /* Google My Business brand color. */ + --intergalactic-brand-google-my-business: #1a73e8; + /* Default shadow of the Card. */ + --intergalactic-box-shadow-card: 0 0 0 1px #eaeff1; + /* Hover state for the shadow of the Card with hover state. */ + --intergalactic-box-shadow-card-hover: 3px 3px 30px 0px rgba(30, 38, 42, 0.15); + /* Shadow for show that element are being drag-and-drop. */ + --intergalactic-box-shadow-dnd: 0px 0px 1px 0px rgba(30, 38, 42, 0.16), 0px 12px 40px 0px rgba(30, 38, 42, 0.16); + /* Default shadow if the Modal window. */ + --intergalactic-box-shadow-modal: 0px 3px 8px 0px rgba(30, 38, 42, 0.2); + /* Default shadow of all Poppers, Dropdowns and Tooltips. */ + --intergalactic-box-shadow-popper: 0px 1px 12px 0px rgba(30, 38, 42, 0.15); + /* Color for default keyboard focus outline styles. */ + --intergalactic-keyboard-focus-outline: #1e262a; + /* Color for keyboard focus outline styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid-outline: #ff5454; + /* Keyboard focus styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 84, 84, 0.5); + /* Color for keyboard focus outline styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid-outline: #46F3CC; + /* Keyboard focus styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(70, 243, 204, 0.5); + /* Color for keyboard focus outline styles to use on the dark and color background. */ + --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8); + /* Keyboard focus styles for use on dark backgrounds. */ + --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8); + /* Default keyboard focus box-shadow styles. */ + --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(30, 38, 42, 0.5); + /* Base font family. */ + --intergalactic-base: Inter; + /* Use with font-size-800. */ + --intergalactic-lh-800: 117%; + /* Use with font-size-700. */ + --intergalactic-lh-700: 110%; + /* Use with font-size-600. */ + --intergalactic-lh-600: 125%; + /* Use with font-size-500. */ + --intergalactic-lh-500: 117%; + /* Use with font-size-400. */ + --intergalactic-lh-400: 120%; + /* Use with font-size-300. */ + --intergalactic-lh-300: 150%; + /* Use with font-size-200. */ + --intergalactic-lh-200: 142%; + /* Use with font-size-100. */ + --intergalactic-lh-100: 133%; + /* Semi-bold font weight. */ + --intergalactic-semi-bold: 600; + /* Bold font weight. */ + --intergalactic-bold: 700; + /* Regular font weight. */ + --intergalactic-regular: 400; + /* Medium font weight. */ + --intergalactic-medium: 500; + /* Use only for text in Badge component. */ + --intergalactic-fs-50: 10px; + /* Use this font-size with caution for text in some additional messages. Always check its contrast and readability. */ + --intergalactic-fs-100: 12px; + --intergalactic-fs-200: 14px; + --intergalactic-fs-300: 16px; + --intergalactic-fs-400: 20px; + --intergalactic-fs-500: 24px; + --intergalactic-fs-600: 32px; + --intergalactic-fs-700: 36px; + --intergalactic-fs-800: 48px; + /* Compact letter spacing. */ + --intergalactic-compact: 0.3; + /* Base denominator of the design system. */ + --intergalactic-scale-indent: 4px; + /* Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions. */ + --intergalactic-form-control-s: 20px; + /* Default size of the controls. */ + --intergalactic-form-control-m: 28px; + /* Large size of the controls. */ + --intergalactic-form-control-l: 40px; + /* 2px */ + --intergalactic-spacing-05x: 2px; + /* 4px */ + --intergalactic-spacing-1x: 4px; + /* 8px */ + --intergalactic-spacing-2x: 8px; + /* 12px */ + --intergalactic-spacing-3x: 12px; + /* 16px */ + --intergalactic-spacing-4x: 16px; + /* 20px */ + --intergalactic-spacing-5x: 20px; + /* 24px */ + --intergalactic-spacing-6x: 24px; + /* 32px */ + --intergalactic-spacing-8x: 32px; + /* 40px */ + --intergalactic-spacing-10x: 40px; + /* 56px */ + --intergalactic-spacing-14x: 56px; + /* 80px */ + --intergalactic-spacing-20x: 80px; + /* 96px */ + --intergalactic-spacing-24x: 96px; + /* 120px */ + --intergalactic-spacing-30x: 120px; + --intergalactic-rounded-extra-small: 2px; + --intergalactic-rounded-small: 4px; + --intergalactic-rounded-medium: 6px; + --intergalactic-rounded-large: 12px; + --intergalactic-rounded-extra-large: 24px; + /* Use for rounding addons and small controls like Checkbox. */ + --intergalactic-addon-rounded: 4px; + /* Use for rounding Badge. */ + --intergalactic-badge-rounded: 6px; + /* Use for rounding big and small charts like bar, histogram and others. */ + --intergalactic-chart-rounded: 2px; + /* Use for rounding Counter. */ + --intergalactic-counter-rounded: 12px; + /* Use for rounding Tag. */ + --intergalactic-tag-rounded: 24px; + /* Use for rounding Switch. */ + --intergalactic-switch-rounded: 24px; + /* Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc. */ + --intergalactic-control-rounded: 6px; + /* Use for rounding bars: ProgressBar, SliderBar, etc. */ + --intergalactic-progress-bar-rounded: 6px; + /* Use for rounding surfaces like Card, blocks, widgets, Notice, etc. */ + --intergalactic-surface-rounded: 6px; + /* Use for rounding all kinds of poppers and dropdowns. */ + --intergalactic-popper-rounded: 6px; + /* Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard). */ + --intergalactic-modal-rounded: 12px; + /* Use for the disabled state of all kind of the controls and elements. */ + --intergalactic-disabled-opacity: 0.5; + /* Extra small screens (small phones). */ + --intergalactic-screen-extra-small: 320px; + /* Small screens (phones and small tablets). */ + --intergalactic-screen-small: 768px; + /* Medium screens (tablets and small laptops). */ + --intergalactic-screen-medium: 1200px; + /* Large screens (tablets and laptops). */ + --intergalactic-screen-large: 1920px; + /* Use for cover the content under the modal dialogs. */ + --intergalactic-overlay-primary: rgba(30, 38, 42, 0.7); + /* Use for the secondary modal dialogs that were opened upon the other modal dialogs. */ + --intergalactic-overlay-secondary: rgba(30, 38, 42, 0.4); + /* Use as a primary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-primary: #f7f8f9; + /* Use as a secondary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-secondary: rgba(255, 255, 255, 0.85); + --intergalactic-z-index-deep: -999; + --intergalactic-z-index-overlay: 500; + --intergalactic-z-index-modal: 900; + --intergalactic-z-index-popper: 700; + --intergalactic-z-index-dropdown: 750; + --intergalactic-z-index-tooltip: 800; + --intergalactic-z-index-notice-bubble: 999; + /* Default Tooltip background. */ + --intergalactic-tooltip-default: #ffffff; + /* Warning Tooltip background. */ + --intergalactic-tooltip-warning: #ffbdbd; + /* Inverted version of the default Tooltip background. */ + --intergalactic-tooltip-invert: #1e262a; + /* Neutral border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-neutral: #ffffff80; + /* Inverted border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-invert: #00000080; + /* Left-to-right fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-left: linear-gradient(to right, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Right-to-left fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-right: linear-gradient(to left, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Top-to-bottom fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-top: linear-gradient(to bottom, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Bottom-to-top fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-bottom: linear-gradient(to top, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Left-to-right fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-left: linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Right-to-left fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-right: linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-bottom: linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Background color for ScrollBar. */ + --intergalactic-scroll-bar-background: rgba(30, 38, 42, 0.3); + /* Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-normal: #ecedf0; + /* Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-hover-active: #e3e4e9; + /* Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-normal: #d0eeff; + /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-hover-active: #b7e4ff; + /* Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-normal: #cff1ea; + /* Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-hover-active: #b7eae0; + /* Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-normal: #ffddd2; + /* Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-hover-active: #ffccbb; + /* Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-normal: #ffcedc; + /* Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-hover-active: #ffb6ca; + /* Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-normal: #f4e3ff; + /* Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-hover-active: #efd5ff; + /* Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-normal: #fee6d1; + /* Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-hover-active: #fedab9; + /* Primary white tag. */ + --intergalactic-tag-primary-white-normal: rgba(255, 255, 255, 0.15); + /* Hover and active (selected) state of the primary white tag. */ + --intergalactic-tag-primary-white-hover-active: rgba(255, 255, 255, 0.3); + /* Gray text for the primary gray tag. */ + --intergalactic-tag-primary-gray-text: #668791; + /* Blue text for the primary blue tag. */ + --intergalactic-tag-primary-blue-text: #2969ff; + /* Green text for the primary green tag. */ + --intergalactic-tag-primary-green-text: #11AA88; + /* Orange text for the primary orange tag. */ + --intergalactic-tag-primary-orange-text: #ff703c; + /* Red text for the primary red tag. */ + --intergalactic-tag-primary-red-text: #E82525; + /* Violet text for the primary violet tag. */ + --intergalactic-tag-primary-violet-text: #892aff; + /* Yellow text for the primary yellow tag. */ + --intergalactic-tag-primary-yellow-text: #E89325; + /* White text for the primary white tag. */ + --intergalactic-tag-primary-white-text: #ffffff; + /* Background color for the default secondary tag. */ + --intergalactic-tag-secondary-normal: #ffffff; + /* Hover and active (selected) states of the background color for the default secondary tag. */ + --intergalactic-tag-secondary-hover-active: #f7f8f9; + /* White secondary tag. */ + --intergalactic-tag-secondary-white-normal: rgba(255, 255, 255, 0); + /* Active state of the secondary white tag. */ + --intergalactic-tag-secondary-white-hover-active: rgba(255, 255, 255, 0.1); + /* Gray text for the default secondary tag. */ + --intergalactic-tag-secondary-gray-text: #668791; + /* White text for the secondary white tag. */ + --intergalactic-tag-secondary-white-text: #ffffff; + /* 1 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-1: #709bff; + /* 2 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-2: #95F8E2; + /* 3 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-3: #ff8d63; + /* 4 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-4: #ff87eb; + /* 5 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-5: #ffe09d; + /* 6 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-6: #a155ff; + /* 7 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-7: #FF5454; + /* 8 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-8: #95f8e2; + /* 9 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-9: #5487ff; + /* 10 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-10: #18F0BF; + /* 11 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-11: #ffbda5; + /* 12 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-12: #e14adf; + /* 13 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-13: #FFC954; + /* 14 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-14: #c99dff; + /* 15 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-15: #ff5454; + /* 16 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-16: #64f5d4; + /* 17 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-17: #9dbaff; + /* 18 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-18: #46F3CC; + /* 19 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-19: #ff9f7c; + /* 20 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-20: #ffa9fa; + /* 21 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-21: #ffc954; + /* 22 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-22: #b070ff; + /* 23 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-23: #ff9d9d; + /* 24 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-24: #46f3cc; + /* Use it to show total value. */ + --intergalactic-chart-palette-order-total-amount: #85a2ab; + /* Use it to indicate voids, missing or some other data. */ + --intergalactic-chart-palette-order-other-data: #d5dfe2; + /* Use it to show null value. */ + --intergalactic-chart-palette-order-null: #eaeff1; + /* Default chart grid line. */ + --intergalactic-chart-grid-line: #eaeff1; + /* X-axis line on the chart grid. */ + --intergalactic-chart-grid-x-axis: #d5dfe2; + /* Accent line for the hover state on the chart grid. */ + --intergalactic-chart-grid-y-accent-hover-line: #b0c4c9; + /* Text label on the chart grid. */ + --intergalactic-chart-grid-text-label: #668791; + /* Background color for the hover state of a bar on the chart grid. */ + --intergalactic-chart-grid-bar-chart-hover: rgba(213, 223, 226, 0.3); + /* Default background color of a bar in the BarChart. */ + --intergalactic-chart-grid-bar-chart-base-bg: #eaeff1; + /* Use for highlighting a period on the chart grid. */ + --intergalactic-chart-grid-period-bg: rgba(213, 223, 226, 0.2); + /* Stripe color for diagonal pattern background. */ + --intergalactic-chart-grid-period-pattern: rgba(30, 38, 42, 0.15); + /* Border for distinguishing data sets and chart dots on the chart grid. */ + --intergalactic-chart-grid-border: #ffffff; + /* Background color for the clickable date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-period-active: #668791; + /* Background color for the "Start tracking" date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(70, 243, 204, 0.2); + --intergalactic-header-bg: #382e5e; + --intergalactic-header-border-primary: #382e5e; + --intergalactic-header-border-secondary: #ffffff26; + --intergalactic-sidebar-nav-control-hover: rgba(234, 239, 241, 0.7); + --intergalactic-sidebar-nav-control-active: #e2ddff; + --intergalactic-sidebar-nav-control-text-normal: #6d619f; + --intergalactic-sidebar-nav-control-text-active: #4d407e; + --intergalactic-sidebar-nav-control-icon-normal: #9083c5; + --intergalactic-sidebar-nav-control-icon-active: #4d407e; + /* Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen) */ + --intergalactic-duration-extra-slow: 500; + /* Should be used for more larger scale animations (such as page transitions) */ + --intergalactic-duration-slow: 400; + /* Should be used for more complex effects (such as Modal) */ + --intergalactic-duration-medium: 300; + /* Should be used for more complex effects (such as Dropdown or Accordion) */ + --intergalactic-duration-fast: 200; + /* Should be used for simpler effects and relatively small-sized animations (such as fades or color changes) */ + --intergalactic-duration-extra-fast: 100; + /* Use for small controls like Switch or Slider. */ + --intergalactic-duration-switch: 100; + /* Use for components based on popper like Tooltip, Dropdown or Filter trigger. */ + --intergalactic-duration-popper: 200; + /* Use for small controls like Checkbox or Radio. */ + --intergalactic-duration-control: 200; + /* Use for Modal, Fullscreen Modal, Side panel or other kind of windows. */ + --intergalactic-duration-modal: 200; + /* Use for Accordion. */ + --intergalactic-duration-accordion: 200; + /* Use for Summary or Counter. */ + --intergalactic-duration-counter: 200; +} \ No newline at end of file diff --git a/semcore/core/src/theme/themes/aqua-green.ts b/semcore/core/src/theme/themes/aqua-green.ts new file mode 100644 index 0000000000..7eed5a1c3c --- /dev/null +++ b/semcore/core/src/theme/themes/aqua-green.ts @@ -0,0 +1,489 @@ +export default { + '--gray-50': '#f7f8f9', + '--gray-100': '#eaeff1', + '--gray-200': '#d5dfe2', + '--gray-300': '#b0c4c9', + '--gray-400': '#85a2ab', + '--gray-500': '#668791', + '--gray-600': '#516e78', + '--gray-700': '#425a62', + '--gray-800': '#1e262a', + '--gray-white': '#ffffff', + '--blue-50': '#eaf0ff', + '--blue-100': '#bdd1ff', + '--blue-200': '#9dbaff', + '--blue-300': '#709bff', + '--blue-400': '#5487ff', + '--blue-500': '#2969ff', + '--blue-600': '#2560e8', + '--blue-700': '#1d4bb5', + '--blue-800': '#173a8c', + '--green-50': '#E8FEF9', + '--green-100': '#A3F9E5', + '--green-200': '#95F8E2', + '--green-300': '#18F0BF', + '--green-400': '#46F3CC', + '--green-500': '#11AA88', + '--green-600': '#16DAAE', + '--green-700': '#11AA88', + '--green-800': '#0D8469', + '--red-50': '#ffeaea', + '--red-100': '#ffbdbd', + '--red-200': '#ff9d9d', + '--red-300': '#FF5454', + '--red-400': '#ff5454', + '--red-500': '#E82525', + '--red-600': '#e82525', + '--red-700': '#b51d1d', + '--red-800': '#8c1717', + '--orange-50': '#fff1ec', + '--orange-100': '#ffd3c3', + '--orange-200': '#ffbda5', + '--orange-300': '#ff9f7c', + '--orange-400': '#ff8d63', + '--orange-500': '#ff703c', + '--orange-600': '#e86637', + '--orange-700': '#b5502b', + '--orange-800': '#8c3e21', + '--yellow-50': '#fff8ea', + '--yellow-100': '#FFE09D', + '--yellow-200': '#ffe09d', + '--yellow-300': '#FFC954', + '--yellow-400': '#ffc954', + '--yellow-500': '#E89325', + '--yellow-600': '#e8aa25', + '--yellow-700': '#b5851d', + '--yellow-800': '#8c6717', + '--violet-50': '#f3eaff', + '--violet-100': '#dabdff', + '--violet-200': '#c99dff', + '--violet-300': '#b070ff', + '--violet-400': '#a155ff', + '--violet-500': '#892aff', + '--violet-600': '#7d26e8', + '--violet-700': '#611eb5', + '--violet-800': '#4b178c', + '--violet-dusty-50': '#f5f4ff', + '--violet-dusty-100': '#e2ddff', + '--violet-dusty-200': '#bcb1e9', + '--violet-dusty-300': '#a79cd6', + '--violet-dusty-400': '#9083c5', + '--violet-dusty-500': '#6d619f', + '--violet-dusty-600': '#4d407e', + '--violet-dusty-700': '#382e5e', + '--violet-dusty-800': '#1d113e', + '--pink-50': '#fff0ff', + '--pink-100': '#ffd3ff', + '--pink-200': '#ffa9fa', + '--pink-300': '#ff87eb', + '--pink-400': '#e14adf', + '--pink-500': '#b229b9', + '--pink-600': '#7d0480', + '--pink-700': '#4d0050', + '--pink-800': '#340439', + '--salad-50': '#e8fef9', + '--salad-100': '#b7faeb', + '--salad-200': '#95f8e2', + '--salad-300': '#64f5d4', + '--salad-400': '#46f3cc', + '--salad-500': '#18f0bf', + '--salad-600': '#16daae', + '--salad-700': '#11aa88', + '--salad-800': '#0d8469', + '--intergalactic-bg-primary-neutral': '#ffffff', + '--intergalactic-bg-primary-neutral-hover': '#f7f8f9', + '--intergalactic-bg-primary-neutral-active': '#eaeff1', + '--intergalactic-bg-primary-info': '#5487ff', + '--intergalactic-bg-primary-success': '#46F3CC', + '--intergalactic-bg-primary-critical': '#ff5454', + '--intergalactic-bg-primary-warning': '#ff8d63', + '--intergalactic-bg-primary-highlight': '#FFE09D', + '--intergalactic-bg-primary-advertising': '#611eb5', + '--intergalactic-bg-primary-muted': '#668791', + '--intergalactic-bg-primary-invert': '#1e262a', + '--intergalactic-bg-primary-invert-hover': '#425a62', + '--intergalactic-bg-primary-invert-active': '#516e78', + '--intergalactic-bg-secondary-neutral': '#f7f8f9', + '--intergalactic-bg-secondary-neutral-hover': '#eaeff1', + '--intergalactic-bg-secondary-neutral-active': '#d5dfe2', + '--intergalactic-bg-secondary-info': '#eaf0ff', + '--intergalactic-bg-secondary-info-hover': '#bdd1ff', + '--intergalactic-bg-secondary-info-active': '#9dbaff', + '--intergalactic-bg-secondary-success': '#E8FEF9', + '--intergalactic-bg-secondary-success-hover': '#A3F9E5', + '--intergalactic-bg-secondary-success-active': '#95F8E2', + '--intergalactic-bg-secondary-critical': '#ffeaea', + '--intergalactic-bg-secondary-critical-hover': '#ffbdbd', + '--intergalactic-bg-secondary-critical-active': '#ff9d9d', + '--intergalactic-bg-secondary-warning': '#fff1ec', + '--intergalactic-bg-secondary-warning-hover': '#ffd3c3', + '--intergalactic-bg-secondary-warning-active': '#ffbda5', + '--intergalactic-bg-secondary-highlight': '#fff8ea', + '--intergalactic-bg-secondary-highlight-hover': '#FFE09D', + '--intergalactic-bg-secondary-highlight-active': '#ffe09d', + '--intergalactic-bg-secondary-advertising': '#f3eaff', + '--intergalactic-bg-secondary-advertising-hover': '#dabdff', + '--intergalactic-bg-secondary-advertising-active': '#c99dff', + '--intergalactic-bg-highlight-results': 'rgba(255, 201, 84, 0.4)', + '--intergalactic-bg-highlight-focus': 'rgba(84, 135, 255, 0.2)', + '--intergalactic-text-primary': '#1e262a', + '--intergalactic-text-secondary': '#668791', + '--intergalactic-text-placeholder': '#85a2ab', + '--intergalactic-text-success': '#11AA88', + '--intergalactic-text-success-hover-active': '#16DAAE', + '--intergalactic-text-critical': '#E82525', + '--intergalactic-text-critical-hover-active': '#e82525', + '--intergalactic-text-primary-invert': '#ffffff', + '--intergalactic-text-secondary-invert': 'rgba(255, 255, 255, 0.8)', + '--intergalactic-text-link': '#2969ff', + '--intergalactic-text-link-hover-active': '#2560e8', + '--intergalactic-text-link-invert': '#9dbaff', + '--intergalactic-text-link-invert-hover': '#709bff', + '--intergalactic-text-link-visited': '#892aff', + '--intergalactic-text-hint': '#668791', + '--intergalactic-text-hint-hover-active': '#516e78', + '--intergalactic-text-hint-invert': '#d5dfe2', + '--intergalactic-text-hint-invert-hover-active': '#b0c4c9', + '--intergalactic-text-large-secondary': '#b0c4c9', + '--intergalactic-text-large-info': '#5487ff', + '--intergalactic-text-large-info-hover-active': '#2969ff', + '--intergalactic-text-large-success': '#46F3CC', + '--intergalactic-text-large-success-hover-active': '#11AA88', + '--intergalactic-text-large-critical': '#ff5454', + '--intergalactic-text-large-critical-hover-active': '#E82525', + '--intergalactic-text-advertising': '#611eb5', + '--intergalactic-border-primary': '#d5dfe2', + '--intergalactic-border-secondary': '#eaeff1', + '--intergalactic-border-info': '#9dbaff', + '--intergalactic-border-info-active': '#1e262a', + '--intergalactic-border-success': '#95F8E2', + '--intergalactic-border-success-active': '#11AA88', + '--intergalactic-border-critical': '#ff9d9d', + '--intergalactic-border-critical-active': '#E82525', + '--intergalactic-border-warning': '#ffbda5', + '--intergalactic-border-warning-active': '#ff703c', + '--intergalactic-border-primary-invert': '#ffffff', + '--intergalactic-border-secondary-invert': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-border-tooltip-invert': '#668791', + '--intergalactic-border-table-accent': '#b0c4c9', + '--intergalactic-border-date-picker-range-comparison': '#892aff', + '--intergalactic-border-critical-pattern': 'repeating-linear-gradient(315deg, rgba(232, 37, 37, 1) 0, rgba(232, 37, 37, 1) 2px, transparent 0, transparent 50%)', + '--intergalactic-control-switch-bg': '#b0c4c9', + '--intergalactic-control-primary-info': '#1e262a', + '--intergalactic-control-primary-info-hover': '#1e262a', + '--intergalactic-control-primary-info-active': '#1e262a', + '--intergalactic-control-primary-success': '#46F3CC', + '--intergalactic-control-primary-success-hover': '#11AA88', + '--intergalactic-control-primary-success-active': '#16DAAE', + '--intergalactic-control-primary-critical': '#ff5454', + '--intergalactic-control-primary-critical-hover': '#E82525', + '--intergalactic-control-primary-critical-active': '#e82525', + '--intergalactic-control-primary-brand': '#ff8d63', + '--intergalactic-control-primary-brand-hover': '#ff703c', + '--intergalactic-control-primary-brand-active': '#e86637', + '--intergalactic-control-primary-advertising': '#7d26e8', + '--intergalactic-control-primary-advertising-hover': '#611eb5', + '--intergalactic-control-primary-advertising-active': '#892aff', + '--intergalactic-control-primary-invert': '#ffffff', + '--intergalactic-control-primary-invert-hover': '#f7f8f9', + '--intergalactic-control-primary-invert-active': '#eaeff1', + '--intergalactic-control-secondary-neutral': 'rgba(133, 162, 171, 0.1)', + '--intergalactic-control-secondary-neutral-hover': 'rgba(133, 162, 171, 0.2)', + '--intergalactic-control-secondary-neutral-active': 'rgba(133, 162, 171, 0.3)', + '--intergalactic-control-secondary-info': 'rgba(84, 135, 255, 0.1)', + '--intergalactic-control-secondary-info-hover': 'rgba(84, 135, 255, 0.2)', + '--intergalactic-control-secondary-info-active': 'rgba(84, 135, 255, 0.3)', + '--intergalactic-control-secondary-invert': 'rgba(255, 255, 255, 0.05)', + '--intergalactic-control-secondary-invert-hover': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-control-secondary-invert-active': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-control-tertiary-neutral': 'rgba(133, 162, 171, 0)', + '--intergalactic-control-tertiary-neutral-hover': 'rgba(133, 162, 171, 0.2)', + '--intergalactic-control-tertiary-neutral-active': 'rgba(133, 162, 171, 0.3)', + '--intergalactic-control-tertiary-info': 'rgba(84, 135, 255, 0)', + '--intergalactic-control-tertiary-info-hover': 'rgba(84, 135, 255, 0.2)', + '--intergalactic-control-tertiary-info-active': 'rgba(84, 135, 255, 0.3)', + '--intergalactic-control-tertiary-invert': 'rgba(255, 255, 255, 0)', + '--intergalactic-control-tertiary-invert-hover': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-control-tertiary-invert-active': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-icon-primary-neutral': '#668791', + '--intergalactic-icon-primary-neutral-hover-active': '#565861', + '--intergalactic-icon-primary-info': '#2969ff', + '--intergalactic-icon-primary-info-hover-active': '#0358a1', + '--intergalactic-icon-primary-success': '#46F3CC', + '--intergalactic-icon-primary-success-hover-active': '#037e68', + '--intergalactic-icon-primary-critical': '#ff5454', + '--intergalactic-icon-primary-critical-hover-active': '#cc3a42', + '--intergalactic-icon-primary-warning': '#ff8d63', + '--intergalactic-icon-primary-warning-hover-active': '#cc5024', + '--intergalactic-icon-primary-invert': '#ffffff', + '--intergalactic-icon-primary-invert-hover-active': '#eaeff1', + '--intergalactic-icon-secondary-neutral': '#b0c4c9', + '--intergalactic-icon-secondary-neutral-hover-active': '#878992', + '--intergalactic-icon-secondary-info': '#709bff', + '--intergalactic-icon-secondary-info-hover-active': '#2290cc', + '--intergalactic-icon-secondary-success': '#18F0BF', + '--intergalactic-icon-secondary-success-hover-active': '#049b75', + '--intergalactic-icon-secondary-critical': '#FF5454', + '--intergalactic-icon-secondary-critical-hover-active': '#cc6c6b', + '--intergalactic-icon-secondary-warning': '#ff9f7c', + '--intergalactic-icon-secondary-warning-hover-active': '#cc7036', + '--intergalactic-icon-non-interactive': '#1e262a', + '--intergalactic-illustration-red': '#ff788f', + '--intergalactic-illustration-orange': '#ff9400', + '--intergalactic-illustration-yellow': '#ffe84d', + '--intergalactic-illustration-salad': '#c7fa73', + '--intergalactic-illustration-green': '#45e0a8', + '--intergalactic-illustration-blue': '#6edbff', + '--intergalactic-illustration-violet': '#b880ff', + '--intergalactic-illustration-pink': '#ff7ad1', + '--intergalactic-date-picker-cell': '#ffffff', + '--intergalactic-date-picker-cell-current': '#85a2ab', + '--intergalactic-date-picker-cell-hover': '#eaeff1', + '--intergalactic-date-picker-cell-range': '#bdd1ff', + '--intergalactic-date-picker-cell-range-hover': '#9dbaff', + '--intergalactic-date-picker-cell-active': '#709bff', + '--intergalactic-date-picker-cell-active-hover': '#5487ff', + '--intergalactic-date-picker-cell-current-invert': 'rgba(255, 255, 255, 0.5)', + '--intergalactic-date-picker-cell-comparison-active': '#892aff', + '--intergalactic-date-picker-cell-comparison-active-hover': '#7d26e8', + '--intergalactic-dropdown-menu-item': '#ffffff', + '--intergalactic-dropdown-menu-item-hover': '#f7f8f9', + '--intergalactic-dropdown-menu-item-selected': 'rgba(189, 209, 255, 0.7)', + '--intergalactic-dropdown-menu-item-selected-hover': '#bdd1ff', + '--intergalactic-feature-popover-bg': '#FFE09D', + '--intergalactic-feature-popover-dot-outer-border': '#FFE09D', + '--intergalactic-feature-popover-bg-neutral': '#1d113e', + '--intergalactic-feature-popover-dot-neutral': '#18F0BF', + '--intergalactic-feature-popover-dot-neutral-outer-border': '#18F0BF', + '--intergalactic-progress-bar-bg': '#eaeff1', + '--intergalactic-progress-bar-bg-hover': '#d5dfe2', + '--intergalactic-progress-bar-bg-invert': 'rgba(255, 255, 255, 0.2)', + '--intergalactic-progress-bar-bg-invert-hover': 'rgba(255, 255, 255, 0.4)', + '--intergalactic-progress-bar-value-gradient': 'linear-gradient(-45deg, rgba(68, 193, 93, 0.9) 25%, rgba(68, 193, 93, 1) 0%, rgba(68, 193, 93, 1) 50%, rgba(68, 193, 93, 0.9) 0%, rgba(68, 193, 93, 0.9) 75%, rgba(68, 193, 93, 1) 0%)', + '--intergalactic-progress-bar-pattern-gradient': 'linear-gradient(-45deg, rgba(234, 239, 241, 0.9) 25%, rgba(234, 239, 241, 1) 0%, rgba(234, 239, 241, 1) 50%, rgba(234, 239, 241, 0.9) 0%, rgba(234, 239, 241, 0.9) 75%, rgba(234, 239, 241, 1) 0%)', + '--intergalactic-progress-bar-value-bg': '#000000', + '--intergalactic-skeleton-bg': 'rgba(234, 239, 241, 0.8)', + '--intergalactic-skeleton-bg-invert': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-slider-rating-normal': '#b0c4c9', + '--intergalactic-slider-rating-hover-active': '#ffe09d', + '--intergalactic-table-th-primary-cell': '#f7f8f9', + '--intergalactic-table-th-primary-cell-hover': '#eaeff1', + '--intergalactic-table-th-primary-cell-active': '#eaeff1', + '--intergalactic-table-th-secondary-cell': '#ffffff', + '--intergalactic-table-th-gradient': 'linear-gradient(to right, rgba(234, 239, 241, 0) 0%, rgba(234, 239, 241, 1) 100%)', + '--intergalactic-table-td-cell': '#ffffff', + '--intergalactic-table-td-cell-hover': '#f4f7f8', + '--intergalactic-table-td-cell-active': '#eef2f4', + '--intergalactic-table-td-cell-unread': '#f7f8f9', + '--intergalactic-table-td-cell-accordion': '#f7f8f9', + '--intergalactic-table-td-cell-selected': '#eaf0ff', + '--intergalactic-table-td-cell-selected-hover': '#bdd1ff', + '--intergalactic-table-td-cell-selected-active': '#bdd1ff', + '--intergalactic-table-td-cell-new': '#E8FEF9', + '--intergalactic-table-td-cell-new-hover': '#A3F9E5', + '--intergalactic-table-td-cell-new-active': '#A3F9E5', + '--intergalactic-table-td-cell-critical': '#ffeaea', + '--intergalactic-table-td-cell-critical-hover': '#ffbdbd', + '--intergalactic-table-td-cell-critical-active': '#ffbdbd', + '--intergalactic-table-td-cell-warning': '#fff1ec', + '--intergalactic-table-td-cell-warning-hover': '#ffd3c3', + '--intergalactic-table-td-cell-warning-active': '#ffd3c3', + '--intergalactic-brand-primary': '#ff8d63', + '--intergalactic-brand-secondary': '#611eb5', + '--intergalactic-brand-pinterest': '#bd081c', + '--intergalactic-brand-instagram': '#e4405f', + '--intergalactic-brand-youtube': '#ff0000', + '--intergalactic-brand-facebook': '#1877f2', + '--intergalactic-brand-linkedIn': '#0a66c2', + '--intergalactic-brand-twitter': '#1d9bf0', + '--intergalactic-brand-google-blue': '#1a0dab', + '--intergalactic-brand-google-green': '#016723', + '--intergalactic-brand-google-my-business': '#1a73e8', + '--intergalactic-box-shadow-card': '0 0 0 1px #eaeff1', + '--intergalactic-box-shadow-card-hover': '3px 3px 30px 0px rgba(30, 38, 42, 0.15)', + '--intergalactic-box-shadow-dnd': '0px 0px 1px 0px rgba(30, 38, 42, 0.16), 0px 12px 40px 0px rgba(30, 38, 42, 0.16)', + '--intergalactic-box-shadow-modal': '0px 3px 8px 0px rgba(30, 38, 42, 0.2)', + '--intergalactic-box-shadow-popper': '0px 1px 12px 0px rgba(30, 38, 42, 0.15)', + '--intergalactic-keyboard-focus-outline': '#1e262a', + '--intergalactic-keyboard-focus-invalid-outline': '#ff5454', + '--intergalactic-keyboard-focus-invalid': '0px 0px 0px 3px rgba(255, 84, 84, 0.5)', + '--intergalactic-keyboard-focus-valid-outline': '#46F3CC', + '--intergalactic-keyboard-focus-valid': '0px 0px 0px 3px rgba(70, 243, 204, 0.5)', + '--intergalactic-keyboard-focus-invert-outline': 'rgba(255, 255, 255, 0.8)', + '--intergalactic-keyboard-focus-invert': '0px 0px 0px 3px rgba(255, 255, 255, 0.8)', + '--intergalactic-keyboard-focus': '0px 0px 0px 3px rgba(30, 38, 42, 0.5)', + '--intergalactic-base': 'Inter', + '--intergalactic-lh-800': '117%', + '--intergalactic-lh-700': '110%', + '--intergalactic-lh-600': '125%', + '--intergalactic-lh-500': '117%', + '--intergalactic-lh-400': '120%', + '--intergalactic-lh-300': '150%', + '--intergalactic-lh-200': '142%', + '--intergalactic-lh-100': '133%', + '--intergalactic-semi-bold': '600', + '--intergalactic-bold': '700', + '--intergalactic-regular': '400', + '--intergalactic-medium': '500', + '--intergalactic-fs-50': '10px', + '--intergalactic-fs-100': '12px', + '--intergalactic-fs-200': '14px', + '--intergalactic-fs-300': '16px', + '--intergalactic-fs-400': '20px', + '--intergalactic-fs-500': '24px', + '--intergalactic-fs-600': '32px', + '--intergalactic-fs-700': '36px', + '--intergalactic-fs-800': '48px', + '--intergalactic-compact': '0.3', + '--intergalactic-scale-indent': '4px', + '--intergalactic-form-control-s': '20px', + '--intergalactic-form-control-m': '28px', + '--intergalactic-form-control-l': '40px', + '--intergalactic-spacing-05x': '2px', + '--intergalactic-spacing-1x': '4px', + '--intergalactic-spacing-2x': '8px', + '--intergalactic-spacing-3x': '12px', + '--intergalactic-spacing-4x': '16px', + '--intergalactic-spacing-5x': '20px', + '--intergalactic-spacing-6x': '24px', + '--intergalactic-spacing-8x': '32px', + '--intergalactic-spacing-10x': '40px', + '--intergalactic-spacing-14x': '56px', + '--intergalactic-spacing-20x': '80px', + '--intergalactic-spacing-24x': '96px', + '--intergalactic-spacing-30x': '120px', + '--intergalactic-rounded-extra-small': '2px', + '--intergalactic-rounded-small': '4px', + '--intergalactic-rounded-medium': '6px', + '--intergalactic-rounded-large': '12px', + '--intergalactic-rounded-extra-large': '24px', + '--intergalactic-addon-rounded': '4px', + '--intergalactic-badge-rounded': '6px', + '--intergalactic-chart-rounded': '2px', + '--intergalactic-counter-rounded': '12px', + '--intergalactic-tag-rounded': '24px', + '--intergalactic-switch-rounded': '24px', + '--intergalactic-control-rounded': '6px', + '--intergalactic-progress-bar-rounded': '6px', + '--intergalactic-surface-rounded': '6px', + '--intergalactic-popper-rounded': '6px', + '--intergalactic-modal-rounded': '12px', + '--intergalactic-disabled-opacity': '0.5', + '--intergalactic-screen-extra-small': '320px', + '--intergalactic-screen-small': '768px', + '--intergalactic-screen-medium': '1200px', + '--intergalactic-screen-large': '1920px', + '--intergalactic-overlay-primary': 'rgba(30, 38, 42, 0.7)', + '--intergalactic-overlay-secondary': 'rgba(30, 38, 42, 0.4)', + '--intergalactic-overlay-limitation-primary': '#f7f8f9', + '--intergalactic-overlay-limitation-secondary': 'rgba(255, 255, 255, 0.85)', + '--intergalactic-z-index-deep': '-999', + '--intergalactic-z-index-overlay': '500', + '--intergalactic-z-index-modal': '900', + '--intergalactic-z-index-popper': '700', + '--intergalactic-z-index-dropdown': '750', + '--intergalactic-z-index-tooltip': '800', + '--intergalactic-z-index-notice-bubble': '999', + '--intergalactic-tooltip-default': '#ffffff', + '--intergalactic-tooltip-warning': '#ffbdbd', + '--intergalactic-tooltip-invert': '#1e262a', + '--intergalactic-neighbor-location-neutral': '#ffffff80', + '--intergalactic-neighbor-location-invert': '#00000080', + '--intergalactic-scroll-area-shadow-left': 'linear-gradient(to right, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-right': 'linear-gradient(to left, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-top': 'linear-gradient(to bottom, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-bottom': 'linear-gradient(to top, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-dropdown-menu-left': 'linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-right': 'linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-bottom': 'linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-top': 'linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-bar-background': 'rgba(30, 38, 42, 0.3)', + '--intergalactic-tag-primary-gray-normal': '#ecedf0', + '--intergalactic-tag-primary-gray-hover-active': '#e3e4e9', + '--intergalactic-tag-primary-blue-normal': '#d0eeff', + '--intergalactic-tag-primary-blue-hover-active': '#b7e4ff', + '--intergalactic-tag-primary-green-normal': '#cff1ea', + '--intergalactic-tag-primary-green-hover-active': '#b7eae0', + '--intergalactic-tag-primary-orange-normal': '#ffddd2', + '--intergalactic-tag-primary-orange-hover-active': '#ffccbb', + '--intergalactic-tag-primary-red-normal': '#ffcedc', + '--intergalactic-tag-primary-red-hover-active': '#ffb6ca', + '--intergalactic-tag-primary-violet-normal': '#f4e3ff', + '--intergalactic-tag-primary-violet-hover-active': '#efd5ff', + '--intergalactic-tag-primary-yellow-normal': '#fee6d1', + '--intergalactic-tag-primary-yellow-hover-active': '#fedab9', + '--intergalactic-tag-primary-white-normal': 'rgba(255, 255, 255, 0.15)', + '--intergalactic-tag-primary-white-hover-active': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-tag-primary-gray-text': '#668791', + '--intergalactic-tag-primary-blue-text': '#2969ff', + '--intergalactic-tag-primary-green-text': '#11AA88', + '--intergalactic-tag-primary-orange-text': '#ff703c', + '--intergalactic-tag-primary-red-text': '#E82525', + '--intergalactic-tag-primary-violet-text': '#892aff', + '--intergalactic-tag-primary-yellow-text': '#E89325', + '--intergalactic-tag-primary-white-text': '#ffffff', + '--intergalactic-tag-secondary-normal': '#ffffff', + '--intergalactic-tag-secondary-hover-active': '#f7f8f9', + '--intergalactic-tag-secondary-white-normal': 'rgba(255, 255, 255, 0)', + '--intergalactic-tag-secondary-white-hover-active': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-tag-secondary-gray-text': '#668791', + '--intergalactic-tag-secondary-white-text': '#ffffff', + '--intergalactic-chart-palette-order-1': '#709bff', + '--intergalactic-chart-palette-order-2': '#95F8E2', + '--intergalactic-chart-palette-order-3': '#ff8d63', + '--intergalactic-chart-palette-order-4': '#ff87eb', + '--intergalactic-chart-palette-order-5': '#ffe09d', + '--intergalactic-chart-palette-order-6': '#a155ff', + '--intergalactic-chart-palette-order-7': '#FF5454', + '--intergalactic-chart-palette-order-8': '#95f8e2', + '--intergalactic-chart-palette-order-9': '#5487ff', + '--intergalactic-chart-palette-order-10': '#18F0BF', + '--intergalactic-chart-palette-order-11': '#ffbda5', + '--intergalactic-chart-palette-order-12': '#e14adf', + '--intergalactic-chart-palette-order-13': '#FFC954', + '--intergalactic-chart-palette-order-14': '#c99dff', + '--intergalactic-chart-palette-order-15': '#ff5454', + '--intergalactic-chart-palette-order-16': '#64f5d4', + '--intergalactic-chart-palette-order-17': '#9dbaff', + '--intergalactic-chart-palette-order-18': '#46F3CC', + '--intergalactic-chart-palette-order-19': '#ff9f7c', + '--intergalactic-chart-palette-order-20': '#ffa9fa', + '--intergalactic-chart-palette-order-21': '#ffc954', + '--intergalactic-chart-palette-order-22': '#b070ff', + '--intergalactic-chart-palette-order-23': '#ff9d9d', + '--intergalactic-chart-palette-order-24': '#46f3cc', + '--intergalactic-chart-palette-order-total-amount': '#85a2ab', + '--intergalactic-chart-palette-order-other-data': '#d5dfe2', + '--intergalactic-chart-palette-order-null': '#eaeff1', + '--intergalactic-chart-grid-line': '#eaeff1', + '--intergalactic-chart-grid-x-axis': '#d5dfe2', + '--intergalactic-chart-grid-y-accent-hover-line': '#b0c4c9', + '--intergalactic-chart-grid-text-label': '#668791', + '--intergalactic-chart-grid-bar-chart-hover': 'rgba(213, 223, 226, 0.3)', + '--intergalactic-chart-grid-bar-chart-base-bg': '#eaeff1', + '--intergalactic-chart-grid-period-bg': 'rgba(213, 223, 226, 0.2)', + '--intergalactic-chart-grid-period-pattern': 'rgba(30, 38, 42, 0.15)', + '--intergalactic-chart-grid-border': '#ffffff', + '--intergalactic-chart-x-axis-accent-period-active': '#668791', + '--intergalactic-chart-x-axis-accent-data-start-tracking': 'rgba(70, 243, 204, 0.2)', + '--intergalactic-header-bg': '#382e5e', + '--intergalactic-header-border-primary': '#382e5e', + '--intergalactic-header-border-secondary': '#ffffff26', + '--intergalactic-sidebar-nav-control-hover': 'rgba(234, 239, 241, 0.7)', + '--intergalactic-sidebar-nav-control-active': '#e2ddff', + '--intergalactic-sidebar-nav-control-text-normal': '#6d619f', + '--intergalactic-sidebar-nav-control-text-active': '#4d407e', + '--intergalactic-sidebar-nav-control-icon-normal': '#9083c5', + '--intergalactic-sidebar-nav-control-icon-active': '#4d407e', + '--intergalactic-duration-extra-slow': '500', + '--intergalactic-duration-slow': '400', + '--intergalactic-duration-medium': '300', + '--intergalactic-duration-fast': '200', + '--intergalactic-duration-extra-fast': '100', + '--intergalactic-duration-switch': '100', + '--intergalactic-duration-popper': '200', + '--intergalactic-duration-control': '200', + '--intergalactic-duration-modal': '200', + '--intergalactic-duration-accordion': '200', + '--intergalactic-duration-counter': '200', +}; diff --git a/semcore/core/src/theme/themes/auto.css b/semcore/core/src/theme/themes/auto.css index 1fef6aa40c..fed1b6ae87 100644 --- a/semcore/core/src/theme/themes/auto.css +++ b/semcore/core/src/theme/themes/auto.css @@ -1745,4 +1745,5266 @@ --intergalactic-duration-accordion: 200; /* Use for Summary or Counter. */ --intergalactic-duration-counter: 200; +} +.new { + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --gray-50: #f7f8f9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --gray-100: #eaeff1; + --gray-200: #d5dfe2; + --gray-300: #b0c4c9; + --gray-400: #85a2ab; + --gray-500: #668791; + --gray-600: #516e78; + --gray-700: #425a62; + --gray-800: #1e262a; + --gray-white: #ffffff; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --blue-50: #eaf0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --blue-100: #bdd1ff; + --blue-200: #9dbaff; + --blue-300: #709bff; + --blue-400: #5487ff; + --blue-500: #2969ff; + --blue-600: #2560e8; + --blue-700: #1d4bb5; + --blue-800: #173a8c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --green-50: #ecf9ef; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --green-100: #c5eccd; + --green-200: #a9e2b4; + --green-300: #82d592; + --green-400: #69cd7d; + --green-500: #44c15d; + --green-600: #3eb055; + --green-700: #308942; + --green-800: #256a33; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --red-50: #ffeaea; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --red-100: #ffbdbd; + --red-200: #ff9d9d; + --red-300: #ff7070; + --red-400: #ff5454; + --red-500: #ff2929; + --red-600: #e82525; + --red-700: #b51d1d; + --red-800: #8c1717; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --orange-50: #fff1ec; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --orange-100: #ffd3c3; + --orange-200: #ffbda5; + --orange-300: #ff9f7c; + --orange-400: #ff8d63; + --orange-500: #ff703c; + --orange-600: #e86637; + --orange-700: #b5502b; + --orange-800: #8c3e21; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --yellow-50: #fff8ea; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --yellow-100: #ffeabd; + --yellow-200: #ffe09d; + --yellow-300: #ffd170; + --yellow-400: #ffc954; + --yellow-500: #ffbb29; + --yellow-600: #e8aa25; + --yellow-700: #b5851d; + --yellow-800: #8c6717; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-50: #f3eaff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-100: #dabdff; + --violet-200: #c99dff; + --violet-300: #b070ff; + --violet-400: #a155ff; + --violet-500: #892aff; + --violet-600: #7d26e8; + --violet-700: #611eb5; + --violet-800: #4b178c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-dusty-50: #f5f4ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-dusty-100: #e2ddff; + --violet-dusty-200: #bcb1e9; + --violet-dusty-300: #a79cd6; + --violet-dusty-400: #9083c5; + --violet-dusty-500: #6d619f; + --violet-dusty-600: #4d407e; + --violet-dusty-700: #382e5e; + --violet-dusty-800: #1d113e; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --pink-50: #fff0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --pink-100: #ffd3ff; + --pink-200: #ffa9fa; + --pink-300: #ff87eb; + --pink-400: #e14adf; + --pink-500: #b229b9; + --pink-600: #7d0480; + --pink-700: #4d0050; + --pink-800: #340439; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --salad-50: #e8fef9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --salad-100: #b7faeb; + --salad-200: #95f8e2; + --salad-300: #64f5d4; + --salad-400: #46f3cc; + --salad-500: #18f0bf; + --salad-600: #16daae; + --salad-700: #11aa88; + --salad-800: #0d8469; + /* Primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral: #ffffff; + /* Hover state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-hover: #f7f8f9; + /* Active (selected) state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-active: #eaeff1; + /* Accent background of the message with regular information. */ + --intergalactic-bg-primary-info: #5487ff; + /* Accent background of the message or banner with information about the successful result. */ + --intergalactic-bg-primary-success: #69cd7d; + /* Accent background of a message or a banner with a critical information. */ + --intergalactic-bg-primary-critical: #ff5454; + /* Accent background of a message or a banner with a warning information. */ + --intergalactic-bg-primary-warning: #ff8d63; + /* Accent background of the information you want to highlight. */ + --intergalactic-bg-primary-highlight: #ffeabd; + /* Accent background for the advertising banners and controls. */ + --intergalactic-bg-primary-advertising: #611eb5; + /* Accented muted background for a message with regular information. */ + --intergalactic-bg-primary-muted: #668791; + /* Inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert: #1e262a; + /* Hover state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-hover: #425a62; + /* Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-active: #516e78; + /* Secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral: #f7f8f9; + /* Hover state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-hover: #eaeff1; + /* Active (selected) state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-active: #d5dfe2; + /* Secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info: #eaf0ff; + /* Hover state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-hover: #bdd1ff; + /* Active (selected) state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-active: #9dbaff; + /* Secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success: #ecf9ef; + /* Hover state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-hover: #c5eccd; + /* Active (selected) state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-active: #a9e2b4; + /* Secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical: #ffeaea; + /* Hover state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-hover: #ffbdbd; + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-active: #ff9d9d; + /* Secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning: #fff1ec; + /* Hover state of the secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning-hover: #ffd3c3; + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-warning-active: #ffbda5; + /* Secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight: #fff8ea; + /* Hover state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-hover: #ffeabd; + /* Active (selected) state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-active: #ffe09d; + /* Secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising: #f3eaff; + /* Hover state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-hover: #dabdff; + /* Active (selected) state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-active: #c99dff; + /* Highlighting the search results. */ + --intergalactic-bg-highlight-results: rgba(255, 209, 112, 0.4); + /* Focusing values in the input. */ + --intergalactic-bg-highlight-focus: rgba(84, 135, 255, 0.2); + /* Primary text. */ + --intergalactic-text-primary: #1e262a; + /* Secondary text. */ + --intergalactic-text-secondary: #668791; + /* Placeholder text only. */ + --intergalactic-text-placeholder: #85a2ab; + /* Text associated with success states and data. */ + --intergalactic-text-success: #44c15d; + /* Hover and active states for the text associated with success states and data. */ + --intergalactic-text-success-hover-active: #3eb055; + /* Text associated with critical states and data. */ + --intergalactic-text-critical: #ff2929; + /* Hover and active states for the text associated with critical states and data. */ + --intergalactic-text-critical-hover-active: #e82525; + /* Inverted version of the primary text. */ + --intergalactic-text-primary-invert: #ffffff; + /* Inverted version of the secondary text. */ + --intergalactic-text-secondary-invert: rgba(255, 255, 255, 0.8); + /* Link text. */ + --intergalactic-text-link: #2969ff; + /* Hover and active states for the link text. */ + --intergalactic-text-link-hover-active: #2560e8; + /* Inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert: #9dbaff; + /* Hover and active states of the inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert-hover: #709bff; + /* Visited link text. */ + --intergalactic-text-link-visited: #892aff; + /* Hint link text. */ + --intergalactic-text-hint: #668791; + /* Hover and active states of the hint link text. */ + --intergalactic-text-hint-hover-active: #516e78; + /* Inverted version of the hint link text. */ + --intergalactic-text-hint-invert: #d5dfe2; + /* Hover and active states of the inverted version of the hint link text. */ + --intergalactic-text-hint-invert-hover-active: #b0c4c9; + /* Secondary text. Use with font-size ≥20px. */ + --intergalactic-text-large-secondary: #b0c4c9; + /* Link text with font-size ≥20px. */ + --intergalactic-text-large-info: #5487ff; + /* Hover and active states of the link text with font-size ≥20px. */ + --intergalactic-text-large-info-hover-active: #2969ff; + /* Text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success: #69cd7d; + /* Hover and active states of the text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success-hover-active: #44c15d; + /* Text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical: #ff5454; + /* Hover and active states of the text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical-hover-active: #ff2929; + /* Advertising text. */ + --intergalactic-text-advertising: #611eb5; + /* Neutral primary border. */ + --intergalactic-border-primary: #d5dfe2; + /* Subtle secondary border. */ + --intergalactic-border-secondary: #eaeff1; + /* Subtle secondary border in the informational message. */ + --intergalactic-border-info: #9dbaff; + /* Active border in focused input filed. */ + --intergalactic-border-info-active: #1e262a; + /* Subtle secondary border in the successful message and input field. */ + --intergalactic-border-success: #a9e2b4; + /* Active border in the focused input field with valid state. */ + --intergalactic-border-success-active: #44c15d; + /* Subtle secondary border in the critical message and invalid input field. */ + --intergalactic-border-critical: #ff9d9d; + /* Active border in the focused input field with invalid state, and active state of the other components with invalid state. */ + --intergalactic-border-critical-active: #ff2929; + /* Subtle secondary border in the warning message. */ + --intergalactic-border-warning: #ffbda5; + /* Active border in components with warning intention. */ + --intergalactic-border-warning-active: #ff703c; + /* Inverted version of the neutral primary border. Use it for borders on the dark or color background. */ + --intergalactic-border-primary-invert: #ffffff; + /* Inverted version of the neutral secondary border. Use it for borders on the dark or color background. */ + --intergalactic-border-secondary-invert: rgba(255, 255, 255, 0.3); + /* Border of the Tooltip with dark theme. */ + --intergalactic-border-tooltip-invert: #668791; + /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */ + --intergalactic-border-table-accent: #b0c4c9; + /* Border color of the second period for the comparison mode in the DatePicker. */ + --intergalactic-border-date-picker-range-comparison: #892aff; + /* Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states. */ + --intergalactic-border-critical-pattern: repeating-linear-gradient(315deg, rgba(255, 41, 41, 1) 0, rgba(255, 41, 41, 1) 2px, transparent 0, transparent 50%); + /* Subtle background of the Switch control. */ + --intergalactic-control-switch-bg: #b0c4c9; + /* Background of the regular primary control. */ + --intergalactic-control-primary-info: #1e262a; + /* Hover state of the regular primary control. */ + --intergalactic-control-primary-info-hover: #1e262a; + /* Active (selected) state of the regular primary control. */ + --intergalactic-control-primary-info-active: #1e262a; + /* Background of the primary control with successful theme. */ + --intergalactic-control-primary-success: #69cd7d; + /* Hover state of the primary control with successful theme. */ + --intergalactic-control-primary-success-hover: #44c15d; + /* Active (selected) state of the primary control with successful theme. */ + --intergalactic-control-primary-success-active: #3eb055; + /* Background of the primary control with danger theme. */ + --intergalactic-control-primary-critical: #ff5454; + /* Hover state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-hover: #ff2929; + /* Active (selected) state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-active: #e82525; + /* Background of the primary brand colored control. */ + --intergalactic-control-primary-brand: #ff8d63; + /* Hover state of the primary brand colored control. */ + --intergalactic-control-primary-brand-hover: #ff703c; + /* Active state of the primary brand colored control. */ + --intergalactic-control-primary-brand-active: #e86637; + /* Background of the advertising primary control. */ + --intergalactic-control-primary-advertising: #7d26e8; + /* Hover state of the advertising primary control. */ + --intergalactic-control-primary-advertising-hover: #611eb5; + /* Active (selected) state of the advertising primary control. */ + --intergalactic-control-primary-advertising-active: #892aff; + /* Inverted background of the primary control. */ + --intergalactic-control-primary-invert: #ffffff; + /* Hover state of the inverted primary control. */ + --intergalactic-control-primary-invert-hover: #f7f8f9; + /* Active (selected) state of the inverted primary control. */ + --intergalactic-control-primary-invert-active: #eaeff1; + /* Background of the regular secondary control. */ + --intergalactic-control-secondary-neutral: rgba(133, 162, 171, 0.1); + /* Hover state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-hover: rgba(133, 162, 171, 0.2); + /* Active (selected) state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-active: rgba(133, 162, 171, 0.3); + /* Background of the accent secondary control. */ + --intergalactic-control-secondary-info: rgba(84, 135, 255, 0.1); + /* Hover state of the accent secondary control. */ + --intergalactic-control-secondary-info-hover: rgba(84, 135, 255, 0.2); + /* Active (selected) state of the accent secondary control. */ + --intergalactic-control-secondary-info-active: rgba(84, 135, 255, 0.3); + /* Background of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert: rgba(255, 255, 255, 0.05); + /* Hover state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-active: rgba(255, 255, 255, 0.3); + /* Background of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral: rgba(133, 162, 171, 0); + /* Hover state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-hover: rgba(133, 162, 171, 0.2); + /* Active (selected) state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-active: rgba(133, 162, 171, 0.3); + /* Background of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info: rgba(84, 135, 255, 0); + /* Hover state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-hover: rgba(84, 135, 255, 0.2); + /* Active (selected) state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-active: rgba(84, 135, 255, 0.3); + /* Background of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert: rgba(255, 255, 255, 0); + /* Hover state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-active: rgba(255, 255, 255, 0.3); + /* Primary neutral icon. */ + --intergalactic-icon-primary-neutral: #668791; + /* Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color. */ + --intergalactic-icon-primary-neutral-hover-active: #565861; + /* Primary link-lookalike icon. */ + --intergalactic-icon-primary-info: #2969ff; + /* Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color. */ + --intergalactic-icon-primary-info-hover-active: #0358a1; + /* Primary success icon. */ + --intergalactic-icon-primary-success: #69cd7d; + /* Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color. */ + --intergalactic-icon-primary-success-hover-active: #037e68; + /* Primary critical icon. */ + --intergalactic-icon-primary-critical: #ff5454; + /* Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color. */ + --intergalactic-icon-primary-critical-hover-active: #cc3a42; + /* Primary warning icon. */ + --intergalactic-icon-primary-warning: #ff8d63; + /* Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color. */ + --intergalactic-icon-primary-warning-hover-active: #cc5024; + /* Inverted version of the primary icon. */ + --intergalactic-icon-primary-invert: #ffffff; + /* Hover and active (selected) states of the inverted version of the primary icon. */ + --intergalactic-icon-primary-invert-hover-active: #eaeff1; + /* Secondary neutral icon. */ + --intergalactic-icon-secondary-neutral: #b0c4c9; + /* Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color. */ + --intergalactic-icon-secondary-neutral-hover-active: #878992; + /* Secondary link-lookalike icon. */ + --intergalactic-icon-secondary-info: #709bff; + /* Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color. */ + --intergalactic-icon-secondary-info-hover-active: #2290cc; + /* Secondary success icon. */ + --intergalactic-icon-secondary-success: #82d592; + /* Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color. */ + --intergalactic-icon-secondary-success-hover-active: #049b75; + /* Secondary critical icon. */ + --intergalactic-icon-secondary-critical: #ff7070; + /* Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color. */ + --intergalactic-icon-secondary-critical-hover-active: #cc6c6b; + /* Secondary warning icon. */ + --intergalactic-icon-secondary-warning: #ff9f7c; + /* Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color. */ + --intergalactic-icon-secondary-warning-hover-active: #cc7036; + /* Color for the default non-interactive icon. */ + --intergalactic-icon-non-interactive: #1e262a; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-red: #ff788f; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-orange: #ff9400; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-yellow: #ffe84d; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-salad: #c7fa73; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-green: #45e0a8; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-blue: #6edbff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-violet: #b880ff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-pink: #ff7ad1; + /* Default date-picker cell background. */ + --intergalactic-date-picker-cell: #ffffff; + /* Color for marking the cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current: #85a2ab; + /* Hover state of the default date-picker cell background. */ + --intergalactic-date-picker-cell-hover: #eaeff1; + /* Background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range: #bdd1ff; + /* Hover state of the background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range-hover: #9dbaff; + /* Active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active: #709bff; + /* Hover for the active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active-hover: #5487ff; + /* Color for marking the active cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5); + /* Active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active: #892aff; + /* Hover for the active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active-hover: #7d26e8; + /* Default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item: #ffffff; + /* Hover state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-hover: #f7f8f9; + /* Active (selected) state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected: rgba(189, 209, 255, 0.7); + /* Hover state for the selected state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected-hover: #bdd1ff; + /* Color of the FeaturePopover background with accent theme. */ + --intergalactic-feature-popover-bg: #ffeabd; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */ + --intergalactic-feature-popover-dot-outer-border: #ffeabd; + /* Color of the FeaturePopover background with neutral theme. */ + --intergalactic-feature-popover-bg-neutral: #1d113e; + /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral: #82d592; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral-outer-border: #82d592; + /* Background color of the ProgressBar. */ + --intergalactic-progress-bar-bg: #eaeff1; + /* Hover state of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-hover: #d5dfe2; + /* Inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert: rgba(255, 255, 255, 0.2); + /* Hover state for the inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert-hover: rgba(255, 255, 255, 0.4); + /* Value with gradient for the ProgressBar. */ + --intergalactic-progress-bar-value-gradient: linear-gradient(-45deg, rgba(68, 193, 93, 0.9) 25%, rgba(68, 193, 93, 1) 0%, rgba(68, 193, 93, 1) 50%, rgba(68, 193, 93, 0.9) 0%, rgba(68, 193, 93, 0.9) 75%, rgba(68, 193, 93, 1) 0%); + /* Null value gradient for the ProgressBar. */ + --intergalactic-progress-bar-pattern-gradient: linear-gradient(-45deg, rgba(234, 239, 241, 0.9) 25%, rgba(234, 239, 241, 1) 0%, rgba(234, 239, 241, 1) 50%, rgba(234, 239, 241, 0.9) 0%, rgba(234, 239, 241, 0.9) 75%, rgba(234, 239, 241, 1) 0%); + /* Base value background for the ProgressBar. It is used to create gradients for the values. */ + --intergalactic-progress-bar-value-bg: #000000; + /* Default color for the Skeleton. */ + --intergalactic-skeleton-bg: rgba(234, 239, 241, 0.8); + /* Inverted version of the default color for the Skeleton. */ + --intergalactic-skeleton-bg-invert: rgba(255, 255, 255, 0.3); + /* Icon color for the SliderRating component in its normal state. */ + --intergalactic-slider-rating-normal: #b0c4c9; + /* Icon color for the SliderRating component in its hovered and active states. */ + --intergalactic-slider-rating-hover-active: #ffe09d; + /* Background of the header cell in the primary Table. */ + --intergalactic-table-th-primary-cell: #f7f8f9; + /* Background of the hovered header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-hover: #eaeff1; + /* Background of the active header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-active: #eaeff1; + /* Background of the header cell in the secondary Table. */ + --intergalactic-table-th-secondary-cell: #ffffff; + /* Background gradient for sorting icon that absolute positioned in the table head. */ + --intergalactic-table-th-gradient: linear-gradient(to right, rgba(234, 239, 241, 0) 0%, rgba(234, 239, 241, 1) 100%); + /* Background of the default cell in the Table. */ + --intergalactic-table-td-cell: #ffffff; + /* Background of the default hovered cell in the Table. */ + --intergalactic-table-td-cell-hover: #f4f7f8; + /* Background of the default active cell in the Table. */ + --intergalactic-table-td-cell-active: #eef2f4; + /* Background of the unread cell in the Table. */ + --intergalactic-table-td-cell-unread: #f7f8f9; + /* Background of the cell inside an Accordion in the Table. */ + --intergalactic-table-td-cell-accordion: #f7f8f9; + /* Background of the selected cell in the Table. */ + --intergalactic-table-td-cell-selected: #eaf0ff; + /* Background of the hovered selected cell in the Table. */ + --intergalactic-table-td-cell-selected-hover: #bdd1ff; + /* Background of the active selected cell in the Table. */ + --intergalactic-table-td-cell-selected-active: #bdd1ff; + /* Background of the cell with new information in the Table. */ + --intergalactic-table-td-cell-new: #ecf9ef; + /* Background of the hovered cell with new information in the Table. */ + --intergalactic-table-td-cell-new-hover: #c5eccd; + /* Background of the active cell with new information in the Table. */ + --intergalactic-table-td-cell-new-active: #c5eccd; + /* Background of the cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical: #ffeaea; + /* Background of the hovered cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-hover: #ffbdbd; + /* Background of the active cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-active: #ffbdbd; + /* Background of the cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning: #fff1ec; + /* Background of the hovered cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-hover: #ffd3c3; + /* Background of the active cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-active: #ffd3c3; + /* Primary brand color. */ + --intergalactic-brand-primary: #ff8d63; + /* Secondary brand color. */ + --intergalactic-brand-secondary: #611eb5; + /* Pinterest brand color. */ + --intergalactic-brand-pinterest: #bd081c; + /* Instagram brand color. */ + --intergalactic-brand-instagram: #e4405f; + /* Youtube brand color. */ + --intergalactic-brand-youtube: #ff0000; + /* Facebook brand color. */ + --intergalactic-brand-facebook: #1877f2; + /* LinkedIn brand color. */ + --intergalactic-brand-linkedIn: #0a66c2; + /* Twitter brand color. */ + --intergalactic-brand-twitter: #1d9bf0; + /* Google brand color for the link. */ + --intergalactic-brand-google-blue: #1a0dab; + /* Google green brand color for the link. */ + --intergalactic-brand-google-green: #016723; + /* Google My Business brand color. */ + --intergalactic-brand-google-my-business: #1a73e8; + /* Default shadow of the Card. */ + --intergalactic-box-shadow-card: 0 0 0 1px #eaeff1; + /* Hover state for the shadow of the Card with hover state. */ + --intergalactic-box-shadow-card-hover: 3px 3px 30px 0px rgba(30, 38, 42, 0.15); + /* Shadow for show that element are being drag-and-drop. */ + --intergalactic-box-shadow-dnd: 0px 0px 1px 0px rgba(30, 38, 42, 0.16), 0px 12px 40px 0px rgba(30, 38, 42, 0.16); + /* Default shadow if the Modal window. */ + --intergalactic-box-shadow-modal: 0px 3px 8px 0px rgba(30, 38, 42, 0.2); + /* Default shadow of all Poppers, Dropdowns and Tooltips. */ + --intergalactic-box-shadow-popper: 0px 1px 12px 0px rgba(30, 38, 42, 0.15); + /* Color for default keyboard focus outline styles. */ + --intergalactic-keyboard-focus-outline: #1e262a; + /* Color for keyboard focus outline styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid-outline: #ff5454; + /* Keyboard focus styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 84, 84, 0.5); + /* Color for keyboard focus outline styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid-outline: #69cd7d; + /* Keyboard focus styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(105, 205, 125, 0.5); + /* Color for keyboard focus outline styles to use on the dark and color background. */ + --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8); + /* Keyboard focus styles for use on dark backgrounds. */ + --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8); + /* Default keyboard focus box-shadow styles. */ + --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(30, 38, 42, 0.5); + /* Base font family. */ + --intergalactic-base: Inter; + /* Use with font-size-800. */ + --intergalactic-lh-800: 117%; + /* Use with font-size-700. */ + --intergalactic-lh-700: 110%; + /* Use with font-size-600. */ + --intergalactic-lh-600: 125%; + /* Use with font-size-500. */ + --intergalactic-lh-500: 117%; + /* Use with font-size-400. */ + --intergalactic-lh-400: 120%; + /* Use with font-size-300. */ + --intergalactic-lh-300: 150%; + /* Use with font-size-200. */ + --intergalactic-lh-200: 142%; + /* Use with font-size-100. */ + --intergalactic-lh-100: 133%; + /* Semi-bold font weight. */ + --intergalactic-semi-bold: 600; + /* Bold font weight. */ + --intergalactic-bold: 700; + /* Regular font weight. */ + --intergalactic-regular: 400; + /* Medium font weight. */ + --intergalactic-medium: 500; + /* Use only for text in Badge component. */ + --intergalactic-fs-50: 10px; + /* Use this font-size with caution for text in some additional messages. Always check its contrast and readability. */ + --intergalactic-fs-100: 12px; + --intergalactic-fs-200: 14px; + --intergalactic-fs-300: 16px; + --intergalactic-fs-400: 20px; + --intergalactic-fs-500: 24px; + --intergalactic-fs-600: 32px; + --intergalactic-fs-700: 36px; + --intergalactic-fs-800: 48px; + /* Compact letter spacing. */ + --intergalactic-compact: 0.3; + /* Base denominator of the design system. */ + --intergalactic-scale-indent: 4px; + /* Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions. */ + --intergalactic-form-control-s: 20px; + /* Default size of the controls. */ + --intergalactic-form-control-m: 28px; + /* Large size of the controls. */ + --intergalactic-form-control-l: 40px; + /* 2px */ + --intergalactic-spacing-05x: 2px; + /* 4px */ + --intergalactic-spacing-1x: 4px; + /* 8px */ + --intergalactic-spacing-2x: 8px; + /* 12px */ + --intergalactic-spacing-3x: 12px; + /* 16px */ + --intergalactic-spacing-4x: 16px; + /* 20px */ + --intergalactic-spacing-5x: 20px; + /* 24px */ + --intergalactic-spacing-6x: 24px; + /* 32px */ + --intergalactic-spacing-8x: 32px; + /* 40px */ + --intergalactic-spacing-10x: 40px; + /* 56px */ + --intergalactic-spacing-14x: 56px; + /* 80px */ + --intergalactic-spacing-20x: 80px; + /* 96px */ + --intergalactic-spacing-24x: 96px; + /* 120px */ + --intergalactic-spacing-30x: 120px; + --intergalactic-rounded-extra-small: 2px; + --intergalactic-rounded-small: 4px; + --intergalactic-rounded-medium: 6px; + --intergalactic-rounded-large: 12px; + --intergalactic-rounded-extra-large: 24px; + /* Use for rounding addons and small controls like Checkbox. */ + --intergalactic-addon-rounded: 4px; + /* Use for rounding Badge. */ + --intergalactic-badge-rounded: 6px; + /* Use for rounding big and small charts like bar, histogram and others. */ + --intergalactic-chart-rounded: 2px; + /* Use for rounding Counter. */ + --intergalactic-counter-rounded: 12px; + /* Use for rounding Tag. */ + --intergalactic-tag-rounded: 24px; + /* Use for rounding Switch. */ + --intergalactic-switch-rounded: 24px; + /* Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc. */ + --intergalactic-control-rounded: 6px; + /* Use for rounding bars: ProgressBar, SliderBar, etc. */ + --intergalactic-progress-bar-rounded: 6px; + /* Use for rounding surfaces like Card, blocks, widgets, Notice, etc. */ + --intergalactic-surface-rounded: 6px; + /* Use for rounding all kinds of poppers and dropdowns. */ + --intergalactic-popper-rounded: 6px; + /* Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard). */ + --intergalactic-modal-rounded: 12px; + /* Use for the disabled state of all kind of the controls and elements. */ + --intergalactic-disabled-opacity: 0.5; + /* Extra small screens (small phones). */ + --intergalactic-screen-extra-small: 320px; + /* Small screens (phones and small tablets). */ + --intergalactic-screen-small: 768px; + /* Medium screens (tablets and small laptops). */ + --intergalactic-screen-medium: 1200px; + /* Large screens (tablets and laptops). */ + --intergalactic-screen-large: 1920px; + /* Use for cover the content under the modal dialogs. */ + --intergalactic-overlay-primary: rgba(30, 38, 42, 0.7); + /* Use for the secondary modal dialogs that were opened upon the other modal dialogs. */ + --intergalactic-overlay-secondary: rgba(30, 38, 42, 0.4); + /* Use as a primary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-primary: #f7f8f9; + /* Use as a secondary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-secondary: rgba(255, 255, 255, 0.85); + --intergalactic-z-index-deep: -999; + --intergalactic-z-index-overlay: 500; + --intergalactic-z-index-modal: 900; + --intergalactic-z-index-popper: 700; + --intergalactic-z-index-dropdown: 750; + --intergalactic-z-index-tooltip: 800; + --intergalactic-z-index-notice-bubble: 999; + /* Default Tooltip background. */ + --intergalactic-tooltip-default: #ffffff; + /* Warning Tooltip background. */ + --intergalactic-tooltip-warning: #ffbdbd; + /* Inverted version of the default Tooltip background. */ + --intergalactic-tooltip-invert: #1e262a; + /* Neutral border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-neutral: #ffffff80; + /* Inverted border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-invert: #00000080; + /* Left-to-right fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-left: linear-gradient(to right, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Right-to-left fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-right: linear-gradient(to left, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Top-to-bottom fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-top: linear-gradient(to bottom, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Bottom-to-top fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-bottom: linear-gradient(to top, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Left-to-right fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-left: linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Right-to-left fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-right: linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-bottom: linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Background color for ScrollBar. */ + --intergalactic-scroll-bar-background: rgba(30, 38, 42, 0.3); + /* Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-normal: #ecedf0; + /* Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-hover-active: #e3e4e9; + /* Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-normal: #d0eeff; + /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-hover-active: #b7e4ff; + /* Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-normal: #cff1ea; + /* Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-hover-active: #b7eae0; + /* Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-normal: #ffddd2; + /* Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-hover-active: #ffccbb; + /* Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-normal: #ffcedc; + /* Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-hover-active: #ffb6ca; + /* Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-normal: #f4e3ff; + /* Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-hover-active: #efd5ff; + /* Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-normal: #fee6d1; + /* Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-hover-active: #fedab9; + /* Primary white tag. */ + --intergalactic-tag-primary-white-normal: rgba(255, 255, 255, 0.15); + /* Hover and active (selected) state of the primary white tag. */ + --intergalactic-tag-primary-white-hover-active: rgba(255, 255, 255, 0.3); + /* Gray text for the primary gray tag. */ + --intergalactic-tag-primary-gray-text: #668791; + /* Blue text for the primary blue tag. */ + --intergalactic-tag-primary-blue-text: #2969ff; + /* Green text for the primary green tag. */ + --intergalactic-tag-primary-green-text: #44c15d; + /* Orange text for the primary orange tag. */ + --intergalactic-tag-primary-orange-text: #ff703c; + /* Red text for the primary red tag. */ + --intergalactic-tag-primary-red-text: #ff2929; + /* Violet text for the primary violet tag. */ + --intergalactic-tag-primary-violet-text: #892aff; + /* Yellow text for the primary yellow tag. */ + --intergalactic-tag-primary-yellow-text: #ffbb29; + /* White text for the primary white tag. */ + --intergalactic-tag-primary-white-text: #ffffff; + /* Background color for the default secondary tag. */ + --intergalactic-tag-secondary-normal: #ffffff; + /* Hover and active (selected) states of the background color for the default secondary tag. */ + --intergalactic-tag-secondary-hover-active: #f7f8f9; + /* White secondary tag. */ + --intergalactic-tag-secondary-white-normal: rgba(255, 255, 255, 0); + /* Active state of the secondary white tag. */ + --intergalactic-tag-secondary-white-hover-active: rgba(255, 255, 255, 0.1); + /* Gray text for the default secondary tag. */ + --intergalactic-tag-secondary-gray-text: #668791; + /* White text for the secondary white tag. */ + --intergalactic-tag-secondary-white-text: #ffffff; + /* 1 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-1: #709bff; + /* 2 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-2: #a9e2b4; + /* 3 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-3: #ff8d63; + /* 4 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-4: #ff87eb; + /* 5 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-5: #ffe09d; + /* 6 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-6: #a155ff; + /* 7 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-7: #ff7070; + /* 8 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-8: #95f8e2; + /* 9 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-9: #5487ff; + /* 10 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-10: #82d592; + /* 11 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-11: #ffbda5; + /* 12 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-12: #e14adf; + /* 13 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-13: #ffd170; + /* 14 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-14: #c99dff; + /* 15 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-15: #ff5454; + /* 16 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-16: #64f5d4; + /* 17 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-17: #9dbaff; + /* 18 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-18: #69cd7d; + /* 19 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-19: #ff9f7c; + /* 20 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-20: #ffa9fa; + /* 21 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-21: #ffc954; + /* 22 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-22: #b070ff; + /* 23 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-23: #ff9d9d; + /* 24 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-24: #46f3cc; + /* Use it to show total value. */ + --intergalactic-chart-palette-order-total-amount: #85a2ab; + /* Use it to indicate voids, missing or some other data. */ + --intergalactic-chart-palette-order-other-data: #d5dfe2; + /* Use it to show null value. */ + --intergalactic-chart-palette-order-null: #eaeff1; + /* Default chart grid line. */ + --intergalactic-chart-grid-line: #eaeff1; + /* X-axis line on the chart grid. */ + --intergalactic-chart-grid-x-axis: #d5dfe2; + /* Accent line for the hover state on the chart grid. */ + --intergalactic-chart-grid-y-accent-hover-line: #b0c4c9; + /* Text label on the chart grid. */ + --intergalactic-chart-grid-text-label: #668791; + /* Background color for the hover state of a bar on the chart grid. */ + --intergalactic-chart-grid-bar-chart-hover: rgba(213, 223, 226, 0.3); + /* Default background color of a bar in the BarChart. */ + --intergalactic-chart-grid-bar-chart-base-bg: #eaeff1; + /* Use for highlighting a period on the chart grid. */ + --intergalactic-chart-grid-period-bg: rgba(213, 223, 226, 0.2); + /* Stripe color for diagonal pattern background. */ + --intergalactic-chart-grid-period-pattern: rgba(30, 38, 42, 0.15); + /* Border for distinguishing data sets and chart dots on the chart grid. */ + --intergalactic-chart-grid-border: #ffffff; + /* Background color for the clickable date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-period-active: #668791; + /* Background color for the "Start tracking" date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(105, 205, 125, 0.2); + --intergalactic-header-bg: #382e5e; + --intergalactic-header-border-primary: #382e5e; + --intergalactic-header-border-secondary: #ffffff26; + --intergalactic-sidebar-nav-control-hover: rgba(234, 239, 241, 0.7); + --intergalactic-sidebar-nav-control-active: #e2ddff; + --intergalactic-sidebar-nav-control-text-normal: #6d619f; + --intergalactic-sidebar-nav-control-text-active: #4d407e; + --intergalactic-sidebar-nav-control-icon-normal: #9083c5; + --intergalactic-sidebar-nav-control-icon-active: #4d407e; + /* Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen) */ + --intergalactic-duration-extra-slow: 500; + /* Should be used for more larger scale animations (such as page transitions) */ + --intergalactic-duration-slow: 400; + /* Should be used for more complex effects (such as Modal) */ + --intergalactic-duration-medium: 300; + /* Should be used for more complex effects (such as Dropdown or Accordion) */ + --intergalactic-duration-fast: 200; + /* Should be used for simpler effects and relatively small-sized animations (such as fades or color changes) */ + --intergalactic-duration-extra-fast: 100; + /* Use for small controls like Switch or Slider. */ + --intergalactic-duration-switch: 100; + /* Use for components based on popper like Tooltip, Dropdown or Filter trigger. */ + --intergalactic-duration-popper: 200; + /* Use for small controls like Checkbox or Radio. */ + --intergalactic-duration-control: 200; + /* Use for Modal, Fullscreen Modal, Side panel or other kind of windows. */ + --intergalactic-duration-modal: 200; + /* Use for Accordion. */ + --intergalactic-duration-accordion: 200; + /* Use for Summary or Counter. */ + --intergalactic-duration-counter: 200; +} +.new-adjusted { + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --gray-50: #f3f4f4; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --gray-100: #dedfe2; + --gray-200: #c4c5ca; + --gray-300: #a9aab1; + --gray-400: #90929a; + --gray-500: #6c6e79; + --gray-600: #484a52; + --gray-700: #2f3035; + --gray-800: #131416; + --gray-white: #ffffff; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --blue-50: #eef4ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --blue-100: #d0e0fe; + --blue-200: #aac6fb; + --blue-300: #83aaf7; + --blue-400: #5e8ef2; + --blue-500: #2661e8; + --blue-600: #1640a1; + --blue-700: #0e2a6a; + --blue-800: #08183c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --green-50: #dcfdf0; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --green-100: #9df4d7; + --green-200: #48e3b8; + --green-300: #35c59f; + --green-400: #2a8; + --green-500: #0a8266; + --green-600: #075844; + --green-700: #033427; + --green-800: #021912; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --red-50: #ffefec; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --red-100: #ffd0c8; + --red-200: #ffa79a; + --red-300: #ff786b; + --red-400: #ff3f38; + --red-500: #ca201f; + --red-600: #8b1312; + --red-700: #550807; + --red-800: #2c0202; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --orange-50: #ffefe9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --orange-100: #ffd4c6; + --orange-200: #fcb097; + --orange-300: #f48a66; + --orange-400: #ea622f; + --orange-500: #b4481e; + --orange-600: #7b2f13; + --orange-700: #4a1a09; + --orange-800: #260a02; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --yellow-50: #fff2d7; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --yellow-100: #ffd997; + --yellow-200: #fbb829; + --yellow-300: #da9f21; + --yellow-400: #bb881c; + --yellow-500: #8e6711; + --yellow-600: #614509; + --yellow-700: #3a2803; + --yellow-800: #1d1201; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-50: #f5f1ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-100: #e2d8ff; + --violet-200: #cbb7ff; + --violet-300: #b494ff; + --violet-400: #a070fe; + --violet-500: #8426f5; + --violet-600: #5a17a9; + --violet-700: #350a69; + --violet-800: #1a0239; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-dusty-50: #f1f5f4; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-dusty-100: #d8e2e1; + --violet-dusty-200: #b8cac8; + --violet-dusty-300: #96b1af; + --violet-dusty-400: #7b9996; + --violet-dusty-500: #5c7472; + --violet-dusty-600: #3e4e4d; + --violet-dusty-700: #232e2d; + --violet-dusty-800: #0f1515; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --pink-50: #fff0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --pink-100: #ffd3ff; + --pink-200: #ffa9fa; + --pink-300: #ff87eb; + --pink-400: #e14adf; + --pink-500: #b229b9; + --pink-600: #7d0480; + --pink-700: #4d0050; + --pink-800: #340439; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --salad-50: #e8fef9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --salad-100: #b7faeb; + --salad-200: #95f8e2; + --salad-300: #64f5d4; + --salad-400: #46f3cc; + --salad-500: #18f0bf; + --salad-600: #16daae; + --salad-700: #11aa88; + --salad-800: #0d8469; + /* Primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral: #ffffff; + /* Hover state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-hover: #f3f4f4; + /* Active (selected) state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-active: #dedfe2; + /* Accent background of the message with regular information. */ + --intergalactic-bg-primary-info: #5e8ef2; + /* Accent background of the message or banner with information about the successful result. */ + --intergalactic-bg-primary-success: #2a8; + /* Accent background of a message or a banner with a critical information. */ + --intergalactic-bg-primary-critical: #ff3f38; + /* Accent background of a message or a banner with a warning information. */ + --intergalactic-bg-primary-warning: #ea622f; + /* Accent background of the information you want to highlight. */ + --intergalactic-bg-primary-highlight: #ffd997; + /* Accent background for the advertising banners and controls. */ + --intergalactic-bg-primary-advertising: #350a69; + /* Accented muted background for a message with regular information. */ + --intergalactic-bg-primary-muted: #6c6e79; + /* Inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert: #131416; + /* Hover state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-hover: #2f3035; + /* Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-active: #484a52; + /* Secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral: #f3f4f4; + /* Hover state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-hover: #dedfe2; + /* Active (selected) state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-active: #c4c5ca; + /* Secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info: #eef4ff; + /* Hover state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-hover: #d0e0fe; + /* Active (selected) state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-active: #aac6fb; + /* Secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success: #dcfdf0; + /* Hover state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-hover: #9df4d7; + /* Active (selected) state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-active: #48e3b8; + /* Secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical: #ffefec; + /* Hover state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-hover: #ffd0c8; + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-active: #ffa79a; + /* Secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning: #ffefe9; + /* Hover state of the secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning-hover: #ffd4c6; + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-warning-active: #fcb097; + /* Secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight: #fff2d7; + /* Hover state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-hover: #ffd997; + /* Active (selected) state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-active: #fbb829; + /* Secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising: #f5f1ff; + /* Hover state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-hover: #e2d8ff; + /* Active (selected) state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-active: #cbb7ff; + /* Highlighting the search results. */ + --intergalactic-bg-highlight-results: rgba(218, 159, 33, 0.4); + /* Focusing values in the input. */ + --intergalactic-bg-highlight-focus: rgba(94, 142, 242, 0.2); + /* Primary text. */ + --intergalactic-text-primary: #131416; + /* Secondary text. */ + --intergalactic-text-secondary: #6c6e79; + /* Placeholder text only. */ + --intergalactic-text-placeholder: #90929a; + /* Text associated with success states and data. */ + --intergalactic-text-success: #0a8266; + /* Hover and active states for the text associated with success states and data. */ + --intergalactic-text-success-hover-active: #075844; + /* Text associated with critical states and data. */ + --intergalactic-text-critical: #ca201f; + /* Hover and active states for the text associated with critical states and data. */ + --intergalactic-text-critical-hover-active: #8b1312; + /* Inverted version of the primary text. */ + --intergalactic-text-primary-invert: #ffffff; + /* Inverted version of the secondary text. */ + --intergalactic-text-secondary-invert: rgba(255, 255, 255, 0.8); + /* Link text. */ + --intergalactic-text-link: #2661e8; + /* Hover and active states for the link text. */ + --intergalactic-text-link-hover-active: #1640a1; + /* Inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert: #aac6fb; + /* Hover and active states of the inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert-hover: #83aaf7; + /* Visited link text. */ + --intergalactic-text-link-visited: #8426f5; + /* Hint link text. */ + --intergalactic-text-hint: #6c6e79; + /* Hover and active states of the hint link text. */ + --intergalactic-text-hint-hover-active: #484a52; + /* Inverted version of the hint link text. */ + --intergalactic-text-hint-invert: #c4c5ca; + /* Hover and active states of the inverted version of the hint link text. */ + --intergalactic-text-hint-invert-hover-active: #a9aab1; + /* Secondary text. Use with font-size ≥20px. */ + --intergalactic-text-large-secondary: #a9aab1; + /* Link text with font-size ≥20px. */ + --intergalactic-text-large-info: #5e8ef2; + /* Hover and active states of the link text with font-size ≥20px. */ + --intergalactic-text-large-info-hover-active: #2661e8; + /* Text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success: #2a8; + /* Hover and active states of the text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success-hover-active: #0a8266; + /* Text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical: #ff3f38; + /* Hover and active states of the text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical-hover-active: #ca201f; + /* Advertising text. */ + --intergalactic-text-advertising: #350a69; + /* Neutral primary border. */ + --intergalactic-border-primary: #c4c5ca; + /* Subtle secondary border. */ + --intergalactic-border-secondary: #dedfe2; + /* Subtle secondary border in the informational message. */ + --intergalactic-border-info: #aac6fb; + /* Active border in focused input filed. */ + --intergalactic-border-info-active: #131416; + /* Subtle secondary border in the successful message and input field. */ + --intergalactic-border-success: #48e3b8; + /* Active border in the focused input field with valid state. */ + --intergalactic-border-success-active: #0a8266; + /* Subtle secondary border in the critical message and invalid input field. */ + --intergalactic-border-critical: #ffa79a; + /* Active border in the focused input field with invalid state, and active state of the other components with invalid state. */ + --intergalactic-border-critical-active: #ca201f; + /* Subtle secondary border in the warning message. */ + --intergalactic-border-warning: #fcb097; + /* Active border in components with warning intention. */ + --intergalactic-border-warning-active: #b4481e; + /* Inverted version of the neutral primary border. Use it for borders on the dark or color background. */ + --intergalactic-border-primary-invert: #ffffff; + /* Inverted version of the neutral secondary border. Use it for borders on the dark or color background. */ + --intergalactic-border-secondary-invert: rgba(255, 255, 255, 0.3); + /* Border of the Tooltip with dark theme. */ + --intergalactic-border-tooltip-invert: #6c6e79; + /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */ + --intergalactic-border-table-accent: #a9aab1; + /* Border color of the second period for the comparison mode in the DatePicker. */ + --intergalactic-border-date-picker-range-comparison: #8426f5; + /* Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states. */ + --intergalactic-border-critical-pattern: repeating-linear-gradient(315deg, rgba(202, 32, 31, 1) 0, rgba(202, 32, 31, 1) 2px, transparent 0, transparent 50%); + /* Subtle background of the Switch control. */ + --intergalactic-control-switch-bg: #a9aab1; + /* Background of the regular primary control. */ + --intergalactic-control-primary-info: #131416; + /* Hover state of the regular primary control. */ + --intergalactic-control-primary-info-hover: #131416; + /* Active (selected) state of the regular primary control. */ + --intergalactic-control-primary-info-active: #131416; + /* Background of the primary control with successful theme. */ + --intergalactic-control-primary-success: #2a8; + /* Hover state of the primary control with successful theme. */ + --intergalactic-control-primary-success-hover: #0a8266; + /* Active (selected) state of the primary control with successful theme. */ + --intergalactic-control-primary-success-active: #075844; + /* Background of the primary control with danger theme. */ + --intergalactic-control-primary-critical: #ff3f38; + /* Hover state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-hover: #ca201f; + /* Active (selected) state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-active: #8b1312; + /* Background of the primary brand colored control. */ + --intergalactic-control-primary-brand: #ea622f; + /* Hover state of the primary brand colored control. */ + --intergalactic-control-primary-brand-hover: #b4481e; + /* Active state of the primary brand colored control. */ + --intergalactic-control-primary-brand-active: #7b2f13; + /* Background of the advertising primary control. */ + --intergalactic-control-primary-advertising: #5a17a9; + /* Hover state of the advertising primary control. */ + --intergalactic-control-primary-advertising-hover: #350a69; + /* Active (selected) state of the advertising primary control. */ + --intergalactic-control-primary-advertising-active: #8426f5; + /* Inverted background of the primary control. */ + --intergalactic-control-primary-invert: #ffffff; + /* Hover state of the inverted primary control. */ + --intergalactic-control-primary-invert-hover: #f3f4f4; + /* Active (selected) state of the inverted primary control. */ + --intergalactic-control-primary-invert-active: #dedfe2; + /* Background of the regular secondary control. */ + --intergalactic-control-secondary-neutral: rgba(144, 146, 154, 0.1); + /* Hover state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-hover: rgba(144, 146, 154, 0.2); + /* Active (selected) state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-active: rgba(144, 146, 154, 0.3); + /* Background of the accent secondary control. */ + --intergalactic-control-secondary-info: rgba(94, 142, 242, 0.1); + /* Hover state of the accent secondary control. */ + --intergalactic-control-secondary-info-hover: rgba(94, 142, 242, 0.2); + /* Active (selected) state of the accent secondary control. */ + --intergalactic-control-secondary-info-active: rgba(94, 142, 242, 0.3); + /* Background of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert: rgba(255, 255, 255, 0.05); + /* Hover state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-active: rgba(255, 255, 255, 0.3); + /* Background of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral: rgba(144, 146, 154, 0); + /* Hover state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-hover: rgba(144, 146, 154, 0.2); + /* Active (selected) state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-active: rgba(144, 146, 154, 0.3); + /* Background of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info: rgba(94, 142, 242, 0); + /* Hover state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-hover: rgba(94, 142, 242, 0.2); + /* Active (selected) state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-active: rgba(94, 142, 242, 0.3); + /* Background of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert: rgba(255, 255, 255, 0); + /* Hover state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-active: rgba(255, 255, 255, 0.3); + /* Primary neutral icon. */ + --intergalactic-icon-primary-neutral: #6c6e79; + /* Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color. */ + --intergalactic-icon-primary-neutral-hover-active: #565861; + /* Primary link-lookalike icon. */ + --intergalactic-icon-primary-info: #2661e8; + /* Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color. */ + --intergalactic-icon-primary-info-hover-active: #0358a1; + /* Primary success icon. */ + --intergalactic-icon-primary-success: #2a8; + /* Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color. */ + --intergalactic-icon-primary-success-hover-active: #037e68; + /* Primary critical icon. */ + --intergalactic-icon-primary-critical: #ff3f38; + /* Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color. */ + --intergalactic-icon-primary-critical-hover-active: #cc3a42; + /* Primary warning icon. */ + --intergalactic-icon-primary-warning: #ea622f; + /* Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color. */ + --intergalactic-icon-primary-warning-hover-active: #cc5024; + /* Inverted version of the primary icon. */ + --intergalactic-icon-primary-invert: #ffffff; + /* Hover and active (selected) states of the inverted version of the primary icon. */ + --intergalactic-icon-primary-invert-hover-active: #dedfe2; + /* Secondary neutral icon. */ + --intergalactic-icon-secondary-neutral: #a9aab1; + /* Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color. */ + --intergalactic-icon-secondary-neutral-hover-active: #878992; + /* Secondary link-lookalike icon. */ + --intergalactic-icon-secondary-info: #83aaf7; + /* Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color. */ + --intergalactic-icon-secondary-info-hover-active: #2290cc; + /* Secondary success icon. */ + --intergalactic-icon-secondary-success: #35c59f; + /* Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color. */ + --intergalactic-icon-secondary-success-hover-active: #049b75; + /* Secondary critical icon. */ + --intergalactic-icon-secondary-critical: #ff786b; + /* Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color. */ + --intergalactic-icon-secondary-critical-hover-active: #cc6c6b; + /* Secondary warning icon. */ + --intergalactic-icon-secondary-warning: #f48a66; + /* Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color. */ + --intergalactic-icon-secondary-warning-hover-active: #cc7036; + /* Color for the default non-interactive icon. */ + --intergalactic-icon-non-interactive: #131416; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-red: #ff788f; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-orange: #ff9400; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-yellow: #ffe84d; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-salad: #c7fa73; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-green: #45e0a8; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-blue: #6edbff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-violet: #b880ff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-pink: #ff7ad1; + /* Default date-picker cell background. */ + --intergalactic-date-picker-cell: #ffffff; + /* Color for marking the cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current: #90929a; + /* Hover state of the default date-picker cell background. */ + --intergalactic-date-picker-cell-hover: #dedfe2; + /* Background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range: #d0e0fe; + /* Hover state of the background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range-hover: #aac6fb; + /* Active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active: #83aaf7; + /* Hover for the active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active-hover: #5e8ef2; + /* Color for marking the active cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5); + /* Active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active: #8426f5; + /* Hover for the active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active-hover: #5a17a9; + /* Default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item: #ffffff; + /* Hover state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-hover: #f3f4f4; + /* Active (selected) state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected: rgba(208, 224, 254, 0.7); + /* Hover state for the selected state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected-hover: #d0e0fe; + /* Color of the FeaturePopover background with accent theme. */ + --intergalactic-feature-popover-bg: #ffd997; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */ + --intergalactic-feature-popover-dot-outer-border: #ffd997; + /* Color of the FeaturePopover background with neutral theme. */ + --intergalactic-feature-popover-bg-neutral: #0f1515; + /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral: #35c59f; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral-outer-border: #35c59f; + /* Background color of the ProgressBar. */ + --intergalactic-progress-bar-bg: #dedfe2; + /* Hover state of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-hover: #c4c5ca; + /* Inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert: rgba(255, 255, 255, 0.2); + /* Hover state for the inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert-hover: rgba(255, 255, 255, 0.4); + /* Value with gradient for the ProgressBar. */ + --intergalactic-progress-bar-value-gradient: linear-gradient(-45deg, rgba(68, 193, 93, 0.9) 25%, rgba(68, 193, 93, 1) 0%, rgba(68, 193, 93, 1) 50%, rgba(68, 193, 93, 0.9) 0%, rgba(68, 193, 93, 0.9) 75%, rgba(68, 193, 93, 1) 0%); + /* Null value gradient for the ProgressBar. */ + --intergalactic-progress-bar-pattern-gradient: linear-gradient(-45deg, rgba(234, 239, 241, 0.9) 25%, rgba(234, 239, 241, 1) 0%, rgba(234, 239, 241, 1) 50%, rgba(234, 239, 241, 0.9) 0%, rgba(234, 239, 241, 0.9) 75%, rgba(234, 239, 241, 1) 0%); + /* Base value background for the ProgressBar. It is used to create gradients for the values. */ + --intergalactic-progress-bar-value-bg: #000000; + /* Default color for the Skeleton. */ + --intergalactic-skeleton-bg: rgba(222, 223, 226, 0.8); + /* Inverted version of the default color for the Skeleton. */ + --intergalactic-skeleton-bg-invert: rgba(255, 255, 255, 0.3); + /* Icon color for the SliderRating component in its normal state. */ + --intergalactic-slider-rating-normal: #a9aab1; + /* Icon color for the SliderRating component in its hovered and active states. */ + --intergalactic-slider-rating-hover-active: #fbb829; + /* Background of the header cell in the primary Table. */ + --intergalactic-table-th-primary-cell: #f3f4f4; + /* Background of the hovered header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-hover: #dedfe2; + /* Background of the active header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-active: #dedfe2; + /* Background of the header cell in the secondary Table. */ + --intergalactic-table-th-secondary-cell: #ffffff; + /* Background gradient for sorting icon that absolute positioned in the table head. */ + --intergalactic-table-th-gradient: linear-gradient(to right, rgba(222, 223, 226, 0) 0%, rgba(222, 223, 226, 1) 100%); + /* Background of the default cell in the Table. */ + --intergalactic-table-td-cell: #ffffff; + /* Background of the default hovered cell in the Table. */ + --intergalactic-table-td-cell-hover: #efeff1; + /* Background of the default active cell in the Table. */ + --intergalactic-table-td-cell-active: #e5e5e8; + /* Background of the unread cell in the Table. */ + --intergalactic-table-td-cell-unread: #f3f4f4; + /* Background of the cell inside an Accordion in the Table. */ + --intergalactic-table-td-cell-accordion: #f3f4f4; + /* Background of the selected cell in the Table. */ + --intergalactic-table-td-cell-selected: #eef4ff; + /* Background of the hovered selected cell in the Table. */ + --intergalactic-table-td-cell-selected-hover: #d0e0fe; + /* Background of the active selected cell in the Table. */ + --intergalactic-table-td-cell-selected-active: #d0e0fe; + /* Background of the cell with new information in the Table. */ + --intergalactic-table-td-cell-new: #dcfdf0; + /* Background of the hovered cell with new information in the Table. */ + --intergalactic-table-td-cell-new-hover: #9df4d7; + /* Background of the active cell with new information in the Table. */ + --intergalactic-table-td-cell-new-active: #9df4d7; + /* Background of the cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical: #ffefec; + /* Background of the hovered cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-hover: #ffd0c8; + /* Background of the active cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-active: #ffd0c8; + /* Background of the cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning: #ffefe9; + /* Background of the hovered cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-hover: #ffd4c6; + /* Background of the active cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-active: #ffd4c6; + /* Primary brand color. */ + --intergalactic-brand-primary: #ea622f; + /* Secondary brand color. */ + --intergalactic-brand-secondary: #350a69; + /* Pinterest brand color. */ + --intergalactic-brand-pinterest: #bd081c; + /* Instagram brand color. */ + --intergalactic-brand-instagram: #e4405f; + /* Youtube brand color. */ + --intergalactic-brand-youtube: #ff0000; + /* Facebook brand color. */ + --intergalactic-brand-facebook: #1877f2; + /* LinkedIn brand color. */ + --intergalactic-brand-linkedIn: #0a66c2; + /* Twitter brand color. */ + --intergalactic-brand-twitter: #1d9bf0; + /* Google brand color for the link. */ + --intergalactic-brand-google-blue: #1a0dab; + /* Google green brand color for the link. */ + --intergalactic-brand-google-green: #016723; + /* Google My Business brand color. */ + --intergalactic-brand-google-my-business: #1a73e8; + /* Default shadow of the Card. */ + --intergalactic-box-shadow-card: 0 0 0 1px #dedfe2; + /* Hover state for the shadow of the Card with hover state. */ + --intergalactic-box-shadow-card-hover: 3px 3px 30px 0px rgba(19, 20, 22, 0.15); + /* Shadow for show that element are being drag-and-drop. */ + --intergalactic-box-shadow-dnd: 0px 0px 1px 0px rgba(19, 20, 22, 0.16), 0px 12px 40px 0px rgba(19, 20, 22, 0.16); + /* Default shadow if the Modal window. */ + --intergalactic-box-shadow-modal: 0px 3px 8px 0px rgba(19, 20, 22, 0.2); + /* Default shadow of all Poppers, Dropdowns and Tooltips. */ + --intergalactic-box-shadow-popper: 0px 1px 12px 0px rgba(19, 20, 22, 0.15); + /* Color for default keyboard focus outline styles. */ + --intergalactic-keyboard-focus-outline: #131416; + /* Color for keyboard focus outline styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid-outline: #ff3f38; + /* Keyboard focus styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 63, 56, 0.5); + /* Color for keyboard focus outline styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid-outline: #2a8; + /* Keyboard focus styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(2, 10, 8, 0.5); + /* Color for keyboard focus outline styles to use on the dark and color background. */ + --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8); + /* Keyboard focus styles for use on dark backgrounds. */ + --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8); + /* Default keyboard focus box-shadow styles. */ + --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(19, 20, 22, 0.5); + /* Base font family. */ + --intergalactic-base: Inter; + /* Use with font-size-800. */ + --intergalactic-lh-800: 117%; + /* Use with font-size-700. */ + --intergalactic-lh-700: 110%; + /* Use with font-size-600. */ + --intergalactic-lh-600: 125%; + /* Use with font-size-500. */ + --intergalactic-lh-500: 117%; + /* Use with font-size-400. */ + --intergalactic-lh-400: 120%; + /* Use with font-size-300. */ + --intergalactic-lh-300: 150%; + /* Use with font-size-200. */ + --intergalactic-lh-200: 142%; + /* Use with font-size-100. */ + --intergalactic-lh-100: 133%; + /* Semi-bold font weight. */ + --intergalactic-semi-bold: 600; + /* Bold font weight. */ + --intergalactic-bold: 700; + /* Regular font weight. */ + --intergalactic-regular: 400; + /* Medium font weight. */ + --intergalactic-medium: 500; + /* Use only for text in Badge component. */ + --intergalactic-fs-50: 10px; + /* Use this font-size with caution for text in some additional messages. Always check its contrast and readability. */ + --intergalactic-fs-100: 12px; + --intergalactic-fs-200: 14px; + --intergalactic-fs-300: 16px; + --intergalactic-fs-400: 20px; + --intergalactic-fs-500: 24px; + --intergalactic-fs-600: 32px; + --intergalactic-fs-700: 36px; + --intergalactic-fs-800: 48px; + /* Compact letter spacing. */ + --intergalactic-compact: 0.3; + /* Base denominator of the design system. */ + --intergalactic-scale-indent: 4px; + /* Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions. */ + --intergalactic-form-control-s: 20px; + /* Default size of the controls. */ + --intergalactic-form-control-m: 28px; + /* Large size of the controls. */ + --intergalactic-form-control-l: 40px; + /* 2px */ + --intergalactic-spacing-05x: 2px; + /* 4px */ + --intergalactic-spacing-1x: 4px; + /* 8px */ + --intergalactic-spacing-2x: 8px; + /* 12px */ + --intergalactic-spacing-3x: 12px; + /* 16px */ + --intergalactic-spacing-4x: 16px; + /* 20px */ + --intergalactic-spacing-5x: 20px; + /* 24px */ + --intergalactic-spacing-6x: 24px; + /* 32px */ + --intergalactic-spacing-8x: 32px; + /* 40px */ + --intergalactic-spacing-10x: 40px; + /* 56px */ + --intergalactic-spacing-14x: 56px; + /* 80px */ + --intergalactic-spacing-20x: 80px; + /* 96px */ + --intergalactic-spacing-24x: 96px; + /* 120px */ + --intergalactic-spacing-30x: 120px; + --intergalactic-rounded-extra-small: 2px; + --intergalactic-rounded-small: 4px; + --intergalactic-rounded-medium: 6px; + --intergalactic-rounded-large: 12px; + --intergalactic-rounded-extra-large: 24px; + /* Use for rounding addons and small controls like Checkbox. */ + --intergalactic-addon-rounded: 4px; + /* Use for rounding Badge. */ + --intergalactic-badge-rounded: 6px; + /* Use for rounding big and small charts like bar, histogram and others. */ + --intergalactic-chart-rounded: 2px; + /* Use for rounding Counter. */ + --intergalactic-counter-rounded: 12px; + /* Use for rounding Tag. */ + --intergalactic-tag-rounded: 24px; + /* Use for rounding Switch. */ + --intergalactic-switch-rounded: 24px; + /* Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc. */ + --intergalactic-control-rounded: 6px; + /* Use for rounding bars: ProgressBar, SliderBar, etc. */ + --intergalactic-progress-bar-rounded: 6px; + /* Use for rounding surfaces like Card, blocks, widgets, Notice, etc. */ + --intergalactic-surface-rounded: 6px; + /* Use for rounding all kinds of poppers and dropdowns. */ + --intergalactic-popper-rounded: 6px; + /* Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard). */ + --intergalactic-modal-rounded: 12px; + /* Use for the disabled state of all kind of the controls and elements. */ + --intergalactic-disabled-opacity: 0.5; + /* Extra small screens (small phones). */ + --intergalactic-screen-extra-small: 320px; + /* Small screens (phones and small tablets). */ + --intergalactic-screen-small: 768px; + /* Medium screens (tablets and small laptops). */ + --intergalactic-screen-medium: 1200px; + /* Large screens (tablets and laptops). */ + --intergalactic-screen-large: 1920px; + /* Use for cover the content under the modal dialogs. */ + --intergalactic-overlay-primary: rgba(19, 20, 22, 0.7); + /* Use for the secondary modal dialogs that were opened upon the other modal dialogs. */ + --intergalactic-overlay-secondary: rgba(19, 20, 22, 0.4); + /* Use as a primary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-primary: #f3f4f4; + /* Use as a secondary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-secondary: rgba(255, 255, 255, 0.85); + --intergalactic-z-index-deep: -999; + --intergalactic-z-index-overlay: 500; + --intergalactic-z-index-modal: 900; + --intergalactic-z-index-popper: 700; + --intergalactic-z-index-dropdown: 750; + --intergalactic-z-index-tooltip: 800; + --intergalactic-z-index-notice-bubble: 999; + /* Default Tooltip background. */ + --intergalactic-tooltip-default: #ffffff; + /* Warning Tooltip background. */ + --intergalactic-tooltip-warning: #ffd0c8; + /* Inverted version of the default Tooltip background. */ + --intergalactic-tooltip-invert: #131416; + /* Neutral border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-neutral: #ffffff80; + /* Inverted border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-invert: #00000080; + /* Left-to-right fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-left: linear-gradient(to right, rgba(19, 20, 22, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Right-to-left fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-right: linear-gradient(to left, rgba(19, 20, 22, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Top-to-bottom fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-top: linear-gradient(to bottom, rgba(19, 20, 22, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Bottom-to-top fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-bottom: linear-gradient(to top, rgba(19, 20, 22, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Left-to-right fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-left: linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Right-to-left fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-right: linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-bottom: linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Background color for ScrollBar. */ + --intergalactic-scroll-bar-background: rgba(19, 20, 22, 0.3); + /* Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-normal: #ecedf0; + /* Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-hover-active: #e3e4e9; + /* Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-normal: #d0eeff; + /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-hover-active: #b7e4ff; + /* Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-normal: #cff1ea; + /* Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-hover-active: #b7eae0; + /* Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-normal: #ffddd2; + /* Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-hover-active: #ffccbb; + /* Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-normal: #ffcedc; + /* Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-hover-active: #ffb6ca; + /* Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-normal: #f4e3ff; + /* Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-hover-active: #efd5ff; + /* Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-normal: #fee6d1; + /* Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-hover-active: #fedab9; + /* Primary white tag. */ + --intergalactic-tag-primary-white-normal: rgba(255, 255, 255, 0.15); + /* Hover and active (selected) state of the primary white tag. */ + --intergalactic-tag-primary-white-hover-active: rgba(255, 255, 255, 0.3); + /* Gray text for the primary gray tag. */ + --intergalactic-tag-primary-gray-text: #6c6e79; + /* Blue text for the primary blue tag. */ + --intergalactic-tag-primary-blue-text: #2661e8; + /* Green text for the primary green tag. */ + --intergalactic-tag-primary-green-text: #0a8266; + /* Orange text for the primary orange tag. */ + --intergalactic-tag-primary-orange-text: #b4481e; + /* Red text for the primary red tag. */ + --intergalactic-tag-primary-red-text: #ca201f; + /* Violet text for the primary violet tag. */ + --intergalactic-tag-primary-violet-text: #8426f5; + /* Yellow text for the primary yellow tag. */ + --intergalactic-tag-primary-yellow-text: #8e6711; + /* White text for the primary white tag. */ + --intergalactic-tag-primary-white-text: #ffffff; + /* Background color for the default secondary tag. */ + --intergalactic-tag-secondary-normal: #ffffff; + /* Hover and active (selected) states of the background color for the default secondary tag. */ + --intergalactic-tag-secondary-hover-active: #f3f4f4; + /* White secondary tag. */ + --intergalactic-tag-secondary-white-normal: rgba(255, 255, 255, 0); + /* Active state of the secondary white tag. */ + --intergalactic-tag-secondary-white-hover-active: rgba(255, 255, 255, 0.1); + /* Gray text for the default secondary tag. */ + --intergalactic-tag-secondary-gray-text: #6c6e79; + /* White text for the secondary white tag. */ + --intergalactic-tag-secondary-white-text: #ffffff; + /* 1 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-1: #83aaf7; + /* 2 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-2: #48e3b8; + /* 3 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-3: #ea622f; + /* 4 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-4: #ff87eb; + /* 5 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-5: #fbb829; + /* 6 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-6: #a070fe; + /* 7 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-7: #ff786b; + /* 8 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-8: #95f8e2; + /* 9 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-9: #5e8ef2; + /* 10 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-10: #35c59f; + /* 11 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-11: #fcb097; + /* 12 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-12: #e14adf; + /* 13 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-13: #da9f21; + /* 14 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-14: #cbb7ff; + /* 15 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-15: #ff3f38; + /* 16 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-16: #64f5d4; + /* 17 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-17: #aac6fb; + /* 18 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-18: #2a8; + /* 19 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-19: #f48a66; + /* 20 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-20: #ffa9fa; + /* 21 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-21: #bb881c; + /* 22 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-22: #b494ff; + /* 23 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-23: #ffa79a; + /* 24 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-24: #46f3cc; + /* Use it to show total value. */ + --intergalactic-chart-palette-order-total-amount: #90929a; + /* Use it to indicate voids, missing or some other data. */ + --intergalactic-chart-palette-order-other-data: #c4c5ca; + /* Use it to show null value. */ + --intergalactic-chart-palette-order-null: #dedfe2; + /* Default chart grid line. */ + --intergalactic-chart-grid-line: #dedfe2; + /* X-axis line on the chart grid. */ + --intergalactic-chart-grid-x-axis: #c4c5ca; + /* Accent line for the hover state on the chart grid. */ + --intergalactic-chart-grid-y-accent-hover-line: #a9aab1; + /* Text label on the chart grid. */ + --intergalactic-chart-grid-text-label: #6c6e79; + /* Background color for the hover state of a bar on the chart grid. */ + --intergalactic-chart-grid-bar-chart-hover: rgba(196, 197, 202, 0.3); + /* Default background color of a bar in the BarChart. */ + --intergalactic-chart-grid-bar-chart-base-bg: #dedfe2; + /* Use for highlighting a period on the chart grid. */ + --intergalactic-chart-grid-period-bg: rgba(196, 197, 202, 0.2); + /* Stripe color for diagonal pattern background. */ + --intergalactic-chart-grid-period-pattern: rgba(19, 20, 22, 0.15); + /* Border for distinguishing data sets and chart dots on the chart grid. */ + --intergalactic-chart-grid-border: #ffffff; + /* Background color for the clickable date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-period-active: #6c6e79; + /* Background color for the "Start tracking" date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(2, 10, 8, 0.2); + --intergalactic-header-bg: #232e2d; + --intergalactic-header-border-primary: #232e2d; + --intergalactic-header-border-secondary: #ffffff26; + --intergalactic-sidebar-nav-control-hover: rgba(222, 223, 226, 0.7); + --intergalactic-sidebar-nav-control-active: #d8e2e1; + --intergalactic-sidebar-nav-control-text-normal: #5c7472; + --intergalactic-sidebar-nav-control-text-active: #3e4e4d; + --intergalactic-sidebar-nav-control-icon-normal: #7b9996; + --intergalactic-sidebar-nav-control-icon-active: #3e4e4d; + /* Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen) */ + --intergalactic-duration-extra-slow: 500; + /* Should be used for more larger scale animations (such as page transitions) */ + --intergalactic-duration-slow: 400; + /* Should be used for more complex effects (such as Modal) */ + --intergalactic-duration-medium: 300; + /* Should be used for more complex effects (such as Dropdown or Accordion) */ + --intergalactic-duration-fast: 200; + /* Should be used for simpler effects and relatively small-sized animations (such as fades or color changes) */ + --intergalactic-duration-extra-fast: 100; + /* Use for small controls like Switch or Slider. */ + --intergalactic-duration-switch: 100; + /* Use for components based on popper like Tooltip, Dropdown or Filter trigger. */ + --intergalactic-duration-popper: 200; + /* Use for small controls like Checkbox or Radio. */ + --intergalactic-duration-control: 200; + /* Use for Modal, Fullscreen Modal, Side panel or other kind of windows. */ + --intergalactic-duration-modal: 200; + /* Use for Accordion. */ + --intergalactic-duration-accordion: 200; + /* Use for Summary or Counter. */ + --intergalactic-duration-counter: 200; +} +.light-new { + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --gray-50: #f0f1f2; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --gray-100: #dedfe2; + --gray-200: #d1d2d5; + --gray-300: #a9aab1; + --gray-400: #90929a; + --gray-500: #6c6e79; + --gray-600: #484a52; + --gray-700: #2a2b30; + --gray-800: #181e15; + --gray-white: #ffffff; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --blue-50: #eef4ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --blue-100: #d0e0fe; + --blue-200: #bdd1ff; + --blue-300: #83aaf7; + --blue-400: #709bff; + --blue-500: #2969ff; + --blue-600: #1640a1; + --blue-700: #0a2564; + --blue-800: #041642; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --green-50: #dcfdf0; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --green-100: #a3f9e5; + --green-200: #16f0bf; + --green-300: #13c79e; + --green-400: #0faa88; + --green-500: #0c8266; + --green-600: #045844; + --green-700: #013427; + --green-800: #002118; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --red-50: #ffefec; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --red-100: #ffbdbd; + --red-200: #ffa79a; + --red-300: #ff7f72; + --red-400: #ff5454; + --red-500: #e82525; + --red-600: #8b1312; + --red-700: #550807; + --red-800: #380303; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --orange-50: #ffefe9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --orange-100: #fdd5c8; + --orange-200: #f9b29a; + --orange-300: #f28b68; + --orange-400: #e66536; + --orange-500: #b04b27; + --orange-600: #793118; + --orange-700: #491b0b; + --orange-800: #300f05; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --yellow-50: #fff2d7; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --yellow-100: #ffe09d; + --yellow-200: #ffc954; + --yellow-300: #da9f21; + --yellow-400: #e89325; + --yellow-500: #8e6711; + --yellow-600: #614509; + --yellow-700: #3a2803; + --yellow-800: #251801; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-50: #f5f1ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-100: #e0c7ff; + --violet-200: #cbb7ff; + --violet-300: #c190ff; + --violet-400: #a070fe; + --violet-500: #7d26e8; + --violet-600: #5a17a9; + --violet-700: #350a69; + --violet-800: #220446; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-dusty-50: #f1f5f4; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-dusty-100: #dceeeb; + --violet-dusty-200: #b8cac8; + --violet-dusty-300: #96b1af; + --violet-dusty-400: #7b9996; + --violet-dusty-500: #5c7472; + --violet-dusty-600: #3e4e4d; + --violet-dusty-700: #232e2d; + --violet-dusty-800: #151c1c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --pink-50: #fff0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --pink-100: #ffd3ff; + --pink-200: #ffa9fa; + --pink-300: #ff87eb; + --pink-400: #e14adf; + --pink-500: #b229b9; + --pink-600: #7d0480; + --pink-700: #4d0050; + --pink-800: #340439; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --salad-50: #eaf8eb; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --salad-100: #c4ffba; + --salad-200: #89ff75; + --salad-300: #44c15d; + --salad-400: #44ab58; + --salad-500: #328242; + --salad-600: #20582b; + --salad-700: #0f3417; + --salad-800: #07210c; + /* Primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral: #ffffff; + /* Hover state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-hover: rgba(240, 241, 242, 0.6); + /* Active (selected) state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-active: rgba(222, 223, 226, 0.8); + /* Accent background of the message with regular information. */ + --intergalactic-bg-primary-info: #2969ff; + /* Accent background of the message or banner with information about the successful result. */ + --intergalactic-bg-primary-success: #16f0bf; + /* Accent background of a message or a banner with a critical information. */ + --intergalactic-bg-primary-critical: #ff5454; + /* Accent background of a message or a banner with a warning information. */ + --intergalactic-bg-primary-warning: #f28b68; + /* Accent background of the information you want to highlight. */ + --intergalactic-bg-primary-highlight: #e0c7ff; + /* Accent background for the advertising banners and controls. */ + --intergalactic-bg-primary-advertising: #181e15; + /* Accented muted background for a message with regular information. */ + --intergalactic-bg-primary-muted: #6c6e79; + /* Inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert: #181e15; + /* Hover state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-hover: #2a2b30; + /* Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-active: #484a52; + /* Secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral: rgba(240, 241, 242, 0.6); + /* Hover state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-hover: rgba(222, 223, 226, 0.8); + /* Active (selected) state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-active: #d1d2d5; + /* Secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info: rgba(41, 105, 255, 0.1); + /* Hover state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-hover: rgba(41, 105, 255, 0.2); + /* Active (selected) state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-active: rgba(41, 105, 255, 0.3); + /* Secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success: rgba(22, 240, 191, 0.2); + /* Hover state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-hover: rgba(22, 240, 191, 0.4); + /* Active (selected) state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-active: rgba(22, 240, 191, 0.6); + /* Secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical: rgba(255, 84, 84, 0.2); + /* Hover state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-hover: rgba(255, 84, 84, 0.4); + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-active: rgba(255, 84, 84, 0.6); + /* Secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning: #ffefe9; + /* Hover state of the secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning-hover: rgba(253, 213, 200, 0.6); + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-warning-active: #fdd5c8; + /* Secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight: #f5f1ff; + /* Hover state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-hover: rgba(224, 199, 255, 0.6); + /* Active (selected) state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-active: #e0c7ff; + /* Secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising: #a3f9e5; + /* Hover state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-hover: rgba(22, 240, 191, 0.6); + /* Active (selected) state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-active: #16f0bf; + /* Highlighting the search results. */ + --intergalactic-bg-highlight-results: rgba(224, 199, 255, 0.4); + /* Focusing values in the input. */ + --intergalactic-bg-highlight-focus: rgba(112, 155, 255, 0.2); + /* Primary text. */ + --intergalactic-text-primary: #181e15; + /* Secondary text. */ + --intergalactic-text-secondary: #6c6e79; + /* Placeholder text only. */ + --intergalactic-text-placeholder: #90929a; + /* Text associated with success states and data. */ + --intergalactic-text-success: #0faa88; + /* Hover and active states for the text associated with success states and data. */ + --intergalactic-text-success-hover-active: #0c8266; + /* Text associated with critical states and data. */ + --intergalactic-text-critical: #ff5454; + /* Hover and active states for the text associated with critical states and data. */ + --intergalactic-text-critical-hover-active: #e82525; + /* Inverted version of the primary text. */ + --intergalactic-text-primary-invert: #ffffff; + /* Inverted version of the secondary text. */ + --intergalactic-text-secondary-invert: rgba(255, 255, 255, 0.8); + /* Link text. */ + --intergalactic-text-link: #2969ff; + /* Hover and active states for the link text. */ + --intergalactic-text-link-hover-active: #2969ff; + /* Inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert: #d0e0fe; + /* Hover and active states of the inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert-hover: #bdd1ff; + /* Visited link text. */ + --intergalactic-text-link-visited: #a070fe; + /* Hint link text. */ + --intergalactic-text-hint: #6c6e79; + /* Hover and active states of the hint link text. */ + --intergalactic-text-hint-hover-active: #484a52; + /* Inverted version of the hint link text. */ + --intergalactic-text-hint-invert: #dedfe2; + /* Hover and active states of the inverted version of the hint link text. */ + --intergalactic-text-hint-invert-hover-active: #d1d2d5; + /* Secondary text. Use with font-size ≥20px. */ + --intergalactic-text-large-secondary: #a9aab1; + /* Link text with font-size ≥20px. */ + --intergalactic-text-large-info: #2969ff; + /* Hover and active states of the link text with font-size ≥20px. */ + --intergalactic-text-large-info-hover-active: #1640a1; + /* Text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success: #13c79e; + /* Hover and active states of the text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success-hover-active: #0faa88; + /* Text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical: #ff5454; + /* Hover and active states of the text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical-hover-active: #e82525; + /* Advertising text. */ + --intergalactic-text-advertising: #7d26e8; + /* Neutral primary border. */ + --intergalactic-border-primary: rgba(222, 223, 226, 0.9); + /* Subtle secondary border. */ + --intergalactic-border-secondary: rgba(222, 223, 226, 0.7); + /* Subtle secondary border in the informational message. */ + --intergalactic-border-info: #bdd1ff; + /* Active border in focused input filed. */ + --intergalactic-border-info-active: rgba(41, 105, 255, 0.5); + /* Subtle secondary border in the successful message and input field. */ + --intergalactic-border-success: #13c79e; + /* Active border in the focused input field with valid state. */ + --intergalactic-border-success-active: #0faa88; + /* Subtle secondary border in the critical message and invalid input field. */ + --intergalactic-border-critical: #ff7f72; + /* Active border in the focused input field with invalid state, and active state of the other components with invalid state. */ + --intergalactic-border-critical-active: #ff5454; + /* Subtle secondary border in the warning message. */ + --intergalactic-border-warning: #f9b29a; + /* Active border in components with warning intention. */ + --intergalactic-border-warning-active: #f28b68; + /* Inverted version of the neutral primary border. Use it for borders on the dark or color background. */ + --intergalactic-border-primary-invert: #ffffff; + /* Inverted version of the neutral secondary border. Use it for borders on the dark or color background. */ + --intergalactic-border-secondary-invert: rgba(255, 255, 255, 0.3); + /* Border of the Tooltip with dark theme. */ + --intergalactic-border-tooltip-invert: #6c6e79; + /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */ + --intergalactic-border-table-accent: rgba(222, 223, 226, 0.9); + /* Border color of the second period for the comparison mode in the DatePicker. */ + --intergalactic-border-date-picker-range-comparison: #a070fe; + /* Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states. */ + --intergalactic-border-critical-pattern: repeating-linear-gradient(315deg, rgba(255, 84, 84, 1) 0, rgba(255, 84, 84, 1) 2px, transparent 0, transparent 50%); + /* Subtle background of the Switch control. */ + --intergalactic-control-switch-bg: #d1d2d5; + /* Background of the regular primary control. */ + --intergalactic-control-primary-info: #181e15; + /* Hover state of the regular primary control. */ + --intergalactic-control-primary-info-hover: #a070fe; + /* Active (selected) state of the regular primary control. */ + --intergalactic-control-primary-info-active: #7d26e8; + /* Background of the primary control with successful theme. */ + --intergalactic-control-primary-success: #13c79e; + /* Hover state of the primary control with successful theme. */ + --intergalactic-control-primary-success-hover: #0faa88; + /* Active (selected) state of the primary control with successful theme. */ + --intergalactic-control-primary-success-active: #0c8266; + /* Background of the primary control with danger theme. */ + --intergalactic-control-primary-critical: #ff5454; + /* Hover state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-hover: #e82525; + /* Active (selected) state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-active: #8b1312; + /* Background of the primary brand colored control. */ + --intergalactic-control-primary-brand: #a070fe; + /* Hover state of the primary brand colored control. */ + --intergalactic-control-primary-brand-hover: #7d26e8; + /* Active state of the primary brand colored control. */ + --intergalactic-control-primary-brand-active: #5a17a9; + /* Background of the advertising primary control. */ + --intergalactic-control-primary-advertising: #c190ff; + /* Hover state of the advertising primary control. */ + --intergalactic-control-primary-advertising-hover: #181e15; + /* Active (selected) state of the advertising primary control. */ + --intergalactic-control-primary-advertising-active: #181e15; + /* Inverted background of the primary control. */ + --intergalactic-control-primary-invert: #ffffff; + /* Hover state of the inverted primary control. */ + --intergalactic-control-primary-invert-hover: #f0f1f2; + /* Active (selected) state of the inverted primary control. */ + --intergalactic-control-primary-invert-active: #dedfe2; + /* Background of the regular secondary control. */ + --intergalactic-control-secondary-neutral: rgba(123, 153, 150, 0.1); + /* Hover state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-hover: rgba(123, 153, 150, 0.2); + /* Active (selected) state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-active: rgba(123, 153, 150, 0.3); + /* Background of the accent secondary control (white with 5% blue overlay). */ + --intergalactic-control-secondary-info: color-mix(in srgb, var(--gray-white) 90%, var(--blue-500) 10%); + /* Hover state of the accent secondary control (white with 20% blue overlay). */ + --intergalactic-control-secondary-info-hover: color-mix(in srgb, var(--gray-white) 85%, var(--blue-500) 15%); + /* Active (selected) state of the accent secondary control (white with 30% blue overlay). */ + --intergalactic-control-secondary-info-active: color-mix(in srgb, var(--gray-white) 80%, var(--blue-500) 20%); + /* Background of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert: rgba(255, 255, 255, 0.05); + /* Hover state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-active: rgba(255, 255, 255, 0.2); + /* Background of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral: rgba(123, 153, 150, 0); + /* Hover state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-hover: rgba(123, 153, 150, 0.1); + /* Active (selected) state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-active: rgba(123, 153, 150, 0.2); + /* Background of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info: rgba(112, 155, 255, 0); + /* Hover state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-hover: rgba(112, 155, 255, 0.2); + /* Active (selected) state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-active: rgba(112, 155, 255, 0.3); + /* Background of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert: rgba(255, 255, 255, 0); + /* Hover state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-active: rgba(255, 255, 255, 0.3); + /* Primary neutral icon. */ + --intergalactic-icon-primary-neutral: #a9aab1; + /* Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color. */ + --intergalactic-icon-primary-neutral-hover-active: #90929a; + /* Primary link-lookalike icon. */ + --intergalactic-icon-primary-info: #709bff; + /* Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color. */ + --intergalactic-icon-primary-info-hover-active: #2969ff; + /* Primary success icon. */ + --intergalactic-icon-primary-success: #0faa88; + /* Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color. */ + --intergalactic-icon-primary-success-hover-active: #0c8266; + /* Primary critical icon. */ + --intergalactic-icon-primary-critical: #ff5454; + /* Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color. */ + --intergalactic-icon-primary-critical-hover-active: #e82525; + /* Primary warning icon. */ + --intergalactic-icon-primary-warning: #e66536; + /* Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color. */ + --intergalactic-icon-primary-warning-hover-active: #b04b27; + /* Inverted version of the primary icon. */ + --intergalactic-icon-primary-invert: #ffffff; + /* Hover and active (selected) states of the inverted version of the primary icon. */ + --intergalactic-icon-primary-invert-hover-active: #dedfe2; + /* Secondary neutral icon. */ + --intergalactic-icon-secondary-neutral: #a9aab1; + /* Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color. */ + --intergalactic-icon-secondary-neutral-hover-active: #90929a; + /* Secondary link-lookalike icon. */ + --intergalactic-icon-secondary-info: #83aaf7; + /* Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color. */ + --intergalactic-icon-secondary-info-hover-active: #709bff; + /* Secondary success icon. */ + --intergalactic-icon-secondary-success: #13c79e; + /* Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color. */ + --intergalactic-icon-secondary-success-hover-active: #0faa88; + /* Secondary critical icon. */ + --intergalactic-icon-secondary-critical: #ff7f72; + /* Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color. */ + --intergalactic-icon-secondary-critical-hover-active: #ff5454; + /* Secondary warning icon. */ + --intergalactic-icon-secondary-warning: #f28b68; + /* Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color. */ + --intergalactic-icon-secondary-warning-hover-active: #e66536; + /* Color for the default non-interactive icon. */ + --intergalactic-icon-non-interactive: #181e15; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-red: #ff5454; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-orange: #f28b68; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-yellow: #ffc954; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-salad: #89ff75; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-green: #16f0bf; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-blue: #709bff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-violet: #c190ff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-pink: #e14adf; + /* Default date-picker cell background. */ + --intergalactic-date-picker-cell: #ffffff; + /* Color for marking the cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current: #181e15; + /* Hover state of the default date-picker cell background. */ + --intergalactic-date-picker-cell-hover: rgba(123, 153, 150, 0.1); + /* Background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range: rgba(41, 105, 255, 0.2); + /* Hover state of the background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range-hover: rgba(41, 105, 255, 0.3); + /* Active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active: #2969ff; + /* Hover for the active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active-hover: #1640a1; + /* Color for marking the active cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5); + /* Active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active: #a070fe; + /* Hover for the active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active-hover: #7d26e8; + /* Default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item: #ffffff; + /* Hover state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-hover: rgba(41, 105, 255, 0.1); + /* Active (selected) state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected: rgba(41, 105, 255, 0.2); + /* Hover state for the selected state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected-hover: rgba(41, 105, 255, 0.3); + /* Color of the FeaturePopover background with accent theme. */ + --intergalactic-feature-popover-bg: #e0c7ff; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */ + --intergalactic-feature-popover-dot-outer-border: #e0c7ff; + /* Color of the FeaturePopover background with neutral theme. */ + --intergalactic-feature-popover-bg-neutral: #181e15; + /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral: #c190ff; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral-outer-border: #c190ff; + /* Background color of the ProgressBar. */ + --intergalactic-progress-bar-bg: #dedfe2; + /* Hover state of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-hover: #d1d2d5; + /* Inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert: rgba(255, 255, 255, 0.2); + /* Hover state for the inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert-hover: rgba(255, 255, 255, 0.4); + /* Value with gradient for the ProgressBar. */ + --intergalactic-progress-bar-value-gradient: linear-gradient(-45deg, rgba(193, 144, 255, 0.9) 25%, rgba(193, 144, 255, 1) 0%, rgba(193, 144, 255, 1) 50%, rgba(193, 144, 255, 0.9) 0%, rgba(193, 144, 255, 0.9) 75%, rgba(193, 144, 255, 1) 0%); + /* Null value gradient for the ProgressBar. */ + --intergalactic-progress-bar-pattern-gradient: linear-gradient(-45deg, rgba(222, 223, 226, 0.9) 25%, rgba(222, 223, 226, 1) 0%, rgba(222, 223, 226, 1) 50%, rgba(222, 223, 226, 0.9) 0%, rgba(222, 223, 226, 0.9) 75%, rgba(222, 223, 226, 1) 0%); + /* Base value background for the ProgressBar. It is used to create gradients for the values. */ + --intergalactic-progress-bar-value-bg: #000000; + /* Default color for the Skeleton. */ + --intergalactic-skeleton-bg: rgba(222, 223, 226, 0.8); + /* Inverted version of the default color for the Skeleton. */ + --intergalactic-skeleton-bg-invert: rgba(255, 255, 255, 0.3); + /* Icon color for the SliderRating component in its normal state. */ + --intergalactic-slider-rating-normal: #a9aab1; + /* Icon color for the SliderRating component in its hovered and active states. */ + --intergalactic-slider-rating-hover-active: #c190ff; + /* Background of the header cell in the primary Table. */ + --intergalactic-table-th-primary-cell: rgba(222, 223, 226, 0.2); + /* Background of the hovered header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-hover: #f0f1f2; + /* Background of the active header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-active: #f0f1f2; + /* Background of the header cell in the secondary Table. */ + --intergalactic-table-th-secondary-cell: #ffffff; + /* Background gradient for sorting icon that absolute positioned in the table head. */ + --intergalactic-table-th-gradient: linear-gradient(to right, rgba(240, 241, 242, 0) 0%, rgba(240, 241, 242, 1) 100%); + /* Background of the default cell in the Table. */ + --intergalactic-table-td-cell: #ffffff; + /* Background of the default hovered cell in the Table. */ + --intergalactic-table-td-cell-hover: #f8f9f9; + /* Background of the default active cell in the Table. */ + --intergalactic-table-td-cell-active: #efeff1; + /* Background of the unread cell in the Table. */ + --intergalactic-table-td-cell-unread: rgba(222, 223, 226, 0.2); + /* Background of the cell inside an Accordion in the Table. */ + --intergalactic-table-td-cell-accordion: rgba(222, 223, 226, 0.2); + /* Background of the selected cell in the Table. */ + --intergalactic-table-td-cell-selected: rgba(41, 105, 255, 0.1); + /* Background of the hovered selected cell in the Table. */ + --intergalactic-table-td-cell-selected-hover: rgba(41, 105, 255, 0.2); + /* Background of the active selected cell in the Table. */ + --intergalactic-table-td-cell-selected-active: rgba(41, 105, 255, 0.3); + /* Background of the cell with new information in the Table. */ + --intergalactic-table-td-cell-new: rgba(22, 240, 191, 0.1); + /* Background of the hovered cell with new information in the Table. */ + --intergalactic-table-td-cell-new-hover: rgba(22, 240, 191, 0.2); + /* Background of the active cell with new information in the Table. */ + --intergalactic-table-td-cell-new-active: rgba(22, 240, 191, 0.3); + /* Background of the cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical: rgba(232, 37, 37, 0.1); + /* Background of the hovered cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-hover: rgba(232, 37, 37, 0.2); + /* Background of the active cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-active: rgba(232, 37, 37, 0.3); + /* Background of the cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning: rgba(242, 139, 104, 0.1); + /* Background of the hovered cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-hover: rgba(242, 139, 104, 0.2); + /* Background of the active cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-active: rgba(242, 139, 104, 0.3); + /* Primary brand color. */ + --intergalactic-brand-primary: #c190ff; + /* Secondary brand color. */ + --intergalactic-brand-secondary: #16f0bf; + /* Pinterest brand color. */ + --intergalactic-brand-pinterest: #bd081c; + /* Instagram brand color. */ + --intergalactic-brand-instagram: #e4405f; + /* Youtube brand color. */ + --intergalactic-brand-youtube: #ff0000; + /* Facebook brand color. */ + --intergalactic-brand-facebook: #1877f2; + /* LinkedIn brand color. */ + --intergalactic-brand-linkedIn: #0a66c2; + /* Twitter brand color. */ + --intergalactic-brand-twitter: #1d9bf0; + /* Google brand color for the link. */ + --intergalactic-brand-google-blue: #1a0dab; + /* Google green brand color for the link. */ + --intergalactic-brand-google-green: #016723; + /* Google My Business brand color. */ + --intergalactic-brand-google-my-business: #1a73e8; + /* Default shadow of the Card. */ + --intergalactic-box-shadow-card: 0 0 0 1px rgba(222, 223, 226, 0.5); + /* Hover state for the shadow of the Card with hover state. */ + --intergalactic-box-shadow-card-hover: 3px 3px 30px 0px rgba(24, 30, 21, 0.15); + /* Shadow for show that element are being drag-and-drop. */ + --intergalactic-box-shadow-dnd: 0px 0px 1px 0px rgba(24, 30, 21, 0.16), 0px 12px 40px 0px rgba(24, 30, 21, 0.16); + /* Default shadow if the Modal window. */ + --intergalactic-box-shadow-modal: 0px 3px 8px 0px rgba(24, 30, 21, 0.2); + /* Default shadow of all Poppers, Dropdowns and Tooltips. */ + --intergalactic-box-shadow-popper: 0px 1px 12px 0px rgba(24, 30, 21, 0.15); + /* Color for default keyboard focus outline styles. */ + --intergalactic-keyboard-focus-outline: #2969ff; + /* Color for keyboard focus outline styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid-outline: #ff5454; + /* Keyboard focus styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 84, 84, 0.5); + /* Color for keyboard focus outline styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid-outline: #0faa88; + /* Keyboard focus styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(15, 170, 136, 0.5); + /* Color for keyboard focus outline styles to use on the dark and color background. */ + --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8); + /* Keyboard focus styles for use on dark backgrounds. */ + --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8); + /* Default keyboard focus box-shadow styles. */ + --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(41, 105, 255, 0.5); + /* Base font family. */ + --intergalactic-base: Inter; + /* Use with font-size-800. */ + --intergalactic-lh-800: 117%; + /* Use with font-size-700. */ + --intergalactic-lh-700: 110%; + /* Use with font-size-600. */ + --intergalactic-lh-600: 125%; + /* Use with font-size-500. */ + --intergalactic-lh-500: 117%; + /* Use with font-size-400. */ + --intergalactic-lh-400: 120%; + /* Use with font-size-300. */ + --intergalactic-lh-300: 150%; + /* Use with font-size-200. */ + --intergalactic-lh-200: 142%; + /* Use with font-size-100. */ + --intergalactic-lh-100: 133%; + /* Semi-bold font weight. */ + --intergalactic-semi-bold: 600; + /* Bold font weight. */ + --intergalactic-bold: 700; + /* Regular font weight. */ + --intergalactic-regular: 400; + /* Medium font weight. */ + --intergalactic-medium: 500; + /* Use only for text in Badge component. */ + --intergalactic-fs-50: 10px; + /* Use this font-size with caution for text in some additional messages. Always check its contrast and readability. */ + --intergalactic-fs-100: 12px; + --intergalactic-fs-200: 14px; + --intergalactic-fs-300: 16px; + --intergalactic-fs-400: 20px; + --intergalactic-fs-500: 24px; + --intergalactic-fs-600: 32px; + --intergalactic-fs-700: 36px; + --intergalactic-fs-800: 48px; + /* Compact letter spacing. */ + --intergalactic-compact: 0.3; + /* Base denominator of the design system. */ + --intergalactic-scale-indent: 4px; + /* Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions. */ + --intergalactic-form-control-s: 20px; + /* Default size of the controls. */ + --intergalactic-form-control-m: 28px; + /* Large size of the controls. */ + --intergalactic-form-control-l: 40px; + /* 2px */ + --intergalactic-spacing-05x: 2px; + /* 4px */ + --intergalactic-spacing-1x: 4px; + /* 8px */ + --intergalactic-spacing-2x: 8px; + /* 12px */ + --intergalactic-spacing-3x: 12px; + /* 16px */ + --intergalactic-spacing-4x: 16px; + /* 20px */ + --intergalactic-spacing-5x: 20px; + /* 24px */ + --intergalactic-spacing-6x: 24px; + /* 32px */ + --intergalactic-spacing-8x: 32px; + /* 40px */ + --intergalactic-spacing-10x: 40px; + /* 56px */ + --intergalactic-spacing-14x: 56px; + /* 80px */ + --intergalactic-spacing-20x: 80px; + /* 96px */ + --intergalactic-spacing-24x: 96px; + /* 120px */ + --intergalactic-spacing-30x: 120px; + --intergalactic-rounded-extra-small: 2px; + --intergalactic-rounded-small: 4px; + --intergalactic-rounded-medium: 6px; + --intergalactic-rounded-large: 16px; + --intergalactic-rounded-extra-large: 24px; + /* Use for rounding addons and small controls like Checkbox. */ + --intergalactic-addon-rounded: 4px; + /* Use for rounding Badge. */ + --intergalactic-badge-rounded: 16px; + /* Use for rounding big and small charts like bar, histogram and others. */ + --intergalactic-chart-rounded: 2px; + /* Use for rounding Counter. */ + --intergalactic-counter-rounded: 16px; + /* Use for rounding Tag. */ + --intergalactic-tag-rounded: 24px; + /* Use for rounding Switch. */ + --intergalactic-switch-rounded: 24px; + /* Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc. */ + --intergalactic-control-rounded: 6px; + /* Use for rounding bars: ProgressBar, SliderBar, etc. */ + --intergalactic-progress-bar-rounded: 6px; + /* Use for rounding surfaces like Card, blocks, widgets, Notice, etc. */ + --intergalactic-surface-rounded: 6px; + /* Use for rounding all kinds of poppers and dropdowns. */ + --intergalactic-popper-rounded: 6px; + /* Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard). */ + --intergalactic-modal-rounded: 16px; + /* Use for the disabled state of all kind of the controls and elements. */ + --intergalactic-disabled-opacity: 0.5; + /* Extra small screens (small phones). */ + --intergalactic-screen-extra-small: 320px; + /* Small screens (phones and small tablets). */ + --intergalactic-screen-small: 768px; + /* Medium screens (tablets and small laptops). */ + --intergalactic-screen-medium: 1200px; + /* Large screens (tablets and laptops). */ + --intergalactic-screen-large: 1920px; + /* Use for cover the content under the modal dialogs. */ + --intergalactic-overlay-primary: rgba(24, 30, 21, 0.7); + /* Use for the secondary modal dialogs that were opened upon the other modal dialogs. */ + --intergalactic-overlay-secondary: rgba(24, 30, 21, 0.25); + /* Use as a primary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-primary: rgba(240, 241, 242, 0.6); + /* Use as a secondary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-secondary: rgba(255, 255, 255, 0.85); + --intergalactic-z-index-deep: -999; + --intergalactic-z-index-overlay: 500; + --intergalactic-z-index-modal: 900; + --intergalactic-z-index-popper: 700; + --intergalactic-z-index-dropdown: 750; + --intergalactic-z-index-tooltip: 800; + --intergalactic-z-index-notice-bubble: 999; + /* Default Tooltip background. */ + --intergalactic-tooltip-default: #ffffff; + /* Warning Tooltip background. */ + --intergalactic-tooltip-warning: #ffbdbd; + /* Inverted version of the default Tooltip background. */ + --intergalactic-tooltip-invert: #181e15; + /* Neutral border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-neutral: #ffffff80; + /* Inverted border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-invert: #00000080; + /* Left-to-right fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-left: linear-gradient(to right, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Right-to-left fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-right: linear-gradient(to left, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Top-to-bottom fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-top: linear-gradient(to bottom, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Bottom-to-top fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-bottom: linear-gradient(to top, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Left-to-right fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-left: linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Right-to-left fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-right: linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-bottom: linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Background color for ScrollBar. */ + --intergalactic-scroll-bar-background: rgba(24, 30, 21, 0.3); + /* Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-normal: #ecedf0; + /* Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-hover-active: #e3e4e9; + /* Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-normal: #d0eeff; + /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-hover-active: #b7e4ff; + /* Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-normal: #cff1ea; + /* Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-hover-active: #b7eae0; + /* Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-normal: #ffddd2; + /* Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-hover-active: #ffccbb; + /* Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-normal: #ffcedc; + /* Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-hover-active: #ffb6ca; + /* Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-normal: #f4e3ff; + /* Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-hover-active: #efd5ff; + /* Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-normal: #fee6d1; + /* Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-hover-active: #fedab9; + /* Primary white tag. */ + --intergalactic-tag-primary-white-normal: rgba(255, 255, 255, 0.15); + /* Hover and active (selected) state of the primary white tag. */ + --intergalactic-tag-primary-white-hover-active: rgba(255, 255, 255, 0.3); + /* Gray text for the primary gray tag. */ + --intergalactic-tag-primary-gray-text: #6c6e79; + /* Blue text for the primary blue tag. */ + --intergalactic-tag-primary-blue-text: #2969ff; + /* Green text for the primary green tag. */ + --intergalactic-tag-primary-green-text: #0c8266; + /* Orange text for the primary orange tag. */ + --intergalactic-tag-primary-orange-text: #b04b27; + /* Red text for the primary red tag. */ + --intergalactic-tag-primary-red-text: #e82525; + /* Violet text for the primary violet tag. */ + --intergalactic-tag-primary-violet-text: #7d26e8; + /* Yellow text for the primary yellow tag. */ + --intergalactic-tag-primary-yellow-text: #8e6711; + /* White text for the primary white tag. */ + --intergalactic-tag-primary-white-text: #ffffff; + /* Background color for the default secondary tag. */ + --intergalactic-tag-secondary-normal: #ffffff; + /* Hover and active (selected) states of the background color for the default secondary tag. */ + --intergalactic-tag-secondary-hover-active: #f0f1f2; + /* White secondary tag. */ + --intergalactic-tag-secondary-white-normal: rgba(255, 255, 255, 0); + /* Active state of the secondary white tag. */ + --intergalactic-tag-secondary-white-hover-active: rgba(255, 255, 255, 0.1); + /* Gray text for the default secondary tag. */ + --intergalactic-tag-secondary-gray-text: #6c6e79; + /* White text for the secondary white tag. */ + --intergalactic-tag-secondary-white-text: #ffffff; + /* 1 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-1: #2969ff; + /* 2 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-2: #16f0bf; + /* 3 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-3: #c190ff; + /* 4 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-4: #ff7f72; + /* 5 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-5: #e66536; + /* 6 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-6: #ffc954; + /* 7 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-7: #44c15d; + /* 8 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-8: #e14adf; + /* 9 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-9: #bdd1ff; + /* 10 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-10: #13c79e; + /* 11 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-11: #cbb7ff; + /* 12 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-12: #ff5454; + /* 13 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-13: #f9b29a; + /* 14 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-14: #e89325; + /* 15 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-15: #44ab58; + /* 16 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-16: #ffa9fa; + /* 17 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-17: #83aaf7; + /* 18 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-18: #0faa88; + /* 19 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-19: #c190ff; + /* 20 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-20: #ffa79a; + /* 21 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-21: #f28b68; + /* 22 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-22: #da9f21; + /* 23 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-23: #89ff75; + /* 24 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-24: #ff87eb; + /* Use it to show total value. */ + --intergalactic-chart-palette-order-total-amount: #90929a; + /* Use it to indicate voids, missing or some other data. */ + --intergalactic-chart-palette-order-other-data: #d1d2d5; + /* Use it to show null value. */ + --intergalactic-chart-palette-order-null: #dedfe2; + /* Default chart grid line. */ + --intergalactic-chart-grid-line: rgba(222, 223, 226, 0.7); + /* X-axis line on the chart grid. */ + --intergalactic-chart-grid-x-axis: rgba(222, 223, 226, 0.9); + /* Accent line for the hover state on the chart grid. */ + --intergalactic-chart-grid-y-accent-hover-line: #d1d2d5; + /* Text label on the chart grid. */ + --intergalactic-chart-grid-text-label: #6c6e79; + /* Background color for the hover state of a bar on the chart grid. */ + --intergalactic-chart-grid-bar-chart-hover: rgba(209, 210, 213, 0.2); + /* Default background color of a bar in the BarChart. */ + --intergalactic-chart-grid-bar-chart-base-bg: #f0f1f2; + /* Use for highlighting a period on the chart grid. */ + --intergalactic-chart-grid-period-bg: rgba(209, 210, 213, 0.2); + /* Stripe color for diagonal pattern background. */ + --intergalactic-chart-grid-period-pattern: rgba(24, 30, 21, 0.15); + /* Border for distinguishing data sets and chart dots on the chart grid. */ + --intergalactic-chart-grid-border: #ffffff; + /* Background color for the clickable date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-period-active: #a9aab1; + /* Background color for the "Start tracking" date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(19, 199, 158, 0.2); + --intergalactic-header-bg: rgba(240, 241, 242, 0.6); + --intergalactic-header-border-primary: rgba(222, 223, 226, 0.9); + --intergalactic-header-border-secondary: rgba(222, 223, 226, 0.7); + --intergalactic-sidebar-nav-control-hover: rgba(222, 223, 226, 0.3); + --intergalactic-sidebar-nav-control-active: #dedfe2; + --intergalactic-sidebar-nav-control-text-normal: #6c6e79; + --intergalactic-sidebar-nav-control-text-active: #181e15; + --intergalactic-sidebar-nav-control-icon-normal: #a9aab1; + --intergalactic-sidebar-nav-control-icon-active: #a9aab1; + /* Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen) */ + --intergalactic-duration-extra-slow: 500; + /* Should be used for more larger scale animations (such as page transitions) */ + --intergalactic-duration-slow: 400; + /* Should be used for more complex effects (such as Modal) */ + --intergalactic-duration-medium: 300; + /* Should be used for more complex effects (such as Dropdown or Accordion) */ + --intergalactic-duration-fast: 200; + /* Should be used for simpler effects and relatively small-sized animations (such as fades or color changes) */ + --intergalactic-duration-extra-fast: 100; + /* Use for small controls like Switch or Slider. */ + --intergalactic-duration-switch: 100; + /* Use for components based on popper like Tooltip, Dropdown or Filter trigger. */ + --intergalactic-duration-popper: 200; + /* Use for small controls like Checkbox or Radio. */ + --intergalactic-duration-control: 200; + /* Use for Modal, Fullscreen Modal, Side panel or other kind of windows. */ + --intergalactic-duration-modal: 200; + /* Use for Accordion. */ + --intergalactic-duration-accordion: 200; + /* Use for Summary or Counter. */ + --intergalactic-duration-counter: 200; +} +.light-new-2ver { + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --gray-50: #f0f1f2; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --gray-100: #dedfe2; + --gray-200: #d1d2d5; + --gray-300: #a9aab1; + --gray-400: #90929a; + --gray-500: #6c6e79; + --gray-600: #484a52; + --gray-700: #2a2b30; + --gray-800: #181e15; + --gray-white: #ffffff; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --blue-50: #eef4ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --blue-100: #d0e0fe; + --blue-200: #bdd1ff; + --blue-300: #83aaf7; + --blue-400: #709bff; + --blue-500: #2969ff; + --blue-600: #1640a1; + --blue-700: #0a2564; + --blue-800: #041642; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --green-50: #dcfdf0; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --green-100: #a3f9e5; + --green-200: #16f0bf; + --green-300: #13c79e; + --green-400: #0faa88; + --green-500: #0c8266; + --green-600: #045844; + --green-700: #013427; + --green-800: #002118; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --red-50: #ffefec; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --red-100: #ffbdbd; + --red-200: #ffa79a; + --red-300: #ff7f72; + --red-400: #ff5454; + --red-500: #e82525; + --red-600: #8b1312; + --red-700: #550807; + --red-800: #380303; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --orange-50: #ffefe9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --orange-100: #fdd5c8; + --orange-200: #f9b29a; + --orange-300: #f28b68; + --orange-400: #e66536; + --orange-500: #b04b27; + --orange-600: #793118; + --orange-700: #491b0b; + --orange-800: #300f05; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --yellow-50: #fff2d7; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --yellow-100: #ffe09d; + --yellow-200: #ffc954; + --yellow-300: #da9f21; + --yellow-400: #e89325; + --yellow-500: #8e6711; + --yellow-600: #614509; + --yellow-700: #3a2803; + --yellow-800: #251801; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-50: #f5f1ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-100: #e0c7ff; + --violet-200: #cbb7ff; + --violet-300: #c190ff; + --violet-400: #a070fe; + --violet-500: #7d26e8; + --violet-600: #5a17a9; + --violet-700: #350a69; + --violet-800: #220446; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-dusty-50: #f1f5f4; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-dusty-100: #dceeeb; + --violet-dusty-200: #b8cac8; + --violet-dusty-300: #96b1af; + --violet-dusty-400: #7b9996; + --violet-dusty-500: #5c7472; + --violet-dusty-600: #3e4e4d; + --violet-dusty-700: #232e2d; + --violet-dusty-800: #151c1c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --pink-50: #fff0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --pink-100: #ffd3ff; + --pink-200: #ffa9fa; + --pink-300: #ff87eb; + --pink-400: #e14adf; + --pink-500: #b229b9; + --pink-600: #7d0480; + --pink-700: #4d0050; + --pink-800: #340439; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --salad-50: #eaf8eb; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --salad-100: #c4ffba; + --salad-200: #89ff75; + --salad-300: #44c15d; + --salad-400: #44ab58; + --salad-500: #328242; + --salad-600: #20582b; + --salad-700: #0f3417; + --salad-800: #07210c; + /* Primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral: #ffffff; + /* Hover state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-hover: rgba(240, 241, 242, 0.6); + /* Active (selected) state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-active: rgba(222, 223, 226, 0.8); + /* Accent background of the message with regular information. */ + --intergalactic-bg-primary-info: #2969ff; + /* Accent background of the message or banner with information about the successful result. */ + --intergalactic-bg-primary-success: #16f0bf; + /* Accent background of a message or a banner with a critical information. */ + --intergalactic-bg-primary-critical: #ff5454; + /* Accent background of a message or a banner with a warning information. */ + --intergalactic-bg-primary-warning: #f28b68; + /* Accent background of the information you want to highlight. */ + --intergalactic-bg-primary-highlight: #e0c7ff; + /* Accent background for the advertising banners and controls. */ + --intergalactic-bg-primary-advertising: #181e15; + /* Accented muted background for a message with regular information. */ + --intergalactic-bg-primary-muted: #6c6e79; + /* Inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert: #181e15; + /* Hover state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-hover: #2a2b30; + /* Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-active: #484a52; + /* Secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral: rgba(240, 241, 242, 0.6); + /* Hover state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-hover: rgba(222, 223, 226, 0.8); + /* Active (selected) state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-active: #d1d2d5; + /* Secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info: rgba(41, 105, 255, 0.1); + /* Hover state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-hover: rgba(41, 105, 255, 0.2); + /* Active (selected) state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-active: rgba(41, 105, 255, 0.3); + /* Secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success: rgba(22, 240, 191, 0.2); + /* Hover state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-hover: rgba(22, 240, 191, 0.4); + /* Active (selected) state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-active: rgba(22, 240, 191, 0.6); + /* Secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical: rgba(255, 84, 84, 0.2); + /* Hover state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-hover: rgba(255, 84, 84, 0.4); + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-active: rgba(255, 84, 84, 0.6); + /* Secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning: #ffefe9; + /* Hover state of the secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning-hover: rgba(253, 213, 200, 0.6); + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-warning-active: #fdd5c8; + /* Secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight: #f5f1ff; + /* Hover state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-hover: rgba(224, 199, 255, 0.6); + /* Active (selected) state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-active: #e0c7ff; + /* Secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising: #a3f9e5; + /* Hover state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-hover: rgba(22, 240, 191, 0.6); + /* Active (selected) state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-active: #16f0bf; + /* Highlighting the search results. */ + --intergalactic-bg-highlight-results: rgba(224, 199, 255, 0.4); + /* Focusing values in the input. */ + --intergalactic-bg-highlight-focus: rgba(112, 155, 255, 0.2); + /* Primary text. */ + --intergalactic-text-primary: #181e15; + /* Secondary text. */ + --intergalactic-text-secondary: #6c6e79; + /* Placeholder text only. */ + --intergalactic-text-placeholder: #90929a; + /* Text associated with success states and data. */ + --intergalactic-text-success: #0faa88; + /* Hover and active states for the text associated with success states and data. */ + --intergalactic-text-success-hover-active: #0c8266; + /* Text associated with critical states and data. */ + --intergalactic-text-critical: #ff5454; + /* Hover and active states for the text associated with critical states and data. */ + --intergalactic-text-critical-hover-active: #e82525; + /* Inverted version of the primary text. */ + --intergalactic-text-primary-invert: #ffffff; + /* Inverted version of the secondary text. */ + --intergalactic-text-secondary-invert: rgba(255, 255, 255, 0.8); + /* Link text. */ + --intergalactic-text-link: #2969ff; + /* Hover and active states for the link text. */ + --intergalactic-text-link-hover-active: #1640a1; + /* Inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert: #d0e0fe; + /* Hover and active states of the inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert-hover: #bdd1ff; + /* Visited link text. */ + --intergalactic-text-link-visited: #a070fe; + /* Hint link text. */ + --intergalactic-text-hint: #6c6e79; + /* Hover and active states of the hint link text. */ + --intergalactic-text-hint-hover-active: #484a52; + /* Inverted version of the hint link text. */ + --intergalactic-text-hint-invert: #dedfe2; + /* Hover and active states of the inverted version of the hint link text. */ + --intergalactic-text-hint-invert-hover-active: #d1d2d5; + /* Secondary text. Use with font-size ≥20px. */ + --intergalactic-text-large-secondary: #a9aab1; + /* Link text with font-size ≥20px. */ + --intergalactic-text-large-info: #2969ff; + /* Hover and active states of the link text with font-size ≥20px. */ + --intergalactic-text-large-info-hover-active: #1640a1; + /* Text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success: #13c79e; + /* Hover and active states of the text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success-hover-active: #0faa88; + /* Text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical: #ff5454; + /* Hover and active states of the text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical-hover-active: #e82525; + /* Advertising text. */ + --intergalactic-text-advertising: #7d26e8; + /* Neutral primary border. */ + --intergalactic-border-primary: rgba(222, 223, 226, 0.9); + /* Subtle secondary border. */ + --intergalactic-border-secondary: rgba(222, 223, 226, 0.7); + /* Subtle secondary border in the informational message. */ + --intergalactic-border-info: #bdd1ff; + /* Active border in focused input filed. */ + --intergalactic-border-info-active: rgba(41, 105, 255, 0.5); + /* Subtle secondary border in the successful message and input field. */ + --intergalactic-border-success: #13c79e; + /* Active border in the focused input field with valid state. */ + --intergalactic-border-success-active: #0faa88; + /* Subtle secondary border in the critical message and invalid input field. */ + --intergalactic-border-critical: #ff7f72; + /* Active border in the focused input field with invalid state, and active state of the other components with invalid state. */ + --intergalactic-border-critical-active: #ff5454; + /* Subtle secondary border in the warning message. */ + --intergalactic-border-warning: #f9b29a; + /* Active border in components with warning intention. */ + --intergalactic-border-warning-active: #f28b68; + /* Inverted version of the neutral primary border. Use it for borders on the dark or color background. */ + --intergalactic-border-primary-invert: #ffffff; + /* Inverted version of the neutral secondary border. Use it for borders on the dark or color background. */ + --intergalactic-border-secondary-invert: rgba(255, 255, 255, 0.3); + /* Border of the Tooltip with dark theme. */ + --intergalactic-border-tooltip-invert: #6c6e79; + /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */ + --intergalactic-border-table-accent: rgba(222, 223, 226, 0.9); + /* Border color of the second period for the comparison mode in the DatePicker. */ + --intergalactic-border-date-picker-range-comparison: #a070fe; + /* Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states. */ + --intergalactic-border-critical-pattern: repeating-linear-gradient(315deg, rgba(255, 84, 84, 1) 0, rgba(255, 84, 84, 1) 2px, transparent 0, transparent 50%); + /* Subtle background of the Switch control. */ + --intergalactic-control-switch-bg: #d1d2d5; + /* Background of the regular primary control. */ + --intergalactic-control-primary-info: #181e15; + /* Hover state of the regular primary control. */ + --intergalactic-control-primary-info-hover: #c190ff; + /* Active (selected) state of the regular primary control. */ + --intergalactic-control-primary-info-active: #a070fe; + /* Background of the primary control with successful theme. */ + --intergalactic-control-primary-success: #13c79e; + /* Hover state of the primary control with successful theme. */ + --intergalactic-control-primary-success-hover: #0faa88; + /* Active (selected) state of the primary control with successful theme. */ + --intergalactic-control-primary-success-active: #0c8266; + /* Background of the primary control with danger theme. */ + --intergalactic-control-primary-critical: #ff5454; + /* Hover state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-hover: #e82525; + /* Active (selected) state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-active: #8b1312; + /* Background of the primary brand colored control. */ + --intergalactic-control-primary-brand: #c190ff; + /* Hover state of the primary brand colored control. */ + --intergalactic-control-primary-brand-hover: #a070fe; + /* Active state of the primary brand colored control. */ + --intergalactic-control-primary-brand-active: #7d26e8; + /* Background of the advertising primary control. */ + --intergalactic-control-primary-advertising: #c190ff; + /* Hover state of the advertising primary control. */ + --intergalactic-control-primary-advertising-hover: #181e15; + /* Active (selected) state of the advertising primary control. */ + --intergalactic-control-primary-advertising-active: #181e15; + /* Inverted background of the primary control. */ + --intergalactic-control-primary-invert: #ffffff; + /* Hover state of the inverted primary control. */ + --intergalactic-control-primary-invert-hover: #f0f1f2; + /* Active (selected) state of the inverted primary control. */ + --intergalactic-control-primary-invert-active: #dedfe2; + /* Background of the regular secondary control. */ + --intergalactic-control-secondary-neutral: rgba(123, 153, 150, 0.1); + /* Hover state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-hover: rgba(123, 153, 150, 0.2); + /* Active (selected) state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-active: rgba(123, 153, 150, 0.3); + /* Background of the accent secondary control. */ + --intergalactic-control-secondary-info: rgba(41, 105, 255, 0.05); + /* Hover state of the accent secondary control. */ + --intergalactic-control-secondary-info-hover: rgba(41, 105, 255, 0.2); + /* Active (selected) state of the accent secondary control. */ + --intergalactic-control-secondary-info-active: rgba(41, 105, 255, 0.3); + /* Background of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert: rgba(255, 255, 255, 0.05); + /* Hover state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-active: rgba(255, 255, 255, 0.2); + /* Background of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral: rgba(123, 153, 150, 0); + /* Hover state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-hover: rgba(123, 153, 150, 0.1); + /* Active (selected) state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-active: rgba(123, 153, 150, 0.2); + /* Background of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info: rgba(112, 155, 255, 0); + /* Hover state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-hover: rgba(112, 155, 255, 0.2); + /* Active (selected) state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-active: rgba(112, 155, 255, 0.3); + /* Background of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert: rgba(255, 255, 255, 0); + /* Hover state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-active: rgba(255, 255, 255, 0.3); + /* Primary neutral icon. */ + --intergalactic-icon-primary-neutral: #90929a; + /* Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color. */ + --intergalactic-icon-primary-neutral-hover-active: #6c6e79; + /* Primary link-lookalike icon. */ + --intergalactic-icon-primary-info: #709bff; + /* Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color. */ + --intergalactic-icon-primary-info-hover-active: #2969ff; + /* Primary success icon. */ + --intergalactic-icon-primary-success: #0faa88; + /* Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color. */ + --intergalactic-icon-primary-success-hover-active: #0c8266; + /* Primary critical icon. */ + --intergalactic-icon-primary-critical: #ff5454; + /* Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color. */ + --intergalactic-icon-primary-critical-hover-active: #e82525; + /* Primary warning icon. */ + --intergalactic-icon-primary-warning: #e66536; + /* Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color. */ + --intergalactic-icon-primary-warning-hover-active: #b04b27; + /* Inverted version of the primary icon. */ + --intergalactic-icon-primary-invert: #ffffff; + /* Hover and active (selected) states of the inverted version of the primary icon. */ + --intergalactic-icon-primary-invert-hover-active: #dedfe2; + /* Secondary neutral icon. */ + --intergalactic-icon-secondary-neutral: #a9aab1; + /* Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color. */ + --intergalactic-icon-secondary-neutral-hover-active: #90929a; + /* Secondary link-lookalike icon. */ + --intergalactic-icon-secondary-info: #83aaf7; + /* Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color. */ + --intergalactic-icon-secondary-info-hover-active: #709bff; + /* Secondary success icon. */ + --intergalactic-icon-secondary-success: #13c79e; + /* Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color. */ + --intergalactic-icon-secondary-success-hover-active: #0faa88; + /* Secondary critical icon. */ + --intergalactic-icon-secondary-critical: #ff7f72; + /* Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color. */ + --intergalactic-icon-secondary-critical-hover-active: #ff5454; + /* Secondary warning icon. */ + --intergalactic-icon-secondary-warning: #f28b68; + /* Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color. */ + --intergalactic-icon-secondary-warning-hover-active: #e66536; + /* Color for the default non-interactive icon. */ + --intergalactic-icon-non-interactive: #181e15; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-red: #ff5454; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-orange: #f28b68; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-yellow: #ffc954; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-salad: #89ff75; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-green: #16f0bf; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-blue: #709bff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-violet: #c190ff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-pink: #e14adf; + /* Default date-picker cell background. */ + --intergalactic-date-picker-cell: #ffffff; + /* Color for marking the cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current: #181e15; + /* Hover state of the default date-picker cell background. */ + --intergalactic-date-picker-cell-hover: rgba(123, 153, 150, 0.1); + /* Background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range: rgba(41, 105, 255, 0.2); + /* Hover state of the background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range-hover: rgba(41, 105, 255, 0.3); + /* Active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active: #2969ff; + /* Hover for the active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active-hover: #1640a1; + /* Color for marking the active cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5); + /* Active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active: #a070fe; + /* Hover for the active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active-hover: #7d26e8; + /* Default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item: #ffffff; + /* Hover state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-hover: rgba(123, 153, 150, 0.1); + /* Active (selected) state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected: rgba(123, 153, 150, 0.2); + /* Hover state for the selected state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected-hover: rgba(123, 153, 150, 0.2); + /* Color of the FeaturePopover background with accent theme. */ + --intergalactic-feature-popover-bg: #e0c7ff; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */ + --intergalactic-feature-popover-dot-outer-border: #e0c7ff; + /* Color of the FeaturePopover background with neutral theme. */ + --intergalactic-feature-popover-bg-neutral: #181e15; + /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral: #c190ff; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral-outer-border: #c190ff; + /* Background color of the ProgressBar. */ + --intergalactic-progress-bar-bg: #dedfe2; + /* Hover state of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-hover: #d1d2d5; + /* Inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert: rgba(255, 255, 255, 0.2); + /* Hover state for the inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert-hover: rgba(255, 255, 255, 0.4); + /* Value with gradient for the ProgressBar. */ + --intergalactic-progress-bar-value-gradient: linear-gradient(-45deg, rgba(193, 144, 255, 0.9) 25%, rgba(193, 144, 255, 1) 0%, rgba(193, 144, 255, 1) 50%, rgba(193, 144, 255, 0.9) 0%, rgba(193, 144, 255, 0.9) 75%, rgba(193, 144, 255, 1) 0%); + /* Null value gradient for the ProgressBar. */ + --intergalactic-progress-bar-pattern-gradient: linear-gradient(-45deg, rgba(222, 223, 226, 0.9) 25%, rgba(222, 223, 226, 1) 0%, rgba(222, 223, 226, 1) 50%, rgba(222, 223, 226, 0.9) 0%, rgba(222, 223, 226, 0.9) 75%, rgba(222, 223, 226, 1) 0%); + /* Base value background for the ProgressBar. It is used to create gradients for the values. */ + --intergalactic-progress-bar-value-bg: #000000; + /* Default color for the Skeleton. */ + --intergalactic-skeleton-bg: rgba(222, 223, 226, 0.8); + /* Inverted version of the default color for the Skeleton. */ + --intergalactic-skeleton-bg-invert: rgba(255, 255, 255, 0.3); + /* Icon color for the SliderRating component in its normal state. */ + --intergalactic-slider-rating-normal: #a9aab1; + /* Icon color for the SliderRating component in its hovered and active states. */ + --intergalactic-slider-rating-hover-active: #c190ff; + /* Background of the header cell in the primary Table. */ + --intergalactic-table-th-primary-cell: rgba(222, 223, 226, 0.2); + /* Background of the hovered header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-hover: #f0f1f2; + /* Background of the active header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-active: #f0f1f2; + /* Background of the header cell in the secondary Table. */ + --intergalactic-table-th-secondary-cell: #ffffff; + /* Background gradient for sorting icon that absolute positioned in the table head. */ + --intergalactic-table-th-gradient: linear-gradient(to right, rgba(240, 241, 242, 0) 0%, rgba(240, 241, 242, 1) 100%); + /* Background of the default cell in the Table. */ + --intergalactic-table-td-cell: #ffffff; + /* Background of the default hovered cell in the Table. */ + --intergalactic-table-td-cell-hover: #f8f9f9; + /* Background of the default active cell in the Table. */ + --intergalactic-table-td-cell-active: #efeff1; + /* Background of the unread cell in the Table. */ + --intergalactic-table-td-cell-unread: rgba(222, 223, 226, 0.2); + /* Background of the cell inside an Accordion in the Table. */ + --intergalactic-table-td-cell-accordion: rgba(222, 223, 226, 0.2); + /* Background of the selected cell in the Table. */ + --intergalactic-table-td-cell-selected: rgba(41, 105, 255, 0.1); + /* Background of the hovered selected cell in the Table. */ + --intergalactic-table-td-cell-selected-hover: rgba(41, 105, 255, 0.2); + /* Background of the active selected cell in the Table. */ + --intergalactic-table-td-cell-selected-active: rgba(41, 105, 255, 0.3); + /* Background of the cell with new information in the Table. */ + --intergalactic-table-td-cell-new: rgba(22, 240, 191, 0.1); + /* Background of the hovered cell with new information in the Table. */ + --intergalactic-table-td-cell-new-hover: rgba(22, 240, 191, 0.2); + /* Background of the active cell with new information in the Table. */ + --intergalactic-table-td-cell-new-active: rgba(22, 240, 191, 0.3); + /* Background of the cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical: rgba(232, 37, 37, 0.1); + /* Background of the hovered cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-hover: rgba(232, 37, 37, 0.2); + /* Background of the active cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-active: rgba(232, 37, 37, 0.3); + /* Background of the cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning: rgba(242, 139, 104, 0.1); + /* Background of the hovered cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-hover: rgba(242, 139, 104, 0.2); + /* Background of the active cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-active: rgba(242, 139, 104, 0.3); + /* Primary brand color. */ + --intergalactic-brand-primary: #c190ff; + /* Secondary brand color. */ + --intergalactic-brand-secondary: #16f0bf; + /* Pinterest brand color. */ + --intergalactic-brand-pinterest: #bd081c; + /* Instagram brand color. */ + --intergalactic-brand-instagram: #e4405f; + /* Youtube brand color. */ + --intergalactic-brand-youtube: #ff0000; + /* Facebook brand color. */ + --intergalactic-brand-facebook: #1877f2; + /* LinkedIn brand color. */ + --intergalactic-brand-linkedIn: #0a66c2; + /* Twitter brand color. */ + --intergalactic-brand-twitter: #1d9bf0; + /* Google brand color for the link. */ + --intergalactic-brand-google-blue: #1a0dab; + /* Google green brand color for the link. */ + --intergalactic-brand-google-green: #016723; + /* Google My Business brand color. */ + --intergalactic-brand-google-my-business: #1a73e8; + /* Default shadow of the Card. */ + --intergalactic-box-shadow-card: 0 0 0 1px rgba(222, 223, 226, 0.5); + /* Hover state for the shadow of the Card with hover state. */ + --intergalactic-box-shadow-card-hover: 3px 3px 30px 0px rgba(24, 30, 21, 0.15); + /* Shadow for show that element are being drag-and-drop. */ + --intergalactic-box-shadow-dnd: 0px 0px 1px 0px rgba(24, 30, 21, 0.16), 0px 12px 40px 0px rgba(24, 30, 21, 0.16); + /* Default shadow if the Modal window. */ + --intergalactic-box-shadow-modal: 0px 3px 8px 0px rgba(24, 30, 21, 0.2); + /* Default shadow of all Poppers, Dropdowns and Tooltips. */ + --intergalactic-box-shadow-popper: 0px 1px 12px 0px rgba(24, 30, 21, 0.15); + /* Color for default keyboard focus outline styles. */ + --intergalactic-keyboard-focus-outline: #2969ff; + /* Color for keyboard focus outline styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid-outline: #ff5454; + /* Keyboard focus styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 84, 84, 0.5); + /* Color for keyboard focus outline styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid-outline: #0faa88; + /* Keyboard focus styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(15, 170, 136, 0.5); + /* Color for keyboard focus outline styles to use on the dark and color background. */ + --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8); + /* Keyboard focus styles for use on dark backgrounds. */ + --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8); + /* Default keyboard focus box-shadow styles. */ + --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(41, 105, 255, 0.5); + /* Base font family. */ + --intergalactic-base: Inter; + /* Use with font-size-800. */ + --intergalactic-lh-800: 117%; + /* Use with font-size-700. */ + --intergalactic-lh-700: 110%; + /* Use with font-size-600. */ + --intergalactic-lh-600: 125%; + /* Use with font-size-500. */ + --intergalactic-lh-500: 117%; + /* Use with font-size-400. */ + --intergalactic-lh-400: 120%; + /* Use with font-size-300. */ + --intergalactic-lh-300: 150%; + /* Use with font-size-200. */ + --intergalactic-lh-200: 142%; + /* Use with font-size-100. */ + --intergalactic-lh-100: 133%; + /* Semi-bold font weight. */ + --intergalactic-semi-bold: 600; + /* Bold font weight. */ + --intergalactic-bold: 700; + /* Regular font weight. */ + --intergalactic-regular: 400; + /* Medium font weight. */ + --intergalactic-medium: 500; + /* Use only for text in Badge component. */ + --intergalactic-fs-50: 10px; + /* Use this font-size with caution for text in some additional messages. Always check its contrast and readability. */ + --intergalactic-fs-100: 12px; + --intergalactic-fs-200: 14px; + --intergalactic-fs-300: 16px; + --intergalactic-fs-400: 20px; + --intergalactic-fs-500: 24px; + --intergalactic-fs-600: 32px; + --intergalactic-fs-700: 36px; + --intergalactic-fs-800: 48px; + /* Compact letter spacing. */ + --intergalactic-compact: 0.3; + /* Base denominator of the design system. */ + --intergalactic-scale-indent: 4px; + /* Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions. */ + --intergalactic-form-control-s: 20px; + /* Default size of the controls. */ + --intergalactic-form-control-m: 28px; + /* Large size of the controls. */ + --intergalactic-form-control-l: 40px; + /* 2px */ + --intergalactic-spacing-05x: 2px; + /* 4px */ + --intergalactic-spacing-1x: 4px; + /* 8px */ + --intergalactic-spacing-2x: 8px; + /* 12px */ + --intergalactic-spacing-3x: 12px; + /* 16px */ + --intergalactic-spacing-4x: 16px; + /* 20px */ + --intergalactic-spacing-5x: 20px; + /* 24px */ + --intergalactic-spacing-6x: 24px; + /* 32px */ + --intergalactic-spacing-8x: 32px; + /* 40px */ + --intergalactic-spacing-10x: 40px; + /* 56px */ + --intergalactic-spacing-14x: 56px; + /* 80px */ + --intergalactic-spacing-20x: 80px; + /* 96px */ + --intergalactic-spacing-24x: 96px; + /* 120px */ + --intergalactic-spacing-30x: 120px; + --intergalactic-rounded-extra-small: 1px; + --intergalactic-rounded-small: 2px; + --intergalactic-rounded-medium: 2px; + --intergalactic-rounded-large: 8px; + --intergalactic-rounded-extra-large: 12px; + /* Use for rounding addons and small controls like Checkbox. */ + --intergalactic-addon-rounded: 2px; + /* Use for rounding Badge. */ + --intergalactic-badge-rounded: 2px; + /* Use for rounding big and small charts like bar, histogram and others. */ + --intergalactic-chart-rounded: 2px; + /* Use for rounding Counter. */ + --intergalactic-counter-rounded: 2px; + /* Use for rounding Tag. */ + --intergalactic-tag-rounded: 2px; + /* Use for rounding Switch. */ + --intergalactic-switch-rounded: 12px; + /* Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc. */ + --intergalactic-control-rounded: 2px; + /* Use for rounding bars: ProgressBar, SliderBar, etc. */ + --intergalactic-progress-bar-rounded: 2px; + /* Use for rounding surfaces like Card, blocks, widgets, Notice, etc. */ + --intergalactic-surface-rounded: 2px; + /* Use for rounding all kinds of poppers and dropdowns. */ + --intergalactic-popper-rounded: 2px; + /* Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard). */ + --intergalactic-modal-rounded: 2px; + /* Use for the disabled state of all kind of the controls and elements. */ + --intergalactic-disabled-opacity: 0.5; + /* Extra small screens (small phones). */ + --intergalactic-screen-extra-small: 320px; + /* Small screens (phones and small tablets). */ + --intergalactic-screen-small: 768px; + /* Medium screens (tablets and small laptops). */ + --intergalactic-screen-medium: 1200px; + /* Large screens (tablets and laptops). */ + --intergalactic-screen-large: 1920px; + /* Use for cover the content under the modal dialogs. */ + --intergalactic-overlay-primary: rgba(24, 30, 21, 0.7); + /* Use for the secondary modal dialogs that were opened upon the other modal dialogs. */ + --intergalactic-overlay-secondary: rgba(24, 30, 21, 0.25); + /* Use as a primary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-primary: rgba(240, 241, 242, 0.6); + /* Use as a secondary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-secondary: rgba(255, 255, 255, 0.85); + --intergalactic-z-index-deep: -999; + --intergalactic-z-index-overlay: 500; + --intergalactic-z-index-modal: 900; + --intergalactic-z-index-popper: 700; + --intergalactic-z-index-dropdown: 750; + --intergalactic-z-index-tooltip: 800; + --intergalactic-z-index-notice-bubble: 999; + /* Default Tooltip background. */ + --intergalactic-tooltip-default: #ffffff; + /* Warning Tooltip background. */ + --intergalactic-tooltip-warning: #ffbdbd; + /* Inverted version of the default Tooltip background. */ + --intergalactic-tooltip-invert: #181e15; + /* Neutral border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-neutral: #ffffff80; + /* Inverted border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-invert: #00000080; + /* Left-to-right fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-left: linear-gradient(to right, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Right-to-left fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-right: linear-gradient(to left, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Top-to-bottom fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-top: linear-gradient(to bottom, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Bottom-to-top fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-bottom: linear-gradient(to top, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Left-to-right fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-left: linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Right-to-left fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-right: linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-bottom: linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Background color for ScrollBar. */ + --intergalactic-scroll-bar-background: rgba(24, 30, 21, 0.3); + /* Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-normal: #ecedf0; + /* Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-hover-active: #e3e4e9; + /* Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-normal: #d0eeff; + /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-hover-active: #b7e4ff; + /* Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-normal: #cff1ea; + /* Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-hover-active: #b7eae0; + /* Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-normal: #ffddd2; + /* Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-hover-active: #ffccbb; + /* Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-normal: #ffcedc; + /* Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-hover-active: #ffb6ca; + /* Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-normal: #f4e3ff; + /* Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-hover-active: #efd5ff; + /* Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-normal: #fee6d1; + /* Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-hover-active: #fedab9; + /* Primary white tag. */ + --intergalactic-tag-primary-white-normal: rgba(255, 255, 255, 0.15); + /* Hover and active (selected) state of the primary white tag. */ + --intergalactic-tag-primary-white-hover-active: rgba(255, 255, 255, 0.3); + /* Gray text for the primary gray tag. */ + --intergalactic-tag-primary-gray-text: #6c6e79; + /* Blue text for the primary blue tag. */ + --intergalactic-tag-primary-blue-text: #2969ff; + /* Green text for the primary green tag. */ + --intergalactic-tag-primary-green-text: #0c8266; + /* Orange text for the primary orange tag. */ + --intergalactic-tag-primary-orange-text: #b04b27; + /* Red text for the primary red tag. */ + --intergalactic-tag-primary-red-text: #e82525; + /* Violet text for the primary violet tag. */ + --intergalactic-tag-primary-violet-text: #7d26e8; + /* Yellow text for the primary yellow tag. */ + --intergalactic-tag-primary-yellow-text: #8e6711; + /* White text for the primary white tag. */ + --intergalactic-tag-primary-white-text: #ffffff; + /* Background color for the default secondary tag. */ + --intergalactic-tag-secondary-normal: #ffffff; + /* Hover and active (selected) states of the background color for the default secondary tag. */ + --intergalactic-tag-secondary-hover-active: #f0f1f2; + /* White secondary tag. */ + --intergalactic-tag-secondary-white-normal: rgba(255, 255, 255, 0); + /* Active state of the secondary white tag. */ + --intergalactic-tag-secondary-white-hover-active: rgba(255, 255, 255, 0.1); + /* Gray text for the default secondary tag. */ + --intergalactic-tag-secondary-gray-text: #6c6e79; + /* White text for the secondary white tag. */ + --intergalactic-tag-secondary-white-text: #ffffff; + /* 1 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-1: #181e15; + /* 2 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-2: #c190ff; + /* 3 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-3: #16f0bf; + /* 4 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-4: #96b1af; + /* 5 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-5: #2969ff; + /* 6 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-6: #e82525; + /* 7 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-7: #b04b27; + /* 8 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-8: #8e6711; + /* 9 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-9: #328242; + /* 10 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-10: #0c8266; + /* 11 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-11: #7d26e8; + /* 12 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-12: #e14adf; + /* 13 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-13: #709bff; + /* 14 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-14: #ff5454; + /* 15 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-15: #e66536; + /* 16 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-16: #e89325; + /* 17 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-17: #44ab58; + /* 18 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-18: #0faa88; + /* 19 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-19: #a070fe; + /* 20 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-20: #ff87eb; + /* 21 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-21: #1640a1; + /* 22 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-22: #8b1312; + /* 23 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-23: #793118; + /* 24 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-24: #045844; + /* Use it to show total value. */ + --intergalactic-chart-palette-order-total-amount: #90929a; + /* Use it to indicate voids, missing or some other data. */ + --intergalactic-chart-palette-order-other-data: #d1d2d5; + /* Use it to show null value. */ + --intergalactic-chart-palette-order-null: #dedfe2; + /* Default chart grid line. */ + --intergalactic-chart-grid-line: rgba(222, 223, 226, 0.7); + /* X-axis line on the chart grid. */ + --intergalactic-chart-grid-x-axis: rgba(222, 223, 226, 0.9); + /* Accent line for the hover state on the chart grid. */ + --intergalactic-chart-grid-y-accent-hover-line: #d1d2d5; + /* Text label on the chart grid. */ + --intergalactic-chart-grid-text-label: #6c6e79; + /* Background color for the hover state of a bar on the chart grid. */ + --intergalactic-chart-grid-bar-chart-hover: rgba(209, 210, 213, 0.2); + /* Default background color of a bar in the BarChart. */ + --intergalactic-chart-grid-bar-chart-base-bg: #f0f1f2; + /* Use for highlighting a period on the chart grid. */ + --intergalactic-chart-grid-period-bg: rgba(209, 210, 213, 0.2); + /* Stripe color for diagonal pattern background. */ + --intergalactic-chart-grid-period-pattern: rgba(24, 30, 21, 0.15); + /* Border for distinguishing data sets and chart dots on the chart grid. */ + --intergalactic-chart-grid-border: #ffffff; + /* Background color for the clickable date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-period-active: #a9aab1; + /* Background color for the "Start tracking" date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(19, 199, 158, 0.2); + --intergalactic-header-bg: rgba(240, 241, 242, 0.6); + --intergalactic-header-border-primary: rgba(222, 223, 226, 0.9); + --intergalactic-header-border-secondary: rgba(222, 223, 226, 0.7); + --intergalactic-sidebar-nav-control-hover: rgba(222, 223, 226, 0.3); + --intergalactic-sidebar-nav-control-active: #dedfe2; + --intergalactic-sidebar-nav-control-text-normal: #6c6e79; + --intergalactic-sidebar-nav-control-text-active: #181e15; + --intergalactic-sidebar-nav-control-icon-normal: #a9aab1; + --intergalactic-sidebar-nav-control-icon-active: #90929a; + /* Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen) */ + --intergalactic-duration-extra-slow: 500; + /* Should be used for more larger scale animations (such as page transitions) */ + --intergalactic-duration-slow: 400; + /* Should be used for more complex effects (such as Modal) */ + --intergalactic-duration-medium: 300; + /* Should be used for more complex effects (such as Dropdown or Accordion) */ + --intergalactic-duration-fast: 200; + /* Should be used for simpler effects and relatively small-sized animations (such as fades or color changes) */ + --intergalactic-duration-extra-fast: 100; + /* Use for small controls like Switch or Slider. */ + --intergalactic-duration-switch: 100; + /* Use for components based on popper like Tooltip, Dropdown or Filter trigger. */ + --intergalactic-duration-popper: 200; + /* Use for small controls like Checkbox or Radio. */ + --intergalactic-duration-control: 200; + /* Use for Modal, Fullscreen Modal, Side panel or other kind of windows. */ + --intergalactic-duration-modal: 200; + /* Use for Accordion. */ + --intergalactic-duration-accordion: 200; + /* Use for Summary or Counter. */ + --intergalactic-duration-counter: 200; +} +.aqua-green { + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --gray-50: #f7f8f9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --gray-100: #eaeff1; + --gray-200: #d5dfe2; + --gray-300: #b0c4c9; + --gray-400: #85a2ab; + --gray-500: #668791; + --gray-600: #516e78; + --gray-700: #425a62; + --gray-800: #1e262a; + --gray-white: #ffffff; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --blue-50: #eaf0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --blue-100: #bdd1ff; + --blue-200: #9dbaff; + --blue-300: #709bff; + --blue-400: #5487ff; + --blue-500: #2969ff; + --blue-600: #2560e8; + --blue-700: #1d4bb5; + --blue-800: #173a8c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --green-50: #E8FEF9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --green-100: #A3F9E5; + --green-200: #95F8E2; + --green-300: #18F0BF; + --green-400: #46F3CC; + --green-500: #11AA88; + --green-600: #16DAAE; + --green-700: #11AA88; + --green-800: #0D8469; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --red-50: #ffeaea; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --red-100: #ffbdbd; + --red-200: #ff9d9d; + --red-300: #FF5454; + --red-400: #ff5454; + --red-500: #E82525; + --red-600: #e82525; + --red-700: #b51d1d; + --red-800: #8c1717; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --orange-50: #fff1ec; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --orange-100: #ffd3c3; + --orange-200: #ffbda5; + --orange-300: #ff9f7c; + --orange-400: #ff8d63; + --orange-500: #ff703c; + --orange-600: #e86637; + --orange-700: #b5502b; + --orange-800: #8c3e21; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --yellow-50: #fff8ea; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --yellow-100: #FFE09D; + --yellow-200: #ffe09d; + --yellow-300: #FFC954; + --yellow-400: #ffc954; + --yellow-500: #E89325; + --yellow-600: #e8aa25; + --yellow-700: #b5851d; + --yellow-800: #8c6717; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-50: #f3eaff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-100: #dabdff; + --violet-200: #c99dff; + --violet-300: #b070ff; + --violet-400: #a155ff; + --violet-500: #892aff; + --violet-600: #7d26e8; + --violet-700: #611eb5; + --violet-800: #4b178c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-dusty-50: #f5f4ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-dusty-100: #e2ddff; + --violet-dusty-200: #bcb1e9; + --violet-dusty-300: #a79cd6; + --violet-dusty-400: #9083c5; + --violet-dusty-500: #6d619f; + --violet-dusty-600: #4d407e; + --violet-dusty-700: #382e5e; + --violet-dusty-800: #1d113e; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --pink-50: #fff0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --pink-100: #ffd3ff; + --pink-200: #ffa9fa; + --pink-300: #ff87eb; + --pink-400: #e14adf; + --pink-500: #b229b9; + --pink-600: #7d0480; + --pink-700: #4d0050; + --pink-800: #340439; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --salad-50: #e8fef9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --salad-100: #b7faeb; + --salad-200: #95f8e2; + --salad-300: #64f5d4; + --salad-400: #46f3cc; + --salad-500: #18f0bf; + --salad-600: #16daae; + --salad-700: #11aa88; + --salad-800: #0d8469; + /* Primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral: #ffffff; + /* Hover state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-hover: #f7f8f9; + /* Active (selected) state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-active: #eaeff1; + /* Accent background of the message with regular information. */ + --intergalactic-bg-primary-info: #5487ff; + /* Accent background of the message or banner with information about the successful result. */ + --intergalactic-bg-primary-success: #46F3CC; + /* Accent background of a message or a banner with a critical information. */ + --intergalactic-bg-primary-critical: #ff5454; + /* Accent background of a message or a banner with a warning information. */ + --intergalactic-bg-primary-warning: #ff8d63; + /* Accent background of the information you want to highlight. */ + --intergalactic-bg-primary-highlight: #FFE09D; + /* Accent background for the advertising banners and controls. */ + --intergalactic-bg-primary-advertising: #611eb5; + /* Accented muted background for a message with regular information. */ + --intergalactic-bg-primary-muted: #668791; + /* Inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert: #1e262a; + /* Hover state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-hover: #425a62; + /* Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-active: #516e78; + /* Secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral: #f7f8f9; + /* Hover state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-hover: #eaeff1; + /* Active (selected) state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-active: #d5dfe2; + /* Secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info: #eaf0ff; + /* Hover state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-hover: #bdd1ff; + /* Active (selected) state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-active: #9dbaff; + /* Secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success: #E8FEF9; + /* Hover state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-hover: #A3F9E5; + /* Active (selected) state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-active: #95F8E2; + /* Secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical: #ffeaea; + /* Hover state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-hover: #ffbdbd; + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-active: #ff9d9d; + /* Secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning: #fff1ec; + /* Hover state of the secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning-hover: #ffd3c3; + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-warning-active: #ffbda5; + /* Secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight: #fff8ea; + /* Hover state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-hover: #FFE09D; + /* Active (selected) state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-active: #ffe09d; + /* Secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising: #f3eaff; + /* Hover state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-hover: #dabdff; + /* Active (selected) state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-active: #c99dff; + /* Highlighting the search results. */ + --intergalactic-bg-highlight-results: rgba(255, 201, 84, 0.4); + /* Focusing values in the input. */ + --intergalactic-bg-highlight-focus: rgba(84, 135, 255, 0.2); + /* Primary text. */ + --intergalactic-text-primary: #1e262a; + /* Secondary text. */ + --intergalactic-text-secondary: #668791; + /* Placeholder text only. */ + --intergalactic-text-placeholder: #85a2ab; + /* Text associated with success states and data. */ + --intergalactic-text-success: #11AA88; + /* Hover and active states for the text associated with success states and data. */ + --intergalactic-text-success-hover-active: #16DAAE; + /* Text associated with critical states and data. */ + --intergalactic-text-critical: #E82525; + /* Hover and active states for the text associated with critical states and data. */ + --intergalactic-text-critical-hover-active: #e82525; + /* Inverted version of the primary text. */ + --intergalactic-text-primary-invert: #ffffff; + /* Inverted version of the secondary text. */ + --intergalactic-text-secondary-invert: rgba(255, 255, 255, 0.8); + /* Link text. */ + --intergalactic-text-link: #2969ff; + /* Hover and active states for the link text. */ + --intergalactic-text-link-hover-active: #2560e8; + /* Inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert: #9dbaff; + /* Hover and active states of the inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert-hover: #709bff; + /* Visited link text. */ + --intergalactic-text-link-visited: #892aff; + /* Hint link text. */ + --intergalactic-text-hint: #668791; + /* Hover and active states of the hint link text. */ + --intergalactic-text-hint-hover-active: #516e78; + /* Inverted version of the hint link text. */ + --intergalactic-text-hint-invert: #d5dfe2; + /* Hover and active states of the inverted version of the hint link text. */ + --intergalactic-text-hint-invert-hover-active: #b0c4c9; + /* Secondary text. Use with font-size ≥20px. */ + --intergalactic-text-large-secondary: #b0c4c9; + /* Link text with font-size ≥20px. */ + --intergalactic-text-large-info: #5487ff; + /* Hover and active states of the link text with font-size ≥20px. */ + --intergalactic-text-large-info-hover-active: #2969ff; + /* Text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success: #46F3CC; + /* Hover and active states of the text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success-hover-active: #11AA88; + /* Text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical: #ff5454; + /* Hover and active states of the text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical-hover-active: #E82525; + /* Advertising text. */ + --intergalactic-text-advertising: #611eb5; + /* Neutral primary border. */ + --intergalactic-border-primary: #d5dfe2; + /* Subtle secondary border. */ + --intergalactic-border-secondary: #eaeff1; + /* Subtle secondary border in the informational message. */ + --intergalactic-border-info: #9dbaff; + /* Active border in focused input filed. */ + --intergalactic-border-info-active: #1e262a; + /* Subtle secondary border in the successful message and input field. */ + --intergalactic-border-success: #95F8E2; + /* Active border in the focused input field with valid state. */ + --intergalactic-border-success-active: #11AA88; + /* Subtle secondary border in the critical message and invalid input field. */ + --intergalactic-border-critical: #ff9d9d; + /* Active border in the focused input field with invalid state, and active state of the other components with invalid state. */ + --intergalactic-border-critical-active: #E82525; + /* Subtle secondary border in the warning message. */ + --intergalactic-border-warning: #ffbda5; + /* Active border in components with warning intention. */ + --intergalactic-border-warning-active: #ff703c; + /* Inverted version of the neutral primary border. Use it for borders on the dark or color background. */ + --intergalactic-border-primary-invert: #ffffff; + /* Inverted version of the neutral secondary border. Use it for borders on the dark or color background. */ + --intergalactic-border-secondary-invert: rgba(255, 255, 255, 0.3); + /* Border of the Tooltip with dark theme. */ + --intergalactic-border-tooltip-invert: #668791; + /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */ + --intergalactic-border-table-accent: #b0c4c9; + /* Border color of the second period for the comparison mode in the DatePicker. */ + --intergalactic-border-date-picker-range-comparison: #892aff; + /* Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states. */ + --intergalactic-border-critical-pattern: repeating-linear-gradient(315deg, rgba(232, 37, 37, 1) 0, rgba(232, 37, 37, 1) 2px, transparent 0, transparent 50%); + /* Subtle background of the Switch control. */ + --intergalactic-control-switch-bg: #b0c4c9; + /* Background of the regular primary control. */ + --intergalactic-control-primary-info: #1e262a; + /* Hover state of the regular primary control. */ + --intergalactic-control-primary-info-hover: #1e262a; + /* Active (selected) state of the regular primary control. */ + --intergalactic-control-primary-info-active: #1e262a; + /* Background of the primary control with successful theme. */ + --intergalactic-control-primary-success: #46F3CC; + /* Hover state of the primary control with successful theme. */ + --intergalactic-control-primary-success-hover: #11AA88; + /* Active (selected) state of the primary control with successful theme. */ + --intergalactic-control-primary-success-active: #16DAAE; + /* Background of the primary control with danger theme. */ + --intergalactic-control-primary-critical: #ff5454; + /* Hover state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-hover: #E82525; + /* Active (selected) state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-active: #e82525; + /* Background of the primary brand colored control. */ + --intergalactic-control-primary-brand: #ff8d63; + /* Hover state of the primary brand colored control. */ + --intergalactic-control-primary-brand-hover: #ff703c; + /* Active state of the primary brand colored control. */ + --intergalactic-control-primary-brand-active: #e86637; + /* Background of the advertising primary control. */ + --intergalactic-control-primary-advertising: #7d26e8; + /* Hover state of the advertising primary control. */ + --intergalactic-control-primary-advertising-hover: #611eb5; + /* Active (selected) state of the advertising primary control. */ + --intergalactic-control-primary-advertising-active: #892aff; + /* Inverted background of the primary control. */ + --intergalactic-control-primary-invert: #ffffff; + /* Hover state of the inverted primary control. */ + --intergalactic-control-primary-invert-hover: #f7f8f9; + /* Active (selected) state of the inverted primary control. */ + --intergalactic-control-primary-invert-active: #eaeff1; + /* Background of the regular secondary control. */ + --intergalactic-control-secondary-neutral: rgba(133, 162, 171, 0.1); + /* Hover state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-hover: rgba(133, 162, 171, 0.2); + /* Active (selected) state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-active: rgba(133, 162, 171, 0.3); + /* Background of the accent secondary control. */ + --intergalactic-control-secondary-info: rgba(84, 135, 255, 0.1); + /* Hover state of the accent secondary control. */ + --intergalactic-control-secondary-info-hover: rgba(84, 135, 255, 0.2); + /* Active (selected) state of the accent secondary control. */ + --intergalactic-control-secondary-info-active: rgba(84, 135, 255, 0.3); + /* Background of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert: rgba(255, 255, 255, 0.05); + /* Hover state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-active: rgba(255, 255, 255, 0.3); + /* Background of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral: rgba(133, 162, 171, 0); + /* Hover state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-hover: rgba(133, 162, 171, 0.2); + /* Active (selected) state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-active: rgba(133, 162, 171, 0.3); + /* Background of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info: rgba(84, 135, 255, 0); + /* Hover state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-hover: rgba(84, 135, 255, 0.2); + /* Active (selected) state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-active: rgba(84, 135, 255, 0.3); + /* Background of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert: rgba(255, 255, 255, 0); + /* Hover state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-active: rgba(255, 255, 255, 0.3); + /* Primary neutral icon. */ + --intergalactic-icon-primary-neutral: #668791; + /* Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color. */ + --intergalactic-icon-primary-neutral-hover-active: #565861; + /* Primary link-lookalike icon. */ + --intergalactic-icon-primary-info: #2969ff; + /* Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color. */ + --intergalactic-icon-primary-info-hover-active: #0358a1; + /* Primary success icon. */ + --intergalactic-icon-primary-success: #46F3CC; + /* Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color. */ + --intergalactic-icon-primary-success-hover-active: #037e68; + /* Primary critical icon. */ + --intergalactic-icon-primary-critical: #ff5454; + /* Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color. */ + --intergalactic-icon-primary-critical-hover-active: #cc3a42; + /* Primary warning icon. */ + --intergalactic-icon-primary-warning: #ff8d63; + /* Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color. */ + --intergalactic-icon-primary-warning-hover-active: #cc5024; + /* Inverted version of the primary icon. */ + --intergalactic-icon-primary-invert: #ffffff; + /* Hover and active (selected) states of the inverted version of the primary icon. */ + --intergalactic-icon-primary-invert-hover-active: #eaeff1; + /* Secondary neutral icon. */ + --intergalactic-icon-secondary-neutral: #b0c4c9; + /* Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color. */ + --intergalactic-icon-secondary-neutral-hover-active: #878992; + /* Secondary link-lookalike icon. */ + --intergalactic-icon-secondary-info: #709bff; + /* Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color. */ + --intergalactic-icon-secondary-info-hover-active: #2290cc; + /* Secondary success icon. */ + --intergalactic-icon-secondary-success: #18F0BF; + /* Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color. */ + --intergalactic-icon-secondary-success-hover-active: #049b75; + /* Secondary critical icon. */ + --intergalactic-icon-secondary-critical: #FF5454; + /* Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color. */ + --intergalactic-icon-secondary-critical-hover-active: #cc6c6b; + /* Secondary warning icon. */ + --intergalactic-icon-secondary-warning: #ff9f7c; + /* Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color. */ + --intergalactic-icon-secondary-warning-hover-active: #cc7036; + /* Color for the default non-interactive icon. */ + --intergalactic-icon-non-interactive: #1e262a; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-red: #ff788f; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-orange: #ff9400; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-yellow: #ffe84d; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-salad: #c7fa73; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-green: #45e0a8; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-blue: #6edbff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-violet: #b880ff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-pink: #ff7ad1; + /* Default date-picker cell background. */ + --intergalactic-date-picker-cell: #ffffff; + /* Color for marking the cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current: #85a2ab; + /* Hover state of the default date-picker cell background. */ + --intergalactic-date-picker-cell-hover: #eaeff1; + /* Background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range: #bdd1ff; + /* Hover state of the background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range-hover: #9dbaff; + /* Active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active: #709bff; + /* Hover for the active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active-hover: #5487ff; + /* Color for marking the active cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5); + /* Active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active: #892aff; + /* Hover for the active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active-hover: #7d26e8; + /* Default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item: #ffffff; + /* Hover state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-hover: #f7f8f9; + /* Active (selected) state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected: rgba(189, 209, 255, 0.7); + /* Hover state for the selected state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected-hover: #bdd1ff; + /* Color of the FeaturePopover background with accent theme. */ + --intergalactic-feature-popover-bg: #FFE09D; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */ + --intergalactic-feature-popover-dot-outer-border: #FFE09D; + /* Color of the FeaturePopover background with neutral theme. */ + --intergalactic-feature-popover-bg-neutral: #1d113e; + /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral: #18F0BF; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral-outer-border: #18F0BF; + /* Background color of the ProgressBar. */ + --intergalactic-progress-bar-bg: #eaeff1; + /* Hover state of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-hover: #d5dfe2; + /* Inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert: rgba(255, 255, 255, 0.2); + /* Hover state for the inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert-hover: rgba(255, 255, 255, 0.4); + /* Value with gradient for the ProgressBar. */ + --intergalactic-progress-bar-value-gradient: linear-gradient(-45deg, rgba(68, 193, 93, 0.9) 25%, rgba(68, 193, 93, 1) 0%, rgba(68, 193, 93, 1) 50%, rgba(68, 193, 93, 0.9) 0%, rgba(68, 193, 93, 0.9) 75%, rgba(68, 193, 93, 1) 0%); + /* Null value gradient for the ProgressBar. */ + --intergalactic-progress-bar-pattern-gradient: linear-gradient(-45deg, rgba(234, 239, 241, 0.9) 25%, rgba(234, 239, 241, 1) 0%, rgba(234, 239, 241, 1) 50%, rgba(234, 239, 241, 0.9) 0%, rgba(234, 239, 241, 0.9) 75%, rgba(234, 239, 241, 1) 0%); + /* Base value background for the ProgressBar. It is used to create gradients for the values. */ + --intergalactic-progress-bar-value-bg: #000000; + /* Default color for the Skeleton. */ + --intergalactic-skeleton-bg: rgba(234, 239, 241, 0.8); + /* Inverted version of the default color for the Skeleton. */ + --intergalactic-skeleton-bg-invert: rgba(255, 255, 255, 0.3); + /* Icon color for the SliderRating component in its normal state. */ + --intergalactic-slider-rating-normal: #b0c4c9; + /* Icon color for the SliderRating component in its hovered and active states. */ + --intergalactic-slider-rating-hover-active: #ffe09d; + /* Background of the header cell in the primary Table. */ + --intergalactic-table-th-primary-cell: #f7f8f9; + /* Background of the hovered header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-hover: #eaeff1; + /* Background of the active header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-active: #eaeff1; + /* Background of the header cell in the secondary Table. */ + --intergalactic-table-th-secondary-cell: #ffffff; + /* Background gradient for sorting icon that absolute positioned in the table head. */ + --intergalactic-table-th-gradient: linear-gradient(to right, rgba(234, 239, 241, 0) 0%, rgba(234, 239, 241, 1) 100%); + /* Background of the default cell in the Table. */ + --intergalactic-table-td-cell: #ffffff; + /* Background of the default hovered cell in the Table. */ + --intergalactic-table-td-cell-hover: #f4f7f8; + /* Background of the default active cell in the Table. */ + --intergalactic-table-td-cell-active: #eef2f4; + /* Background of the unread cell in the Table. */ + --intergalactic-table-td-cell-unread: #f7f8f9; + /* Background of the cell inside an Accordion in the Table. */ + --intergalactic-table-td-cell-accordion: #f7f8f9; + /* Background of the selected cell in the Table. */ + --intergalactic-table-td-cell-selected: #eaf0ff; + /* Background of the hovered selected cell in the Table. */ + --intergalactic-table-td-cell-selected-hover: #bdd1ff; + /* Background of the active selected cell in the Table. */ + --intergalactic-table-td-cell-selected-active: #bdd1ff; + /* Background of the cell with new information in the Table. */ + --intergalactic-table-td-cell-new: #E8FEF9; + /* Background of the hovered cell with new information in the Table. */ + --intergalactic-table-td-cell-new-hover: #A3F9E5; + /* Background of the active cell with new information in the Table. */ + --intergalactic-table-td-cell-new-active: #A3F9E5; + /* Background of the cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical: #ffeaea; + /* Background of the hovered cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-hover: #ffbdbd; + /* Background of the active cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-active: #ffbdbd; + /* Background of the cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning: #fff1ec; + /* Background of the hovered cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-hover: #ffd3c3; + /* Background of the active cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-active: #ffd3c3; + /* Primary brand color. */ + --intergalactic-brand-primary: #ff8d63; + /* Secondary brand color. */ + --intergalactic-brand-secondary: #611eb5; + /* Pinterest brand color. */ + --intergalactic-brand-pinterest: #bd081c; + /* Instagram brand color. */ + --intergalactic-brand-instagram: #e4405f; + /* Youtube brand color. */ + --intergalactic-brand-youtube: #ff0000; + /* Facebook brand color. */ + --intergalactic-brand-facebook: #1877f2; + /* LinkedIn brand color. */ + --intergalactic-brand-linkedIn: #0a66c2; + /* Twitter brand color. */ + --intergalactic-brand-twitter: #1d9bf0; + /* Google brand color for the link. */ + --intergalactic-brand-google-blue: #1a0dab; + /* Google green brand color for the link. */ + --intergalactic-brand-google-green: #016723; + /* Google My Business brand color. */ + --intergalactic-brand-google-my-business: #1a73e8; + /* Default shadow of the Card. */ + --intergalactic-box-shadow-card: 0 0 0 1px #eaeff1; + /* Hover state for the shadow of the Card with hover state. */ + --intergalactic-box-shadow-card-hover: 3px 3px 30px 0px rgba(30, 38, 42, 0.15); + /* Shadow for show that element are being drag-and-drop. */ + --intergalactic-box-shadow-dnd: 0px 0px 1px 0px rgba(30, 38, 42, 0.16), 0px 12px 40px 0px rgba(30, 38, 42, 0.16); + /* Default shadow if the Modal window. */ + --intergalactic-box-shadow-modal: 0px 3px 8px 0px rgba(30, 38, 42, 0.2); + /* Default shadow of all Poppers, Dropdowns and Tooltips. */ + --intergalactic-box-shadow-popper: 0px 1px 12px 0px rgba(30, 38, 42, 0.15); + /* Color for default keyboard focus outline styles. */ + --intergalactic-keyboard-focus-outline: #1e262a; + /* Color for keyboard focus outline styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid-outline: #ff5454; + /* Keyboard focus styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 84, 84, 0.5); + /* Color for keyboard focus outline styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid-outline: #46F3CC; + /* Keyboard focus styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(70, 243, 204, 0.5); + /* Color for keyboard focus outline styles to use on the dark and color background. */ + --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8); + /* Keyboard focus styles for use on dark backgrounds. */ + --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8); + /* Default keyboard focus box-shadow styles. */ + --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(30, 38, 42, 0.5); + /* Base font family. */ + --intergalactic-base: Inter; + /* Use with font-size-800. */ + --intergalactic-lh-800: 117%; + /* Use with font-size-700. */ + --intergalactic-lh-700: 110%; + /* Use with font-size-600. */ + --intergalactic-lh-600: 125%; + /* Use with font-size-500. */ + --intergalactic-lh-500: 117%; + /* Use with font-size-400. */ + --intergalactic-lh-400: 120%; + /* Use with font-size-300. */ + --intergalactic-lh-300: 150%; + /* Use with font-size-200. */ + --intergalactic-lh-200: 142%; + /* Use with font-size-100. */ + --intergalactic-lh-100: 133%; + /* Semi-bold font weight. */ + --intergalactic-semi-bold: 600; + /* Bold font weight. */ + --intergalactic-bold: 700; + /* Regular font weight. */ + --intergalactic-regular: 400; + /* Medium font weight. */ + --intergalactic-medium: 500; + /* Use only for text in Badge component. */ + --intergalactic-fs-50: 10px; + /* Use this font-size with caution for text in some additional messages. Always check its contrast and readability. */ + --intergalactic-fs-100: 12px; + --intergalactic-fs-200: 14px; + --intergalactic-fs-300: 16px; + --intergalactic-fs-400: 20px; + --intergalactic-fs-500: 24px; + --intergalactic-fs-600: 32px; + --intergalactic-fs-700: 36px; + --intergalactic-fs-800: 48px; + /* Compact letter spacing. */ + --intergalactic-compact: 0.3; + /* Base denominator of the design system. */ + --intergalactic-scale-indent: 4px; + /* Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions. */ + --intergalactic-form-control-s: 20px; + /* Default size of the controls. */ + --intergalactic-form-control-m: 28px; + /* Large size of the controls. */ + --intergalactic-form-control-l: 40px; + /* 2px */ + --intergalactic-spacing-05x: 2px; + /* 4px */ + --intergalactic-spacing-1x: 4px; + /* 8px */ + --intergalactic-spacing-2x: 8px; + /* 12px */ + --intergalactic-spacing-3x: 12px; + /* 16px */ + --intergalactic-spacing-4x: 16px; + /* 20px */ + --intergalactic-spacing-5x: 20px; + /* 24px */ + --intergalactic-spacing-6x: 24px; + /* 32px */ + --intergalactic-spacing-8x: 32px; + /* 40px */ + --intergalactic-spacing-10x: 40px; + /* 56px */ + --intergalactic-spacing-14x: 56px; + /* 80px */ + --intergalactic-spacing-20x: 80px; + /* 96px */ + --intergalactic-spacing-24x: 96px; + /* 120px */ + --intergalactic-spacing-30x: 120px; + --intergalactic-rounded-extra-small: 2px; + --intergalactic-rounded-small: 4px; + --intergalactic-rounded-medium: 6px; + --intergalactic-rounded-large: 12px; + --intergalactic-rounded-extra-large: 24px; + /* Use for rounding addons and small controls like Checkbox. */ + --intergalactic-addon-rounded: 4px; + /* Use for rounding Badge. */ + --intergalactic-badge-rounded: 6px; + /* Use for rounding big and small charts like bar, histogram and others. */ + --intergalactic-chart-rounded: 2px; + /* Use for rounding Counter. */ + --intergalactic-counter-rounded: 12px; + /* Use for rounding Tag. */ + --intergalactic-tag-rounded: 24px; + /* Use for rounding Switch. */ + --intergalactic-switch-rounded: 24px; + /* Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc. */ + --intergalactic-control-rounded: 6px; + /* Use for rounding bars: ProgressBar, SliderBar, etc. */ + --intergalactic-progress-bar-rounded: 6px; + /* Use for rounding surfaces like Card, blocks, widgets, Notice, etc. */ + --intergalactic-surface-rounded: 6px; + /* Use for rounding all kinds of poppers and dropdowns. */ + --intergalactic-popper-rounded: 6px; + /* Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard). */ + --intergalactic-modal-rounded: 12px; + /* Use for the disabled state of all kind of the controls and elements. */ + --intergalactic-disabled-opacity: 0.5; + /* Extra small screens (small phones). */ + --intergalactic-screen-extra-small: 320px; + /* Small screens (phones and small tablets). */ + --intergalactic-screen-small: 768px; + /* Medium screens (tablets and small laptops). */ + --intergalactic-screen-medium: 1200px; + /* Large screens (tablets and laptops). */ + --intergalactic-screen-large: 1920px; + /* Use for cover the content under the modal dialogs. */ + --intergalactic-overlay-primary: rgba(30, 38, 42, 0.7); + /* Use for the secondary modal dialogs that were opened upon the other modal dialogs. */ + --intergalactic-overlay-secondary: rgba(30, 38, 42, 0.4); + /* Use as a primary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-primary: #f7f8f9; + /* Use as a secondary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-secondary: rgba(255, 255, 255, 0.85); + --intergalactic-z-index-deep: -999; + --intergalactic-z-index-overlay: 500; + --intergalactic-z-index-modal: 900; + --intergalactic-z-index-popper: 700; + --intergalactic-z-index-dropdown: 750; + --intergalactic-z-index-tooltip: 800; + --intergalactic-z-index-notice-bubble: 999; + /* Default Tooltip background. */ + --intergalactic-tooltip-default: #ffffff; + /* Warning Tooltip background. */ + --intergalactic-tooltip-warning: #ffbdbd; + /* Inverted version of the default Tooltip background. */ + --intergalactic-tooltip-invert: #1e262a; + /* Neutral border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-neutral: #ffffff80; + /* Inverted border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-invert: #00000080; + /* Left-to-right fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-left: linear-gradient(to right, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Right-to-left fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-right: linear-gradient(to left, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Top-to-bottom fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-top: linear-gradient(to bottom, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Bottom-to-top fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-bottom: linear-gradient(to top, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Left-to-right fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-left: linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Right-to-left fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-right: linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-bottom: linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Background color for ScrollBar. */ + --intergalactic-scroll-bar-background: rgba(30, 38, 42, 0.3); + /* Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-normal: #ecedf0; + /* Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-hover-active: #e3e4e9; + /* Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-normal: #d0eeff; + /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-hover-active: #b7e4ff; + /* Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-normal: #cff1ea; + /* Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-hover-active: #b7eae0; + /* Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-normal: #ffddd2; + /* Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-hover-active: #ffccbb; + /* Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-normal: #ffcedc; + /* Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-hover-active: #ffb6ca; + /* Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-normal: #f4e3ff; + /* Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-hover-active: #efd5ff; + /* Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-normal: #fee6d1; + /* Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-hover-active: #fedab9; + /* Primary white tag. */ + --intergalactic-tag-primary-white-normal: rgba(255, 255, 255, 0.15); + /* Hover and active (selected) state of the primary white tag. */ + --intergalactic-tag-primary-white-hover-active: rgba(255, 255, 255, 0.3); + /* Gray text for the primary gray tag. */ + --intergalactic-tag-primary-gray-text: #668791; + /* Blue text for the primary blue tag. */ + --intergalactic-tag-primary-blue-text: #2969ff; + /* Green text for the primary green tag. */ + --intergalactic-tag-primary-green-text: #11AA88; + /* Orange text for the primary orange tag. */ + --intergalactic-tag-primary-orange-text: #ff703c; + /* Red text for the primary red tag. */ + --intergalactic-tag-primary-red-text: #E82525; + /* Violet text for the primary violet tag. */ + --intergalactic-tag-primary-violet-text: #892aff; + /* Yellow text for the primary yellow tag. */ + --intergalactic-tag-primary-yellow-text: #E89325; + /* White text for the primary white tag. */ + --intergalactic-tag-primary-white-text: #ffffff; + /* Background color for the default secondary tag. */ + --intergalactic-tag-secondary-normal: #ffffff; + /* Hover and active (selected) states of the background color for the default secondary tag. */ + --intergalactic-tag-secondary-hover-active: #f7f8f9; + /* White secondary tag. */ + --intergalactic-tag-secondary-white-normal: rgba(255, 255, 255, 0); + /* Active state of the secondary white tag. */ + --intergalactic-tag-secondary-white-hover-active: rgba(255, 255, 255, 0.1); + /* Gray text for the default secondary tag. */ + --intergalactic-tag-secondary-gray-text: #668791; + /* White text for the secondary white tag. */ + --intergalactic-tag-secondary-white-text: #ffffff; + /* 1 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-1: #709bff; + /* 2 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-2: #95F8E2; + /* 3 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-3: #ff8d63; + /* 4 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-4: #ff87eb; + /* 5 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-5: #ffe09d; + /* 6 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-6: #a155ff; + /* 7 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-7: #FF5454; + /* 8 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-8: #95f8e2; + /* 9 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-9: #5487ff; + /* 10 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-10: #18F0BF; + /* 11 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-11: #ffbda5; + /* 12 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-12: #e14adf; + /* 13 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-13: #FFC954; + /* 14 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-14: #c99dff; + /* 15 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-15: #ff5454; + /* 16 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-16: #64f5d4; + /* 17 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-17: #9dbaff; + /* 18 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-18: #46F3CC; + /* 19 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-19: #ff9f7c; + /* 20 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-20: #ffa9fa; + /* 21 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-21: #ffc954; + /* 22 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-22: #b070ff; + /* 23 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-23: #ff9d9d; + /* 24 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-24: #46f3cc; + /* Use it to show total value. */ + --intergalactic-chart-palette-order-total-amount: #85a2ab; + /* Use it to indicate voids, missing or some other data. */ + --intergalactic-chart-palette-order-other-data: #d5dfe2; + /* Use it to show null value. */ + --intergalactic-chart-palette-order-null: #eaeff1; + /* Default chart grid line. */ + --intergalactic-chart-grid-line: #eaeff1; + /* X-axis line on the chart grid. */ + --intergalactic-chart-grid-x-axis: #d5dfe2; + /* Accent line for the hover state on the chart grid. */ + --intergalactic-chart-grid-y-accent-hover-line: #b0c4c9; + /* Text label on the chart grid. */ + --intergalactic-chart-grid-text-label: #668791; + /* Background color for the hover state of a bar on the chart grid. */ + --intergalactic-chart-grid-bar-chart-hover: rgba(213, 223, 226, 0.3); + /* Default background color of a bar in the BarChart. */ + --intergalactic-chart-grid-bar-chart-base-bg: #eaeff1; + /* Use for highlighting a period on the chart grid. */ + --intergalactic-chart-grid-period-bg: rgba(213, 223, 226, 0.2); + /* Stripe color for diagonal pattern background. */ + --intergalactic-chart-grid-period-pattern: rgba(30, 38, 42, 0.15); + /* Border for distinguishing data sets and chart dots on the chart grid. */ + --intergalactic-chart-grid-border: #ffffff; + /* Background color for the clickable date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-period-active: #668791; + /* Background color for the "Start tracking" date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(70, 243, 204, 0.2); + --intergalactic-header-bg: #382e5e; + --intergalactic-header-border-primary: #382e5e; + --intergalactic-header-border-secondary: #ffffff26; + --intergalactic-sidebar-nav-control-hover: rgba(234, 239, 241, 0.7); + --intergalactic-sidebar-nav-control-active: #e2ddff; + --intergalactic-sidebar-nav-control-text-normal: #6d619f; + --intergalactic-sidebar-nav-control-text-active: #4d407e; + --intergalactic-sidebar-nav-control-icon-normal: #9083c5; + --intergalactic-sidebar-nav-control-icon-active: #4d407e; + /* Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen) */ + --intergalactic-duration-extra-slow: 500; + /* Should be used for more larger scale animations (such as page transitions) */ + --intergalactic-duration-slow: 400; + /* Should be used for more complex effects (such as Modal) */ + --intergalactic-duration-medium: 300; + /* Should be used for more complex effects (such as Dropdown or Accordion) */ + --intergalactic-duration-fast: 200; + /* Should be used for simpler effects and relatively small-sized animations (such as fades or color changes) */ + --intergalactic-duration-extra-fast: 100; + /* Use for small controls like Switch or Slider. */ + --intergalactic-duration-switch: 100; + /* Use for components based on popper like Tooltip, Dropdown or Filter trigger. */ + --intergalactic-duration-popper: 200; + /* Use for small controls like Checkbox or Radio. */ + --intergalactic-duration-control: 200; + /* Use for Modal, Fullscreen Modal, Side panel or other kind of windows. */ + --intergalactic-duration-modal: 200; + /* Use for Accordion. */ + --intergalactic-duration-accordion: 200; + /* Use for Summary or Counter. */ + --intergalactic-duration-counter: 200; +} +.lime-green { + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --gray-50: #f7f8f9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --gray-100: #eaeff1; + --gray-200: #d5dfe2; + --gray-300: #b0c4c9; + --gray-400: #85a2ab; + --gray-500: #668791; + --gray-600: #516e78; + --gray-700: #425a62; + --gray-800: #1e262a; + --gray-white: #ffffff; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --blue-50: #eaf0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --blue-100: #bdd1ff; + --blue-200: #9dbaff; + --blue-300: #709bff; + --blue-400: #5487ff; + --blue-500: #2969ff; + --blue-600: #2560e8; + --blue-700: #1d4bb5; + --blue-800: #173a8c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --green-50: #ECF9EF; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --green-100: #C4FFBA; + --green-200: #A9E2B4; + --green-300: #89FF75; + --green-400: #69CD7D; + --green-500: #44C15D; + --green-600: #3EB055; + --green-700: #308942; + --green-800: #256A33; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --red-50: #ffeaea; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --red-100: #ffbdbd; + --red-200: #ff9d9d; + --red-300: #FF5454; + --red-400: #ff5454; + --red-500: #E82525; + --red-600: #e82525; + --red-700: #b51d1d; + --red-800: #8c1717; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --orange-50: #fff1ec; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --orange-100: #ffd3c3; + --orange-200: #ffbda5; + --orange-300: #ff9f7c; + --orange-400: #ff8d63; + --orange-500: #ff703c; + --orange-600: #e86637; + --orange-700: #b5502b; + --orange-800: #8c3e21; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --yellow-50: #fff8ea; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --yellow-100: #FFE09D; + --yellow-200: #ffe09d; + --yellow-300: #FFC954; + --yellow-400: #ffc954; + --yellow-500: #E89325; + --yellow-600: #e8aa25; + --yellow-700: #b5851d; + --yellow-800: #8c6717; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-50: #f3eaff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-100: #dabdff; + --violet-200: #c99dff; + --violet-300: #b070ff; + --violet-400: #a155ff; + --violet-500: #892aff; + --violet-600: #7d26e8; + --violet-700: #611eb5; + --violet-800: #4b178c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-dusty-50: #f5f4ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-dusty-100: #e2ddff; + --violet-dusty-200: #bcb1e9; + --violet-dusty-300: #a79cd6; + --violet-dusty-400: #9083c5; + --violet-dusty-500: #6d619f; + --violet-dusty-600: #4d407e; + --violet-dusty-700: #382e5e; + --violet-dusty-800: #1d113e; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --pink-50: #fff0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --pink-100: #ffd3ff; + --pink-200: #ffa9fa; + --pink-300: #ff87eb; + --pink-400: #e14adf; + --pink-500: #b229b9; + --pink-600: #7d0480; + --pink-700: #4d0050; + --pink-800: #340439; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --salad-50: #e8fef9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --salad-100: #b7faeb; + --salad-200: #95f8e2; + --salad-300: #64f5d4; + --salad-400: #46f3cc; + --salad-500: #18f0bf; + --salad-600: #16daae; + --salad-700: #11aa88; + --salad-800: #0d8469; + /* Primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral: #ffffff; + /* Hover state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-hover: #f7f8f9; + /* Active (selected) state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-active: #eaeff1; + /* Accent background of the message with regular information. */ + --intergalactic-bg-primary-info: #5487ff; + /* Accent background of the message or banner with information about the successful result. */ + --intergalactic-bg-primary-success: #69CD7D; + /* Accent background of a message or a banner with a critical information. */ + --intergalactic-bg-primary-critical: #ff5454; + /* Accent background of a message or a banner with a warning information. */ + --intergalactic-bg-primary-warning: #ff8d63; + /* Accent background of the information you want to highlight. */ + --intergalactic-bg-primary-highlight: #FFE09D; + /* Accent background for the advertising banners and controls. */ + --intergalactic-bg-primary-advertising: #611eb5; + /* Accented muted background for a message with regular information. */ + --intergalactic-bg-primary-muted: #668791; + /* Inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert: #1e262a; + /* Hover state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-hover: #425a62; + /* Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-active: #516e78; + /* Secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral: #f7f8f9; + /* Hover state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-hover: #eaeff1; + /* Active (selected) state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-active: #d5dfe2; + /* Secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info: #eaf0ff; + /* Hover state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-hover: #bdd1ff; + /* Active (selected) state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-active: #9dbaff; + /* Secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success: #ECF9EF; + /* Hover state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-hover: #C4FFBA; + /* Active (selected) state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-active: #A9E2B4; + /* Secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical: #ffeaea; + /* Hover state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-hover: #ffbdbd; + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-active: #ff9d9d; + /* Secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning: #fff1ec; + /* Hover state of the secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning-hover: #ffd3c3; + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-warning-active: #ffbda5; + /* Secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight: #fff8ea; + /* Hover state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-hover: #FFE09D; + /* Active (selected) state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-active: #ffe09d; + /* Secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising: #f3eaff; + /* Hover state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-hover: #dabdff; + /* Active (selected) state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-active: #c99dff; + /* Highlighting the search results. */ + --intergalactic-bg-highlight-results: rgba(255, 201, 84, 0.4); + /* Focusing values in the input. */ + --intergalactic-bg-highlight-focus: rgba(84, 135, 255, 0.2); + /* Primary text. */ + --intergalactic-text-primary: #1e262a; + /* Secondary text. */ + --intergalactic-text-secondary: #668791; + /* Placeholder text only. */ + --intergalactic-text-placeholder: #85a2ab; + /* Text associated with success states and data. */ + --intergalactic-text-success: #44C15D; + /* Hover and active states for the text associated with success states and data. */ + --intergalactic-text-success-hover-active: #3EB055; + /* Text associated with critical states and data. */ + --intergalactic-text-critical: #E82525; + /* Hover and active states for the text associated with critical states and data. */ + --intergalactic-text-critical-hover-active: #e82525; + /* Inverted version of the primary text. */ + --intergalactic-text-primary-invert: #ffffff; + /* Inverted version of the secondary text. */ + --intergalactic-text-secondary-invert: rgba(255, 255, 255, 0.8); + /* Link text. */ + --intergalactic-text-link: #2969ff; + /* Hover and active states for the link text. */ + --intergalactic-text-link-hover-active: #2560e8; + /* Inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert: #9dbaff; + /* Hover and active states of the inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert-hover: #709bff; + /* Visited link text. */ + --intergalactic-text-link-visited: #892aff; + /* Hint link text. */ + --intergalactic-text-hint: #668791; + /* Hover and active states of the hint link text. */ + --intergalactic-text-hint-hover-active: #516e78; + /* Inverted version of the hint link text. */ + --intergalactic-text-hint-invert: #d5dfe2; + /* Hover and active states of the inverted version of the hint link text. */ + --intergalactic-text-hint-invert-hover-active: #b0c4c9; + /* Secondary text. Use with font-size ≥20px. */ + --intergalactic-text-large-secondary: #b0c4c9; + /* Link text with font-size ≥20px. */ + --intergalactic-text-large-info: #5487ff; + /* Hover and active states of the link text with font-size ≥20px. */ + --intergalactic-text-large-info-hover-active: #2969ff; + /* Text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success: #69CD7D; + /* Hover and active states of the text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success-hover-active: #44C15D; + /* Text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical: #ff5454; + /* Hover and active states of the text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical-hover-active: #E82525; + /* Advertising text. */ + --intergalactic-text-advertising: #611eb5; + /* Neutral primary border. */ + --intergalactic-border-primary: #d5dfe2; + /* Subtle secondary border. */ + --intergalactic-border-secondary: #eaeff1; + /* Subtle secondary border in the informational message. */ + --intergalactic-border-info: #9dbaff; + /* Active border in focused input filed. */ + --intergalactic-border-info-active: #1e262a; + /* Subtle secondary border in the successful message and input field. */ + --intergalactic-border-success: #A9E2B4; + /* Active border in the focused input field with valid state. */ + --intergalactic-border-success-active: #44C15D; + /* Subtle secondary border in the critical message and invalid input field. */ + --intergalactic-border-critical: #ff9d9d; + /* Active border in the focused input field with invalid state, and active state of the other components with invalid state. */ + --intergalactic-border-critical-active: #E82525; + /* Subtle secondary border in the warning message. */ + --intergalactic-border-warning: #ffbda5; + /* Active border in components with warning intention. */ + --intergalactic-border-warning-active: #ff703c; + /* Inverted version of the neutral primary border. Use it for borders on the dark or color background. */ + --intergalactic-border-primary-invert: #ffffff; + /* Inverted version of the neutral secondary border. Use it for borders on the dark or color background. */ + --intergalactic-border-secondary-invert: rgba(255, 255, 255, 0.3); + /* Border of the Tooltip with dark theme. */ + --intergalactic-border-tooltip-invert: #668791; + /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */ + --intergalactic-border-table-accent: #b0c4c9; + /* Border color of the second period for the comparison mode in the DatePicker. */ + --intergalactic-border-date-picker-range-comparison: #892aff; + /* Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states. */ + --intergalactic-border-critical-pattern: repeating-linear-gradient(315deg, rgba(232, 37, 37, 1) 0, rgba(232, 37, 37, 1) 2px, transparent 0, transparent 50%); + /* Subtle background of the Switch control. */ + --intergalactic-control-switch-bg: #b0c4c9; + /* Background of the regular primary control. */ + --intergalactic-control-primary-info: #1e262a; + /* Hover state of the regular primary control. */ + --intergalactic-control-primary-info-hover: #1e262a; + /* Active (selected) state of the regular primary control. */ + --intergalactic-control-primary-info-active: #1e262a; + /* Background of the primary control with successful theme. */ + --intergalactic-control-primary-success: #69CD7D; + /* Hover state of the primary control with successful theme. */ + --intergalactic-control-primary-success-hover: #44C15D; + /* Active (selected) state of the primary control with successful theme. */ + --intergalactic-control-primary-success-active: #3EB055; + /* Background of the primary control with danger theme. */ + --intergalactic-control-primary-critical: #ff5454; + /* Hover state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-hover: #E82525; + /* Active (selected) state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-active: #e82525; + /* Background of the primary brand colored control. */ + --intergalactic-control-primary-brand: #ff8d63; + /* Hover state of the primary brand colored control. */ + --intergalactic-control-primary-brand-hover: #ff703c; + /* Active state of the primary brand colored control. */ + --intergalactic-control-primary-brand-active: #e86637; + /* Background of the advertising primary control. */ + --intergalactic-control-primary-advertising: #7d26e8; + /* Hover state of the advertising primary control. */ + --intergalactic-control-primary-advertising-hover: #611eb5; + /* Active (selected) state of the advertising primary control. */ + --intergalactic-control-primary-advertising-active: #892aff; + /* Inverted background of the primary control. */ + --intergalactic-control-primary-invert: #ffffff; + /* Hover state of the inverted primary control. */ + --intergalactic-control-primary-invert-hover: #f7f8f9; + /* Active (selected) state of the inverted primary control. */ + --intergalactic-control-primary-invert-active: #eaeff1; + /* Background of the regular secondary control. */ + --intergalactic-control-secondary-neutral: rgba(133, 162, 171, 0.1); + /* Hover state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-hover: rgba(133, 162, 171, 0.2); + /* Active (selected) state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-active: rgba(133, 162, 171, 0.3); + /* Background of the accent secondary control. */ + --intergalactic-control-secondary-info: rgba(84, 135, 255, 0.1); + /* Hover state of the accent secondary control. */ + --intergalactic-control-secondary-info-hover: rgba(84, 135, 255, 0.2); + /* Active (selected) state of the accent secondary control. */ + --intergalactic-control-secondary-info-active: rgba(84, 135, 255, 0.3); + /* Background of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert: rgba(255, 255, 255, 0.05); + /* Hover state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-active: rgba(255, 255, 255, 0.3); + /* Background of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral: rgba(133, 162, 171, 0); + /* Hover state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-hover: rgba(133, 162, 171, 0.2); + /* Active (selected) state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-active: rgba(133, 162, 171, 0.3); + /* Background of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info: rgba(84, 135, 255, 0); + /* Hover state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-hover: rgba(84, 135, 255, 0.2); + /* Active (selected) state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-active: rgba(84, 135, 255, 0.3); + /* Background of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert: rgba(255, 255, 255, 0); + /* Hover state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-active: rgba(255, 255, 255, 0.3); + /* Primary neutral icon. */ + --intergalactic-icon-primary-neutral: #668791; + /* Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color. */ + --intergalactic-icon-primary-neutral-hover-active: #565861; + /* Primary link-lookalike icon. */ + --intergalactic-icon-primary-info: #2969ff; + /* Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color. */ + --intergalactic-icon-primary-info-hover-active: #0358a1; + /* Primary success icon. */ + --intergalactic-icon-primary-success: #69CD7D; + /* Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color. */ + --intergalactic-icon-primary-success-hover-active: #037e68; + /* Primary critical icon. */ + --intergalactic-icon-primary-critical: #ff5454; + /* Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color. */ + --intergalactic-icon-primary-critical-hover-active: #cc3a42; + /* Primary warning icon. */ + --intergalactic-icon-primary-warning: #ff8d63; + /* Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color. */ + --intergalactic-icon-primary-warning-hover-active: #cc5024; + /* Inverted version of the primary icon. */ + --intergalactic-icon-primary-invert: #ffffff; + /* Hover and active (selected) states of the inverted version of the primary icon. */ + --intergalactic-icon-primary-invert-hover-active: #eaeff1; + /* Secondary neutral icon. */ + --intergalactic-icon-secondary-neutral: #b0c4c9; + /* Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color. */ + --intergalactic-icon-secondary-neutral-hover-active: #878992; + /* Secondary link-lookalike icon. */ + --intergalactic-icon-secondary-info: #709bff; + /* Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color. */ + --intergalactic-icon-secondary-info-hover-active: #2290cc; + /* Secondary success icon. */ + --intergalactic-icon-secondary-success: #89FF75; + /* Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color. */ + --intergalactic-icon-secondary-success-hover-active: #049b75; + /* Secondary critical icon. */ + --intergalactic-icon-secondary-critical: #FF5454; + /* Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color. */ + --intergalactic-icon-secondary-critical-hover-active: #cc6c6b; + /* Secondary warning icon. */ + --intergalactic-icon-secondary-warning: #ff9f7c; + /* Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color. */ + --intergalactic-icon-secondary-warning-hover-active: #cc7036; + /* Color for the default non-interactive icon. */ + --intergalactic-icon-non-interactive: #1e262a; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-red: #ff788f; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-orange: #ff9400; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-yellow: #ffe84d; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-salad: #c7fa73; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-green: #45e0a8; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-blue: #6edbff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-violet: #b880ff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-pink: #ff7ad1; + /* Default date-picker cell background. */ + --intergalactic-date-picker-cell: #ffffff; + /* Color for marking the cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current: #85a2ab; + /* Hover state of the default date-picker cell background. */ + --intergalactic-date-picker-cell-hover: #eaeff1; + /* Background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range: #bdd1ff; + /* Hover state of the background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range-hover: #9dbaff; + /* Active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active: #709bff; + /* Hover for the active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active-hover: #5487ff; + /* Color for marking the active cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5); + /* Active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active: #892aff; + /* Hover for the active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active-hover: #7d26e8; + /* Default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item: #ffffff; + /* Hover state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-hover: #f7f8f9; + /* Active (selected) state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected: rgba(189, 209, 255, 0.7); + /* Hover state for the selected state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected-hover: #bdd1ff; + /* Color of the FeaturePopover background with accent theme. */ + --intergalactic-feature-popover-bg: #FFE09D; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */ + --intergalactic-feature-popover-dot-outer-border: #FFE09D; + /* Color of the FeaturePopover background with neutral theme. */ + --intergalactic-feature-popover-bg-neutral: #1d113e; + /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral: #89FF75; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral-outer-border: #89FF75; + /* Background color of the ProgressBar. */ + --intergalactic-progress-bar-bg: #eaeff1; + /* Hover state of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-hover: #d5dfe2; + /* Inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert: rgba(255, 255, 255, 0.2); + /* Hover state for the inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert-hover: rgba(255, 255, 255, 0.4); + /* Value with gradient for the ProgressBar. */ + --intergalactic-progress-bar-value-gradient: linear-gradient(-45deg, rgba(68, 193, 93, 0.9) 25%, rgba(68, 193, 93, 1) 0%, rgba(68, 193, 93, 1) 50%, rgba(68, 193, 93, 0.9) 0%, rgba(68, 193, 93, 0.9) 75%, rgba(68, 193, 93, 1) 0%); + /* Null value gradient for the ProgressBar. */ + --intergalactic-progress-bar-pattern-gradient: linear-gradient(-45deg, rgba(234, 239, 241, 0.9) 25%, rgba(234, 239, 241, 1) 0%, rgba(234, 239, 241, 1) 50%, rgba(234, 239, 241, 0.9) 0%, rgba(234, 239, 241, 0.9) 75%, rgba(234, 239, 241, 1) 0%); + /* Base value background for the ProgressBar. It is used to create gradients for the values. */ + --intergalactic-progress-bar-value-bg: #000000; + /* Default color for the Skeleton. */ + --intergalactic-skeleton-bg: rgba(234, 239, 241, 0.8); + /* Inverted version of the default color for the Skeleton. */ + --intergalactic-skeleton-bg-invert: rgba(255, 255, 255, 0.3); + /* Icon color for the SliderRating component in its normal state. */ + --intergalactic-slider-rating-normal: #b0c4c9; + /* Icon color for the SliderRating component in its hovered and active states. */ + --intergalactic-slider-rating-hover-active: #ffe09d; + /* Background of the header cell in the primary Table. */ + --intergalactic-table-th-primary-cell: #f7f8f9; + /* Background of the hovered header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-hover: #eaeff1; + /* Background of the active header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-active: #eaeff1; + /* Background of the header cell in the secondary Table. */ + --intergalactic-table-th-secondary-cell: #ffffff; + /* Background gradient for sorting icon that absolute positioned in the table head. */ + --intergalactic-table-th-gradient: linear-gradient(to right, rgba(234, 239, 241, 0) 0%, rgba(234, 239, 241, 1) 100%); + /* Background of the default cell in the Table. */ + --intergalactic-table-td-cell: #ffffff; + /* Background of the default hovered cell in the Table. */ + --intergalactic-table-td-cell-hover: #f4f7f8; + /* Background of the default active cell in the Table. */ + --intergalactic-table-td-cell-active: #eef2f4; + /* Background of the unread cell in the Table. */ + --intergalactic-table-td-cell-unread: #f7f8f9; + /* Background of the cell inside an Accordion in the Table. */ + --intergalactic-table-td-cell-accordion: #f7f8f9; + /* Background of the selected cell in the Table. */ + --intergalactic-table-td-cell-selected: #eaf0ff; + /* Background of the hovered selected cell in the Table. */ + --intergalactic-table-td-cell-selected-hover: #bdd1ff; + /* Background of the active selected cell in the Table. */ + --intergalactic-table-td-cell-selected-active: #bdd1ff; + /* Background of the cell with new information in the Table. */ + --intergalactic-table-td-cell-new: #ECF9EF; + /* Background of the hovered cell with new information in the Table. */ + --intergalactic-table-td-cell-new-hover: #C4FFBA; + /* Background of the active cell with new information in the Table. */ + --intergalactic-table-td-cell-new-active: #C4FFBA; + /* Background of the cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical: #ffeaea; + /* Background of the hovered cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-hover: #ffbdbd; + /* Background of the active cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-active: #ffbdbd; + /* Background of the cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning: #fff1ec; + /* Background of the hovered cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-hover: #ffd3c3; + /* Background of the active cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-active: #ffd3c3; + /* Primary brand color. */ + --intergalactic-brand-primary: #ff8d63; + /* Secondary brand color. */ + --intergalactic-brand-secondary: #611eb5; + /* Pinterest brand color. */ + --intergalactic-brand-pinterest: #bd081c; + /* Instagram brand color. */ + --intergalactic-brand-instagram: #e4405f; + /* Youtube brand color. */ + --intergalactic-brand-youtube: #ff0000; + /* Facebook brand color. */ + --intergalactic-brand-facebook: #1877f2; + /* LinkedIn brand color. */ + --intergalactic-brand-linkedIn: #0a66c2; + /* Twitter brand color. */ + --intergalactic-brand-twitter: #1d9bf0; + /* Google brand color for the link. */ + --intergalactic-brand-google-blue: #1a0dab; + /* Google green brand color for the link. */ + --intergalactic-brand-google-green: #016723; + /* Google My Business brand color. */ + --intergalactic-brand-google-my-business: #1a73e8; + /* Default shadow of the Card. */ + --intergalactic-box-shadow-card: 0 0 0 1px #eaeff1; + /* Hover state for the shadow of the Card with hover state. */ + --intergalactic-box-shadow-card-hover: 3px 3px 30px 0px rgba(30, 38, 42, 0.15); + /* Shadow for show that element are being drag-and-drop. */ + --intergalactic-box-shadow-dnd: 0px 0px 1px 0px rgba(30, 38, 42, 0.16), 0px 12px 40px 0px rgba(30, 38, 42, 0.16); + /* Default shadow if the Modal window. */ + --intergalactic-box-shadow-modal: 0px 3px 8px 0px rgba(30, 38, 42, 0.2); + /* Default shadow of all Poppers, Dropdowns and Tooltips. */ + --intergalactic-box-shadow-popper: 0px 1px 12px 0px rgba(30, 38, 42, 0.15); + /* Color for default keyboard focus outline styles. */ + --intergalactic-keyboard-focus-outline: #1e262a; + /* Color for keyboard focus outline styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid-outline: #ff5454; + /* Keyboard focus styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 84, 84, 0.5); + /* Color for keyboard focus outline styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid-outline: #69CD7D; + /* Keyboard focus styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(105, 205, 125, 0.5); + /* Color for keyboard focus outline styles to use on the dark and color background. */ + --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8); + /* Keyboard focus styles for use on dark backgrounds. */ + --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8); + /* Default keyboard focus box-shadow styles. */ + --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(30, 38, 42, 0.5); + /* Base font family. */ + --intergalactic-base: Inter; + /* Use with font-size-800. */ + --intergalactic-lh-800: 117%; + /* Use with font-size-700. */ + --intergalactic-lh-700: 110%; + /* Use with font-size-600. */ + --intergalactic-lh-600: 125%; + /* Use with font-size-500. */ + --intergalactic-lh-500: 117%; + /* Use with font-size-400. */ + --intergalactic-lh-400: 120%; + /* Use with font-size-300. */ + --intergalactic-lh-300: 150%; + /* Use with font-size-200. */ + --intergalactic-lh-200: 142%; + /* Use with font-size-100. */ + --intergalactic-lh-100: 133%; + /* Semi-bold font weight. */ + --intergalactic-semi-bold: 600; + /* Bold font weight. */ + --intergalactic-bold: 700; + /* Regular font weight. */ + --intergalactic-regular: 400; + /* Medium font weight. */ + --intergalactic-medium: 500; + /* Use only for text in Badge component. */ + --intergalactic-fs-50: 10px; + /* Use this font-size with caution for text in some additional messages. Always check its contrast and readability. */ + --intergalactic-fs-100: 12px; + --intergalactic-fs-200: 14px; + --intergalactic-fs-300: 16px; + --intergalactic-fs-400: 20px; + --intergalactic-fs-500: 24px; + --intergalactic-fs-600: 32px; + --intergalactic-fs-700: 36px; + --intergalactic-fs-800: 48px; + /* Compact letter spacing. */ + --intergalactic-compact: 0.3; + /* Base denominator of the design system. */ + --intergalactic-scale-indent: 4px; + /* Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions. */ + --intergalactic-form-control-s: 20px; + /* Default size of the controls. */ + --intergalactic-form-control-m: 28px; + /* Large size of the controls. */ + --intergalactic-form-control-l: 40px; + /* 2px */ + --intergalactic-spacing-05x: 2px; + /* 4px */ + --intergalactic-spacing-1x: 4px; + /* 8px */ + --intergalactic-spacing-2x: 8px; + /* 12px */ + --intergalactic-spacing-3x: 12px; + /* 16px */ + --intergalactic-spacing-4x: 16px; + /* 20px */ + --intergalactic-spacing-5x: 20px; + /* 24px */ + --intergalactic-spacing-6x: 24px; + /* 32px */ + --intergalactic-spacing-8x: 32px; + /* 40px */ + --intergalactic-spacing-10x: 40px; + /* 56px */ + --intergalactic-spacing-14x: 56px; + /* 80px */ + --intergalactic-spacing-20x: 80px; + /* 96px */ + --intergalactic-spacing-24x: 96px; + /* 120px */ + --intergalactic-spacing-30x: 120px; + --intergalactic-rounded-extra-small: 2px; + --intergalactic-rounded-small: 4px; + --intergalactic-rounded-medium: 6px; + --intergalactic-rounded-large: 12px; + --intergalactic-rounded-extra-large: 24px; + /* Use for rounding addons and small controls like Checkbox. */ + --intergalactic-addon-rounded: 4px; + /* Use for rounding Badge. */ + --intergalactic-badge-rounded: 6px; + /* Use for rounding big and small charts like bar, histogram and others. */ + --intergalactic-chart-rounded: 2px; + /* Use for rounding Counter. */ + --intergalactic-counter-rounded: 12px; + /* Use for rounding Tag. */ + --intergalactic-tag-rounded: 24px; + /* Use for rounding Switch. */ + --intergalactic-switch-rounded: 24px; + /* Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc. */ + --intergalactic-control-rounded: 6px; + /* Use for rounding bars: ProgressBar, SliderBar, etc. */ + --intergalactic-progress-bar-rounded: 6px; + /* Use for rounding surfaces like Card, blocks, widgets, Notice, etc. */ + --intergalactic-surface-rounded: 6px; + /* Use for rounding all kinds of poppers and dropdowns. */ + --intergalactic-popper-rounded: 6px; + /* Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard). */ + --intergalactic-modal-rounded: 12px; + /* Use for the disabled state of all kind of the controls and elements. */ + --intergalactic-disabled-opacity: 0.5; + /* Extra small screens (small phones). */ + --intergalactic-screen-extra-small: 320px; + /* Small screens (phones and small tablets). */ + --intergalactic-screen-small: 768px; + /* Medium screens (tablets and small laptops). */ + --intergalactic-screen-medium: 1200px; + /* Large screens (tablets and laptops). */ + --intergalactic-screen-large: 1920px; + /* Use for cover the content under the modal dialogs. */ + --intergalactic-overlay-primary: rgba(30, 38, 42, 0.7); + /* Use for the secondary modal dialogs that were opened upon the other modal dialogs. */ + --intergalactic-overlay-secondary: rgba(30, 38, 42, 0.4); + /* Use as a primary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-primary: #f7f8f9; + /* Use as a secondary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-secondary: rgba(255, 255, 255, 0.85); + --intergalactic-z-index-deep: -999; + --intergalactic-z-index-overlay: 500; + --intergalactic-z-index-modal: 900; + --intergalactic-z-index-popper: 700; + --intergalactic-z-index-dropdown: 750; + --intergalactic-z-index-tooltip: 800; + --intergalactic-z-index-notice-bubble: 999; + /* Default Tooltip background. */ + --intergalactic-tooltip-default: #ffffff; + /* Warning Tooltip background. */ + --intergalactic-tooltip-warning: #ffbdbd; + /* Inverted version of the default Tooltip background. */ + --intergalactic-tooltip-invert: #1e262a; + /* Neutral border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-neutral: #ffffff80; + /* Inverted border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-invert: #00000080; + /* Left-to-right fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-left: linear-gradient(to right, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Right-to-left fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-right: linear-gradient(to left, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Top-to-bottom fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-top: linear-gradient(to bottom, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Bottom-to-top fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-bottom: linear-gradient(to top, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Left-to-right fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-left: linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Right-to-left fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-right: linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-bottom: linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Background color for ScrollBar. */ + --intergalactic-scroll-bar-background: rgba(30, 38, 42, 0.3); + /* Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-normal: #ecedf0; + /* Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-hover-active: #e3e4e9; + /* Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-normal: #d0eeff; + /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-hover-active: #b7e4ff; + /* Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-normal: #cff1ea; + /* Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-hover-active: #b7eae0; + /* Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-normal: #ffddd2; + /* Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-hover-active: #ffccbb; + /* Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-normal: #ffcedc; + /* Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-hover-active: #ffb6ca; + /* Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-normal: #f4e3ff; + /* Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-hover-active: #efd5ff; + /* Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-normal: #fee6d1; + /* Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-hover-active: #fedab9; + /* Primary white tag. */ + --intergalactic-tag-primary-white-normal: rgba(255, 255, 255, 0.15); + /* Hover and active (selected) state of the primary white tag. */ + --intergalactic-tag-primary-white-hover-active: rgba(255, 255, 255, 0.3); + /* Gray text for the primary gray tag. */ + --intergalactic-tag-primary-gray-text: #668791; + /* Blue text for the primary blue tag. */ + --intergalactic-tag-primary-blue-text: #2969ff; + /* Green text for the primary green tag. */ + --intergalactic-tag-primary-green-text: #44C15D; + /* Orange text for the primary orange tag. */ + --intergalactic-tag-primary-orange-text: #ff703c; + /* Red text for the primary red tag. */ + --intergalactic-tag-primary-red-text: #E82525; + /* Violet text for the primary violet tag. */ + --intergalactic-tag-primary-violet-text: #892aff; + /* Yellow text for the primary yellow tag. */ + --intergalactic-tag-primary-yellow-text: #E89325; + /* White text for the primary white tag. */ + --intergalactic-tag-primary-white-text: #ffffff; + /* Background color for the default secondary tag. */ + --intergalactic-tag-secondary-normal: #ffffff; + /* Hover and active (selected) states of the background color for the default secondary tag. */ + --intergalactic-tag-secondary-hover-active: #f7f8f9; + /* White secondary tag. */ + --intergalactic-tag-secondary-white-normal: rgba(255, 255, 255, 0); + /* Active state of the secondary white tag. */ + --intergalactic-tag-secondary-white-hover-active: rgba(255, 255, 255, 0.1); + /* Gray text for the default secondary tag. */ + --intergalactic-tag-secondary-gray-text: #668791; + /* White text for the secondary white tag. */ + --intergalactic-tag-secondary-white-text: #ffffff; + /* 1 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-1: #709bff; + /* 2 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-2: #A9E2B4; + /* 3 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-3: #ff8d63; + /* 4 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-4: #ff87eb; + /* 5 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-5: #ffe09d; + /* 6 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-6: #a155ff; + /* 7 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-7: #FF5454; + /* 8 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-8: #95f8e2; + /* 9 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-9: #5487ff; + /* 10 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-10: #89FF75; + /* 11 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-11: #ffbda5; + /* 12 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-12: #e14adf; + /* 13 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-13: #FFC954; + /* 14 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-14: #c99dff; + /* 15 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-15: #ff5454; + /* 16 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-16: #64f5d4; + /* 17 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-17: #9dbaff; + /* 18 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-18: #69CD7D; + /* 19 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-19: #ff9f7c; + /* 20 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-20: #ffa9fa; + /* 21 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-21: #ffc954; + /* 22 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-22: #b070ff; + /* 23 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-23: #ff9d9d; + /* 24 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-24: #46f3cc; + /* Use it to show total value. */ + --intergalactic-chart-palette-order-total-amount: #85a2ab; + /* Use it to indicate voids, missing or some other data. */ + --intergalactic-chart-palette-order-other-data: #d5dfe2; + /* Use it to show null value. */ + --intergalactic-chart-palette-order-null: #eaeff1; + /* Default chart grid line. */ + --intergalactic-chart-grid-line: #eaeff1; + /* X-axis line on the chart grid. */ + --intergalactic-chart-grid-x-axis: #d5dfe2; + /* Accent line for the hover state on the chart grid. */ + --intergalactic-chart-grid-y-accent-hover-line: #b0c4c9; + /* Text label on the chart grid. */ + --intergalactic-chart-grid-text-label: #668791; + /* Background color for the hover state of a bar on the chart grid. */ + --intergalactic-chart-grid-bar-chart-hover: rgba(213, 223, 226, 0.3); + /* Default background color of a bar in the BarChart. */ + --intergalactic-chart-grid-bar-chart-base-bg: #eaeff1; + /* Use for highlighting a period on the chart grid. */ + --intergalactic-chart-grid-period-bg: rgba(213, 223, 226, 0.2); + /* Stripe color for diagonal pattern background. */ + --intergalactic-chart-grid-period-pattern: rgba(30, 38, 42, 0.15); + /* Border for distinguishing data sets and chart dots on the chart grid. */ + --intergalactic-chart-grid-border: #ffffff; + /* Background color for the clickable date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-period-active: #668791; + /* Background color for the "Start tracking" date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(105, 205, 125, 0.2); + --intergalactic-header-bg: #382e5e; + --intergalactic-header-border-primary: #382e5e; + --intergalactic-header-border-secondary: #ffffff26; + --intergalactic-sidebar-nav-control-hover: rgba(234, 239, 241, 0.7); + --intergalactic-sidebar-nav-control-active: #e2ddff; + --intergalactic-sidebar-nav-control-text-normal: #6d619f; + --intergalactic-sidebar-nav-control-text-active: #4d407e; + --intergalactic-sidebar-nav-control-icon-normal: #9083c5; + --intergalactic-sidebar-nav-control-icon-active: #4d407e; + /* Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen) */ + --intergalactic-duration-extra-slow: 500; + /* Should be used for more larger scale animations (such as page transitions) */ + --intergalactic-duration-slow: 400; + /* Should be used for more complex effects (such as Modal) */ + --intergalactic-duration-medium: 300; + /* Should be used for more complex effects (such as Dropdown or Accordion) */ + --intergalactic-duration-fast: 200; + /* Should be used for simpler effects and relatively small-sized animations (such as fades or color changes) */ + --intergalactic-duration-extra-fast: 100; + /* Use for small controls like Switch or Slider. */ + --intergalactic-duration-switch: 100; + /* Use for components based on popper like Tooltip, Dropdown or Filter trigger. */ + --intergalactic-duration-popper: 200; + /* Use for small controls like Checkbox or Radio. */ + --intergalactic-duration-control: 200; + /* Use for Modal, Fullscreen Modal, Side panel or other kind of windows. */ + --intergalactic-duration-modal: 200; + /* Use for Accordion. */ + --intergalactic-duration-accordion: 200; + /* Use for Summary or Counter. */ + --intergalactic-duration-counter: 200; } \ No newline at end of file diff --git a/semcore/core/src/theme/themes/highlights-aqua-green.css b/semcore/core/src/theme/themes/highlights-aqua-green.css new file mode 100644 index 0000000000..8066b093e6 --- /dev/null +++ b/semcore/core/src/theme/themes/highlights-aqua-green.css @@ -0,0 +1,36 @@ +:root { + /* Primary background for highlighted controls. */ + --intergalactic-bg-primary-feature-highlight: #ffffff; + /* Primary background for hover and active (selected) state of highlighted controls. */ + --intergalactic-bg-primary-feature-highlight-hover-active: linear-gradient(90deg, #f3eaff, #eaf0ff); + /* Secondary background for the highlighted message. */ + --intergalactic-bg-secondary-feature-highlight: linear-gradient(90deg, #f3eaff, #eaf0ff); + /* Primary border for highlighted controls. */ + --intergalactic-border-feature-highlight: linear-gradient(90deg, #b070ff, #709bff); + /* Primary border for the active state of highlighted controls. */ + --intergalactic-border-feature-highlight-active: linear-gradient(90deg, #a155ff, #5487ff); + /* Secondary border for highlighted controls. */ + --intergalactic-border-feature-highlight-secondary: linear-gradient(90deg, #c99dff, #9dbaff); + /* Background of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight: linear-gradient(90deg, #a155ff, #5487ff); + /* Hover state of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight-hover: linear-gradient(90deg, #892aff, #2969ff); + /* Active (selected) state of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight-active: linear-gradient(90deg, #7d26e8, #2560e8); + /* Background of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight: linear-gradient(90deg, #f3eaff, #eaf0ff); + /* Hover state of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight-hover: linear-gradient(90deg, #e5d1ff, #d1dfff); + /* Active (selected) state of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight-active: linear-gradient(90deg, #dabdff, #bdd1ff); + /* Text for highlighted features. */ + --intergalactic-text-feature-highlight: linear-gradient(90deg, #892aff, #2969ff); + /* Text for hover and active states of highlighted features. */ + --intergalactic-text-feature-highlight-hover-active: linear-gradient(90deg, #611eb5, #1d4bb5); + /* Primary highlighted icon. */ + --intergalactic-icon-primary-feature-highlight: #892aff; + /* Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color. */ + --intergalactic-icon-primary-feature-highlight-hover-active: #6B3AB4; + /* Color for keyboard focus outline styles for highlighted controls. */ + --intergalactic-keyboard-focus-feature-highlight-outline: linear-gradient(90deg, #a155ff, #5487ff); +} \ No newline at end of file diff --git a/semcore/core/src/theme/themes/highlights-aqua-green.ts b/semcore/core/src/theme/themes/highlights-aqua-green.ts new file mode 100644 index 0000000000..fbfd3c71b6 --- /dev/null +++ b/semcore/core/src/theme/themes/highlights-aqua-green.ts @@ -0,0 +1,19 @@ +export default { + '--intergalactic-bg-primary-feature-highlight': '#ffffff', + '--intergalactic-bg-primary-feature-highlight-hover-active': 'linear-gradient(90deg, #f3eaff, #eaf0ff)', + '--intergalactic-bg-secondary-feature-highlight': 'linear-gradient(90deg, #f3eaff, #eaf0ff)', + '--intergalactic-border-feature-highlight': 'linear-gradient(90deg, #b070ff, #709bff)', + '--intergalactic-border-feature-highlight-active': 'linear-gradient(90deg, #a155ff, #5487ff)', + '--intergalactic-border-feature-highlight-secondary': 'linear-gradient(90deg, #c99dff, #9dbaff)', + '--intergalactic-control-primary-feature-highlight': 'linear-gradient(90deg, #a155ff, #5487ff)', + '--intergalactic-control-primary-feature-highlight-hover': 'linear-gradient(90deg, #892aff, #2969ff)', + '--intergalactic-control-primary-feature-highlight-active': 'linear-gradient(90deg, #7d26e8, #2560e8)', + '--intergalactic-control-secondary-feature-highlight': 'linear-gradient(90deg, #f3eaff, #eaf0ff)', + '--intergalactic-control-secondary-feature-highlight-hover': 'linear-gradient(90deg, #e5d1ff, #d1dfff)', + '--intergalactic-control-secondary-feature-highlight-active': 'linear-gradient(90deg, #dabdff, #bdd1ff)', + '--intergalactic-text-feature-highlight': 'linear-gradient(90deg, #892aff, #2969ff)', + '--intergalactic-text-feature-highlight-hover-active': 'linear-gradient(90deg, #611eb5, #1d4bb5)', + '--intergalactic-icon-primary-feature-highlight': '#892aff', + '--intergalactic-icon-primary-feature-highlight-hover-active': '#6B3AB4', + '--intergalactic-keyboard-focus-feature-highlight-outline': 'linear-gradient(90deg, #a155ff, #5487ff)', +}; diff --git a/semcore/core/src/theme/themes/highlights-light-new-2ver.css b/semcore/core/src/theme/themes/highlights-light-new-2ver.css new file mode 100644 index 0000000000..e82946da22 --- /dev/null +++ b/semcore/core/src/theme/themes/highlights-light-new-2ver.css @@ -0,0 +1,36 @@ +:root { + /* Primary background for highlighted controls. */ + --intergalactic-bg-primary-feature-highlight: #ffffff; + /* Primary background for hover and active (selected) state of highlighted controls. */ + --intergalactic-bg-primary-feature-highlight-hover-active: linear-gradient(90deg, #f5f1ff, #eef4ff); + /* Secondary background for the highlighted message. */ + --intergalactic-bg-secondary-feature-highlight: linear-gradient(90deg, #f5f1ff, #eef4ff); + /* Primary border for highlighted controls. */ + --intergalactic-border-feature-highlight: linear-gradient(90deg, #c190ff, #83aaf7); + /* Primary border for the active state of highlighted controls. */ + --intergalactic-border-feature-highlight-active: linear-gradient(90deg, #a070fe, #709bff); + /* Secondary border for highlighted controls. */ + --intergalactic-border-feature-highlight-secondary: linear-gradient(90deg, #cbb7ff, #bdd1ff); + /* Background of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight: linear-gradient(90deg, #a070fe, #709bff); + /* Hover state of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight-hover: linear-gradient(90deg, #7d26e8, #2969ff); + /* Active (selected) state of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight-active: linear-gradient(90deg, #5a17a9, #1640a1); + /* Background of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight: linear-gradient(90deg, #f5f1ff, #eef4ff); + /* Hover state of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight-hover: linear-gradient(90deg, #e9d8ff, #dee9fe); + /* Active (selected) state of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight-active: linear-gradient(90deg, #e0c7ff, #d0e0fe); + /* Text for highlighted features. */ + --intergalactic-text-feature-highlight: linear-gradient(90deg, #7d26e8, #2969ff); + /* Text for hover and active states of highlighted features. */ + --intergalactic-text-feature-highlight-hover-active: linear-gradient(90deg, #350a69, #0a2564); + /* Primary highlighted icon. */ + --intergalactic-icon-primary-feature-highlight: #7d26e8; + /* Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color. */ + --intergalactic-icon-primary-feature-highlight-hover-active: #6B3AB4; + /* Color for keyboard focus outline styles for highlighted controls. */ + --intergalactic-keyboard-focus-feature-highlight-outline: linear-gradient(90deg, #a070fe, #709bff); +} \ No newline at end of file diff --git a/semcore/core/src/theme/themes/highlights-light-new-2ver.ts b/semcore/core/src/theme/themes/highlights-light-new-2ver.ts new file mode 100644 index 0000000000..b42c5c82d5 --- /dev/null +++ b/semcore/core/src/theme/themes/highlights-light-new-2ver.ts @@ -0,0 +1,19 @@ +export default { + '--intergalactic-bg-primary-feature-highlight': '#ffffff', + '--intergalactic-bg-primary-feature-highlight-hover-active': 'linear-gradient(90deg, #f5f1ff, #eef4ff)', + '--intergalactic-bg-secondary-feature-highlight': 'linear-gradient(90deg, #f5f1ff, #eef4ff)', + '--intergalactic-border-feature-highlight': 'linear-gradient(90deg, #c190ff, #83aaf7)', + '--intergalactic-border-feature-highlight-active': 'linear-gradient(90deg, #a070fe, #709bff)', + '--intergalactic-border-feature-highlight-secondary': 'linear-gradient(90deg, #cbb7ff, #bdd1ff)', + '--intergalactic-control-primary-feature-highlight': 'linear-gradient(90deg, #a070fe, #709bff)', + '--intergalactic-control-primary-feature-highlight-hover': 'linear-gradient(90deg, #7d26e8, #2969ff)', + '--intergalactic-control-primary-feature-highlight-active': 'linear-gradient(90deg, #5a17a9, #1640a1)', + '--intergalactic-control-secondary-feature-highlight': 'linear-gradient(90deg, #f5f1ff, #eef4ff)', + '--intergalactic-control-secondary-feature-highlight-hover': 'linear-gradient(90deg, #e9d8ff, #dee9fe)', + '--intergalactic-control-secondary-feature-highlight-active': 'linear-gradient(90deg, #e0c7ff, #d0e0fe)', + '--intergalactic-text-feature-highlight': 'linear-gradient(90deg, #7d26e8, #2969ff)', + '--intergalactic-text-feature-highlight-hover-active': 'linear-gradient(90deg, #350a69, #0a2564)', + '--intergalactic-icon-primary-feature-highlight': '#7d26e8', + '--intergalactic-icon-primary-feature-highlight-hover-active': '#6B3AB4', + '--intergalactic-keyboard-focus-feature-highlight-outline': 'linear-gradient(90deg, #a070fe, #709bff)', +}; diff --git a/semcore/core/src/theme/themes/highlights-light-new.css b/semcore/core/src/theme/themes/highlights-light-new.css new file mode 100644 index 0000000000..e82946da22 --- /dev/null +++ b/semcore/core/src/theme/themes/highlights-light-new.css @@ -0,0 +1,36 @@ +:root { + /* Primary background for highlighted controls. */ + --intergalactic-bg-primary-feature-highlight: #ffffff; + /* Primary background for hover and active (selected) state of highlighted controls. */ + --intergalactic-bg-primary-feature-highlight-hover-active: linear-gradient(90deg, #f5f1ff, #eef4ff); + /* Secondary background for the highlighted message. */ + --intergalactic-bg-secondary-feature-highlight: linear-gradient(90deg, #f5f1ff, #eef4ff); + /* Primary border for highlighted controls. */ + --intergalactic-border-feature-highlight: linear-gradient(90deg, #c190ff, #83aaf7); + /* Primary border for the active state of highlighted controls. */ + --intergalactic-border-feature-highlight-active: linear-gradient(90deg, #a070fe, #709bff); + /* Secondary border for highlighted controls. */ + --intergalactic-border-feature-highlight-secondary: linear-gradient(90deg, #cbb7ff, #bdd1ff); + /* Background of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight: linear-gradient(90deg, #a070fe, #709bff); + /* Hover state of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight-hover: linear-gradient(90deg, #7d26e8, #2969ff); + /* Active (selected) state of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight-active: linear-gradient(90deg, #5a17a9, #1640a1); + /* Background of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight: linear-gradient(90deg, #f5f1ff, #eef4ff); + /* Hover state of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight-hover: linear-gradient(90deg, #e9d8ff, #dee9fe); + /* Active (selected) state of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight-active: linear-gradient(90deg, #e0c7ff, #d0e0fe); + /* Text for highlighted features. */ + --intergalactic-text-feature-highlight: linear-gradient(90deg, #7d26e8, #2969ff); + /* Text for hover and active states of highlighted features. */ + --intergalactic-text-feature-highlight-hover-active: linear-gradient(90deg, #350a69, #0a2564); + /* Primary highlighted icon. */ + --intergalactic-icon-primary-feature-highlight: #7d26e8; + /* Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color. */ + --intergalactic-icon-primary-feature-highlight-hover-active: #6B3AB4; + /* Color for keyboard focus outline styles for highlighted controls. */ + --intergalactic-keyboard-focus-feature-highlight-outline: linear-gradient(90deg, #a070fe, #709bff); +} \ No newline at end of file diff --git a/semcore/core/src/theme/themes/highlights-light-new.ts b/semcore/core/src/theme/themes/highlights-light-new.ts new file mode 100644 index 0000000000..b42c5c82d5 --- /dev/null +++ b/semcore/core/src/theme/themes/highlights-light-new.ts @@ -0,0 +1,19 @@ +export default { + '--intergalactic-bg-primary-feature-highlight': '#ffffff', + '--intergalactic-bg-primary-feature-highlight-hover-active': 'linear-gradient(90deg, #f5f1ff, #eef4ff)', + '--intergalactic-bg-secondary-feature-highlight': 'linear-gradient(90deg, #f5f1ff, #eef4ff)', + '--intergalactic-border-feature-highlight': 'linear-gradient(90deg, #c190ff, #83aaf7)', + '--intergalactic-border-feature-highlight-active': 'linear-gradient(90deg, #a070fe, #709bff)', + '--intergalactic-border-feature-highlight-secondary': 'linear-gradient(90deg, #cbb7ff, #bdd1ff)', + '--intergalactic-control-primary-feature-highlight': 'linear-gradient(90deg, #a070fe, #709bff)', + '--intergalactic-control-primary-feature-highlight-hover': 'linear-gradient(90deg, #7d26e8, #2969ff)', + '--intergalactic-control-primary-feature-highlight-active': 'linear-gradient(90deg, #5a17a9, #1640a1)', + '--intergalactic-control-secondary-feature-highlight': 'linear-gradient(90deg, #f5f1ff, #eef4ff)', + '--intergalactic-control-secondary-feature-highlight-hover': 'linear-gradient(90deg, #e9d8ff, #dee9fe)', + '--intergalactic-control-secondary-feature-highlight-active': 'linear-gradient(90deg, #e0c7ff, #d0e0fe)', + '--intergalactic-text-feature-highlight': 'linear-gradient(90deg, #7d26e8, #2969ff)', + '--intergalactic-text-feature-highlight-hover-active': 'linear-gradient(90deg, #350a69, #0a2564)', + '--intergalactic-icon-primary-feature-highlight': '#7d26e8', + '--intergalactic-icon-primary-feature-highlight-hover-active': '#6B3AB4', + '--intergalactic-keyboard-focus-feature-highlight-outline': 'linear-gradient(90deg, #a070fe, #709bff)', +}; diff --git a/semcore/core/src/theme/themes/highlights-lime-green.css b/semcore/core/src/theme/themes/highlights-lime-green.css new file mode 100644 index 0000000000..8066b093e6 --- /dev/null +++ b/semcore/core/src/theme/themes/highlights-lime-green.css @@ -0,0 +1,36 @@ +:root { + /* Primary background for highlighted controls. */ + --intergalactic-bg-primary-feature-highlight: #ffffff; + /* Primary background for hover and active (selected) state of highlighted controls. */ + --intergalactic-bg-primary-feature-highlight-hover-active: linear-gradient(90deg, #f3eaff, #eaf0ff); + /* Secondary background for the highlighted message. */ + --intergalactic-bg-secondary-feature-highlight: linear-gradient(90deg, #f3eaff, #eaf0ff); + /* Primary border for highlighted controls. */ + --intergalactic-border-feature-highlight: linear-gradient(90deg, #b070ff, #709bff); + /* Primary border for the active state of highlighted controls. */ + --intergalactic-border-feature-highlight-active: linear-gradient(90deg, #a155ff, #5487ff); + /* Secondary border for highlighted controls. */ + --intergalactic-border-feature-highlight-secondary: linear-gradient(90deg, #c99dff, #9dbaff); + /* Background of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight: linear-gradient(90deg, #a155ff, #5487ff); + /* Hover state of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight-hover: linear-gradient(90deg, #892aff, #2969ff); + /* Active (selected) state of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight-active: linear-gradient(90deg, #7d26e8, #2560e8); + /* Background of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight: linear-gradient(90deg, #f3eaff, #eaf0ff); + /* Hover state of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight-hover: linear-gradient(90deg, #e5d1ff, #d1dfff); + /* Active (selected) state of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight-active: linear-gradient(90deg, #dabdff, #bdd1ff); + /* Text for highlighted features. */ + --intergalactic-text-feature-highlight: linear-gradient(90deg, #892aff, #2969ff); + /* Text for hover and active states of highlighted features. */ + --intergalactic-text-feature-highlight-hover-active: linear-gradient(90deg, #611eb5, #1d4bb5); + /* Primary highlighted icon. */ + --intergalactic-icon-primary-feature-highlight: #892aff; + /* Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color. */ + --intergalactic-icon-primary-feature-highlight-hover-active: #6B3AB4; + /* Color for keyboard focus outline styles for highlighted controls. */ + --intergalactic-keyboard-focus-feature-highlight-outline: linear-gradient(90deg, #a155ff, #5487ff); +} \ No newline at end of file diff --git a/semcore/core/src/theme/themes/highlights-lime-green.ts b/semcore/core/src/theme/themes/highlights-lime-green.ts new file mode 100644 index 0000000000..fbfd3c71b6 --- /dev/null +++ b/semcore/core/src/theme/themes/highlights-lime-green.ts @@ -0,0 +1,19 @@ +export default { + '--intergalactic-bg-primary-feature-highlight': '#ffffff', + '--intergalactic-bg-primary-feature-highlight-hover-active': 'linear-gradient(90deg, #f3eaff, #eaf0ff)', + '--intergalactic-bg-secondary-feature-highlight': 'linear-gradient(90deg, #f3eaff, #eaf0ff)', + '--intergalactic-border-feature-highlight': 'linear-gradient(90deg, #b070ff, #709bff)', + '--intergalactic-border-feature-highlight-active': 'linear-gradient(90deg, #a155ff, #5487ff)', + '--intergalactic-border-feature-highlight-secondary': 'linear-gradient(90deg, #c99dff, #9dbaff)', + '--intergalactic-control-primary-feature-highlight': 'linear-gradient(90deg, #a155ff, #5487ff)', + '--intergalactic-control-primary-feature-highlight-hover': 'linear-gradient(90deg, #892aff, #2969ff)', + '--intergalactic-control-primary-feature-highlight-active': 'linear-gradient(90deg, #7d26e8, #2560e8)', + '--intergalactic-control-secondary-feature-highlight': 'linear-gradient(90deg, #f3eaff, #eaf0ff)', + '--intergalactic-control-secondary-feature-highlight-hover': 'linear-gradient(90deg, #e5d1ff, #d1dfff)', + '--intergalactic-control-secondary-feature-highlight-active': 'linear-gradient(90deg, #dabdff, #bdd1ff)', + '--intergalactic-text-feature-highlight': 'linear-gradient(90deg, #892aff, #2969ff)', + '--intergalactic-text-feature-highlight-hover-active': 'linear-gradient(90deg, #611eb5, #1d4bb5)', + '--intergalactic-icon-primary-feature-highlight': '#892aff', + '--intergalactic-icon-primary-feature-highlight-hover-active': '#6B3AB4', + '--intergalactic-keyboard-focus-feature-highlight-outline': 'linear-gradient(90deg, #a155ff, #5487ff)', +}; diff --git a/semcore/core/src/theme/themes/highlights-new-adjusted.css b/semcore/core/src/theme/themes/highlights-new-adjusted.css new file mode 100644 index 0000000000..28b0bd7623 --- /dev/null +++ b/semcore/core/src/theme/themes/highlights-new-adjusted.css @@ -0,0 +1,36 @@ +:root { + /* Primary background for highlighted controls. */ + --intergalactic-bg-primary-feature-highlight: #ffffff; + /* Primary background for hover and active (selected) state of highlighted controls. */ + --intergalactic-bg-primary-feature-highlight-hover-active: linear-gradient(90deg, #f5f1ff, #eef4ff); + /* Secondary background for the highlighted message. */ + --intergalactic-bg-secondary-feature-highlight: linear-gradient(90deg, #f5f1ff, #eef4ff); + /* Primary border for highlighted controls. */ + --intergalactic-border-feature-highlight: linear-gradient(90deg, #b494ff, #83aaf7); + /* Primary border for the active state of highlighted controls. */ + --intergalactic-border-feature-highlight-active: linear-gradient(90deg, #a070fe, #5e8ef2); + /* Secondary border for highlighted controls. */ + --intergalactic-border-feature-highlight-secondary: linear-gradient(90deg, #cbb7ff, #aac6fb); + /* Background of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight: linear-gradient(90deg, #a070fe, #5e8ef2); + /* Hover state of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight-hover: linear-gradient(90deg, #8426f5, #2661e8); + /* Active (selected) state of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight-active: linear-gradient(90deg, #5a17a9, #1640a1); + /* Background of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight: linear-gradient(90deg, #f5f1ff, #eef4ff); + /* Hover state of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight-hover: linear-gradient(90deg, #ebe4ff, #dee9fe); + /* Active (selected) state of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight-active: linear-gradient(90deg, #e2d8ff, #d0e0fe); + /* Text for highlighted features. */ + --intergalactic-text-feature-highlight: linear-gradient(90deg, #8426f5, #2661e8); + /* Text for hover and active states of highlighted features. */ + --intergalactic-text-feature-highlight-hover-active: linear-gradient(90deg, #350a69, #0e2a6a); + /* Primary highlighted icon. */ + --intergalactic-icon-primary-feature-highlight: #8426f5; + /* Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color. */ + --intergalactic-icon-primary-feature-highlight-hover-active: #6B3AB4; + /* Color for keyboard focus outline styles for highlighted controls. */ + --intergalactic-keyboard-focus-feature-highlight-outline: linear-gradient(90deg, #a070fe, #5e8ef2); +} \ No newline at end of file diff --git a/semcore/core/src/theme/themes/highlights-new-adjusted.ts b/semcore/core/src/theme/themes/highlights-new-adjusted.ts new file mode 100644 index 0000000000..674f053570 --- /dev/null +++ b/semcore/core/src/theme/themes/highlights-new-adjusted.ts @@ -0,0 +1,19 @@ +export default { + '--intergalactic-bg-primary-feature-highlight': '#ffffff', + '--intergalactic-bg-primary-feature-highlight-hover-active': 'linear-gradient(90deg, #f5f1ff, #eef4ff)', + '--intergalactic-bg-secondary-feature-highlight': 'linear-gradient(90deg, #f5f1ff, #eef4ff)', + '--intergalactic-border-feature-highlight': 'linear-gradient(90deg, #b494ff, #83aaf7)', + '--intergalactic-border-feature-highlight-active': 'linear-gradient(90deg, #a070fe, #5e8ef2)', + '--intergalactic-border-feature-highlight-secondary': 'linear-gradient(90deg, #cbb7ff, #aac6fb)', + '--intergalactic-control-primary-feature-highlight': 'linear-gradient(90deg, #a070fe, #5e8ef2)', + '--intergalactic-control-primary-feature-highlight-hover': 'linear-gradient(90deg, #8426f5, #2661e8)', + '--intergalactic-control-primary-feature-highlight-active': 'linear-gradient(90deg, #5a17a9, #1640a1)', + '--intergalactic-control-secondary-feature-highlight': 'linear-gradient(90deg, #f5f1ff, #eef4ff)', + '--intergalactic-control-secondary-feature-highlight-hover': 'linear-gradient(90deg, #ebe4ff, #dee9fe)', + '--intergalactic-control-secondary-feature-highlight-active': 'linear-gradient(90deg, #e2d8ff, #d0e0fe)', + '--intergalactic-text-feature-highlight': 'linear-gradient(90deg, #8426f5, #2661e8)', + '--intergalactic-text-feature-highlight-hover-active': 'linear-gradient(90deg, #350a69, #0e2a6a)', + '--intergalactic-icon-primary-feature-highlight': '#8426f5', + '--intergalactic-icon-primary-feature-highlight-hover-active': '#6B3AB4', + '--intergalactic-keyboard-focus-feature-highlight-outline': 'linear-gradient(90deg, #a070fe, #5e8ef2)', +}; diff --git a/semcore/core/src/theme/themes/highlights-new.css b/semcore/core/src/theme/themes/highlights-new.css new file mode 100644 index 0000000000..8066b093e6 --- /dev/null +++ b/semcore/core/src/theme/themes/highlights-new.css @@ -0,0 +1,36 @@ +:root { + /* Primary background for highlighted controls. */ + --intergalactic-bg-primary-feature-highlight: #ffffff; + /* Primary background for hover and active (selected) state of highlighted controls. */ + --intergalactic-bg-primary-feature-highlight-hover-active: linear-gradient(90deg, #f3eaff, #eaf0ff); + /* Secondary background for the highlighted message. */ + --intergalactic-bg-secondary-feature-highlight: linear-gradient(90deg, #f3eaff, #eaf0ff); + /* Primary border for highlighted controls. */ + --intergalactic-border-feature-highlight: linear-gradient(90deg, #b070ff, #709bff); + /* Primary border for the active state of highlighted controls. */ + --intergalactic-border-feature-highlight-active: linear-gradient(90deg, #a155ff, #5487ff); + /* Secondary border for highlighted controls. */ + --intergalactic-border-feature-highlight-secondary: linear-gradient(90deg, #c99dff, #9dbaff); + /* Background of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight: linear-gradient(90deg, #a155ff, #5487ff); + /* Hover state of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight-hover: linear-gradient(90deg, #892aff, #2969ff); + /* Active (selected) state of the highlighted primary control. */ + --intergalactic-control-primary-feature-highlight-active: linear-gradient(90deg, #7d26e8, #2560e8); + /* Background of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight: linear-gradient(90deg, #f3eaff, #eaf0ff); + /* Hover state of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight-hover: linear-gradient(90deg, #e5d1ff, #d1dfff); + /* Active (selected) state of the highlighted secondary control. */ + --intergalactic-control-secondary-feature-highlight-active: linear-gradient(90deg, #dabdff, #bdd1ff); + /* Text for highlighted features. */ + --intergalactic-text-feature-highlight: linear-gradient(90deg, #892aff, #2969ff); + /* Text for hover and active states of highlighted features. */ + --intergalactic-text-feature-highlight-hover-active: linear-gradient(90deg, #611eb5, #1d4bb5); + /* Primary highlighted icon. */ + --intergalactic-icon-primary-feature-highlight: #892aff; + /* Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color. */ + --intergalactic-icon-primary-feature-highlight-hover-active: #6B3AB4; + /* Color for keyboard focus outline styles for highlighted controls. */ + --intergalactic-keyboard-focus-feature-highlight-outline: linear-gradient(90deg, #a155ff, #5487ff); +} \ No newline at end of file diff --git a/semcore/core/src/theme/themes/highlights-new.ts b/semcore/core/src/theme/themes/highlights-new.ts new file mode 100644 index 0000000000..fbfd3c71b6 --- /dev/null +++ b/semcore/core/src/theme/themes/highlights-new.ts @@ -0,0 +1,19 @@ +export default { + '--intergalactic-bg-primary-feature-highlight': '#ffffff', + '--intergalactic-bg-primary-feature-highlight-hover-active': 'linear-gradient(90deg, #f3eaff, #eaf0ff)', + '--intergalactic-bg-secondary-feature-highlight': 'linear-gradient(90deg, #f3eaff, #eaf0ff)', + '--intergalactic-border-feature-highlight': 'linear-gradient(90deg, #b070ff, #709bff)', + '--intergalactic-border-feature-highlight-active': 'linear-gradient(90deg, #a155ff, #5487ff)', + '--intergalactic-border-feature-highlight-secondary': 'linear-gradient(90deg, #c99dff, #9dbaff)', + '--intergalactic-control-primary-feature-highlight': 'linear-gradient(90deg, #a155ff, #5487ff)', + '--intergalactic-control-primary-feature-highlight-hover': 'linear-gradient(90deg, #892aff, #2969ff)', + '--intergalactic-control-primary-feature-highlight-active': 'linear-gradient(90deg, #7d26e8, #2560e8)', + '--intergalactic-control-secondary-feature-highlight': 'linear-gradient(90deg, #f3eaff, #eaf0ff)', + '--intergalactic-control-secondary-feature-highlight-hover': 'linear-gradient(90deg, #e5d1ff, #d1dfff)', + '--intergalactic-control-secondary-feature-highlight-active': 'linear-gradient(90deg, #dabdff, #bdd1ff)', + '--intergalactic-text-feature-highlight': 'linear-gradient(90deg, #892aff, #2969ff)', + '--intergalactic-text-feature-highlight-hover-active': 'linear-gradient(90deg, #611eb5, #1d4bb5)', + '--intergalactic-icon-primary-feature-highlight': '#892aff', + '--intergalactic-icon-primary-feature-highlight-hover-active': '#6B3AB4', + '--intergalactic-keyboard-focus-feature-highlight-outline': 'linear-gradient(90deg, #a155ff, #5487ff)', +}; diff --git a/semcore/core/src/theme/themes/light-new-2ver.css b/semcore/core/src/theme/themes/light-new-2ver.css new file mode 100644 index 0000000000..0e22295c96 --- /dev/null +++ b/semcore/core/src/theme/themes/light-new-2ver.css @@ -0,0 +1,877 @@ +:root { + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --gray-50: #f0f1f2; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --gray-100: #dedfe2; + --gray-200: #d1d2d5; + --gray-300: #a9aab1; + --gray-400: #90929a; + --gray-500: #6c6e79; + --gray-600: #484a52; + --gray-700: #2a2b30; + --gray-800: #181e15; + --gray-white: #ffffff; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --blue-50: #eef4ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --blue-100: #d0e0fe; + --blue-200: #bdd1ff; + --blue-300: #83aaf7; + --blue-400: #709bff; + --blue-500: #2969ff; + --blue-600: #1640a1; + --blue-700: #0a2564; + --blue-800: #041642; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --green-50: #dcfdf0; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --green-100: #a3f9e5; + --green-200: #16f0bf; + --green-300: #13c79e; + --green-400: #0faa88; + --green-500: #0c8266; + --green-600: #045844; + --green-700: #013427; + --green-800: #002118; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --red-50: #ffefec; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --red-100: #ffbdbd; + --red-200: #ffa79a; + --red-300: #ff7f72; + --red-400: #ff5454; + --red-500: #e82525; + --red-600: #8b1312; + --red-700: #550807; + --red-800: #380303; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --orange-50: #ffefe9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --orange-100: #fdd5c8; + --orange-200: #f9b29a; + --orange-300: #f28b68; + --orange-400: #e66536; + --orange-500: #b04b27; + --orange-600: #793118; + --orange-700: #491b0b; + --orange-800: #300f05; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --yellow-50: #fff2d7; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --yellow-100: #ffe09d; + --yellow-200: #ffc954; + --yellow-300: #da9f21; + --yellow-400: #e89325; + --yellow-500: #8e6711; + --yellow-600: #614509; + --yellow-700: #3a2803; + --yellow-800: #251801; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-50: #f5f1ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-100: #e0c7ff; + --violet-200: #cbb7ff; + --violet-300: #c190ff; + --violet-400: #a070fe; + --violet-500: #7d26e8; + --violet-600: #5a17a9; + --violet-700: #350a69; + --violet-800: #220446; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-dusty-50: #f1f5f4; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-dusty-100: #dceeeb; + --violet-dusty-200: #b8cac8; + --violet-dusty-300: #96b1af; + --violet-dusty-400: #7b9996; + --violet-dusty-500: #5c7472; + --violet-dusty-600: #3e4e4d; + --violet-dusty-700: #232e2d; + --violet-dusty-800: #151c1c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --pink-50: #fff0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --pink-100: #ffd3ff; + --pink-200: #ffa9fa; + --pink-300: #ff87eb; + --pink-400: #e14adf; + --pink-500: #b229b9; + --pink-600: #7d0480; + --pink-700: #4d0050; + --pink-800: #340439; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --salad-50: #eaf8eb; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --salad-100: #c4ffba; + --salad-200: #89ff75; + --salad-300: #44c15d; + --salad-400: #44ab58; + --salad-500: #328242; + --salad-600: #20582b; + --salad-700: #0f3417; + --salad-800: #07210c; + /* Primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral: #ffffff; + /* Hover state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-hover: rgba(240, 241, 242, 0.6); + /* Active (selected) state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-active: rgba(222, 223, 226, 0.8); + /* Accent background of the message with regular information. */ + --intergalactic-bg-primary-info: #2969ff; + /* Accent background of the message or banner with information about the successful result. */ + --intergalactic-bg-primary-success: #16f0bf; + /* Accent background of a message or a banner with a critical information. */ + --intergalactic-bg-primary-critical: #ff5454; + /* Accent background of a message or a banner with a warning information. */ + --intergalactic-bg-primary-warning: #f28b68; + /* Accent background of the information you want to highlight. */ + --intergalactic-bg-primary-highlight: #e0c7ff; + /* Accent background for the advertising banners and controls. */ + --intergalactic-bg-primary-advertising: #181e15; + /* Accented muted background for a message with regular information. */ + --intergalactic-bg-primary-muted: #6c6e79; + /* Inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert: #181e15; + /* Hover state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-hover: #2a2b30; + /* Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-active: #484a52; + /* Secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral: rgba(240, 241, 242, 0.6); + /* Hover state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-hover: rgba(222, 223, 226, 0.8); + /* Active (selected) state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-active: #d1d2d5; + /* Secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info: rgba(41, 105, 255, 0.1); + /* Hover state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-hover: rgba(41, 105, 255, 0.2); + /* Active (selected) state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-active: rgba(41, 105, 255, 0.3); + /* Secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success: rgba(22, 240, 191, 0.2); + /* Hover state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-hover: rgba(22, 240, 191, 0.4); + /* Active (selected) state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-active: rgba(22, 240, 191, 0.6); + /* Secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical: rgba(255, 84, 84, 0.2); + /* Hover state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-hover: rgba(255, 84, 84, 0.4); + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-active: rgba(255, 84, 84, 0.6); + /* Secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning: #ffefe9; + /* Hover state of the secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning-hover: rgba(253, 213, 200, 0.6); + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-warning-active: #fdd5c8; + /* Secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight: #f5f1ff; + /* Hover state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-hover: rgba(224, 199, 255, 0.6); + /* Active (selected) state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-active: #e0c7ff; + /* Secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising: #a3f9e5; + /* Hover state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-hover: rgba(22, 240, 191, 0.6); + /* Active (selected) state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-active: #16f0bf; + /* Highlighting the search results. */ + --intergalactic-bg-highlight-results: rgba(224, 199, 255, 0.4); + /* Focusing values in the input. */ + --intergalactic-bg-highlight-focus: rgba(112, 155, 255, 0.2); + /* Primary text. */ + --intergalactic-text-primary: #181e15; + /* Secondary text. */ + --intergalactic-text-secondary: #6c6e79; + /* Placeholder text only. */ + --intergalactic-text-placeholder: #90929a; + /* Text associated with success states and data. */ + --intergalactic-text-success: #0faa88; + /* Hover and active states for the text associated with success states and data. */ + --intergalactic-text-success-hover-active: #0c8266; + /* Text associated with critical states and data. */ + --intergalactic-text-critical: #ff5454; + /* Hover and active states for the text associated with critical states and data. */ + --intergalactic-text-critical-hover-active: #e82525; + /* Inverted version of the primary text. */ + --intergalactic-text-primary-invert: #ffffff; + /* Inverted version of the secondary text. */ + --intergalactic-text-secondary-invert: rgba(255, 255, 255, 0.8); + /* Link text. */ + --intergalactic-text-link: #2969ff; + /* Hover and active states for the link text. */ + --intergalactic-text-link-hover-active: #1640a1; + /* Inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert: #d0e0fe; + /* Hover and active states of the inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert-hover: #bdd1ff; + /* Visited link text. */ + --intergalactic-text-link-visited: #a070fe; + /* Hint link text. */ + --intergalactic-text-hint: #6c6e79; + /* Hover and active states of the hint link text. */ + --intergalactic-text-hint-hover-active: #484a52; + /* Inverted version of the hint link text. */ + --intergalactic-text-hint-invert: #dedfe2; + /* Hover and active states of the inverted version of the hint link text. */ + --intergalactic-text-hint-invert-hover-active: #d1d2d5; + /* Secondary text. Use with font-size ≥20px. */ + --intergalactic-text-large-secondary: #a9aab1; + /* Link text with font-size ≥20px. */ + --intergalactic-text-large-info: #2969ff; + /* Hover and active states of the link text with font-size ≥20px. */ + --intergalactic-text-large-info-hover-active: #1640a1; + /* Text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success: #13c79e; + /* Hover and active states of the text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success-hover-active: #0faa88; + /* Text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical: #ff5454; + /* Hover and active states of the text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical-hover-active: #e82525; + /* Advertising text. */ + --intergalactic-text-advertising: #7d26e8; + /* Neutral primary border. */ + --intergalactic-border-primary: rgba(222, 223, 226, 0.9); + /* Subtle secondary border. */ + --intergalactic-border-secondary: rgba(222, 223, 226, 0.7); + /* Subtle secondary border in the informational message. */ + --intergalactic-border-info: #bdd1ff; + /* Active border in focused input filed. */ + --intergalactic-border-info-active: rgba(41, 105, 255, 0.5); + /* Subtle secondary border in the successful message and input field. */ + --intergalactic-border-success: #13c79e; + /* Active border in the focused input field with valid state. */ + --intergalactic-border-success-active: #0faa88; + /* Subtle secondary border in the critical message and invalid input field. */ + --intergalactic-border-critical: #ff7f72; + /* Active border in the focused input field with invalid state, and active state of the other components with invalid state. */ + --intergalactic-border-critical-active: #ff5454; + /* Subtle secondary border in the warning message. */ + --intergalactic-border-warning: #f9b29a; + /* Active border in components with warning intention. */ + --intergalactic-border-warning-active: #f28b68; + /* Inverted version of the neutral primary border. Use it for borders on the dark or color background. */ + --intergalactic-border-primary-invert: #ffffff; + /* Inverted version of the neutral secondary border. Use it for borders on the dark or color background. */ + --intergalactic-border-secondary-invert: rgba(255, 255, 255, 0.3); + /* Border of the Tooltip with dark theme. */ + --intergalactic-border-tooltip-invert: #6c6e79; + /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */ + --intergalactic-border-table-accent: rgba(222, 223, 226, 0.9); + /* Border color of the second period for the comparison mode in the DatePicker. */ + --intergalactic-border-date-picker-range-comparison: #a070fe; + /* Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states. */ + --intergalactic-border-critical-pattern: repeating-linear-gradient(315deg, rgba(255, 84, 84, 1) 0, rgba(255, 84, 84, 1) 2px, transparent 0, transparent 50%); + /* Subtle background of the Switch control. */ + --intergalactic-control-switch-bg: #d1d2d5; + /* Background of the regular primary control. */ + --intergalactic-control-primary-info: #181e15; + /* Hover state of the regular primary control. */ + --intergalactic-control-primary-info-hover: #c190ff; + /* Active (selected) state of the regular primary control. */ + --intergalactic-control-primary-info-active: #a070fe; + /* Background of the primary control with successful theme. */ + --intergalactic-control-primary-success: #13c79e; + /* Hover state of the primary control with successful theme. */ + --intergalactic-control-primary-success-hover: #0faa88; + /* Active (selected) state of the primary control with successful theme. */ + --intergalactic-control-primary-success-active: #0c8266; + /* Background of the primary control with danger theme. */ + --intergalactic-control-primary-critical: #ff5454; + /* Hover state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-hover: #e82525; + /* Active (selected) state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-active: #8b1312; + /* Background of the primary brand colored control. */ + --intergalactic-control-primary-brand: #c190ff; + /* Hover state of the primary brand colored control. */ + --intergalactic-control-primary-brand-hover: #a070fe; + /* Active state of the primary brand colored control. */ + --intergalactic-control-primary-brand-active: #7d26e8; + /* Background of the advertising primary control. */ + --intergalactic-control-primary-advertising: #c190ff; + /* Hover state of the advertising primary control. */ + --intergalactic-control-primary-advertising-hover: #181e15; + /* Active (selected) state of the advertising primary control. */ + --intergalactic-control-primary-advertising-active: #181e15; + /* Inverted background of the primary control. */ + --intergalactic-control-primary-invert: #ffffff; + /* Hover state of the inverted primary control. */ + --intergalactic-control-primary-invert-hover: #f0f1f2; + /* Active (selected) state of the inverted primary control. */ + --intergalactic-control-primary-invert-active: #dedfe2; + /* Background of the regular secondary control. */ + --intergalactic-control-secondary-neutral: rgba(123, 153, 150, 0.1); + /* Hover state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-hover: rgba(123, 153, 150, 0.2); + /* Active (selected) state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-active: rgba(123, 153, 150, 0.3); + /* Background of the accent secondary control. */ + --intergalactic-control-secondary-info: rgba(41, 105, 255, 0.05); + /* Hover state of the accent secondary control. */ + --intergalactic-control-secondary-info-hover: rgba(41, 105, 255, 0.2); + /* Active (selected) state of the accent secondary control. */ + --intergalactic-control-secondary-info-active: rgba(41, 105, 255, 0.3); + /* Background of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert: rgba(255, 255, 255, 0.05); + /* Hover state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-active: rgba(255, 255, 255, 0.2); + /* Background of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral: rgba(123, 153, 150, 0); + /* Hover state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-hover: rgba(123, 153, 150, 0.1); + /* Active (selected) state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-active: rgba(123, 153, 150, 0.2); + /* Background of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info: rgba(112, 155, 255, 0); + /* Hover state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-hover: rgba(112, 155, 255, 0.2); + /* Active (selected) state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-active: rgba(112, 155, 255, 0.3); + /* Background of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert: rgba(255, 255, 255, 0); + /* Hover state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-active: rgba(255, 255, 255, 0.3); + /* Primary neutral icon. */ + --intergalactic-icon-primary-neutral: #90929a; + /* Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color. */ + --intergalactic-icon-primary-neutral-hover-active: #6c6e79; + /* Primary link-lookalike icon. */ + --intergalactic-icon-primary-info: #709bff; + /* Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color. */ + --intergalactic-icon-primary-info-hover-active: #2969ff; + /* Primary success icon. */ + --intergalactic-icon-primary-success: #0faa88; + /* Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color. */ + --intergalactic-icon-primary-success-hover-active: #0c8266; + /* Primary critical icon. */ + --intergalactic-icon-primary-critical: #ff5454; + /* Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color. */ + --intergalactic-icon-primary-critical-hover-active: #e82525; + /* Primary warning icon. */ + --intergalactic-icon-primary-warning: #e66536; + /* Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color. */ + --intergalactic-icon-primary-warning-hover-active: #b04b27; + /* Inverted version of the primary icon. */ + --intergalactic-icon-primary-invert: #ffffff; + /* Hover and active (selected) states of the inverted version of the primary icon. */ + --intergalactic-icon-primary-invert-hover-active: #dedfe2; + /* Secondary neutral icon. */ + --intergalactic-icon-secondary-neutral: #a9aab1; + /* Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color. */ + --intergalactic-icon-secondary-neutral-hover-active: #90929a; + /* Secondary link-lookalike icon. */ + --intergalactic-icon-secondary-info: #83aaf7; + /* Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color. */ + --intergalactic-icon-secondary-info-hover-active: #709bff; + /* Secondary success icon. */ + --intergalactic-icon-secondary-success: #13c79e; + /* Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color. */ + --intergalactic-icon-secondary-success-hover-active: #0faa88; + /* Secondary critical icon. */ + --intergalactic-icon-secondary-critical: #ff7f72; + /* Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color. */ + --intergalactic-icon-secondary-critical-hover-active: #ff5454; + /* Secondary warning icon. */ + --intergalactic-icon-secondary-warning: #f28b68; + /* Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color. */ + --intergalactic-icon-secondary-warning-hover-active: #e66536; + /* Color for the default non-interactive icon. */ + --intergalactic-icon-non-interactive: #181e15; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-red: #ff5454; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-orange: #f28b68; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-yellow: #ffc954; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-salad: #89ff75; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-green: #16f0bf; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-blue: #709bff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-violet: #c190ff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-pink: #e14adf; + /* Default date-picker cell background. */ + --intergalactic-date-picker-cell: #ffffff; + /* Color for marking the cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current: #181e15; + /* Hover state of the default date-picker cell background. */ + --intergalactic-date-picker-cell-hover: rgba(123, 153, 150, 0.1); + /* Background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range: rgba(41, 105, 255, 0.2); + /* Hover state of the background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range-hover: rgba(41, 105, 255, 0.3); + /* Active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active: #2969ff; + /* Hover for the active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active-hover: #1640a1; + /* Color for marking the active cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5); + /* Active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active: #a070fe; + /* Hover for the active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active-hover: #7d26e8; + /* Default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item: #ffffff; + /* Hover state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-hover: rgba(123, 153, 150, 0.1); + /* Active (selected) state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected: rgba(123, 153, 150, 0.2); + /* Hover state for the selected state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected-hover: rgba(123, 153, 150, 0.2); + /* Color of the FeaturePopover background with accent theme. */ + --intergalactic-feature-popover-bg: #e0c7ff; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */ + --intergalactic-feature-popover-dot-outer-border: #e0c7ff; + /* Color of the FeaturePopover background with neutral theme. */ + --intergalactic-feature-popover-bg-neutral: #181e15; + /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral: #c190ff; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral-outer-border: #c190ff; + /* Background color of the ProgressBar. */ + --intergalactic-progress-bar-bg: #dedfe2; + /* Hover state of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-hover: #d1d2d5; + /* Inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert: rgba(255, 255, 255, 0.2); + /* Hover state for the inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert-hover: rgba(255, 255, 255, 0.4); + /* Value with gradient for the ProgressBar. */ + --intergalactic-progress-bar-value-gradient: linear-gradient(-45deg, rgba(193, 144, 255, 0.9) 25%, rgba(193, 144, 255, 1) 0%, rgba(193, 144, 255, 1) 50%, rgba(193, 144, 255, 0.9) 0%, rgba(193, 144, 255, 0.9) 75%, rgba(193, 144, 255, 1) 0%); + /* Null value gradient for the ProgressBar. */ + --intergalactic-progress-bar-pattern-gradient: linear-gradient(-45deg, rgba(222, 223, 226, 0.9) 25%, rgba(222, 223, 226, 1) 0%, rgba(222, 223, 226, 1) 50%, rgba(222, 223, 226, 0.9) 0%, rgba(222, 223, 226, 0.9) 75%, rgba(222, 223, 226, 1) 0%); + /* Base value background for the ProgressBar. It is used to create gradients for the values. */ + --intergalactic-progress-bar-value-bg: #000000; + /* Default color for the Skeleton. */ + --intergalactic-skeleton-bg: rgba(222, 223, 226, 0.8); + /* Inverted version of the default color for the Skeleton. */ + --intergalactic-skeleton-bg-invert: rgba(255, 255, 255, 0.3); + /* Icon color for the SliderRating component in its normal state. */ + --intergalactic-slider-rating-normal: #a9aab1; + /* Icon color for the SliderRating component in its hovered and active states. */ + --intergalactic-slider-rating-hover-active: #c190ff; + /* Background of the header cell in the primary Table. */ + --intergalactic-table-th-primary-cell: rgba(222, 223, 226, 0.2); + /* Background of the hovered header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-hover: #f0f1f2; + /* Background of the active header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-active: #f0f1f2; + /* Background of the header cell in the secondary Table. */ + --intergalactic-table-th-secondary-cell: #ffffff; + /* Background gradient for sorting icon that absolute positioned in the table head. */ + --intergalactic-table-th-gradient: linear-gradient(to right, rgba(240, 241, 242, 0) 0%, rgba(240, 241, 242, 1) 100%); + /* Background of the default cell in the Table. */ + --intergalactic-table-td-cell: #ffffff; + /* Background of the default hovered cell in the Table. */ + --intergalactic-table-td-cell-hover: #f8f9f9; + /* Background of the default active cell in the Table. */ + --intergalactic-table-td-cell-active: #efeff1; + /* Background of the unread cell in the Table. */ + --intergalactic-table-td-cell-unread: rgba(222, 223, 226, 0.2); + /* Background of the cell inside an Accordion in the Table. */ + --intergalactic-table-td-cell-accordion: rgba(222, 223, 226, 0.2); + /* Background of the selected cell in the Table. */ + --intergalactic-table-td-cell-selected: rgba(41, 105, 255, 0.1); + /* Background of the hovered selected cell in the Table. */ + --intergalactic-table-td-cell-selected-hover: rgba(41, 105, 255, 0.2); + /* Background of the active selected cell in the Table. */ + --intergalactic-table-td-cell-selected-active: rgba(41, 105, 255, 0.3); + /* Background of the cell with new information in the Table. */ + --intergalactic-table-td-cell-new: rgba(22, 240, 191, 0.1); + /* Background of the hovered cell with new information in the Table. */ + --intergalactic-table-td-cell-new-hover: rgba(22, 240, 191, 0.2); + /* Background of the active cell with new information in the Table. */ + --intergalactic-table-td-cell-new-active: rgba(22, 240, 191, 0.3); + /* Background of the cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical: rgba(232, 37, 37, 0.1); + /* Background of the hovered cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-hover: rgba(232, 37, 37, 0.2); + /* Background of the active cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-active: rgba(232, 37, 37, 0.3); + /* Background of the cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning: rgba(242, 139, 104, 0.1); + /* Background of the hovered cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-hover: rgba(242, 139, 104, 0.2); + /* Background of the active cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-active: rgba(242, 139, 104, 0.3); + /* Primary brand color. */ + --intergalactic-brand-primary: #c190ff; + /* Secondary brand color. */ + --intergalactic-brand-secondary: #16f0bf; + /* Pinterest brand color. */ + --intergalactic-brand-pinterest: #bd081c; + /* Instagram brand color. */ + --intergalactic-brand-instagram: #e4405f; + /* Youtube brand color. */ + --intergalactic-brand-youtube: #ff0000; + /* Facebook brand color. */ + --intergalactic-brand-facebook: #1877f2; + /* LinkedIn brand color. */ + --intergalactic-brand-linkedIn: #0a66c2; + /* Twitter brand color. */ + --intergalactic-brand-twitter: #1d9bf0; + /* Google brand color for the link. */ + --intergalactic-brand-google-blue: #1a0dab; + /* Google green brand color for the link. */ + --intergalactic-brand-google-green: #016723; + /* Google My Business brand color. */ + --intergalactic-brand-google-my-business: #1a73e8; + /* Default shadow of the Card. */ + --intergalactic-box-shadow-card: 0 0 0 1px rgba(222, 223, 226, 0.5); + /* Hover state for the shadow of the Card with hover state. */ + --intergalactic-box-shadow-card-hover: 3px 3px 30px 0px rgba(24, 30, 21, 0.15); + /* Shadow for show that element are being drag-and-drop. */ + --intergalactic-box-shadow-dnd: 0px 0px 1px 0px rgba(24, 30, 21, 0.16), 0px 12px 40px 0px rgba(24, 30, 21, 0.16); + /* Default shadow if the Modal window. */ + --intergalactic-box-shadow-modal: 0px 3px 8px 0px rgba(24, 30, 21, 0.2); + /* Default shadow of all Poppers, Dropdowns and Tooltips. */ + --intergalactic-box-shadow-popper: 0px 1px 12px 0px rgba(24, 30, 21, 0.15); + /* Color for default keyboard focus outline styles. */ + --intergalactic-keyboard-focus-outline: #2969ff; + /* Color for keyboard focus outline styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid-outline: #ff5454; + /* Keyboard focus styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 84, 84, 0.5); + /* Color for keyboard focus outline styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid-outline: #0faa88; + /* Keyboard focus styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(15, 170, 136, 0.5); + /* Color for keyboard focus outline styles to use on the dark and color background. */ + --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8); + /* Keyboard focus styles for use on dark backgrounds. */ + --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8); + /* Default keyboard focus box-shadow styles. */ + --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(41, 105, 255, 0.5); + /* Base font family. */ + --intergalactic-base: Inter; + /* Use with font-size-800. */ + --intergalactic-lh-800: 117%; + /* Use with font-size-700. */ + --intergalactic-lh-700: 110%; + /* Use with font-size-600. */ + --intergalactic-lh-600: 125%; + /* Use with font-size-500. */ + --intergalactic-lh-500: 117%; + /* Use with font-size-400. */ + --intergalactic-lh-400: 120%; + /* Use with font-size-300. */ + --intergalactic-lh-300: 150%; + /* Use with font-size-200. */ + --intergalactic-lh-200: 142%; + /* Use with font-size-100. */ + --intergalactic-lh-100: 133%; + /* Semi-bold font weight. */ + --intergalactic-semi-bold: 600; + /* Bold font weight. */ + --intergalactic-bold: 700; + /* Regular font weight. */ + --intergalactic-regular: 400; + /* Medium font weight. */ + --intergalactic-medium: 500; + /* Use only for text in Badge component. */ + --intergalactic-fs-50: 10px; + /* Use this font-size with caution for text in some additional messages. Always check its contrast and readability. */ + --intergalactic-fs-100: 12px; + --intergalactic-fs-200: 14px; + --intergalactic-fs-300: 16px; + --intergalactic-fs-400: 20px; + --intergalactic-fs-500: 24px; + --intergalactic-fs-600: 32px; + --intergalactic-fs-700: 36px; + --intergalactic-fs-800: 48px; + /* Compact letter spacing. */ + --intergalactic-compact: 0.3; + /* Base denominator of the design system. */ + --intergalactic-scale-indent: 4px; + /* Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions. */ + --intergalactic-form-control-s: 20px; + /* Default size of the controls. */ + --intergalactic-form-control-m: 28px; + /* Large size of the controls. */ + --intergalactic-form-control-l: 40px; + /* 2px */ + --intergalactic-spacing-05x: 2px; + /* 4px */ + --intergalactic-spacing-1x: 4px; + /* 8px */ + --intergalactic-spacing-2x: 8px; + /* 12px */ + --intergalactic-spacing-3x: 12px; + /* 16px */ + --intergalactic-spacing-4x: 16px; + /* 20px */ + --intergalactic-spacing-5x: 20px; + /* 24px */ + --intergalactic-spacing-6x: 24px; + /* 32px */ + --intergalactic-spacing-8x: 32px; + /* 40px */ + --intergalactic-spacing-10x: 40px; + /* 56px */ + --intergalactic-spacing-14x: 56px; + /* 80px */ + --intergalactic-spacing-20x: 80px; + /* 96px */ + --intergalactic-spacing-24x: 96px; + /* 120px */ + --intergalactic-spacing-30x: 120px; + --intergalactic-rounded-extra-small: 1px; + --intergalactic-rounded-small: 2px; + --intergalactic-rounded-medium: 2px; + --intergalactic-rounded-large: 8px; + --intergalactic-rounded-extra-large: 12px; + /* Use for rounding addons and small controls like Checkbox. */ + --intergalactic-addon-rounded: 2px; + /* Use for rounding Badge. */ + --intergalactic-badge-rounded: 2px; + /* Use for rounding big and small charts like bar, histogram and others. */ + --intergalactic-chart-rounded: 2px; + /* Use for rounding Counter. */ + --intergalactic-counter-rounded: 2px; + /* Use for rounding Tag. */ + --intergalactic-tag-rounded: 2px; + /* Use for rounding Switch. */ + --intergalactic-switch-rounded: 12px; + /* Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc. */ + --intergalactic-control-rounded: 2px; + /* Use for rounding bars: ProgressBar, SliderBar, etc. */ + --intergalactic-progress-bar-rounded: 2px; + /* Use for rounding surfaces like Card, blocks, widgets, Notice, etc. */ + --intergalactic-surface-rounded: 2px; + /* Use for rounding all kinds of poppers and dropdowns. */ + --intergalactic-popper-rounded: 2px; + /* Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard). */ + --intergalactic-modal-rounded: 2px; + /* Use for the disabled state of all kind of the controls and elements. */ + --intergalactic-disabled-opacity: 0.5; + /* Extra small screens (small phones). */ + --intergalactic-screen-extra-small: 320px; + /* Small screens (phones and small tablets). */ + --intergalactic-screen-small: 768px; + /* Medium screens (tablets and small laptops). */ + --intergalactic-screen-medium: 1200px; + /* Large screens (tablets and laptops). */ + --intergalactic-screen-large: 1920px; + /* Use for cover the content under the modal dialogs. */ + --intergalactic-overlay-primary: rgba(24, 30, 21, 0.7); + /* Use for the secondary modal dialogs that were opened upon the other modal dialogs. */ + --intergalactic-overlay-secondary: rgba(24, 30, 21, 0.25); + /* Use as a primary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-primary: rgba(240, 241, 242, 0.6); + /* Use as a secondary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-secondary: rgba(255, 255, 255, 0.85); + --intergalactic-z-index-deep: -999; + --intergalactic-z-index-overlay: 500; + --intergalactic-z-index-modal: 900; + --intergalactic-z-index-popper: 700; + --intergalactic-z-index-dropdown: 750; + --intergalactic-z-index-tooltip: 800; + --intergalactic-z-index-notice-bubble: 999; + /* Default Tooltip background. */ + --intergalactic-tooltip-default: #ffffff; + /* Warning Tooltip background. */ + --intergalactic-tooltip-warning: #ffbdbd; + /* Inverted version of the default Tooltip background. */ + --intergalactic-tooltip-invert: #181e15; + /* Neutral border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-neutral: #ffffff80; + /* Inverted border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-invert: #00000080; + /* Left-to-right fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-left: linear-gradient(to right, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Right-to-left fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-right: linear-gradient(to left, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Top-to-bottom fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-top: linear-gradient(to bottom, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Bottom-to-top fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-bottom: linear-gradient(to top, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Left-to-right fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-left: linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Right-to-left fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-right: linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-bottom: linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Background color for ScrollBar. */ + --intergalactic-scroll-bar-background: rgba(24, 30, 21, 0.3); + /* Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-normal: #ecedf0; + /* Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-hover-active: #e3e4e9; + /* Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-normal: #d0eeff; + /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-hover-active: #b7e4ff; + /* Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-normal: #cff1ea; + /* Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-hover-active: #b7eae0; + /* Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-normal: #ffddd2; + /* Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-hover-active: #ffccbb; + /* Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-normal: #ffcedc; + /* Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-hover-active: #ffb6ca; + /* Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-normal: #f4e3ff; + /* Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-hover-active: #efd5ff; + /* Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-normal: #fee6d1; + /* Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-hover-active: #fedab9; + /* Primary white tag. */ + --intergalactic-tag-primary-white-normal: rgba(255, 255, 255, 0.15); + /* Hover and active (selected) state of the primary white tag. */ + --intergalactic-tag-primary-white-hover-active: rgba(255, 255, 255, 0.3); + /* Gray text for the primary gray tag. */ + --intergalactic-tag-primary-gray-text: #6c6e79; + /* Blue text for the primary blue tag. */ + --intergalactic-tag-primary-blue-text: #2969ff; + /* Green text for the primary green tag. */ + --intergalactic-tag-primary-green-text: #0c8266; + /* Orange text for the primary orange tag. */ + --intergalactic-tag-primary-orange-text: #b04b27; + /* Red text for the primary red tag. */ + --intergalactic-tag-primary-red-text: #e82525; + /* Violet text for the primary violet tag. */ + --intergalactic-tag-primary-violet-text: #7d26e8; + /* Yellow text for the primary yellow tag. */ + --intergalactic-tag-primary-yellow-text: #8e6711; + /* White text for the primary white tag. */ + --intergalactic-tag-primary-white-text: #ffffff; + /* Background color for the default secondary tag. */ + --intergalactic-tag-secondary-normal: #ffffff; + /* Hover and active (selected) states of the background color for the default secondary tag. */ + --intergalactic-tag-secondary-hover-active: #f0f1f2; + /* White secondary tag. */ + --intergalactic-tag-secondary-white-normal: rgba(255, 255, 255, 0); + /* Active state of the secondary white tag. */ + --intergalactic-tag-secondary-white-hover-active: rgba(255, 255, 255, 0.1); + /* Gray text for the default secondary tag. */ + --intergalactic-tag-secondary-gray-text: #6c6e79; + /* White text for the secondary white tag. */ + --intergalactic-tag-secondary-white-text: #ffffff; + /* 1 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-1: #181e15; + /* 2 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-2: #c190ff; + /* 3 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-3: #16f0bf; + /* 4 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-4: #96b1af; + /* 5 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-5: #2969ff; + /* 6 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-6: #e82525; + /* 7 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-7: #b04b27; + /* 8 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-8: #8e6711; + /* 9 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-9: #328242; + /* 10 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-10: #0c8266; + /* 11 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-11: #7d26e8; + /* 12 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-12: #e14adf; + /* 13 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-13: #709bff; + /* 14 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-14: #ff5454; + /* 15 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-15: #e66536; + /* 16 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-16: #e89325; + /* 17 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-17: #44ab58; + /* 18 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-18: #0faa88; + /* 19 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-19: #a070fe; + /* 20 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-20: #ff87eb; + /* 21 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-21: #1640a1; + /* 22 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-22: #8b1312; + /* 23 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-23: #793118; + /* 24 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-24: #045844; + /* Use it to show total value. */ + --intergalactic-chart-palette-order-total-amount: #90929a; + /* Use it to indicate voids, missing or some other data. */ + --intergalactic-chart-palette-order-other-data: #d1d2d5; + /* Use it to show null value. */ + --intergalactic-chart-palette-order-null: #dedfe2; + /* Default chart grid line. */ + --intergalactic-chart-grid-line: rgba(222, 223, 226, 0.7); + /* X-axis line on the chart grid. */ + --intergalactic-chart-grid-x-axis: rgba(222, 223, 226, 0.9); + /* Accent line for the hover state on the chart grid. */ + --intergalactic-chart-grid-y-accent-hover-line: #d1d2d5; + /* Text label on the chart grid. */ + --intergalactic-chart-grid-text-label: #6c6e79; + /* Background color for the hover state of a bar on the chart grid. */ + --intergalactic-chart-grid-bar-chart-hover: rgba(209, 210, 213, 0.2); + /* Default background color of a bar in the BarChart. */ + --intergalactic-chart-grid-bar-chart-base-bg: #f0f1f2; + /* Use for highlighting a period on the chart grid. */ + --intergalactic-chart-grid-period-bg: rgba(209, 210, 213, 0.2); + /* Stripe color for diagonal pattern background. */ + --intergalactic-chart-grid-period-pattern: rgba(24, 30, 21, 0.15); + /* Border for distinguishing data sets and chart dots on the chart grid. */ + --intergalactic-chart-grid-border: #ffffff; + /* Background color for the clickable date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-period-active: #a9aab1; + /* Background color for the "Start tracking" date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(19, 199, 158, 0.2); + --intergalactic-header-bg: rgba(240, 241, 242, 0.6); + --intergalactic-header-border-primary: rgba(222, 223, 226, 0.9); + --intergalactic-header-border-secondary: rgba(222, 223, 226, 0.7); + --intergalactic-sidebar-nav-control-hover: rgba(222, 223, 226, 0.3); + --intergalactic-sidebar-nav-control-active: #dedfe2; + --intergalactic-sidebar-nav-control-text-normal: #6c6e79; + --intergalactic-sidebar-nav-control-text-active: #181e15; + --intergalactic-sidebar-nav-control-icon-normal: #a9aab1; + --intergalactic-sidebar-nav-control-icon-active: #90929a; + /* Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen) */ + --intergalactic-duration-extra-slow: 500; + /* Should be used for more larger scale animations (such as page transitions) */ + --intergalactic-duration-slow: 400; + /* Should be used for more complex effects (such as Modal) */ + --intergalactic-duration-medium: 300; + /* Should be used for more complex effects (such as Dropdown or Accordion) */ + --intergalactic-duration-fast: 200; + /* Should be used for simpler effects and relatively small-sized animations (such as fades or color changes) */ + --intergalactic-duration-extra-fast: 100; + /* Use for small controls like Switch or Slider. */ + --intergalactic-duration-switch: 100; + /* Use for components based on popper like Tooltip, Dropdown or Filter trigger. */ + --intergalactic-duration-popper: 200; + /* Use for small controls like Checkbox or Radio. */ + --intergalactic-duration-control: 200; + /* Use for Modal, Fullscreen Modal, Side panel or other kind of windows. */ + --intergalactic-duration-modal: 200; + /* Use for Accordion. */ + --intergalactic-duration-accordion: 200; + /* Use for Summary or Counter. */ + --intergalactic-duration-counter: 200; +} \ No newline at end of file diff --git a/semcore/core/src/theme/themes/light-new-2ver.ts b/semcore/core/src/theme/themes/light-new-2ver.ts new file mode 100644 index 0000000000..68eb83704f --- /dev/null +++ b/semcore/core/src/theme/themes/light-new-2ver.ts @@ -0,0 +1,489 @@ +export default { + '--gray-50': '#f0f1f2', + '--gray-100': '#dedfe2', + '--gray-200': '#d1d2d5', + '--gray-300': '#a9aab1', + '--gray-400': '#90929a', + '--gray-500': '#6c6e79', + '--gray-600': '#484a52', + '--gray-700': '#2a2b30', + '--gray-800': '#181e15', + '--gray-white': '#ffffff', + '--blue-50': '#eef4ff', + '--blue-100': '#d0e0fe', + '--blue-200': '#bdd1ff', + '--blue-300': '#83aaf7', + '--blue-400': '#709bff', + '--blue-500': '#2969ff', + '--blue-600': '#1640a1', + '--blue-700': '#0a2564', + '--blue-800': '#041642', + '--green-50': '#dcfdf0', + '--green-100': '#a3f9e5', + '--green-200': '#16f0bf', + '--green-300': '#13c79e', + '--green-400': '#0faa88', + '--green-500': '#0c8266', + '--green-600': '#045844', + '--green-700': '#013427', + '--green-800': '#002118', + '--red-50': '#ffefec', + '--red-100': '#ffbdbd', + '--red-200': '#ffa79a', + '--red-300': '#ff7f72', + '--red-400': '#ff5454', + '--red-500': '#e82525', + '--red-600': '#8b1312', + '--red-700': '#550807', + '--red-800': '#380303', + '--orange-50': '#ffefe9', + '--orange-100': '#fdd5c8', + '--orange-200': '#f9b29a', + '--orange-300': '#f28b68', + '--orange-400': '#e66536', + '--orange-500': '#b04b27', + '--orange-600': '#793118', + '--orange-700': '#491b0b', + '--orange-800': '#300f05', + '--yellow-50': '#fff2d7', + '--yellow-100': '#ffe09d', + '--yellow-200': '#ffc954', + '--yellow-300': '#da9f21', + '--yellow-400': '#e89325', + '--yellow-500': '#8e6711', + '--yellow-600': '#614509', + '--yellow-700': '#3a2803', + '--yellow-800': '#251801', + '--violet-50': '#f5f1ff', + '--violet-100': '#e0c7ff', + '--violet-200': '#cbb7ff', + '--violet-300': '#c190ff', + '--violet-400': '#a070fe', + '--violet-500': '#7d26e8', + '--violet-600': '#5a17a9', + '--violet-700': '#350a69', + '--violet-800': '#220446', + '--violet-dusty-50': '#f1f5f4', + '--violet-dusty-100': '#dceeeb', + '--violet-dusty-200': '#b8cac8', + '--violet-dusty-300': '#96b1af', + '--violet-dusty-400': '#7b9996', + '--violet-dusty-500': '#5c7472', + '--violet-dusty-600': '#3e4e4d', + '--violet-dusty-700': '#232e2d', + '--violet-dusty-800': '#151c1c', + '--pink-50': '#fff0ff', + '--pink-100': '#ffd3ff', + '--pink-200': '#ffa9fa', + '--pink-300': '#ff87eb', + '--pink-400': '#e14adf', + '--pink-500': '#b229b9', + '--pink-600': '#7d0480', + '--pink-700': '#4d0050', + '--pink-800': '#340439', + '--salad-50': '#eaf8eb', + '--salad-100': '#c4ffba', + '--salad-200': '#89ff75', + '--salad-300': '#44c15d', + '--salad-400': '#44ab58', + '--salad-500': '#328242', + '--salad-600': '#20582b', + '--salad-700': '#0f3417', + '--salad-800': '#07210c', + '--intergalactic-bg-primary-neutral': '#ffffff', + '--intergalactic-bg-primary-neutral-hover': 'rgba(240, 241, 242, 0.6)', + '--intergalactic-bg-primary-neutral-active': 'rgba(222, 223, 226, 0.8)', + '--intergalactic-bg-primary-info': '#2969ff', + '--intergalactic-bg-primary-success': '#16f0bf', + '--intergalactic-bg-primary-critical': '#ff5454', + '--intergalactic-bg-primary-warning': '#f28b68', + '--intergalactic-bg-primary-highlight': '#e0c7ff', + '--intergalactic-bg-primary-advertising': '#181e15', + '--intergalactic-bg-primary-muted': '#6c6e79', + '--intergalactic-bg-primary-invert': '#181e15', + '--intergalactic-bg-primary-invert-hover': '#2a2b30', + '--intergalactic-bg-primary-invert-active': '#484a52', + '--intergalactic-bg-secondary-neutral': 'rgba(240, 241, 242, 0.6)', + '--intergalactic-bg-secondary-neutral-hover': 'rgba(222, 223, 226, 0.8)', + '--intergalactic-bg-secondary-neutral-active': '#d1d2d5', + '--intergalactic-bg-secondary-info': 'rgba(41, 105, 255, 0.1)', + '--intergalactic-bg-secondary-info-hover': 'rgba(41, 105, 255, 0.2)', + '--intergalactic-bg-secondary-info-active': 'rgba(41, 105, 255, 0.3)', + '--intergalactic-bg-secondary-success': 'rgba(22, 240, 191, 0.2)', + '--intergalactic-bg-secondary-success-hover': 'rgba(22, 240, 191, 0.4)', + '--intergalactic-bg-secondary-success-active': 'rgba(22, 240, 191, 0.6)', + '--intergalactic-bg-secondary-critical': 'rgba(255, 84, 84, 0.2)', + '--intergalactic-bg-secondary-critical-hover': 'rgba(255, 84, 84, 0.4)', + '--intergalactic-bg-secondary-critical-active': 'rgba(255, 84, 84, 0.6)', + '--intergalactic-bg-secondary-warning': '#ffefe9', + '--intergalactic-bg-secondary-warning-hover': 'rgba(253, 213, 200, 0.6)', + '--intergalactic-bg-secondary-warning-active': '#fdd5c8', + '--intergalactic-bg-secondary-highlight': '#f5f1ff', + '--intergalactic-bg-secondary-highlight-hover': 'rgba(224, 199, 255, 0.6)', + '--intergalactic-bg-secondary-highlight-active': '#e0c7ff', + '--intergalactic-bg-secondary-advertising': '#a3f9e5', + '--intergalactic-bg-secondary-advertising-hover': 'rgba(22, 240, 191, 0.6)', + '--intergalactic-bg-secondary-advertising-active': '#16f0bf', + '--intergalactic-bg-highlight-results': 'rgba(224, 199, 255, 0.4)', + '--intergalactic-bg-highlight-focus': 'rgba(112, 155, 255, 0.2)', + '--intergalactic-text-primary': '#181e15', + '--intergalactic-text-secondary': '#6c6e79', + '--intergalactic-text-placeholder': '#90929a', + '--intergalactic-text-success': '#0faa88', + '--intergalactic-text-success-hover-active': '#0c8266', + '--intergalactic-text-critical': '#ff5454', + '--intergalactic-text-critical-hover-active': '#e82525', + '--intergalactic-text-primary-invert': '#ffffff', + '--intergalactic-text-secondary-invert': 'rgba(255, 255, 255, 0.8)', + '--intergalactic-text-link': '#2969ff', + '--intergalactic-text-link-hover-active': '#1640a1', + '--intergalactic-text-link-invert': '#d0e0fe', + '--intergalactic-text-link-invert-hover': '#bdd1ff', + '--intergalactic-text-link-visited': '#a070fe', + '--intergalactic-text-hint': '#6c6e79', + '--intergalactic-text-hint-hover-active': '#484a52', + '--intergalactic-text-hint-invert': '#dedfe2', + '--intergalactic-text-hint-invert-hover-active': '#d1d2d5', + '--intergalactic-text-large-secondary': '#a9aab1', + '--intergalactic-text-large-info': '#2969ff', + '--intergalactic-text-large-info-hover-active': '#1640a1', + '--intergalactic-text-large-success': '#13c79e', + '--intergalactic-text-large-success-hover-active': '#0faa88', + '--intergalactic-text-large-critical': '#ff5454', + '--intergalactic-text-large-critical-hover-active': '#e82525', + '--intergalactic-text-advertising': '#7d26e8', + '--intergalactic-border-primary': 'rgba(222, 223, 226, 0.9)', + '--intergalactic-border-secondary': 'rgba(222, 223, 226, 0.7)', + '--intergalactic-border-info': '#bdd1ff', + '--intergalactic-border-info-active': 'rgba(41, 105, 255, 0.5)', + '--intergalactic-border-success': '#13c79e', + '--intergalactic-border-success-active': '#0faa88', + '--intergalactic-border-critical': '#ff7f72', + '--intergalactic-border-critical-active': '#ff5454', + '--intergalactic-border-warning': '#f9b29a', + '--intergalactic-border-warning-active': '#f28b68', + '--intergalactic-border-primary-invert': '#ffffff', + '--intergalactic-border-secondary-invert': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-border-tooltip-invert': '#6c6e79', + '--intergalactic-border-table-accent': 'rgba(222, 223, 226, 0.9)', + '--intergalactic-border-date-picker-range-comparison': '#a070fe', + '--intergalactic-border-critical-pattern': 'repeating-linear-gradient(315deg, rgba(255, 84, 84, 1) 0, rgba(255, 84, 84, 1) 2px, transparent 0, transparent 50%)', + '--intergalactic-control-switch-bg': '#d1d2d5', + '--intergalactic-control-primary-info': '#181e15', + '--intergalactic-control-primary-info-hover': '#c190ff', + '--intergalactic-control-primary-info-active': '#a070fe', + '--intergalactic-control-primary-success': '#13c79e', + '--intergalactic-control-primary-success-hover': '#0faa88', + '--intergalactic-control-primary-success-active': '#0c8266', + '--intergalactic-control-primary-critical': '#ff5454', + '--intergalactic-control-primary-critical-hover': '#e82525', + '--intergalactic-control-primary-critical-active': '#8b1312', + '--intergalactic-control-primary-brand': '#c190ff', + '--intergalactic-control-primary-brand-hover': '#a070fe', + '--intergalactic-control-primary-brand-active': '#7d26e8', + '--intergalactic-control-primary-advertising': '#c190ff', + '--intergalactic-control-primary-advertising-hover': '#181e15', + '--intergalactic-control-primary-advertising-active': '#181e15', + '--intergalactic-control-primary-invert': '#ffffff', + '--intergalactic-control-primary-invert-hover': '#f0f1f2', + '--intergalactic-control-primary-invert-active': '#dedfe2', + '--intergalactic-control-secondary-neutral': 'rgba(123, 153, 150, 0.1)', + '--intergalactic-control-secondary-neutral-hover': 'rgba(123, 153, 150, 0.2)', + '--intergalactic-control-secondary-neutral-active': 'rgba(123, 153, 150, 0.3)', + '--intergalactic-control-secondary-info': 'rgba(41, 105, 255, 0.05)', + '--intergalactic-control-secondary-info-hover': 'rgba(41, 105, 255, 0.2)', + '--intergalactic-control-secondary-info-active': 'rgba(41, 105, 255, 0.3)', + '--intergalactic-control-secondary-invert': 'rgba(255, 255, 255, 0.05)', + '--intergalactic-control-secondary-invert-hover': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-control-secondary-invert-active': 'rgba(255, 255, 255, 0.2)', + '--intergalactic-control-tertiary-neutral': 'rgba(123, 153, 150, 0)', + '--intergalactic-control-tertiary-neutral-hover': 'rgba(123, 153, 150, 0.1)', + '--intergalactic-control-tertiary-neutral-active': 'rgba(123, 153, 150, 0.2)', + '--intergalactic-control-tertiary-info': 'rgba(112, 155, 255, 0)', + '--intergalactic-control-tertiary-info-hover': 'rgba(112, 155, 255, 0.2)', + '--intergalactic-control-tertiary-info-active': 'rgba(112, 155, 255, 0.3)', + '--intergalactic-control-tertiary-invert': 'rgba(255, 255, 255, 0)', + '--intergalactic-control-tertiary-invert-hover': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-control-tertiary-invert-active': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-icon-primary-neutral': '#90929a', + '--intergalactic-icon-primary-neutral-hover-active': '#6c6e79', + '--intergalactic-icon-primary-info': '#709bff', + '--intergalactic-icon-primary-info-hover-active': '#2969ff', + '--intergalactic-icon-primary-success': '#0faa88', + '--intergalactic-icon-primary-success-hover-active': '#0c8266', + '--intergalactic-icon-primary-critical': '#ff5454', + '--intergalactic-icon-primary-critical-hover-active': '#e82525', + '--intergalactic-icon-primary-warning': '#e66536', + '--intergalactic-icon-primary-warning-hover-active': '#b04b27', + '--intergalactic-icon-primary-invert': '#ffffff', + '--intergalactic-icon-primary-invert-hover-active': '#dedfe2', + '--intergalactic-icon-secondary-neutral': '#a9aab1', + '--intergalactic-icon-secondary-neutral-hover-active': '#90929a', + '--intergalactic-icon-secondary-info': '#83aaf7', + '--intergalactic-icon-secondary-info-hover-active': '#709bff', + '--intergalactic-icon-secondary-success': '#13c79e', + '--intergalactic-icon-secondary-success-hover-active': '#0faa88', + '--intergalactic-icon-secondary-critical': '#ff7f72', + '--intergalactic-icon-secondary-critical-hover-active': '#ff5454', + '--intergalactic-icon-secondary-warning': '#f28b68', + '--intergalactic-icon-secondary-warning-hover-active': '#e66536', + '--intergalactic-icon-non-interactive': '#181e15', + '--intergalactic-illustration-red': '#ff5454', + '--intergalactic-illustration-orange': '#f28b68', + '--intergalactic-illustration-yellow': '#ffc954', + '--intergalactic-illustration-salad': '#89ff75', + '--intergalactic-illustration-green': '#16f0bf', + '--intergalactic-illustration-blue': '#709bff', + '--intergalactic-illustration-violet': '#c190ff', + '--intergalactic-illustration-pink': '#e14adf', + '--intergalactic-date-picker-cell': '#ffffff', + '--intergalactic-date-picker-cell-current': '#181e15', + '--intergalactic-date-picker-cell-hover': 'rgba(123, 153, 150, 0.1)', + '--intergalactic-date-picker-cell-range': 'rgba(41, 105, 255, 0.2)', + '--intergalactic-date-picker-cell-range-hover': 'rgba(41, 105, 255, 0.3)', + '--intergalactic-date-picker-cell-active': '#2969ff', + '--intergalactic-date-picker-cell-active-hover': '#1640a1', + '--intergalactic-date-picker-cell-current-invert': 'rgba(255, 255, 255, 0.5)', + '--intergalactic-date-picker-cell-comparison-active': '#a070fe', + '--intergalactic-date-picker-cell-comparison-active-hover': '#7d26e8', + '--intergalactic-dropdown-menu-item': '#ffffff', + '--intergalactic-dropdown-menu-item-hover': 'rgba(123, 153, 150, 0.1)', + '--intergalactic-dropdown-menu-item-selected': 'rgba(123, 153, 150, 0.2)', + '--intergalactic-dropdown-menu-item-selected-hover': 'rgba(123, 153, 150, 0.2)', + '--intergalactic-feature-popover-bg': '#e0c7ff', + '--intergalactic-feature-popover-dot-outer-border': '#e0c7ff', + '--intergalactic-feature-popover-bg-neutral': '#181e15', + '--intergalactic-feature-popover-dot-neutral': '#c190ff', + '--intergalactic-feature-popover-dot-neutral-outer-border': '#c190ff', + '--intergalactic-progress-bar-bg': '#dedfe2', + '--intergalactic-progress-bar-bg-hover': '#d1d2d5', + '--intergalactic-progress-bar-bg-invert': 'rgba(255, 255, 255, 0.2)', + '--intergalactic-progress-bar-bg-invert-hover': 'rgba(255, 255, 255, 0.4)', + '--intergalactic-progress-bar-value-gradient': 'linear-gradient(-45deg, rgba(193, 144, 255, 0.9) 25%, rgba(193, 144, 255, 1) 0%, rgba(193, 144, 255, 1) 50%, rgba(193, 144, 255, 0.9) 0%, rgba(193, 144, 255, 0.9) 75%, rgba(193, 144, 255, 1) 0%)', + '--intergalactic-progress-bar-pattern-gradient': 'linear-gradient(-45deg, rgba(222, 223, 226, 0.9) 25%, rgba(222, 223, 226, 1) 0%, rgba(222, 223, 226, 1) 50%, rgba(222, 223, 226, 0.9) 0%, rgba(222, 223, 226, 0.9) 75%, rgba(222, 223, 226, 1) 0%)', + '--intergalactic-progress-bar-value-bg': '#000000', + '--intergalactic-skeleton-bg': 'rgba(222, 223, 226, 0.8)', + '--intergalactic-skeleton-bg-invert': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-slider-rating-normal': '#a9aab1', + '--intergalactic-slider-rating-hover-active': '#c190ff', + '--intergalactic-table-th-primary-cell': 'rgba(222, 223, 226, 0.2)', + '--intergalactic-table-th-primary-cell-hover': '#f0f1f2', + '--intergalactic-table-th-primary-cell-active': '#f0f1f2', + '--intergalactic-table-th-secondary-cell': '#ffffff', + '--intergalactic-table-th-gradient': 'linear-gradient(to right, rgba(240, 241, 242, 0) 0%, rgba(240, 241, 242, 1) 100%)', + '--intergalactic-table-td-cell': '#ffffff', + '--intergalactic-table-td-cell-hover': '#f8f9f9', + '--intergalactic-table-td-cell-active': '#efeff1', + '--intergalactic-table-td-cell-unread': 'rgba(222, 223, 226, 0.2)', + '--intergalactic-table-td-cell-accordion': 'rgba(222, 223, 226, 0.2)', + '--intergalactic-table-td-cell-selected': 'rgba(41, 105, 255, 0.1)', + '--intergalactic-table-td-cell-selected-hover': 'rgba(41, 105, 255, 0.2)', + '--intergalactic-table-td-cell-selected-active': 'rgba(41, 105, 255, 0.3)', + '--intergalactic-table-td-cell-new': 'rgba(22, 240, 191, 0.1)', + '--intergalactic-table-td-cell-new-hover': 'rgba(22, 240, 191, 0.2)', + '--intergalactic-table-td-cell-new-active': 'rgba(22, 240, 191, 0.3)', + '--intergalactic-table-td-cell-critical': 'rgba(232, 37, 37, 0.1)', + '--intergalactic-table-td-cell-critical-hover': 'rgba(232, 37, 37, 0.2)', + '--intergalactic-table-td-cell-critical-active': 'rgba(232, 37, 37, 0.3)', + '--intergalactic-table-td-cell-warning': 'rgba(242, 139, 104, 0.1)', + '--intergalactic-table-td-cell-warning-hover': 'rgba(242, 139, 104, 0.2)', + '--intergalactic-table-td-cell-warning-active': 'rgba(242, 139, 104, 0.3)', + '--intergalactic-brand-primary': '#c190ff', + '--intergalactic-brand-secondary': '#16f0bf', + '--intergalactic-brand-pinterest': '#bd081c', + '--intergalactic-brand-instagram': '#e4405f', + '--intergalactic-brand-youtube': '#ff0000', + '--intergalactic-brand-facebook': '#1877f2', + '--intergalactic-brand-linkedIn': '#0a66c2', + '--intergalactic-brand-twitter': '#1d9bf0', + '--intergalactic-brand-google-blue': '#1a0dab', + '--intergalactic-brand-google-green': '#016723', + '--intergalactic-brand-google-my-business': '#1a73e8', + '--intergalactic-box-shadow-card': '0 0 0 1px rgba(222, 223, 226, 0.5)', + '--intergalactic-box-shadow-card-hover': '3px 3px 30px 0px rgba(24, 30, 21, 0.15)', + '--intergalactic-box-shadow-dnd': '0px 0px 1px 0px rgba(24, 30, 21, 0.16), 0px 12px 40px 0px rgba(24, 30, 21, 0.16)', + '--intergalactic-box-shadow-modal': '0px 3px 8px 0px rgba(24, 30, 21, 0.2)', + '--intergalactic-box-shadow-popper': '0px 1px 12px 0px rgba(24, 30, 21, 0.15)', + '--intergalactic-keyboard-focus-outline': '#2969ff', + '--intergalactic-keyboard-focus-invalid-outline': '#ff5454', + '--intergalactic-keyboard-focus-invalid': '0px 0px 0px 3px rgba(255, 84, 84, 0.5)', + '--intergalactic-keyboard-focus-valid-outline': '#0faa88', + '--intergalactic-keyboard-focus-valid': '0px 0px 0px 3px rgba(15, 170, 136, 0.5)', + '--intergalactic-keyboard-focus-invert-outline': 'rgba(255, 255, 255, 0.8)', + '--intergalactic-keyboard-focus-invert': '0px 0px 0px 3px rgba(255, 255, 255, 0.8)', + '--intergalactic-keyboard-focus': '0px 0px 0px 3px rgba(41, 105, 255, 0.5)', + '--intergalactic-base': 'Inter', + '--intergalactic-lh-800': '117%', + '--intergalactic-lh-700': '110%', + '--intergalactic-lh-600': '125%', + '--intergalactic-lh-500': '117%', + '--intergalactic-lh-400': '120%', + '--intergalactic-lh-300': '150%', + '--intergalactic-lh-200': '142%', + '--intergalactic-lh-100': '133%', + '--intergalactic-semi-bold': '600', + '--intergalactic-bold': '700', + '--intergalactic-regular': '400', + '--intergalactic-medium': '500', + '--intergalactic-fs-50': '10px', + '--intergalactic-fs-100': '12px', + '--intergalactic-fs-200': '14px', + '--intergalactic-fs-300': '16px', + '--intergalactic-fs-400': '20px', + '--intergalactic-fs-500': '24px', + '--intergalactic-fs-600': '32px', + '--intergalactic-fs-700': '36px', + '--intergalactic-fs-800': '48px', + '--intergalactic-compact': '0.3', + '--intergalactic-scale-indent': '4px', + '--intergalactic-form-control-s': '20px', + '--intergalactic-form-control-m': '28px', + '--intergalactic-form-control-l': '40px', + '--intergalactic-spacing-05x': '2px', + '--intergalactic-spacing-1x': '4px', + '--intergalactic-spacing-2x': '8px', + '--intergalactic-spacing-3x': '12px', + '--intergalactic-spacing-4x': '16px', + '--intergalactic-spacing-5x': '20px', + '--intergalactic-spacing-6x': '24px', + '--intergalactic-spacing-8x': '32px', + '--intergalactic-spacing-10x': '40px', + '--intergalactic-spacing-14x': '56px', + '--intergalactic-spacing-20x': '80px', + '--intergalactic-spacing-24x': '96px', + '--intergalactic-spacing-30x': '120px', + '--intergalactic-rounded-extra-small': '1px', + '--intergalactic-rounded-small': '2px', + '--intergalactic-rounded-medium': '2px', + '--intergalactic-rounded-large': '8px', + '--intergalactic-rounded-extra-large': '12px', + '--intergalactic-addon-rounded': '2px', + '--intergalactic-badge-rounded': '2px', + '--intergalactic-chart-rounded': '2px', + '--intergalactic-counter-rounded': '2px', + '--intergalactic-tag-rounded': '2px', + '--intergalactic-switch-rounded': '12px', + '--intergalactic-control-rounded': '2px', + '--intergalactic-progress-bar-rounded': '2px', + '--intergalactic-surface-rounded': '2px', + '--intergalactic-popper-rounded': '2px', + '--intergalactic-modal-rounded': '2px', + '--intergalactic-disabled-opacity': '0.5', + '--intergalactic-screen-extra-small': '320px', + '--intergalactic-screen-small': '768px', + '--intergalactic-screen-medium': '1200px', + '--intergalactic-screen-large': '1920px', + '--intergalactic-overlay-primary': 'rgba(24, 30, 21, 0.7)', + '--intergalactic-overlay-secondary': 'rgba(24, 30, 21, 0.25)', + '--intergalactic-overlay-limitation-primary': 'rgba(240, 241, 242, 0.6)', + '--intergalactic-overlay-limitation-secondary': 'rgba(255, 255, 255, 0.85)', + '--intergalactic-z-index-deep': '-999', + '--intergalactic-z-index-overlay': '500', + '--intergalactic-z-index-modal': '900', + '--intergalactic-z-index-popper': '700', + '--intergalactic-z-index-dropdown': '750', + '--intergalactic-z-index-tooltip': '800', + '--intergalactic-z-index-notice-bubble': '999', + '--intergalactic-tooltip-default': '#ffffff', + '--intergalactic-tooltip-warning': '#ffbdbd', + '--intergalactic-tooltip-invert': '#181e15', + '--intergalactic-neighbor-location-neutral': '#ffffff80', + '--intergalactic-neighbor-location-invert': '#00000080', + '--intergalactic-scroll-area-shadow-left': 'linear-gradient(to right, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-right': 'linear-gradient(to left, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-top': 'linear-gradient(to bottom, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-bottom': 'linear-gradient(to top, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-dropdown-menu-left': 'linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-right': 'linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-bottom': 'linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-top': 'linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-bar-background': 'rgba(24, 30, 21, 0.3)', + '--intergalactic-tag-primary-gray-normal': '#ecedf0', + '--intergalactic-tag-primary-gray-hover-active': '#e3e4e9', + '--intergalactic-tag-primary-blue-normal': '#d0eeff', + '--intergalactic-tag-primary-blue-hover-active': '#b7e4ff', + '--intergalactic-tag-primary-green-normal': '#cff1ea', + '--intergalactic-tag-primary-green-hover-active': '#b7eae0', + '--intergalactic-tag-primary-orange-normal': '#ffddd2', + '--intergalactic-tag-primary-orange-hover-active': '#ffccbb', + '--intergalactic-tag-primary-red-normal': '#ffcedc', + '--intergalactic-tag-primary-red-hover-active': '#ffb6ca', + '--intergalactic-tag-primary-violet-normal': '#f4e3ff', + '--intergalactic-tag-primary-violet-hover-active': '#efd5ff', + '--intergalactic-tag-primary-yellow-normal': '#fee6d1', + '--intergalactic-tag-primary-yellow-hover-active': '#fedab9', + '--intergalactic-tag-primary-white-normal': 'rgba(255, 255, 255, 0.15)', + '--intergalactic-tag-primary-white-hover-active': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-tag-primary-gray-text': '#6c6e79', + '--intergalactic-tag-primary-blue-text': '#2969ff', + '--intergalactic-tag-primary-green-text': '#0c8266', + '--intergalactic-tag-primary-orange-text': '#b04b27', + '--intergalactic-tag-primary-red-text': '#e82525', + '--intergalactic-tag-primary-violet-text': '#7d26e8', + '--intergalactic-tag-primary-yellow-text': '#8e6711', + '--intergalactic-tag-primary-white-text': '#ffffff', + '--intergalactic-tag-secondary-normal': '#ffffff', + '--intergalactic-tag-secondary-hover-active': '#f0f1f2', + '--intergalactic-tag-secondary-white-normal': 'rgba(255, 255, 255, 0)', + '--intergalactic-tag-secondary-white-hover-active': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-tag-secondary-gray-text': '#6c6e79', + '--intergalactic-tag-secondary-white-text': '#ffffff', + '--intergalactic-chart-palette-order-1': '#181e15', + '--intergalactic-chart-palette-order-2': '#c190ff', + '--intergalactic-chart-palette-order-3': '#16f0bf', + '--intergalactic-chart-palette-order-4': '#96b1af', + '--intergalactic-chart-palette-order-5': '#2969ff', + '--intergalactic-chart-palette-order-6': '#e82525', + '--intergalactic-chart-palette-order-7': '#b04b27', + '--intergalactic-chart-palette-order-8': '#8e6711', + '--intergalactic-chart-palette-order-9': '#328242', + '--intergalactic-chart-palette-order-10': '#0c8266', + '--intergalactic-chart-palette-order-11': '#7d26e8', + '--intergalactic-chart-palette-order-12': '#e14adf', + '--intergalactic-chart-palette-order-13': '#709bff', + '--intergalactic-chart-palette-order-14': '#ff5454', + '--intergalactic-chart-palette-order-15': '#e66536', + '--intergalactic-chart-palette-order-16': '#e89325', + '--intergalactic-chart-palette-order-17': '#44ab58', + '--intergalactic-chart-palette-order-18': '#0faa88', + '--intergalactic-chart-palette-order-19': '#a070fe', + '--intergalactic-chart-palette-order-20': '#ff87eb', + '--intergalactic-chart-palette-order-21': '#1640a1', + '--intergalactic-chart-palette-order-22': '#8b1312', + '--intergalactic-chart-palette-order-23': '#793118', + '--intergalactic-chart-palette-order-24': '#045844', + '--intergalactic-chart-palette-order-total-amount': '#90929a', + '--intergalactic-chart-palette-order-other-data': '#d1d2d5', + '--intergalactic-chart-palette-order-null': '#dedfe2', + '--intergalactic-chart-grid-line': 'rgba(222, 223, 226, 0.7)', + '--intergalactic-chart-grid-x-axis': 'rgba(222, 223, 226, 0.9)', + '--intergalactic-chart-grid-y-accent-hover-line': '#d1d2d5', + '--intergalactic-chart-grid-text-label': '#6c6e79', + '--intergalactic-chart-grid-bar-chart-hover': 'rgba(209, 210, 213, 0.2)', + '--intergalactic-chart-grid-bar-chart-base-bg': '#f0f1f2', + '--intergalactic-chart-grid-period-bg': 'rgba(209, 210, 213, 0.2)', + '--intergalactic-chart-grid-period-pattern': 'rgba(24, 30, 21, 0.15)', + '--intergalactic-chart-grid-border': '#ffffff', + '--intergalactic-chart-x-axis-accent-period-active': '#a9aab1', + '--intergalactic-chart-x-axis-accent-data-start-tracking': 'rgba(19, 199, 158, 0.2)', + '--intergalactic-header-bg': 'rgba(240, 241, 242, 0.6)', + '--intergalactic-header-border-primary': 'rgba(222, 223, 226, 0.9)', + '--intergalactic-header-border-secondary': 'rgba(222, 223, 226, 0.7)', + '--intergalactic-sidebar-nav-control-hover': 'rgba(222, 223, 226, 0.3)', + '--intergalactic-sidebar-nav-control-active': '#dedfe2', + '--intergalactic-sidebar-nav-control-text-normal': '#6c6e79', + '--intergalactic-sidebar-nav-control-text-active': '#181e15', + '--intergalactic-sidebar-nav-control-icon-normal': '#a9aab1', + '--intergalactic-sidebar-nav-control-icon-active': '#90929a', + '--intergalactic-duration-extra-slow': '500', + '--intergalactic-duration-slow': '400', + '--intergalactic-duration-medium': '300', + '--intergalactic-duration-fast': '200', + '--intergalactic-duration-extra-fast': '100', + '--intergalactic-duration-switch': '100', + '--intergalactic-duration-popper': '200', + '--intergalactic-duration-control': '200', + '--intergalactic-duration-modal': '200', + '--intergalactic-duration-accordion': '200', + '--intergalactic-duration-counter': '200', +}; diff --git a/semcore/core/src/theme/themes/light-new.css b/semcore/core/src/theme/themes/light-new.css new file mode 100644 index 0000000000..efdd3c08d6 --- /dev/null +++ b/semcore/core/src/theme/themes/light-new.css @@ -0,0 +1,877 @@ +:root { + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --gray-50: #f0f1f2; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --gray-100: #dedfe2; + --gray-200: #d1d2d5; + --gray-300: #a9aab1; + --gray-400: #90929a; + --gray-500: #6c6e79; + --gray-600: #484a52; + --gray-700: #2a2b30; + --gray-800: #181e15; + --gray-white: #ffffff; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --blue-50: #eef4ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --blue-100: #d0e0fe; + --blue-200: #bdd1ff; + --blue-300: #83aaf7; + --blue-400: #709bff; + --blue-500: #2969ff; + --blue-600: #1640a1; + --blue-700: #0a2564; + --blue-800: #041642; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --green-50: #dcfdf0; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --green-100: #a3f9e5; + --green-200: #16f0bf; + --green-300: #13c79e; + --green-400: #0faa88; + --green-500: #0c8266; + --green-600: #045844; + --green-700: #013427; + --green-800: #002118; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --red-50: #ffefec; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --red-100: #ffbdbd; + --red-200: #ffa79a; + --red-300: #ff7f72; + --red-400: #ff5454; + --red-500: #e82525; + --red-600: #8b1312; + --red-700: #550807; + --red-800: #380303; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --orange-50: #ffefe9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --orange-100: #fdd5c8; + --orange-200: #f9b29a; + --orange-300: #f28b68; + --orange-400: #e66536; + --orange-500: #b04b27; + --orange-600: #793118; + --orange-700: #491b0b; + --orange-800: #300f05; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --yellow-50: #fff2d7; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --yellow-100: #ffe09d; + --yellow-200: #ffc954; + --yellow-300: #da9f21; + --yellow-400: #e89325; + --yellow-500: #8e6711; + --yellow-600: #614509; + --yellow-700: #3a2803; + --yellow-800: #251801; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-50: #f5f1ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-100: #e0c7ff; + --violet-200: #cbb7ff; + --violet-300: #c190ff; + --violet-400: #a070fe; + --violet-500: #7d26e8; + --violet-600: #5a17a9; + --violet-700: #350a69; + --violet-800: #220446; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-dusty-50: #f1f5f4; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-dusty-100: #dceeeb; + --violet-dusty-200: #b8cac8; + --violet-dusty-300: #96b1af; + --violet-dusty-400: #7b9996; + --violet-dusty-500: #5c7472; + --violet-dusty-600: #3e4e4d; + --violet-dusty-700: #232e2d; + --violet-dusty-800: #151c1c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --pink-50: #fff0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --pink-100: #ffd3ff; + --pink-200: #ffa9fa; + --pink-300: #ff87eb; + --pink-400: #e14adf; + --pink-500: #b229b9; + --pink-600: #7d0480; + --pink-700: #4d0050; + --pink-800: #340439; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --salad-50: #eaf8eb; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --salad-100: #c4ffba; + --salad-200: #89ff75; + --salad-300: #44c15d; + --salad-400: #44ab58; + --salad-500: #328242; + --salad-600: #20582b; + --salad-700: #0f3417; + --salad-800: #07210c; + /* Primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral: #ffffff; + /* Hover state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-hover: rgba(240, 241, 242, 0.6); + /* Active (selected) state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-active: rgba(222, 223, 226, 0.8); + /* Accent background of the message with regular information. */ + --intergalactic-bg-primary-info: #2969ff; + /* Accent background of the message or banner with information about the successful result. */ + --intergalactic-bg-primary-success: #16f0bf; + /* Accent background of a message or a banner with a critical information. */ + --intergalactic-bg-primary-critical: #ff5454; + /* Accent background of a message or a banner with a warning information. */ + --intergalactic-bg-primary-warning: #f28b68; + /* Accent background of the information you want to highlight. */ + --intergalactic-bg-primary-highlight: #e0c7ff; + /* Accent background for the advertising banners and controls. */ + --intergalactic-bg-primary-advertising: #181e15; + /* Accented muted background for a message with regular information. */ + --intergalactic-bg-primary-muted: #6c6e79; + /* Inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert: #181e15; + /* Hover state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-hover: #2a2b30; + /* Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-active: #484a52; + /* Secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral: rgba(240, 241, 242, 0.6); + /* Hover state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-hover: rgba(222, 223, 226, 0.8); + /* Active (selected) state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-active: #d1d2d5; + /* Secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info: rgba(41, 105, 255, 0.1); + /* Hover state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-hover: rgba(41, 105, 255, 0.2); + /* Active (selected) state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-active: rgba(41, 105, 255, 0.3); + /* Secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success: rgba(22, 240, 191, 0.2); + /* Hover state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-hover: rgba(22, 240, 191, 0.4); + /* Active (selected) state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-active: rgba(22, 240, 191, 0.6); + /* Secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical: rgba(255, 84, 84, 0.2); + /* Hover state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-hover: rgba(255, 84, 84, 0.4); + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-active: rgba(255, 84, 84, 0.6); + /* Secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning: #ffefe9; + /* Hover state of the secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning-hover: rgba(253, 213, 200, 0.6); + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-warning-active: #fdd5c8; + /* Secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight: #f5f1ff; + /* Hover state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-hover: rgba(224, 199, 255, 0.6); + /* Active (selected) state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-active: #e0c7ff; + /* Secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising: #a3f9e5; + /* Hover state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-hover: rgba(22, 240, 191, 0.6); + /* Active (selected) state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-active: #16f0bf; + /* Highlighting the search results. */ + --intergalactic-bg-highlight-results: rgba(224, 199, 255, 0.4); + /* Focusing values in the input. */ + --intergalactic-bg-highlight-focus: rgba(112, 155, 255, 0.2); + /* Primary text. */ + --intergalactic-text-primary: #181e15; + /* Secondary text. */ + --intergalactic-text-secondary: #6c6e79; + /* Placeholder text only. */ + --intergalactic-text-placeholder: #90929a; + /* Text associated with success states and data. */ + --intergalactic-text-success: #0faa88; + /* Hover and active states for the text associated with success states and data. */ + --intergalactic-text-success-hover-active: #0c8266; + /* Text associated with critical states and data. */ + --intergalactic-text-critical: #ff5454; + /* Hover and active states for the text associated with critical states and data. */ + --intergalactic-text-critical-hover-active: #e82525; + /* Inverted version of the primary text. */ + --intergalactic-text-primary-invert: #ffffff; + /* Inverted version of the secondary text. */ + --intergalactic-text-secondary-invert: rgba(255, 255, 255, 0.8); + /* Link text. */ + --intergalactic-text-link: #2969ff; + /* Hover and active states for the link text. */ + --intergalactic-text-link-hover-active: #2969ff; + /* Inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert: #d0e0fe; + /* Hover and active states of the inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert-hover: #bdd1ff; + /* Visited link text. */ + --intergalactic-text-link-visited: #a070fe; + /* Hint link text. */ + --intergalactic-text-hint: #6c6e79; + /* Hover and active states of the hint link text. */ + --intergalactic-text-hint-hover-active: #484a52; + /* Inverted version of the hint link text. */ + --intergalactic-text-hint-invert: #dedfe2; + /* Hover and active states of the inverted version of the hint link text. */ + --intergalactic-text-hint-invert-hover-active: #d1d2d5; + /* Secondary text. Use with font-size ≥20px. */ + --intergalactic-text-large-secondary: #a9aab1; + /* Link text with font-size ≥20px. */ + --intergalactic-text-large-info: #2969ff; + /* Hover and active states of the link text with font-size ≥20px. */ + --intergalactic-text-large-info-hover-active: #1640a1; + /* Text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success: #13c79e; + /* Hover and active states of the text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success-hover-active: #0faa88; + /* Text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical: #ff5454; + /* Hover and active states of the text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical-hover-active: #e82525; + /* Advertising text. */ + --intergalactic-text-advertising: #7d26e8; + /* Neutral primary border. */ + --intergalactic-border-primary: rgba(222, 223, 226, 0.9); + /* Subtle secondary border. */ + --intergalactic-border-secondary: rgba(222, 223, 226, 0.7); + /* Subtle secondary border in the informational message. */ + --intergalactic-border-info: #bdd1ff; + /* Active border in focused input filed. */ + --intergalactic-border-info-active: rgba(41, 105, 255, 0.5); + /* Subtle secondary border in the successful message and input field. */ + --intergalactic-border-success: #13c79e; + /* Active border in the focused input field with valid state. */ + --intergalactic-border-success-active: #0faa88; + /* Subtle secondary border in the critical message and invalid input field. */ + --intergalactic-border-critical: #ff7f72; + /* Active border in the focused input field with invalid state, and active state of the other components with invalid state. */ + --intergalactic-border-critical-active: #ff5454; + /* Subtle secondary border in the warning message. */ + --intergalactic-border-warning: #f9b29a; + /* Active border in components with warning intention. */ + --intergalactic-border-warning-active: #f28b68; + /* Inverted version of the neutral primary border. Use it for borders on the dark or color background. */ + --intergalactic-border-primary-invert: #ffffff; + /* Inverted version of the neutral secondary border. Use it for borders on the dark or color background. */ + --intergalactic-border-secondary-invert: rgba(255, 255, 255, 0.3); + /* Border of the Tooltip with dark theme. */ + --intergalactic-border-tooltip-invert: #6c6e79; + /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */ + --intergalactic-border-table-accent: rgba(222, 223, 226, 0.9); + /* Border color of the second period for the comparison mode in the DatePicker. */ + --intergalactic-border-date-picker-range-comparison: #a070fe; + /* Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states. */ + --intergalactic-border-critical-pattern: repeating-linear-gradient(315deg, rgba(255, 84, 84, 1) 0, rgba(255, 84, 84, 1) 2px, transparent 0, transparent 50%); + /* Subtle background of the Switch control. */ + --intergalactic-control-switch-bg: #d1d2d5; + /* Background of the regular primary control. */ + --intergalactic-control-primary-info: #181e15; + /* Hover state of the regular primary control. */ + --intergalactic-control-primary-info-hover: #a070fe; + /* Active (selected) state of the regular primary control. */ + --intergalactic-control-primary-info-active: #7d26e8; + /* Background of the primary control with successful theme. */ + --intergalactic-control-primary-success: #13c79e; + /* Hover state of the primary control with successful theme. */ + --intergalactic-control-primary-success-hover: #0faa88; + /* Active (selected) state of the primary control with successful theme. */ + --intergalactic-control-primary-success-active: #0c8266; + /* Background of the primary control with danger theme. */ + --intergalactic-control-primary-critical: #ff5454; + /* Hover state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-hover: #e82525; + /* Active (selected) state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-active: #8b1312; + /* Background of the primary brand colored control. */ + --intergalactic-control-primary-brand: #a070fe; + /* Hover state of the primary brand colored control. */ + --intergalactic-control-primary-brand-hover: #7d26e8; + /* Active state of the primary brand colored control. */ + --intergalactic-control-primary-brand-active: #5a17a9; + /* Background of the advertising primary control. */ + --intergalactic-control-primary-advertising: #c190ff; + /* Hover state of the advertising primary control. */ + --intergalactic-control-primary-advertising-hover: #181e15; + /* Active (selected) state of the advertising primary control. */ + --intergalactic-control-primary-advertising-active: #181e15; + /* Inverted background of the primary control. */ + --intergalactic-control-primary-invert: #ffffff; + /* Hover state of the inverted primary control. */ + --intergalactic-control-primary-invert-hover: #f0f1f2; + /* Active (selected) state of the inverted primary control. */ + --intergalactic-control-primary-invert-active: #dedfe2; + /* Background of the regular secondary control. */ + --intergalactic-control-secondary-neutral: rgba(123, 153, 150, 0.1); + /* Hover state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-hover: rgba(123, 153, 150, 0.2); + /* Active (selected) state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-active: rgba(123, 153, 150, 0.3); + /* Background of the accent secondary control (white with 5% blue overlay). */ + --intergalactic-control-secondary-info: color-mix(in srgb, var(--gray-white) 90%, var(--blue-500) 10%); + /* Hover state of the accent secondary control (white with 20% blue overlay). */ + --intergalactic-control-secondary-info-hover: color-mix(in srgb, var(--gray-white) 85%, var(--blue-500) 15%); + /* Active (selected) state of the accent secondary control (white with 30% blue overlay). */ + --intergalactic-control-secondary-info-active: color-mix(in srgb, var(--gray-white) 80%, var(--blue-500) 20%); + /* Background of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert: rgba(255, 255, 255, 0.05); + /* Hover state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-active: rgba(255, 255, 255, 0.2); + /* Background of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral: rgba(123, 153, 150, 0); + /* Hover state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-hover: rgba(123, 153, 150, 0.1); + /* Active (selected) state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-active: rgba(123, 153, 150, 0.2); + /* Background of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info: rgba(112, 155, 255, 0); + /* Hover state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-hover: rgba(112, 155, 255, 0.2); + /* Active (selected) state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-active: rgba(112, 155, 255, 0.3); + /* Background of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert: rgba(255, 255, 255, 0); + /* Hover state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-active: rgba(255, 255, 255, 0.3); + /* Primary neutral icon. */ + --intergalactic-icon-primary-neutral: #a9aab1; + /* Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color. */ + --intergalactic-icon-primary-neutral-hover-active: #90929a; + /* Primary link-lookalike icon. */ + --intergalactic-icon-primary-info: #709bff; + /* Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color. */ + --intergalactic-icon-primary-info-hover-active: #2969ff; + /* Primary success icon. */ + --intergalactic-icon-primary-success: #0faa88; + /* Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color. */ + --intergalactic-icon-primary-success-hover-active: #0c8266; + /* Primary critical icon. */ + --intergalactic-icon-primary-critical: #ff5454; + /* Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color. */ + --intergalactic-icon-primary-critical-hover-active: #e82525; + /* Primary warning icon. */ + --intergalactic-icon-primary-warning: #e66536; + /* Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color. */ + --intergalactic-icon-primary-warning-hover-active: #b04b27; + /* Inverted version of the primary icon. */ + --intergalactic-icon-primary-invert: #ffffff; + /* Hover and active (selected) states of the inverted version of the primary icon. */ + --intergalactic-icon-primary-invert-hover-active: #dedfe2; + /* Secondary neutral icon. */ + --intergalactic-icon-secondary-neutral: #a9aab1; + /* Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color. */ + --intergalactic-icon-secondary-neutral-hover-active: #90929a; + /* Secondary link-lookalike icon. */ + --intergalactic-icon-secondary-info: #83aaf7; + /* Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color. */ + --intergalactic-icon-secondary-info-hover-active: #709bff; + /* Secondary success icon. */ + --intergalactic-icon-secondary-success: #13c79e; + /* Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color. */ + --intergalactic-icon-secondary-success-hover-active: #0faa88; + /* Secondary critical icon. */ + --intergalactic-icon-secondary-critical: #ff7f72; + /* Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color. */ + --intergalactic-icon-secondary-critical-hover-active: #ff5454; + /* Secondary warning icon. */ + --intergalactic-icon-secondary-warning: #f28b68; + /* Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color. */ + --intergalactic-icon-secondary-warning-hover-active: #e66536; + /* Color for the default non-interactive icon. */ + --intergalactic-icon-non-interactive: #181e15; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-red: #ff5454; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-orange: #f28b68; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-yellow: #ffc954; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-salad: #89ff75; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-green: #16f0bf; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-blue: #709bff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-violet: #c190ff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-pink: #e14adf; + /* Default date-picker cell background. */ + --intergalactic-date-picker-cell: #ffffff; + /* Color for marking the cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current: #181e15; + /* Hover state of the default date-picker cell background. */ + --intergalactic-date-picker-cell-hover: rgba(123, 153, 150, 0.1); + /* Background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range: rgba(41, 105, 255, 0.2); + /* Hover state of the background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range-hover: rgba(41, 105, 255, 0.3); + /* Active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active: #2969ff; + /* Hover for the active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active-hover: #1640a1; + /* Color for marking the active cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5); + /* Active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active: #a070fe; + /* Hover for the active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active-hover: #7d26e8; + /* Default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item: #ffffff; + /* Hover state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-hover: rgba(41, 105, 255, 0.1); + /* Active (selected) state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected: rgba(41, 105, 255, 0.2); + /* Hover state for the selected state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected-hover: rgba(41, 105, 255, 0.3); + /* Color of the FeaturePopover background with accent theme. */ + --intergalactic-feature-popover-bg: #e0c7ff; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */ + --intergalactic-feature-popover-dot-outer-border: #e0c7ff; + /* Color of the FeaturePopover background with neutral theme. */ + --intergalactic-feature-popover-bg-neutral: #181e15; + /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral: #c190ff; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral-outer-border: #c190ff; + /* Background color of the ProgressBar. */ + --intergalactic-progress-bar-bg: #dedfe2; + /* Hover state of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-hover: #d1d2d5; + /* Inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert: rgba(255, 255, 255, 0.2); + /* Hover state for the inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert-hover: rgba(255, 255, 255, 0.4); + /* Value with gradient for the ProgressBar. */ + --intergalactic-progress-bar-value-gradient: linear-gradient(-45deg, rgba(193, 144, 255, 0.9) 25%, rgba(193, 144, 255, 1) 0%, rgba(193, 144, 255, 1) 50%, rgba(193, 144, 255, 0.9) 0%, rgba(193, 144, 255, 0.9) 75%, rgba(193, 144, 255, 1) 0%); + /* Null value gradient for the ProgressBar. */ + --intergalactic-progress-bar-pattern-gradient: linear-gradient(-45deg, rgba(222, 223, 226, 0.9) 25%, rgba(222, 223, 226, 1) 0%, rgba(222, 223, 226, 1) 50%, rgba(222, 223, 226, 0.9) 0%, rgba(222, 223, 226, 0.9) 75%, rgba(222, 223, 226, 1) 0%); + /* Base value background for the ProgressBar. It is used to create gradients for the values. */ + --intergalactic-progress-bar-value-bg: #000000; + /* Default color for the Skeleton. */ + --intergalactic-skeleton-bg: rgba(222, 223, 226, 0.8); + /* Inverted version of the default color for the Skeleton. */ + --intergalactic-skeleton-bg-invert: rgba(255, 255, 255, 0.3); + /* Icon color for the SliderRating component in its normal state. */ + --intergalactic-slider-rating-normal: #a9aab1; + /* Icon color for the SliderRating component in its hovered and active states. */ + --intergalactic-slider-rating-hover-active: #c190ff; + /* Background of the header cell in the primary Table. */ + --intergalactic-table-th-primary-cell: rgba(222, 223, 226, 0.2); + /* Background of the hovered header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-hover: #f0f1f2; + /* Background of the active header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-active: #f0f1f2; + /* Background of the header cell in the secondary Table. */ + --intergalactic-table-th-secondary-cell: #ffffff; + /* Background gradient for sorting icon that absolute positioned in the table head. */ + --intergalactic-table-th-gradient: linear-gradient(to right, rgba(240, 241, 242, 0) 0%, rgba(240, 241, 242, 1) 100%); + /* Background of the default cell in the Table. */ + --intergalactic-table-td-cell: #ffffff; + /* Background of the default hovered cell in the Table. */ + --intergalactic-table-td-cell-hover: #f8f9f9; + /* Background of the default active cell in the Table. */ + --intergalactic-table-td-cell-active: #efeff1; + /* Background of the unread cell in the Table. */ + --intergalactic-table-td-cell-unread: rgba(222, 223, 226, 0.2); + /* Background of the cell inside an Accordion in the Table. */ + --intergalactic-table-td-cell-accordion: rgba(222, 223, 226, 0.2); + /* Background of the selected cell in the Table. */ + --intergalactic-table-td-cell-selected: rgba(41, 105, 255, 0.1); + /* Background of the hovered selected cell in the Table. */ + --intergalactic-table-td-cell-selected-hover: rgba(41, 105, 255, 0.2); + /* Background of the active selected cell in the Table. */ + --intergalactic-table-td-cell-selected-active: rgba(41, 105, 255, 0.3); + /* Background of the cell with new information in the Table. */ + --intergalactic-table-td-cell-new: rgba(22, 240, 191, 0.1); + /* Background of the hovered cell with new information in the Table. */ + --intergalactic-table-td-cell-new-hover: rgba(22, 240, 191, 0.2); + /* Background of the active cell with new information in the Table. */ + --intergalactic-table-td-cell-new-active: rgba(22, 240, 191, 0.3); + /* Background of the cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical: rgba(232, 37, 37, 0.1); + /* Background of the hovered cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-hover: rgba(232, 37, 37, 0.2); + /* Background of the active cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-active: rgba(232, 37, 37, 0.3); + /* Background of the cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning: rgba(242, 139, 104, 0.1); + /* Background of the hovered cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-hover: rgba(242, 139, 104, 0.2); + /* Background of the active cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-active: rgba(242, 139, 104, 0.3); + /* Primary brand color. */ + --intergalactic-brand-primary: #c190ff; + /* Secondary brand color. */ + --intergalactic-brand-secondary: #16f0bf; + /* Pinterest brand color. */ + --intergalactic-brand-pinterest: #bd081c; + /* Instagram brand color. */ + --intergalactic-brand-instagram: #e4405f; + /* Youtube brand color. */ + --intergalactic-brand-youtube: #ff0000; + /* Facebook brand color. */ + --intergalactic-brand-facebook: #1877f2; + /* LinkedIn brand color. */ + --intergalactic-brand-linkedIn: #0a66c2; + /* Twitter brand color. */ + --intergalactic-brand-twitter: #1d9bf0; + /* Google brand color for the link. */ + --intergalactic-brand-google-blue: #1a0dab; + /* Google green brand color for the link. */ + --intergalactic-brand-google-green: #016723; + /* Google My Business brand color. */ + --intergalactic-brand-google-my-business: #1a73e8; + /* Default shadow of the Card. */ + --intergalactic-box-shadow-card: 0 0 0 1px rgba(222, 223, 226, 0.5); + /* Hover state for the shadow of the Card with hover state. */ + --intergalactic-box-shadow-card-hover: 3px 3px 30px 0px rgba(24, 30, 21, 0.15); + /* Shadow for show that element are being drag-and-drop. */ + --intergalactic-box-shadow-dnd: 0px 0px 1px 0px rgba(24, 30, 21, 0.16), 0px 12px 40px 0px rgba(24, 30, 21, 0.16); + /* Default shadow if the Modal window. */ + --intergalactic-box-shadow-modal: 0px 3px 8px 0px rgba(24, 30, 21, 0.2); + /* Default shadow of all Poppers, Dropdowns and Tooltips. */ + --intergalactic-box-shadow-popper: 0px 1px 12px 0px rgba(24, 30, 21, 0.15); + /* Color for default keyboard focus outline styles. */ + --intergalactic-keyboard-focus-outline: #2969ff; + /* Color for keyboard focus outline styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid-outline: #ff5454; + /* Keyboard focus styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 84, 84, 0.5); + /* Color for keyboard focus outline styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid-outline: #0faa88; + /* Keyboard focus styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(15, 170, 136, 0.5); + /* Color for keyboard focus outline styles to use on the dark and color background. */ + --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8); + /* Keyboard focus styles for use on dark backgrounds. */ + --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8); + /* Default keyboard focus box-shadow styles. */ + --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(41, 105, 255, 0.5); + /* Base font family. */ + --intergalactic-base: Inter; + /* Use with font-size-800. */ + --intergalactic-lh-800: 117%; + /* Use with font-size-700. */ + --intergalactic-lh-700: 110%; + /* Use with font-size-600. */ + --intergalactic-lh-600: 125%; + /* Use with font-size-500. */ + --intergalactic-lh-500: 117%; + /* Use with font-size-400. */ + --intergalactic-lh-400: 120%; + /* Use with font-size-300. */ + --intergalactic-lh-300: 150%; + /* Use with font-size-200. */ + --intergalactic-lh-200: 142%; + /* Use with font-size-100. */ + --intergalactic-lh-100: 133%; + /* Semi-bold font weight. */ + --intergalactic-semi-bold: 600; + /* Bold font weight. */ + --intergalactic-bold: 700; + /* Regular font weight. */ + --intergalactic-regular: 400; + /* Medium font weight. */ + --intergalactic-medium: 500; + /* Use only for text in Badge component. */ + --intergalactic-fs-50: 10px; + /* Use this font-size with caution for text in some additional messages. Always check its contrast and readability. */ + --intergalactic-fs-100: 12px; + --intergalactic-fs-200: 14px; + --intergalactic-fs-300: 16px; + --intergalactic-fs-400: 20px; + --intergalactic-fs-500: 24px; + --intergalactic-fs-600: 32px; + --intergalactic-fs-700: 36px; + --intergalactic-fs-800: 48px; + /* Compact letter spacing. */ + --intergalactic-compact: 0.3; + /* Base denominator of the design system. */ + --intergalactic-scale-indent: 4px; + /* Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions. */ + --intergalactic-form-control-s: 20px; + /* Default size of the controls. */ + --intergalactic-form-control-m: 28px; + /* Large size of the controls. */ + --intergalactic-form-control-l: 40px; + /* 2px */ + --intergalactic-spacing-05x: 2px; + /* 4px */ + --intergalactic-spacing-1x: 4px; + /* 8px */ + --intergalactic-spacing-2x: 8px; + /* 12px */ + --intergalactic-spacing-3x: 12px; + /* 16px */ + --intergalactic-spacing-4x: 16px; + /* 20px */ + --intergalactic-spacing-5x: 20px; + /* 24px */ + --intergalactic-spacing-6x: 24px; + /* 32px */ + --intergalactic-spacing-8x: 32px; + /* 40px */ + --intergalactic-spacing-10x: 40px; + /* 56px */ + --intergalactic-spacing-14x: 56px; + /* 80px */ + --intergalactic-spacing-20x: 80px; + /* 96px */ + --intergalactic-spacing-24x: 96px; + /* 120px */ + --intergalactic-spacing-30x: 120px; + --intergalactic-rounded-extra-small: 2px; + --intergalactic-rounded-small: 4px; + --intergalactic-rounded-medium: 6px; + --intergalactic-rounded-large: 16px; + --intergalactic-rounded-extra-large: 24px; + /* Use for rounding addons and small controls like Checkbox. */ + --intergalactic-addon-rounded: 4px; + /* Use for rounding Badge. */ + --intergalactic-badge-rounded: 16px; + /* Use for rounding big and small charts like bar, histogram and others. */ + --intergalactic-chart-rounded: 2px; + /* Use for rounding Counter. */ + --intergalactic-counter-rounded: 16px; + /* Use for rounding Tag. */ + --intergalactic-tag-rounded: 24px; + /* Use for rounding Switch. */ + --intergalactic-switch-rounded: 24px; + /* Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc. */ + --intergalactic-control-rounded: 6px; + /* Use for rounding bars: ProgressBar, SliderBar, etc. */ + --intergalactic-progress-bar-rounded: 6px; + /* Use for rounding surfaces like Card, blocks, widgets, Notice, etc. */ + --intergalactic-surface-rounded: 6px; + /* Use for rounding all kinds of poppers and dropdowns. */ + --intergalactic-popper-rounded: 6px; + /* Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard). */ + --intergalactic-modal-rounded: 16px; + /* Use for the disabled state of all kind of the controls and elements. */ + --intergalactic-disabled-opacity: 0.5; + /* Extra small screens (small phones). */ + --intergalactic-screen-extra-small: 320px; + /* Small screens (phones and small tablets). */ + --intergalactic-screen-small: 768px; + /* Medium screens (tablets and small laptops). */ + --intergalactic-screen-medium: 1200px; + /* Large screens (tablets and laptops). */ + --intergalactic-screen-large: 1920px; + /* Use for cover the content under the modal dialogs. */ + --intergalactic-overlay-primary: rgba(24, 30, 21, 0.7); + /* Use for the secondary modal dialogs that were opened upon the other modal dialogs. */ + --intergalactic-overlay-secondary: rgba(24, 30, 21, 0.25); + /* Use as a primary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-primary: rgba(240, 241, 242, 0.6); + /* Use as a secondary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-secondary: rgba(255, 255, 255, 0.85); + --intergalactic-z-index-deep: -999; + --intergalactic-z-index-overlay: 500; + --intergalactic-z-index-modal: 900; + --intergalactic-z-index-popper: 700; + --intergalactic-z-index-dropdown: 750; + --intergalactic-z-index-tooltip: 800; + --intergalactic-z-index-notice-bubble: 999; + /* Default Tooltip background. */ + --intergalactic-tooltip-default: #ffffff; + /* Warning Tooltip background. */ + --intergalactic-tooltip-warning: #ffbdbd; + /* Inverted version of the default Tooltip background. */ + --intergalactic-tooltip-invert: #181e15; + /* Neutral border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-neutral: #ffffff80; + /* Inverted border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-invert: #00000080; + /* Left-to-right fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-left: linear-gradient(to right, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Right-to-left fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-right: linear-gradient(to left, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Top-to-bottom fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-top: linear-gradient(to bottom, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Bottom-to-top fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-bottom: linear-gradient(to top, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Left-to-right fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-left: linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Right-to-left fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-right: linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-bottom: linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Background color for ScrollBar. */ + --intergalactic-scroll-bar-background: rgba(24, 30, 21, 0.3); + /* Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-normal: #ecedf0; + /* Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-hover-active: #e3e4e9; + /* Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-normal: #d0eeff; + /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-hover-active: #b7e4ff; + /* Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-normal: #cff1ea; + /* Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-hover-active: #b7eae0; + /* Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-normal: #ffddd2; + /* Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-hover-active: #ffccbb; + /* Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-normal: #ffcedc; + /* Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-hover-active: #ffb6ca; + /* Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-normal: #f4e3ff; + /* Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-hover-active: #efd5ff; + /* Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-normal: #fee6d1; + /* Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-hover-active: #fedab9; + /* Primary white tag. */ + --intergalactic-tag-primary-white-normal: rgba(255, 255, 255, 0.15); + /* Hover and active (selected) state of the primary white tag. */ + --intergalactic-tag-primary-white-hover-active: rgba(255, 255, 255, 0.3); + /* Gray text for the primary gray tag. */ + --intergalactic-tag-primary-gray-text: #6c6e79; + /* Blue text for the primary blue tag. */ + --intergalactic-tag-primary-blue-text: #2969ff; + /* Green text for the primary green tag. */ + --intergalactic-tag-primary-green-text: #0c8266; + /* Orange text for the primary orange tag. */ + --intergalactic-tag-primary-orange-text: #b04b27; + /* Red text for the primary red tag. */ + --intergalactic-tag-primary-red-text: #e82525; + /* Violet text for the primary violet tag. */ + --intergalactic-tag-primary-violet-text: #7d26e8; + /* Yellow text for the primary yellow tag. */ + --intergalactic-tag-primary-yellow-text: #8e6711; + /* White text for the primary white tag. */ + --intergalactic-tag-primary-white-text: #ffffff; + /* Background color for the default secondary tag. */ + --intergalactic-tag-secondary-normal: #ffffff; + /* Hover and active (selected) states of the background color for the default secondary tag. */ + --intergalactic-tag-secondary-hover-active: #f0f1f2; + /* White secondary tag. */ + --intergalactic-tag-secondary-white-normal: rgba(255, 255, 255, 0); + /* Active state of the secondary white tag. */ + --intergalactic-tag-secondary-white-hover-active: rgba(255, 255, 255, 0.1); + /* Gray text for the default secondary tag. */ + --intergalactic-tag-secondary-gray-text: #6c6e79; + /* White text for the secondary white tag. */ + --intergalactic-tag-secondary-white-text: #ffffff; + /* 1 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-1: #2969ff; + /* 2 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-2: #16f0bf; + /* 3 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-3: #c190ff; + /* 4 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-4: #ff7f72; + /* 5 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-5: #e66536; + /* 6 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-6: #ffc954; + /* 7 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-7: #44c15d; + /* 8 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-8: #e14adf; + /* 9 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-9: #bdd1ff; + /* 10 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-10: #13c79e; + /* 11 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-11: #cbb7ff; + /* 12 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-12: #ff5454; + /* 13 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-13: #f9b29a; + /* 14 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-14: #e89325; + /* 15 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-15: #44ab58; + /* 16 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-16: #ffa9fa; + /* 17 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-17: #83aaf7; + /* 18 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-18: #0faa88; + /* 19 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-19: #c190ff; + /* 20 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-20: #ffa79a; + /* 21 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-21: #f28b68; + /* 22 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-22: #da9f21; + /* 23 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-23: #89ff75; + /* 24 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-24: #ff87eb; + /* Use it to show total value. */ + --intergalactic-chart-palette-order-total-amount: #90929a; + /* Use it to indicate voids, missing or some other data. */ + --intergalactic-chart-palette-order-other-data: #d1d2d5; + /* Use it to show null value. */ + --intergalactic-chart-palette-order-null: #dedfe2; + /* Default chart grid line. */ + --intergalactic-chart-grid-line: rgba(222, 223, 226, 0.7); + /* X-axis line on the chart grid. */ + --intergalactic-chart-grid-x-axis: rgba(222, 223, 226, 0.9); + /* Accent line for the hover state on the chart grid. */ + --intergalactic-chart-grid-y-accent-hover-line: #d1d2d5; + /* Text label on the chart grid. */ + --intergalactic-chart-grid-text-label: #6c6e79; + /* Background color for the hover state of a bar on the chart grid. */ + --intergalactic-chart-grid-bar-chart-hover: rgba(209, 210, 213, 0.2); + /* Default background color of a bar in the BarChart. */ + --intergalactic-chart-grid-bar-chart-base-bg: #f0f1f2; + /* Use for highlighting a period on the chart grid. */ + --intergalactic-chart-grid-period-bg: rgba(209, 210, 213, 0.2); + /* Stripe color for diagonal pattern background. */ + --intergalactic-chart-grid-period-pattern: rgba(24, 30, 21, 0.15); + /* Border for distinguishing data sets and chart dots on the chart grid. */ + --intergalactic-chart-grid-border: #ffffff; + /* Background color for the clickable date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-period-active: #a9aab1; + /* Background color for the "Start tracking" date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(19, 199, 158, 0.2); + --intergalactic-header-bg: rgba(240, 241, 242, 0.6); + --intergalactic-header-border-primary: rgba(222, 223, 226, 0.9); + --intergalactic-header-border-secondary: rgba(222, 223, 226, 0.7); + --intergalactic-sidebar-nav-control-hover: rgba(222, 223, 226, 0.3); + --intergalactic-sidebar-nav-control-active: #dedfe2; + --intergalactic-sidebar-nav-control-text-normal: #6c6e79; + --intergalactic-sidebar-nav-control-text-active: #181e15; + --intergalactic-sidebar-nav-control-icon-normal: #a9aab1; + --intergalactic-sidebar-nav-control-icon-active: #a9aab1; + /* Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen) */ + --intergalactic-duration-extra-slow: 500; + /* Should be used for more larger scale animations (such as page transitions) */ + --intergalactic-duration-slow: 400; + /* Should be used for more complex effects (such as Modal) */ + --intergalactic-duration-medium: 300; + /* Should be used for more complex effects (such as Dropdown or Accordion) */ + --intergalactic-duration-fast: 200; + /* Should be used for simpler effects and relatively small-sized animations (such as fades or color changes) */ + --intergalactic-duration-extra-fast: 100; + /* Use for small controls like Switch or Slider. */ + --intergalactic-duration-switch: 100; + /* Use for components based on popper like Tooltip, Dropdown or Filter trigger. */ + --intergalactic-duration-popper: 200; + /* Use for small controls like Checkbox or Radio. */ + --intergalactic-duration-control: 200; + /* Use for Modal, Fullscreen Modal, Side panel or other kind of windows. */ + --intergalactic-duration-modal: 200; + /* Use for Accordion. */ + --intergalactic-duration-accordion: 200; + /* Use for Summary or Counter. */ + --intergalactic-duration-counter: 200; +} \ No newline at end of file diff --git a/semcore/core/src/theme/themes/light-new.ts b/semcore/core/src/theme/themes/light-new.ts new file mode 100644 index 0000000000..51e9420284 --- /dev/null +++ b/semcore/core/src/theme/themes/light-new.ts @@ -0,0 +1,489 @@ +export default { + '--gray-50': '#f0f1f2', + '--gray-100': '#dedfe2', + '--gray-200': '#d1d2d5', + '--gray-300': '#a9aab1', + '--gray-400': '#90929a', + '--gray-500': '#6c6e79', + '--gray-600': '#484a52', + '--gray-700': '#2a2b30', + '--gray-800': '#181e15', + '--gray-white': '#ffffff', + '--blue-50': '#eef4ff', + '--blue-100': '#d0e0fe', + '--blue-200': '#bdd1ff', + '--blue-300': '#83aaf7', + '--blue-400': '#709bff', + '--blue-500': '#2969ff', + '--blue-600': '#1640a1', + '--blue-700': '#0a2564', + '--blue-800': '#041642', + '--green-50': '#dcfdf0', + '--green-100': '#a3f9e5', + '--green-200': '#16f0bf', + '--green-300': '#13c79e', + '--green-400': '#0faa88', + '--green-500': '#0c8266', + '--green-600': '#045844', + '--green-700': '#013427', + '--green-800': '#002118', + '--red-50': '#ffefec', + '--red-100': '#ffbdbd', + '--red-200': '#ffa79a', + '--red-300': '#ff7f72', + '--red-400': '#ff5454', + '--red-500': '#e82525', + '--red-600': '#8b1312', + '--red-700': '#550807', + '--red-800': '#380303', + '--orange-50': '#ffefe9', + '--orange-100': '#fdd5c8', + '--orange-200': '#f9b29a', + '--orange-300': '#f28b68', + '--orange-400': '#e66536', + '--orange-500': '#b04b27', + '--orange-600': '#793118', + '--orange-700': '#491b0b', + '--orange-800': '#300f05', + '--yellow-50': '#fff2d7', + '--yellow-100': '#ffe09d', + '--yellow-200': '#ffc954', + '--yellow-300': '#da9f21', + '--yellow-400': '#e89325', + '--yellow-500': '#8e6711', + '--yellow-600': '#614509', + '--yellow-700': '#3a2803', + '--yellow-800': '#251801', + '--violet-50': '#f5f1ff', + '--violet-100': '#e0c7ff', + '--violet-200': '#cbb7ff', + '--violet-300': '#c190ff', + '--violet-400': '#a070fe', + '--violet-500': '#7d26e8', + '--violet-600': '#5a17a9', + '--violet-700': '#350a69', + '--violet-800': '#220446', + '--violet-dusty-50': '#f1f5f4', + '--violet-dusty-100': '#dceeeb', + '--violet-dusty-200': '#b8cac8', + '--violet-dusty-300': '#96b1af', + '--violet-dusty-400': '#7b9996', + '--violet-dusty-500': '#5c7472', + '--violet-dusty-600': '#3e4e4d', + '--violet-dusty-700': '#232e2d', + '--violet-dusty-800': '#151c1c', + '--pink-50': '#fff0ff', + '--pink-100': '#ffd3ff', + '--pink-200': '#ffa9fa', + '--pink-300': '#ff87eb', + '--pink-400': '#e14adf', + '--pink-500': '#b229b9', + '--pink-600': '#7d0480', + '--pink-700': '#4d0050', + '--pink-800': '#340439', + '--salad-50': '#eaf8eb', + '--salad-100': '#c4ffba', + '--salad-200': '#89ff75', + '--salad-300': '#44c15d', + '--salad-400': '#44ab58', + '--salad-500': '#328242', + '--salad-600': '#20582b', + '--salad-700': '#0f3417', + '--salad-800': '#07210c', + '--intergalactic-bg-primary-neutral': '#ffffff', + '--intergalactic-bg-primary-neutral-hover': 'rgba(240, 241, 242, 0.6)', + '--intergalactic-bg-primary-neutral-active': 'rgba(222, 223, 226, 0.8)', + '--intergalactic-bg-primary-info': '#2969ff', + '--intergalactic-bg-primary-success': '#16f0bf', + '--intergalactic-bg-primary-critical': '#ff5454', + '--intergalactic-bg-primary-warning': '#f28b68', + '--intergalactic-bg-primary-highlight': '#e0c7ff', + '--intergalactic-bg-primary-advertising': '#181e15', + '--intergalactic-bg-primary-muted': '#6c6e79', + '--intergalactic-bg-primary-invert': '#181e15', + '--intergalactic-bg-primary-invert-hover': '#2a2b30', + '--intergalactic-bg-primary-invert-active': '#484a52', + '--intergalactic-bg-secondary-neutral': 'rgba(240, 241, 242, 0.6)', + '--intergalactic-bg-secondary-neutral-hover': 'rgba(222, 223, 226, 0.8)', + '--intergalactic-bg-secondary-neutral-active': '#d1d2d5', + '--intergalactic-bg-secondary-info': 'rgba(41, 105, 255, 0.1)', + '--intergalactic-bg-secondary-info-hover': 'rgba(41, 105, 255, 0.2)', + '--intergalactic-bg-secondary-info-active': 'rgba(41, 105, 255, 0.3)', + '--intergalactic-bg-secondary-success': 'rgba(22, 240, 191, 0.2)', + '--intergalactic-bg-secondary-success-hover': 'rgba(22, 240, 191, 0.4)', + '--intergalactic-bg-secondary-success-active': 'rgba(22, 240, 191, 0.6)', + '--intergalactic-bg-secondary-critical': 'rgba(255, 84, 84, 0.2)', + '--intergalactic-bg-secondary-critical-hover': 'rgba(255, 84, 84, 0.4)', + '--intergalactic-bg-secondary-critical-active': 'rgba(255, 84, 84, 0.6)', + '--intergalactic-bg-secondary-warning': '#ffefe9', + '--intergalactic-bg-secondary-warning-hover': 'rgba(253, 213, 200, 0.6)', + '--intergalactic-bg-secondary-warning-active': '#fdd5c8', + '--intergalactic-bg-secondary-highlight': '#f5f1ff', + '--intergalactic-bg-secondary-highlight-hover': 'rgba(224, 199, 255, 0.6)', + '--intergalactic-bg-secondary-highlight-active': '#e0c7ff', + '--intergalactic-bg-secondary-advertising': '#a3f9e5', + '--intergalactic-bg-secondary-advertising-hover': 'rgba(22, 240, 191, 0.6)', + '--intergalactic-bg-secondary-advertising-active': '#16f0bf', + '--intergalactic-bg-highlight-results': 'rgba(224, 199, 255, 0.4)', + '--intergalactic-bg-highlight-focus': 'rgba(112, 155, 255, 0.2)', + '--intergalactic-text-primary': '#181e15', + '--intergalactic-text-secondary': '#6c6e79', + '--intergalactic-text-placeholder': '#90929a', + '--intergalactic-text-success': '#0faa88', + '--intergalactic-text-success-hover-active': '#0c8266', + '--intergalactic-text-critical': '#ff5454', + '--intergalactic-text-critical-hover-active': '#e82525', + '--intergalactic-text-primary-invert': '#ffffff', + '--intergalactic-text-secondary-invert': 'rgba(255, 255, 255, 0.8)', + '--intergalactic-text-link': '#2969ff', + '--intergalactic-text-link-hover-active': '#2969ff', + '--intergalactic-text-link-invert': '#d0e0fe', + '--intergalactic-text-link-invert-hover': '#bdd1ff', + '--intergalactic-text-link-visited': '#a070fe', + '--intergalactic-text-hint': '#6c6e79', + '--intergalactic-text-hint-hover-active': '#484a52', + '--intergalactic-text-hint-invert': '#dedfe2', + '--intergalactic-text-hint-invert-hover-active': '#d1d2d5', + '--intergalactic-text-large-secondary': '#a9aab1', + '--intergalactic-text-large-info': '#2969ff', + '--intergalactic-text-large-info-hover-active': '#1640a1', + '--intergalactic-text-large-success': '#13c79e', + '--intergalactic-text-large-success-hover-active': '#0faa88', + '--intergalactic-text-large-critical': '#ff5454', + '--intergalactic-text-large-critical-hover-active': '#e82525', + '--intergalactic-text-advertising': '#7d26e8', + '--intergalactic-border-primary': 'rgba(222, 223, 226, 0.9)', + '--intergalactic-border-secondary': 'rgba(222, 223, 226, 0.7)', + '--intergalactic-border-info': '#bdd1ff', + '--intergalactic-border-info-active': 'rgba(41, 105, 255, 0.5)', + '--intergalactic-border-success': '#13c79e', + '--intergalactic-border-success-active': '#0faa88', + '--intergalactic-border-critical': '#ff7f72', + '--intergalactic-border-critical-active': '#ff5454', + '--intergalactic-border-warning': '#f9b29a', + '--intergalactic-border-warning-active': '#f28b68', + '--intergalactic-border-primary-invert': '#ffffff', + '--intergalactic-border-secondary-invert': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-border-tooltip-invert': '#6c6e79', + '--intergalactic-border-table-accent': 'rgba(222, 223, 226, 0.9)', + '--intergalactic-border-date-picker-range-comparison': '#a070fe', + '--intergalactic-border-critical-pattern': 'repeating-linear-gradient(315deg, rgba(255, 84, 84, 1) 0, rgba(255, 84, 84, 1) 2px, transparent 0, transparent 50%)', + '--intergalactic-control-switch-bg': '#d1d2d5', + '--intergalactic-control-primary-info': '#181e15', + '--intergalactic-control-primary-info-hover': '#a070fe', + '--intergalactic-control-primary-info-active': '#7d26e8', + '--intergalactic-control-primary-success': '#13c79e', + '--intergalactic-control-primary-success-hover': '#0faa88', + '--intergalactic-control-primary-success-active': '#0c8266', + '--intergalactic-control-primary-critical': '#ff5454', + '--intergalactic-control-primary-critical-hover': '#e82525', + '--intergalactic-control-primary-critical-active': '#8b1312', + '--intergalactic-control-primary-brand': '#a070fe', + '--intergalactic-control-primary-brand-hover': '#7d26e8', + '--intergalactic-control-primary-brand-active': '#5a17a9', + '--intergalactic-control-primary-advertising': '#c190ff', + '--intergalactic-control-primary-advertising-hover': '#181e15', + '--intergalactic-control-primary-advertising-active': '#181e15', + '--intergalactic-control-primary-invert': '#ffffff', + '--intergalactic-control-primary-invert-hover': '#f0f1f2', + '--intergalactic-control-primary-invert-active': '#dedfe2', + '--intergalactic-control-secondary-neutral': 'rgba(123, 153, 150, 0.1)', + '--intergalactic-control-secondary-neutral-hover': 'rgba(123, 153, 150, 0.2)', + '--intergalactic-control-secondary-neutral-active': 'rgba(123, 153, 150, 0.3)', + '--intergalactic-control-secondary-info': 'color-mix(in srgb, var(--gray-white) 90%, var(--blue-500) 10%)', + '--intergalactic-control-secondary-info-hover': 'color-mix(in srgb, var(--gray-white) 85%, var(--blue-500) 15%)', + '--intergalactic-control-secondary-info-active': 'color-mix(in srgb, var(--gray-white) 80%, var(--blue-500) 20%)', + '--intergalactic-control-secondary-invert': 'rgba(255, 255, 255, 0.05)', + '--intergalactic-control-secondary-invert-hover': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-control-secondary-invert-active': 'rgba(255, 255, 255, 0.2)', + '--intergalactic-control-tertiary-neutral': 'rgba(123, 153, 150, 0)', + '--intergalactic-control-tertiary-neutral-hover': 'rgba(123, 153, 150, 0.1)', + '--intergalactic-control-tertiary-neutral-active': 'rgba(123, 153, 150, 0.2)', + '--intergalactic-control-tertiary-info': 'rgba(112, 155, 255, 0)', + '--intergalactic-control-tertiary-info-hover': 'rgba(112, 155, 255, 0.2)', + '--intergalactic-control-tertiary-info-active': 'rgba(112, 155, 255, 0.3)', + '--intergalactic-control-tertiary-invert': 'rgba(255, 255, 255, 0)', + '--intergalactic-control-tertiary-invert-hover': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-control-tertiary-invert-active': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-icon-primary-neutral': '#a9aab1', + '--intergalactic-icon-primary-neutral-hover-active': '#90929a', + '--intergalactic-icon-primary-info': '#709bff', + '--intergalactic-icon-primary-info-hover-active': '#2969ff', + '--intergalactic-icon-primary-success': '#0faa88', + '--intergalactic-icon-primary-success-hover-active': '#0c8266', + '--intergalactic-icon-primary-critical': '#ff5454', + '--intergalactic-icon-primary-critical-hover-active': '#e82525', + '--intergalactic-icon-primary-warning': '#e66536', + '--intergalactic-icon-primary-warning-hover-active': '#b04b27', + '--intergalactic-icon-primary-invert': '#ffffff', + '--intergalactic-icon-primary-invert-hover-active': '#dedfe2', + '--intergalactic-icon-secondary-neutral': '#a9aab1', + '--intergalactic-icon-secondary-neutral-hover-active': '#90929a', + '--intergalactic-icon-secondary-info': '#83aaf7', + '--intergalactic-icon-secondary-info-hover-active': '#709bff', + '--intergalactic-icon-secondary-success': '#13c79e', + '--intergalactic-icon-secondary-success-hover-active': '#0faa88', + '--intergalactic-icon-secondary-critical': '#ff7f72', + '--intergalactic-icon-secondary-critical-hover-active': '#ff5454', + '--intergalactic-icon-secondary-warning': '#f28b68', + '--intergalactic-icon-secondary-warning-hover-active': '#e66536', + '--intergalactic-icon-non-interactive': '#181e15', + '--intergalactic-illustration-red': '#ff5454', + '--intergalactic-illustration-orange': '#f28b68', + '--intergalactic-illustration-yellow': '#ffc954', + '--intergalactic-illustration-salad': '#89ff75', + '--intergalactic-illustration-green': '#16f0bf', + '--intergalactic-illustration-blue': '#709bff', + '--intergalactic-illustration-violet': '#c190ff', + '--intergalactic-illustration-pink': '#e14adf', + '--intergalactic-date-picker-cell': '#ffffff', + '--intergalactic-date-picker-cell-current': '#181e15', + '--intergalactic-date-picker-cell-hover': 'rgba(123, 153, 150, 0.1)', + '--intergalactic-date-picker-cell-range': 'rgba(41, 105, 255, 0.2)', + '--intergalactic-date-picker-cell-range-hover': 'rgba(41, 105, 255, 0.3)', + '--intergalactic-date-picker-cell-active': '#2969ff', + '--intergalactic-date-picker-cell-active-hover': '#1640a1', + '--intergalactic-date-picker-cell-current-invert': 'rgba(255, 255, 255, 0.5)', + '--intergalactic-date-picker-cell-comparison-active': '#a070fe', + '--intergalactic-date-picker-cell-comparison-active-hover': '#7d26e8', + '--intergalactic-dropdown-menu-item': '#ffffff', + '--intergalactic-dropdown-menu-item-hover': 'rgba(41, 105, 255, 0.1)', + '--intergalactic-dropdown-menu-item-selected': 'rgba(41, 105, 255, 0.2)', + '--intergalactic-dropdown-menu-item-selected-hover': 'rgba(41, 105, 255, 0.3)', + '--intergalactic-feature-popover-bg': '#e0c7ff', + '--intergalactic-feature-popover-dot-outer-border': '#e0c7ff', + '--intergalactic-feature-popover-bg-neutral': '#181e15', + '--intergalactic-feature-popover-dot-neutral': '#c190ff', + '--intergalactic-feature-popover-dot-neutral-outer-border': '#c190ff', + '--intergalactic-progress-bar-bg': '#dedfe2', + '--intergalactic-progress-bar-bg-hover': '#d1d2d5', + '--intergalactic-progress-bar-bg-invert': 'rgba(255, 255, 255, 0.2)', + '--intergalactic-progress-bar-bg-invert-hover': 'rgba(255, 255, 255, 0.4)', + '--intergalactic-progress-bar-value-gradient': 'linear-gradient(-45deg, rgba(193, 144, 255, 0.9) 25%, rgba(193, 144, 255, 1) 0%, rgba(193, 144, 255, 1) 50%, rgba(193, 144, 255, 0.9) 0%, rgba(193, 144, 255, 0.9) 75%, rgba(193, 144, 255, 1) 0%)', + '--intergalactic-progress-bar-pattern-gradient': 'linear-gradient(-45deg, rgba(222, 223, 226, 0.9) 25%, rgba(222, 223, 226, 1) 0%, rgba(222, 223, 226, 1) 50%, rgba(222, 223, 226, 0.9) 0%, rgba(222, 223, 226, 0.9) 75%, rgba(222, 223, 226, 1) 0%)', + '--intergalactic-progress-bar-value-bg': '#000000', + '--intergalactic-skeleton-bg': 'rgba(222, 223, 226, 0.8)', + '--intergalactic-skeleton-bg-invert': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-slider-rating-normal': '#a9aab1', + '--intergalactic-slider-rating-hover-active': '#c190ff', + '--intergalactic-table-th-primary-cell': 'rgba(222, 223, 226, 0.2)', + '--intergalactic-table-th-primary-cell-hover': '#f0f1f2', + '--intergalactic-table-th-primary-cell-active': '#f0f1f2', + '--intergalactic-table-th-secondary-cell': '#ffffff', + '--intergalactic-table-th-gradient': 'linear-gradient(to right, rgba(240, 241, 242, 0) 0%, rgba(240, 241, 242, 1) 100%)', + '--intergalactic-table-td-cell': '#ffffff', + '--intergalactic-table-td-cell-hover': '#f8f9f9', + '--intergalactic-table-td-cell-active': '#efeff1', + '--intergalactic-table-td-cell-unread': 'rgba(222, 223, 226, 0.2)', + '--intergalactic-table-td-cell-accordion': 'rgba(222, 223, 226, 0.2)', + '--intergalactic-table-td-cell-selected': 'rgba(41, 105, 255, 0.1)', + '--intergalactic-table-td-cell-selected-hover': 'rgba(41, 105, 255, 0.2)', + '--intergalactic-table-td-cell-selected-active': 'rgba(41, 105, 255, 0.3)', + '--intergalactic-table-td-cell-new': 'rgba(22, 240, 191, 0.1)', + '--intergalactic-table-td-cell-new-hover': 'rgba(22, 240, 191, 0.2)', + '--intergalactic-table-td-cell-new-active': 'rgba(22, 240, 191, 0.3)', + '--intergalactic-table-td-cell-critical': 'rgba(232, 37, 37, 0.1)', + '--intergalactic-table-td-cell-critical-hover': 'rgba(232, 37, 37, 0.2)', + '--intergalactic-table-td-cell-critical-active': 'rgba(232, 37, 37, 0.3)', + '--intergalactic-table-td-cell-warning': 'rgba(242, 139, 104, 0.1)', + '--intergalactic-table-td-cell-warning-hover': 'rgba(242, 139, 104, 0.2)', + '--intergalactic-table-td-cell-warning-active': 'rgba(242, 139, 104, 0.3)', + '--intergalactic-brand-primary': '#c190ff', + '--intergalactic-brand-secondary': '#16f0bf', + '--intergalactic-brand-pinterest': '#bd081c', + '--intergalactic-brand-instagram': '#e4405f', + '--intergalactic-brand-youtube': '#ff0000', + '--intergalactic-brand-facebook': '#1877f2', + '--intergalactic-brand-linkedIn': '#0a66c2', + '--intergalactic-brand-twitter': '#1d9bf0', + '--intergalactic-brand-google-blue': '#1a0dab', + '--intergalactic-brand-google-green': '#016723', + '--intergalactic-brand-google-my-business': '#1a73e8', + '--intergalactic-box-shadow-card': '0 0 0 1px rgba(222, 223, 226, 0.5)', + '--intergalactic-box-shadow-card-hover': '3px 3px 30px 0px rgba(24, 30, 21, 0.15)', + '--intergalactic-box-shadow-dnd': '0px 0px 1px 0px rgba(24, 30, 21, 0.16), 0px 12px 40px 0px rgba(24, 30, 21, 0.16)', + '--intergalactic-box-shadow-modal': '0px 3px 8px 0px rgba(24, 30, 21, 0.2)', + '--intergalactic-box-shadow-popper': '0px 1px 12px 0px rgba(24, 30, 21, 0.15)', + '--intergalactic-keyboard-focus-outline': '#2969ff', + '--intergalactic-keyboard-focus-invalid-outline': '#ff5454', + '--intergalactic-keyboard-focus-invalid': '0px 0px 0px 3px rgba(255, 84, 84, 0.5)', + '--intergalactic-keyboard-focus-valid-outline': '#0faa88', + '--intergalactic-keyboard-focus-valid': '0px 0px 0px 3px rgba(15, 170, 136, 0.5)', + '--intergalactic-keyboard-focus-invert-outline': 'rgba(255, 255, 255, 0.8)', + '--intergalactic-keyboard-focus-invert': '0px 0px 0px 3px rgba(255, 255, 255, 0.8)', + '--intergalactic-keyboard-focus': '0px 0px 0px 3px rgba(41, 105, 255, 0.5)', + '--intergalactic-base': 'Inter', + '--intergalactic-lh-800': '117%', + '--intergalactic-lh-700': '110%', + '--intergalactic-lh-600': '125%', + '--intergalactic-lh-500': '117%', + '--intergalactic-lh-400': '120%', + '--intergalactic-lh-300': '150%', + '--intergalactic-lh-200': '142%', + '--intergalactic-lh-100': '133%', + '--intergalactic-semi-bold': '600', + '--intergalactic-bold': '700', + '--intergalactic-regular': '400', + '--intergalactic-medium': '500', + '--intergalactic-fs-50': '10px', + '--intergalactic-fs-100': '12px', + '--intergalactic-fs-200': '14px', + '--intergalactic-fs-300': '16px', + '--intergalactic-fs-400': '20px', + '--intergalactic-fs-500': '24px', + '--intergalactic-fs-600': '32px', + '--intergalactic-fs-700': '36px', + '--intergalactic-fs-800': '48px', + '--intergalactic-compact': '0.3', + '--intergalactic-scale-indent': '4px', + '--intergalactic-form-control-s': '20px', + '--intergalactic-form-control-m': '28px', + '--intergalactic-form-control-l': '40px', + '--intergalactic-spacing-05x': '2px', + '--intergalactic-spacing-1x': '4px', + '--intergalactic-spacing-2x': '8px', + '--intergalactic-spacing-3x': '12px', + '--intergalactic-spacing-4x': '16px', + '--intergalactic-spacing-5x': '20px', + '--intergalactic-spacing-6x': '24px', + '--intergalactic-spacing-8x': '32px', + '--intergalactic-spacing-10x': '40px', + '--intergalactic-spacing-14x': '56px', + '--intergalactic-spacing-20x': '80px', + '--intergalactic-spacing-24x': '96px', + '--intergalactic-spacing-30x': '120px', + '--intergalactic-rounded-extra-small': '2px', + '--intergalactic-rounded-small': '4px', + '--intergalactic-rounded-medium': '6px', + '--intergalactic-rounded-large': '16px', + '--intergalactic-rounded-extra-large': '24px', + '--intergalactic-addon-rounded': '4px', + '--intergalactic-badge-rounded': '16px', + '--intergalactic-chart-rounded': '2px', + '--intergalactic-counter-rounded': '16px', + '--intergalactic-tag-rounded': '24px', + '--intergalactic-switch-rounded': '24px', + '--intergalactic-control-rounded': '6px', + '--intergalactic-progress-bar-rounded': '6px', + '--intergalactic-surface-rounded': '6px', + '--intergalactic-popper-rounded': '6px', + '--intergalactic-modal-rounded': '16px', + '--intergalactic-disabled-opacity': '0.5', + '--intergalactic-screen-extra-small': '320px', + '--intergalactic-screen-small': '768px', + '--intergalactic-screen-medium': '1200px', + '--intergalactic-screen-large': '1920px', + '--intergalactic-overlay-primary': 'rgba(24, 30, 21, 0.7)', + '--intergalactic-overlay-secondary': 'rgba(24, 30, 21, 0.25)', + '--intergalactic-overlay-limitation-primary': 'rgba(240, 241, 242, 0.6)', + '--intergalactic-overlay-limitation-secondary': 'rgba(255, 255, 255, 0.85)', + '--intergalactic-z-index-deep': '-999', + '--intergalactic-z-index-overlay': '500', + '--intergalactic-z-index-modal': '900', + '--intergalactic-z-index-popper': '700', + '--intergalactic-z-index-dropdown': '750', + '--intergalactic-z-index-tooltip': '800', + '--intergalactic-z-index-notice-bubble': '999', + '--intergalactic-tooltip-default': '#ffffff', + '--intergalactic-tooltip-warning': '#ffbdbd', + '--intergalactic-tooltip-invert': '#181e15', + '--intergalactic-neighbor-location-neutral': '#ffffff80', + '--intergalactic-neighbor-location-invert': '#00000080', + '--intergalactic-scroll-area-shadow-left': 'linear-gradient(to right, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-right': 'linear-gradient(to left, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-top': 'linear-gradient(to bottom, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-bottom': 'linear-gradient(to top, rgba(24, 30, 21, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-dropdown-menu-left': 'linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-right': 'linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-bottom': 'linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-top': 'linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-bar-background': 'rgba(24, 30, 21, 0.3)', + '--intergalactic-tag-primary-gray-normal': '#ecedf0', + '--intergalactic-tag-primary-gray-hover-active': '#e3e4e9', + '--intergalactic-tag-primary-blue-normal': '#d0eeff', + '--intergalactic-tag-primary-blue-hover-active': '#b7e4ff', + '--intergalactic-tag-primary-green-normal': '#cff1ea', + '--intergalactic-tag-primary-green-hover-active': '#b7eae0', + '--intergalactic-tag-primary-orange-normal': '#ffddd2', + '--intergalactic-tag-primary-orange-hover-active': '#ffccbb', + '--intergalactic-tag-primary-red-normal': '#ffcedc', + '--intergalactic-tag-primary-red-hover-active': '#ffb6ca', + '--intergalactic-tag-primary-violet-normal': '#f4e3ff', + '--intergalactic-tag-primary-violet-hover-active': '#efd5ff', + '--intergalactic-tag-primary-yellow-normal': '#fee6d1', + '--intergalactic-tag-primary-yellow-hover-active': '#fedab9', + '--intergalactic-tag-primary-white-normal': 'rgba(255, 255, 255, 0.15)', + '--intergalactic-tag-primary-white-hover-active': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-tag-primary-gray-text': '#6c6e79', + '--intergalactic-tag-primary-blue-text': '#2969ff', + '--intergalactic-tag-primary-green-text': '#0c8266', + '--intergalactic-tag-primary-orange-text': '#b04b27', + '--intergalactic-tag-primary-red-text': '#e82525', + '--intergalactic-tag-primary-violet-text': '#7d26e8', + '--intergalactic-tag-primary-yellow-text': '#8e6711', + '--intergalactic-tag-primary-white-text': '#ffffff', + '--intergalactic-tag-secondary-normal': '#ffffff', + '--intergalactic-tag-secondary-hover-active': '#f0f1f2', + '--intergalactic-tag-secondary-white-normal': 'rgba(255, 255, 255, 0)', + '--intergalactic-tag-secondary-white-hover-active': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-tag-secondary-gray-text': '#6c6e79', + '--intergalactic-tag-secondary-white-text': '#ffffff', + '--intergalactic-chart-palette-order-1': '#2969ff', + '--intergalactic-chart-palette-order-2': '#16f0bf', + '--intergalactic-chart-palette-order-3': '#c190ff', + '--intergalactic-chart-palette-order-4': '#ff7f72', + '--intergalactic-chart-palette-order-5': '#e66536', + '--intergalactic-chart-palette-order-6': '#ffc954', + '--intergalactic-chart-palette-order-7': '#44c15d', + '--intergalactic-chart-palette-order-8': '#e14adf', + '--intergalactic-chart-palette-order-9': '#bdd1ff', + '--intergalactic-chart-palette-order-10': '#13c79e', + '--intergalactic-chart-palette-order-11': '#cbb7ff', + '--intergalactic-chart-palette-order-12': '#ff5454', + '--intergalactic-chart-palette-order-13': '#f9b29a', + '--intergalactic-chart-palette-order-14': '#e89325', + '--intergalactic-chart-palette-order-15': '#44ab58', + '--intergalactic-chart-palette-order-16': '#ffa9fa', + '--intergalactic-chart-palette-order-17': '#83aaf7', + '--intergalactic-chart-palette-order-18': '#0faa88', + '--intergalactic-chart-palette-order-19': '#c190ff', + '--intergalactic-chart-palette-order-20': '#ffa79a', + '--intergalactic-chart-palette-order-21': '#f28b68', + '--intergalactic-chart-palette-order-22': '#da9f21', + '--intergalactic-chart-palette-order-23': '#89ff75', + '--intergalactic-chart-palette-order-24': '#ff87eb', + '--intergalactic-chart-palette-order-total-amount': '#90929a', + '--intergalactic-chart-palette-order-other-data': '#d1d2d5', + '--intergalactic-chart-palette-order-null': '#dedfe2', + '--intergalactic-chart-grid-line': 'rgba(222, 223, 226, 0.7)', + '--intergalactic-chart-grid-x-axis': 'rgba(222, 223, 226, 0.9)', + '--intergalactic-chart-grid-y-accent-hover-line': '#d1d2d5', + '--intergalactic-chart-grid-text-label': '#6c6e79', + '--intergalactic-chart-grid-bar-chart-hover': 'rgba(209, 210, 213, 0.2)', + '--intergalactic-chart-grid-bar-chart-base-bg': '#f0f1f2', + '--intergalactic-chart-grid-period-bg': 'rgba(209, 210, 213, 0.2)', + '--intergalactic-chart-grid-period-pattern': 'rgba(24, 30, 21, 0.15)', + '--intergalactic-chart-grid-border': '#ffffff', + '--intergalactic-chart-x-axis-accent-period-active': '#a9aab1', + '--intergalactic-chart-x-axis-accent-data-start-tracking': 'rgba(19, 199, 158, 0.2)', + '--intergalactic-header-bg': 'rgba(240, 241, 242, 0.6)', + '--intergalactic-header-border-primary': 'rgba(222, 223, 226, 0.9)', + '--intergalactic-header-border-secondary': 'rgba(222, 223, 226, 0.7)', + '--intergalactic-sidebar-nav-control-hover': 'rgba(222, 223, 226, 0.3)', + '--intergalactic-sidebar-nav-control-active': '#dedfe2', + '--intergalactic-sidebar-nav-control-text-normal': '#6c6e79', + '--intergalactic-sidebar-nav-control-text-active': '#181e15', + '--intergalactic-sidebar-nav-control-icon-normal': '#a9aab1', + '--intergalactic-sidebar-nav-control-icon-active': '#a9aab1', + '--intergalactic-duration-extra-slow': '500', + '--intergalactic-duration-slow': '400', + '--intergalactic-duration-medium': '300', + '--intergalactic-duration-fast': '200', + '--intergalactic-duration-extra-fast': '100', + '--intergalactic-duration-switch': '100', + '--intergalactic-duration-popper': '200', + '--intergalactic-duration-control': '200', + '--intergalactic-duration-modal': '200', + '--intergalactic-duration-accordion': '200', + '--intergalactic-duration-counter': '200', +}; diff --git a/semcore/core/src/theme/themes/lime-green.css b/semcore/core/src/theme/themes/lime-green.css new file mode 100644 index 0000000000..920707d4fd --- /dev/null +++ b/semcore/core/src/theme/themes/lime-green.css @@ -0,0 +1,877 @@ +:root { + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --gray-50: #f7f8f9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --gray-100: #eaeff1; + --gray-200: #d5dfe2; + --gray-300: #b0c4c9; + --gray-400: #85a2ab; + --gray-500: #668791; + --gray-600: #516e78; + --gray-700: #425a62; + --gray-800: #1e262a; + --gray-white: #ffffff; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --blue-50: #eaf0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --blue-100: #bdd1ff; + --blue-200: #9dbaff; + --blue-300: #709bff; + --blue-400: #5487ff; + --blue-500: #2969ff; + --blue-600: #2560e8; + --blue-700: #1d4bb5; + --blue-800: #173a8c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --green-50: #ECF9EF; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --green-100: #C4FFBA; + --green-200: #A9E2B4; + --green-300: #89FF75; + --green-400: #69CD7D; + --green-500: #44C15D; + --green-600: #3EB055; + --green-700: #308942; + --green-800: #256A33; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --red-50: #ffeaea; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --red-100: #ffbdbd; + --red-200: #ff9d9d; + --red-300: #FF5454; + --red-400: #ff5454; + --red-500: #E82525; + --red-600: #e82525; + --red-700: #b51d1d; + --red-800: #8c1717; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --orange-50: #fff1ec; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --orange-100: #ffd3c3; + --orange-200: #ffbda5; + --orange-300: #ff9f7c; + --orange-400: #ff8d63; + --orange-500: #ff703c; + --orange-600: #e86637; + --orange-700: #b5502b; + --orange-800: #8c3e21; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --yellow-50: #fff8ea; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --yellow-100: #FFE09D; + --yellow-200: #ffe09d; + --yellow-300: #FFC954; + --yellow-400: #ffc954; + --yellow-500: #E89325; + --yellow-600: #e8aa25; + --yellow-700: #b5851d; + --yellow-800: #8c6717; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-50: #f3eaff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-100: #dabdff; + --violet-200: #c99dff; + --violet-300: #b070ff; + --violet-400: #a155ff; + --violet-500: #892aff; + --violet-600: #7d26e8; + --violet-700: #611eb5; + --violet-800: #4b178c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-dusty-50: #f5f4ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-dusty-100: #e2ddff; + --violet-dusty-200: #bcb1e9; + --violet-dusty-300: #a79cd6; + --violet-dusty-400: #9083c5; + --violet-dusty-500: #6d619f; + --violet-dusty-600: #4d407e; + --violet-dusty-700: #382e5e; + --violet-dusty-800: #1d113e; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --pink-50: #fff0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --pink-100: #ffd3ff; + --pink-200: #ffa9fa; + --pink-300: #ff87eb; + --pink-400: #e14adf; + --pink-500: #b229b9; + --pink-600: #7d0480; + --pink-700: #4d0050; + --pink-800: #340439; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --salad-50: #e8fef9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --salad-100: #b7faeb; + --salad-200: #95f8e2; + --salad-300: #64f5d4; + --salad-400: #46f3cc; + --salad-500: #18f0bf; + --salad-600: #16daae; + --salad-700: #11aa88; + --salad-800: #0d8469; + /* Primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral: #ffffff; + /* Hover state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-hover: #f7f8f9; + /* Active (selected) state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-active: #eaeff1; + /* Accent background of the message with regular information. */ + --intergalactic-bg-primary-info: #5487ff; + /* Accent background of the message or banner with information about the successful result. */ + --intergalactic-bg-primary-success: #69CD7D; + /* Accent background of a message or a banner with a critical information. */ + --intergalactic-bg-primary-critical: #ff5454; + /* Accent background of a message or a banner with a warning information. */ + --intergalactic-bg-primary-warning: #ff8d63; + /* Accent background of the information you want to highlight. */ + --intergalactic-bg-primary-highlight: #FFE09D; + /* Accent background for the advertising banners and controls. */ + --intergalactic-bg-primary-advertising: #611eb5; + /* Accented muted background for a message with regular information. */ + --intergalactic-bg-primary-muted: #668791; + /* Inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert: #1e262a; + /* Hover state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-hover: #425a62; + /* Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-active: #516e78; + /* Secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral: #f7f8f9; + /* Hover state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-hover: #eaeff1; + /* Active (selected) state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-active: #d5dfe2; + /* Secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info: #eaf0ff; + /* Hover state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-hover: #bdd1ff; + /* Active (selected) state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-active: #9dbaff; + /* Secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success: #ECF9EF; + /* Hover state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-hover: #C4FFBA; + /* Active (selected) state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-active: #A9E2B4; + /* Secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical: #ffeaea; + /* Hover state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-hover: #ffbdbd; + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-active: #ff9d9d; + /* Secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning: #fff1ec; + /* Hover state of the secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning-hover: #ffd3c3; + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-warning-active: #ffbda5; + /* Secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight: #fff8ea; + /* Hover state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-hover: #FFE09D; + /* Active (selected) state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-active: #ffe09d; + /* Secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising: #f3eaff; + /* Hover state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-hover: #dabdff; + /* Active (selected) state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-active: #c99dff; + /* Highlighting the search results. */ + --intergalactic-bg-highlight-results: rgba(255, 201, 84, 0.4); + /* Focusing values in the input. */ + --intergalactic-bg-highlight-focus: rgba(84, 135, 255, 0.2); + /* Primary text. */ + --intergalactic-text-primary: #1e262a; + /* Secondary text. */ + --intergalactic-text-secondary: #668791; + /* Placeholder text only. */ + --intergalactic-text-placeholder: #85a2ab; + /* Text associated with success states and data. */ + --intergalactic-text-success: #44C15D; + /* Hover and active states for the text associated with success states and data. */ + --intergalactic-text-success-hover-active: #3EB055; + /* Text associated with critical states and data. */ + --intergalactic-text-critical: #E82525; + /* Hover and active states for the text associated with critical states and data. */ + --intergalactic-text-critical-hover-active: #e82525; + /* Inverted version of the primary text. */ + --intergalactic-text-primary-invert: #ffffff; + /* Inverted version of the secondary text. */ + --intergalactic-text-secondary-invert: rgba(255, 255, 255, 0.8); + /* Link text. */ + --intergalactic-text-link: #2969ff; + /* Hover and active states for the link text. */ + --intergalactic-text-link-hover-active: #2560e8; + /* Inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert: #9dbaff; + /* Hover and active states of the inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert-hover: #709bff; + /* Visited link text. */ + --intergalactic-text-link-visited: #892aff; + /* Hint link text. */ + --intergalactic-text-hint: #668791; + /* Hover and active states of the hint link text. */ + --intergalactic-text-hint-hover-active: #516e78; + /* Inverted version of the hint link text. */ + --intergalactic-text-hint-invert: #d5dfe2; + /* Hover and active states of the inverted version of the hint link text. */ + --intergalactic-text-hint-invert-hover-active: #b0c4c9; + /* Secondary text. Use with font-size ≥20px. */ + --intergalactic-text-large-secondary: #b0c4c9; + /* Link text with font-size ≥20px. */ + --intergalactic-text-large-info: #5487ff; + /* Hover and active states of the link text with font-size ≥20px. */ + --intergalactic-text-large-info-hover-active: #2969ff; + /* Text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success: #69CD7D; + /* Hover and active states of the text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success-hover-active: #44C15D; + /* Text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical: #ff5454; + /* Hover and active states of the text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical-hover-active: #E82525; + /* Advertising text. */ + --intergalactic-text-advertising: #611eb5; + /* Neutral primary border. */ + --intergalactic-border-primary: #d5dfe2; + /* Subtle secondary border. */ + --intergalactic-border-secondary: #eaeff1; + /* Subtle secondary border in the informational message. */ + --intergalactic-border-info: #9dbaff; + /* Active border in focused input filed. */ + --intergalactic-border-info-active: #1e262a; + /* Subtle secondary border in the successful message and input field. */ + --intergalactic-border-success: #A9E2B4; + /* Active border in the focused input field with valid state. */ + --intergalactic-border-success-active: #44C15D; + /* Subtle secondary border in the critical message and invalid input field. */ + --intergalactic-border-critical: #ff9d9d; + /* Active border in the focused input field with invalid state, and active state of the other components with invalid state. */ + --intergalactic-border-critical-active: #E82525; + /* Subtle secondary border in the warning message. */ + --intergalactic-border-warning: #ffbda5; + /* Active border in components with warning intention. */ + --intergalactic-border-warning-active: #ff703c; + /* Inverted version of the neutral primary border. Use it for borders on the dark or color background. */ + --intergalactic-border-primary-invert: #ffffff; + /* Inverted version of the neutral secondary border. Use it for borders on the dark or color background. */ + --intergalactic-border-secondary-invert: rgba(255, 255, 255, 0.3); + /* Border of the Tooltip with dark theme. */ + --intergalactic-border-tooltip-invert: #668791; + /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */ + --intergalactic-border-table-accent: #b0c4c9; + /* Border color of the second period for the comparison mode in the DatePicker. */ + --intergalactic-border-date-picker-range-comparison: #892aff; + /* Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states. */ + --intergalactic-border-critical-pattern: repeating-linear-gradient(315deg, rgba(232, 37, 37, 1) 0, rgba(232, 37, 37, 1) 2px, transparent 0, transparent 50%); + /* Subtle background of the Switch control. */ + --intergalactic-control-switch-bg: #b0c4c9; + /* Background of the regular primary control. */ + --intergalactic-control-primary-info: #1e262a; + /* Hover state of the regular primary control. */ + --intergalactic-control-primary-info-hover: #1e262a; + /* Active (selected) state of the regular primary control. */ + --intergalactic-control-primary-info-active: #1e262a; + /* Background of the primary control with successful theme. */ + --intergalactic-control-primary-success: #69CD7D; + /* Hover state of the primary control with successful theme. */ + --intergalactic-control-primary-success-hover: #44C15D; + /* Active (selected) state of the primary control with successful theme. */ + --intergalactic-control-primary-success-active: #3EB055; + /* Background of the primary control with danger theme. */ + --intergalactic-control-primary-critical: #ff5454; + /* Hover state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-hover: #E82525; + /* Active (selected) state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-active: #e82525; + /* Background of the primary brand colored control. */ + --intergalactic-control-primary-brand: #ff8d63; + /* Hover state of the primary brand colored control. */ + --intergalactic-control-primary-brand-hover: #ff703c; + /* Active state of the primary brand colored control. */ + --intergalactic-control-primary-brand-active: #e86637; + /* Background of the advertising primary control. */ + --intergalactic-control-primary-advertising: #7d26e8; + /* Hover state of the advertising primary control. */ + --intergalactic-control-primary-advertising-hover: #611eb5; + /* Active (selected) state of the advertising primary control. */ + --intergalactic-control-primary-advertising-active: #892aff; + /* Inverted background of the primary control. */ + --intergalactic-control-primary-invert: #ffffff; + /* Hover state of the inverted primary control. */ + --intergalactic-control-primary-invert-hover: #f7f8f9; + /* Active (selected) state of the inverted primary control. */ + --intergalactic-control-primary-invert-active: #eaeff1; + /* Background of the regular secondary control. */ + --intergalactic-control-secondary-neutral: rgba(133, 162, 171, 0.1); + /* Hover state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-hover: rgba(133, 162, 171, 0.2); + /* Active (selected) state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-active: rgba(133, 162, 171, 0.3); + /* Background of the accent secondary control. */ + --intergalactic-control-secondary-info: rgba(84, 135, 255, 0.1); + /* Hover state of the accent secondary control. */ + --intergalactic-control-secondary-info-hover: rgba(84, 135, 255, 0.2); + /* Active (selected) state of the accent secondary control. */ + --intergalactic-control-secondary-info-active: rgba(84, 135, 255, 0.3); + /* Background of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert: rgba(255, 255, 255, 0.05); + /* Hover state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-active: rgba(255, 255, 255, 0.3); + /* Background of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral: rgba(133, 162, 171, 0); + /* Hover state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-hover: rgba(133, 162, 171, 0.2); + /* Active (selected) state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-active: rgba(133, 162, 171, 0.3); + /* Background of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info: rgba(84, 135, 255, 0); + /* Hover state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-hover: rgba(84, 135, 255, 0.2); + /* Active (selected) state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-active: rgba(84, 135, 255, 0.3); + /* Background of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert: rgba(255, 255, 255, 0); + /* Hover state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-active: rgba(255, 255, 255, 0.3); + /* Primary neutral icon. */ + --intergalactic-icon-primary-neutral: #668791; + /* Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color. */ + --intergalactic-icon-primary-neutral-hover-active: #565861; + /* Primary link-lookalike icon. */ + --intergalactic-icon-primary-info: #2969ff; + /* Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color. */ + --intergalactic-icon-primary-info-hover-active: #0358a1; + /* Primary success icon. */ + --intergalactic-icon-primary-success: #69CD7D; + /* Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color. */ + --intergalactic-icon-primary-success-hover-active: #037e68; + /* Primary critical icon. */ + --intergalactic-icon-primary-critical: #ff5454; + /* Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color. */ + --intergalactic-icon-primary-critical-hover-active: #cc3a42; + /* Primary warning icon. */ + --intergalactic-icon-primary-warning: #ff8d63; + /* Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color. */ + --intergalactic-icon-primary-warning-hover-active: #cc5024; + /* Inverted version of the primary icon. */ + --intergalactic-icon-primary-invert: #ffffff; + /* Hover and active (selected) states of the inverted version of the primary icon. */ + --intergalactic-icon-primary-invert-hover-active: #eaeff1; + /* Secondary neutral icon. */ + --intergalactic-icon-secondary-neutral: #b0c4c9; + /* Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color. */ + --intergalactic-icon-secondary-neutral-hover-active: #878992; + /* Secondary link-lookalike icon. */ + --intergalactic-icon-secondary-info: #709bff; + /* Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color. */ + --intergalactic-icon-secondary-info-hover-active: #2290cc; + /* Secondary success icon. */ + --intergalactic-icon-secondary-success: #89FF75; + /* Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color. */ + --intergalactic-icon-secondary-success-hover-active: #049b75; + /* Secondary critical icon. */ + --intergalactic-icon-secondary-critical: #FF5454; + /* Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color. */ + --intergalactic-icon-secondary-critical-hover-active: #cc6c6b; + /* Secondary warning icon. */ + --intergalactic-icon-secondary-warning: #ff9f7c; + /* Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color. */ + --intergalactic-icon-secondary-warning-hover-active: #cc7036; + /* Color for the default non-interactive icon. */ + --intergalactic-icon-non-interactive: #1e262a; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-red: #ff788f; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-orange: #ff9400; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-yellow: #ffe84d; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-salad: #c7fa73; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-green: #45e0a8; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-blue: #6edbff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-violet: #b880ff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-pink: #ff7ad1; + /* Default date-picker cell background. */ + --intergalactic-date-picker-cell: #ffffff; + /* Color for marking the cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current: #85a2ab; + /* Hover state of the default date-picker cell background. */ + --intergalactic-date-picker-cell-hover: #eaeff1; + /* Background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range: #bdd1ff; + /* Hover state of the background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range-hover: #9dbaff; + /* Active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active: #709bff; + /* Hover for the active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active-hover: #5487ff; + /* Color for marking the active cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5); + /* Active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active: #892aff; + /* Hover for the active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active-hover: #7d26e8; + /* Default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item: #ffffff; + /* Hover state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-hover: #f7f8f9; + /* Active (selected) state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected: rgba(189, 209, 255, 0.7); + /* Hover state for the selected state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected-hover: #bdd1ff; + /* Color of the FeaturePopover background with accent theme. */ + --intergalactic-feature-popover-bg: #FFE09D; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */ + --intergalactic-feature-popover-dot-outer-border: #FFE09D; + /* Color of the FeaturePopover background with neutral theme. */ + --intergalactic-feature-popover-bg-neutral: #1d113e; + /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral: #89FF75; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral-outer-border: #89FF75; + /* Background color of the ProgressBar. */ + --intergalactic-progress-bar-bg: #eaeff1; + /* Hover state of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-hover: #d5dfe2; + /* Inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert: rgba(255, 255, 255, 0.2); + /* Hover state for the inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert-hover: rgba(255, 255, 255, 0.4); + /* Value with gradient for the ProgressBar. */ + --intergalactic-progress-bar-value-gradient: linear-gradient(-45deg, rgba(68, 193, 93, 0.9) 25%, rgba(68, 193, 93, 1) 0%, rgba(68, 193, 93, 1) 50%, rgba(68, 193, 93, 0.9) 0%, rgba(68, 193, 93, 0.9) 75%, rgba(68, 193, 93, 1) 0%); + /* Null value gradient for the ProgressBar. */ + --intergalactic-progress-bar-pattern-gradient: linear-gradient(-45deg, rgba(234, 239, 241, 0.9) 25%, rgba(234, 239, 241, 1) 0%, rgba(234, 239, 241, 1) 50%, rgba(234, 239, 241, 0.9) 0%, rgba(234, 239, 241, 0.9) 75%, rgba(234, 239, 241, 1) 0%); + /* Base value background for the ProgressBar. It is used to create gradients for the values. */ + --intergalactic-progress-bar-value-bg: #000000; + /* Default color for the Skeleton. */ + --intergalactic-skeleton-bg: rgba(234, 239, 241, 0.8); + /* Inverted version of the default color for the Skeleton. */ + --intergalactic-skeleton-bg-invert: rgba(255, 255, 255, 0.3); + /* Icon color for the SliderRating component in its normal state. */ + --intergalactic-slider-rating-normal: #b0c4c9; + /* Icon color for the SliderRating component in its hovered and active states. */ + --intergalactic-slider-rating-hover-active: #ffe09d; + /* Background of the header cell in the primary Table. */ + --intergalactic-table-th-primary-cell: #f7f8f9; + /* Background of the hovered header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-hover: #eaeff1; + /* Background of the active header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-active: #eaeff1; + /* Background of the header cell in the secondary Table. */ + --intergalactic-table-th-secondary-cell: #ffffff; + /* Background gradient for sorting icon that absolute positioned in the table head. */ + --intergalactic-table-th-gradient: linear-gradient(to right, rgba(234, 239, 241, 0) 0%, rgba(234, 239, 241, 1) 100%); + /* Background of the default cell in the Table. */ + --intergalactic-table-td-cell: #ffffff; + /* Background of the default hovered cell in the Table. */ + --intergalactic-table-td-cell-hover: #f4f7f8; + /* Background of the default active cell in the Table. */ + --intergalactic-table-td-cell-active: #eef2f4; + /* Background of the unread cell in the Table. */ + --intergalactic-table-td-cell-unread: #f7f8f9; + /* Background of the cell inside an Accordion in the Table. */ + --intergalactic-table-td-cell-accordion: #f7f8f9; + /* Background of the selected cell in the Table. */ + --intergalactic-table-td-cell-selected: #eaf0ff; + /* Background of the hovered selected cell in the Table. */ + --intergalactic-table-td-cell-selected-hover: #bdd1ff; + /* Background of the active selected cell in the Table. */ + --intergalactic-table-td-cell-selected-active: #bdd1ff; + /* Background of the cell with new information in the Table. */ + --intergalactic-table-td-cell-new: #ECF9EF; + /* Background of the hovered cell with new information in the Table. */ + --intergalactic-table-td-cell-new-hover: #C4FFBA; + /* Background of the active cell with new information in the Table. */ + --intergalactic-table-td-cell-new-active: #C4FFBA; + /* Background of the cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical: #ffeaea; + /* Background of the hovered cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-hover: #ffbdbd; + /* Background of the active cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-active: #ffbdbd; + /* Background of the cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning: #fff1ec; + /* Background of the hovered cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-hover: #ffd3c3; + /* Background of the active cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-active: #ffd3c3; + /* Primary brand color. */ + --intergalactic-brand-primary: #ff8d63; + /* Secondary brand color. */ + --intergalactic-brand-secondary: #611eb5; + /* Pinterest brand color. */ + --intergalactic-brand-pinterest: #bd081c; + /* Instagram brand color. */ + --intergalactic-brand-instagram: #e4405f; + /* Youtube brand color. */ + --intergalactic-brand-youtube: #ff0000; + /* Facebook brand color. */ + --intergalactic-brand-facebook: #1877f2; + /* LinkedIn brand color. */ + --intergalactic-brand-linkedIn: #0a66c2; + /* Twitter brand color. */ + --intergalactic-brand-twitter: #1d9bf0; + /* Google brand color for the link. */ + --intergalactic-brand-google-blue: #1a0dab; + /* Google green brand color for the link. */ + --intergalactic-brand-google-green: #016723; + /* Google My Business brand color. */ + --intergalactic-brand-google-my-business: #1a73e8; + /* Default shadow of the Card. */ + --intergalactic-box-shadow-card: 0 0 0 1px #eaeff1; + /* Hover state for the shadow of the Card with hover state. */ + --intergalactic-box-shadow-card-hover: 3px 3px 30px 0px rgba(30, 38, 42, 0.15); + /* Shadow for show that element are being drag-and-drop. */ + --intergalactic-box-shadow-dnd: 0px 0px 1px 0px rgba(30, 38, 42, 0.16), 0px 12px 40px 0px rgba(30, 38, 42, 0.16); + /* Default shadow if the Modal window. */ + --intergalactic-box-shadow-modal: 0px 3px 8px 0px rgba(30, 38, 42, 0.2); + /* Default shadow of all Poppers, Dropdowns and Tooltips. */ + --intergalactic-box-shadow-popper: 0px 1px 12px 0px rgba(30, 38, 42, 0.15); + /* Color for default keyboard focus outline styles. */ + --intergalactic-keyboard-focus-outline: #1e262a; + /* Color for keyboard focus outline styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid-outline: #ff5454; + /* Keyboard focus styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 84, 84, 0.5); + /* Color for keyboard focus outline styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid-outline: #69CD7D; + /* Keyboard focus styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(105, 205, 125, 0.5); + /* Color for keyboard focus outline styles to use on the dark and color background. */ + --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8); + /* Keyboard focus styles for use on dark backgrounds. */ + --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8); + /* Default keyboard focus box-shadow styles. */ + --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(30, 38, 42, 0.5); + /* Base font family. */ + --intergalactic-base: Inter; + /* Use with font-size-800. */ + --intergalactic-lh-800: 117%; + /* Use with font-size-700. */ + --intergalactic-lh-700: 110%; + /* Use with font-size-600. */ + --intergalactic-lh-600: 125%; + /* Use with font-size-500. */ + --intergalactic-lh-500: 117%; + /* Use with font-size-400. */ + --intergalactic-lh-400: 120%; + /* Use with font-size-300. */ + --intergalactic-lh-300: 150%; + /* Use with font-size-200. */ + --intergalactic-lh-200: 142%; + /* Use with font-size-100. */ + --intergalactic-lh-100: 133%; + /* Semi-bold font weight. */ + --intergalactic-semi-bold: 600; + /* Bold font weight. */ + --intergalactic-bold: 700; + /* Regular font weight. */ + --intergalactic-regular: 400; + /* Medium font weight. */ + --intergalactic-medium: 500; + /* Use only for text in Badge component. */ + --intergalactic-fs-50: 10px; + /* Use this font-size with caution for text in some additional messages. Always check its contrast and readability. */ + --intergalactic-fs-100: 12px; + --intergalactic-fs-200: 14px; + --intergalactic-fs-300: 16px; + --intergalactic-fs-400: 20px; + --intergalactic-fs-500: 24px; + --intergalactic-fs-600: 32px; + --intergalactic-fs-700: 36px; + --intergalactic-fs-800: 48px; + /* Compact letter spacing. */ + --intergalactic-compact: 0.3; + /* Base denominator of the design system. */ + --intergalactic-scale-indent: 4px; + /* Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions. */ + --intergalactic-form-control-s: 20px; + /* Default size of the controls. */ + --intergalactic-form-control-m: 28px; + /* Large size of the controls. */ + --intergalactic-form-control-l: 40px; + /* 2px */ + --intergalactic-spacing-05x: 2px; + /* 4px */ + --intergalactic-spacing-1x: 4px; + /* 8px */ + --intergalactic-spacing-2x: 8px; + /* 12px */ + --intergalactic-spacing-3x: 12px; + /* 16px */ + --intergalactic-spacing-4x: 16px; + /* 20px */ + --intergalactic-spacing-5x: 20px; + /* 24px */ + --intergalactic-spacing-6x: 24px; + /* 32px */ + --intergalactic-spacing-8x: 32px; + /* 40px */ + --intergalactic-spacing-10x: 40px; + /* 56px */ + --intergalactic-spacing-14x: 56px; + /* 80px */ + --intergalactic-spacing-20x: 80px; + /* 96px */ + --intergalactic-spacing-24x: 96px; + /* 120px */ + --intergalactic-spacing-30x: 120px; + --intergalactic-rounded-extra-small: 2px; + --intergalactic-rounded-small: 4px; + --intergalactic-rounded-medium: 6px; + --intergalactic-rounded-large: 12px; + --intergalactic-rounded-extra-large: 24px; + /* Use for rounding addons and small controls like Checkbox. */ + --intergalactic-addon-rounded: 4px; + /* Use for rounding Badge. */ + --intergalactic-badge-rounded: 6px; + /* Use for rounding big and small charts like bar, histogram and others. */ + --intergalactic-chart-rounded: 2px; + /* Use for rounding Counter. */ + --intergalactic-counter-rounded: 12px; + /* Use for rounding Tag. */ + --intergalactic-tag-rounded: 24px; + /* Use for rounding Switch. */ + --intergalactic-switch-rounded: 24px; + /* Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc. */ + --intergalactic-control-rounded: 6px; + /* Use for rounding bars: ProgressBar, SliderBar, etc. */ + --intergalactic-progress-bar-rounded: 6px; + /* Use for rounding surfaces like Card, blocks, widgets, Notice, etc. */ + --intergalactic-surface-rounded: 6px; + /* Use for rounding all kinds of poppers and dropdowns. */ + --intergalactic-popper-rounded: 6px; + /* Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard). */ + --intergalactic-modal-rounded: 12px; + /* Use for the disabled state of all kind of the controls and elements. */ + --intergalactic-disabled-opacity: 0.5; + /* Extra small screens (small phones). */ + --intergalactic-screen-extra-small: 320px; + /* Small screens (phones and small tablets). */ + --intergalactic-screen-small: 768px; + /* Medium screens (tablets and small laptops). */ + --intergalactic-screen-medium: 1200px; + /* Large screens (tablets and laptops). */ + --intergalactic-screen-large: 1920px; + /* Use for cover the content under the modal dialogs. */ + --intergalactic-overlay-primary: rgba(30, 38, 42, 0.7); + /* Use for the secondary modal dialogs that were opened upon the other modal dialogs. */ + --intergalactic-overlay-secondary: rgba(30, 38, 42, 0.4); + /* Use as a primary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-primary: #f7f8f9; + /* Use as a secondary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-secondary: rgba(255, 255, 255, 0.85); + --intergalactic-z-index-deep: -999; + --intergalactic-z-index-overlay: 500; + --intergalactic-z-index-modal: 900; + --intergalactic-z-index-popper: 700; + --intergalactic-z-index-dropdown: 750; + --intergalactic-z-index-tooltip: 800; + --intergalactic-z-index-notice-bubble: 999; + /* Default Tooltip background. */ + --intergalactic-tooltip-default: #ffffff; + /* Warning Tooltip background. */ + --intergalactic-tooltip-warning: #ffbdbd; + /* Inverted version of the default Tooltip background. */ + --intergalactic-tooltip-invert: #1e262a; + /* Neutral border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-neutral: #ffffff80; + /* Inverted border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-invert: #00000080; + /* Left-to-right fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-left: linear-gradient(to right, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Right-to-left fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-right: linear-gradient(to left, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Top-to-bottom fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-top: linear-gradient(to bottom, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Bottom-to-top fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-bottom: linear-gradient(to top, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Left-to-right fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-left: linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Right-to-left fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-right: linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-bottom: linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Background color for ScrollBar. */ + --intergalactic-scroll-bar-background: rgba(30, 38, 42, 0.3); + /* Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-normal: #ecedf0; + /* Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-hover-active: #e3e4e9; + /* Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-normal: #d0eeff; + /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-hover-active: #b7e4ff; + /* Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-normal: #cff1ea; + /* Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-hover-active: #b7eae0; + /* Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-normal: #ffddd2; + /* Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-hover-active: #ffccbb; + /* Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-normal: #ffcedc; + /* Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-hover-active: #ffb6ca; + /* Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-normal: #f4e3ff; + /* Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-hover-active: #efd5ff; + /* Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-normal: #fee6d1; + /* Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-hover-active: #fedab9; + /* Primary white tag. */ + --intergalactic-tag-primary-white-normal: rgba(255, 255, 255, 0.15); + /* Hover and active (selected) state of the primary white tag. */ + --intergalactic-tag-primary-white-hover-active: rgba(255, 255, 255, 0.3); + /* Gray text for the primary gray tag. */ + --intergalactic-tag-primary-gray-text: #668791; + /* Blue text for the primary blue tag. */ + --intergalactic-tag-primary-blue-text: #2969ff; + /* Green text for the primary green tag. */ + --intergalactic-tag-primary-green-text: #44C15D; + /* Orange text for the primary orange tag. */ + --intergalactic-tag-primary-orange-text: #ff703c; + /* Red text for the primary red tag. */ + --intergalactic-tag-primary-red-text: #E82525; + /* Violet text for the primary violet tag. */ + --intergalactic-tag-primary-violet-text: #892aff; + /* Yellow text for the primary yellow tag. */ + --intergalactic-tag-primary-yellow-text: #E89325; + /* White text for the primary white tag. */ + --intergalactic-tag-primary-white-text: #ffffff; + /* Background color for the default secondary tag. */ + --intergalactic-tag-secondary-normal: #ffffff; + /* Hover and active (selected) states of the background color for the default secondary tag. */ + --intergalactic-tag-secondary-hover-active: #f7f8f9; + /* White secondary tag. */ + --intergalactic-tag-secondary-white-normal: rgba(255, 255, 255, 0); + /* Active state of the secondary white tag. */ + --intergalactic-tag-secondary-white-hover-active: rgba(255, 255, 255, 0.1); + /* Gray text for the default secondary tag. */ + --intergalactic-tag-secondary-gray-text: #668791; + /* White text for the secondary white tag. */ + --intergalactic-tag-secondary-white-text: #ffffff; + /* 1 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-1: #709bff; + /* 2 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-2: #A9E2B4; + /* 3 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-3: #ff8d63; + /* 4 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-4: #ff87eb; + /* 5 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-5: #ffe09d; + /* 6 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-6: #a155ff; + /* 7 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-7: #FF5454; + /* 8 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-8: #95f8e2; + /* 9 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-9: #5487ff; + /* 10 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-10: #89FF75; + /* 11 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-11: #ffbda5; + /* 12 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-12: #e14adf; + /* 13 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-13: #FFC954; + /* 14 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-14: #c99dff; + /* 15 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-15: #ff5454; + /* 16 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-16: #64f5d4; + /* 17 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-17: #9dbaff; + /* 18 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-18: #69CD7D; + /* 19 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-19: #ff9f7c; + /* 20 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-20: #ffa9fa; + /* 21 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-21: #ffc954; + /* 22 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-22: #b070ff; + /* 23 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-23: #ff9d9d; + /* 24 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-24: #46f3cc; + /* Use it to show total value. */ + --intergalactic-chart-palette-order-total-amount: #85a2ab; + /* Use it to indicate voids, missing or some other data. */ + --intergalactic-chart-palette-order-other-data: #d5dfe2; + /* Use it to show null value. */ + --intergalactic-chart-palette-order-null: #eaeff1; + /* Default chart grid line. */ + --intergalactic-chart-grid-line: #eaeff1; + /* X-axis line on the chart grid. */ + --intergalactic-chart-grid-x-axis: #d5dfe2; + /* Accent line for the hover state on the chart grid. */ + --intergalactic-chart-grid-y-accent-hover-line: #b0c4c9; + /* Text label on the chart grid. */ + --intergalactic-chart-grid-text-label: #668791; + /* Background color for the hover state of a bar on the chart grid. */ + --intergalactic-chart-grid-bar-chart-hover: rgba(213, 223, 226, 0.3); + /* Default background color of a bar in the BarChart. */ + --intergalactic-chart-grid-bar-chart-base-bg: #eaeff1; + /* Use for highlighting a period on the chart grid. */ + --intergalactic-chart-grid-period-bg: rgba(213, 223, 226, 0.2); + /* Stripe color for diagonal pattern background. */ + --intergalactic-chart-grid-period-pattern: rgba(30, 38, 42, 0.15); + /* Border for distinguishing data sets and chart dots on the chart grid. */ + --intergalactic-chart-grid-border: #ffffff; + /* Background color for the clickable date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-period-active: #668791; + /* Background color for the "Start tracking" date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(105, 205, 125, 0.2); + --intergalactic-header-bg: #382e5e; + --intergalactic-header-border-primary: #382e5e; + --intergalactic-header-border-secondary: #ffffff26; + --intergalactic-sidebar-nav-control-hover: rgba(234, 239, 241, 0.7); + --intergalactic-sidebar-nav-control-active: #e2ddff; + --intergalactic-sidebar-nav-control-text-normal: #6d619f; + --intergalactic-sidebar-nav-control-text-active: #4d407e; + --intergalactic-sidebar-nav-control-icon-normal: #9083c5; + --intergalactic-sidebar-nav-control-icon-active: #4d407e; + /* Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen) */ + --intergalactic-duration-extra-slow: 500; + /* Should be used for more larger scale animations (such as page transitions) */ + --intergalactic-duration-slow: 400; + /* Should be used for more complex effects (such as Modal) */ + --intergalactic-duration-medium: 300; + /* Should be used for more complex effects (such as Dropdown or Accordion) */ + --intergalactic-duration-fast: 200; + /* Should be used for simpler effects and relatively small-sized animations (such as fades or color changes) */ + --intergalactic-duration-extra-fast: 100; + /* Use for small controls like Switch or Slider. */ + --intergalactic-duration-switch: 100; + /* Use for components based on popper like Tooltip, Dropdown or Filter trigger. */ + --intergalactic-duration-popper: 200; + /* Use for small controls like Checkbox or Radio. */ + --intergalactic-duration-control: 200; + /* Use for Modal, Fullscreen Modal, Side panel or other kind of windows. */ + --intergalactic-duration-modal: 200; + /* Use for Accordion. */ + --intergalactic-duration-accordion: 200; + /* Use for Summary or Counter. */ + --intergalactic-duration-counter: 200; +} \ No newline at end of file diff --git a/semcore/core/src/theme/themes/lime-green.ts b/semcore/core/src/theme/themes/lime-green.ts new file mode 100644 index 0000000000..b7bc754b70 --- /dev/null +++ b/semcore/core/src/theme/themes/lime-green.ts @@ -0,0 +1,489 @@ +export default { + '--gray-50': '#f7f8f9', + '--gray-100': '#eaeff1', + '--gray-200': '#d5dfe2', + '--gray-300': '#b0c4c9', + '--gray-400': '#85a2ab', + '--gray-500': '#668791', + '--gray-600': '#516e78', + '--gray-700': '#425a62', + '--gray-800': '#1e262a', + '--gray-white': '#ffffff', + '--blue-50': '#eaf0ff', + '--blue-100': '#bdd1ff', + '--blue-200': '#9dbaff', + '--blue-300': '#709bff', + '--blue-400': '#5487ff', + '--blue-500': '#2969ff', + '--blue-600': '#2560e8', + '--blue-700': '#1d4bb5', + '--blue-800': '#173a8c', + '--green-50': '#ECF9EF', + '--green-100': '#C4FFBA', + '--green-200': '#A9E2B4', + '--green-300': '#89FF75', + '--green-400': '#69CD7D', + '--green-500': '#44C15D', + '--green-600': '#3EB055', + '--green-700': '#308942', + '--green-800': '#256A33', + '--red-50': '#ffeaea', + '--red-100': '#ffbdbd', + '--red-200': '#ff9d9d', + '--red-300': '#FF5454', + '--red-400': '#ff5454', + '--red-500': '#E82525', + '--red-600': '#e82525', + '--red-700': '#b51d1d', + '--red-800': '#8c1717', + '--orange-50': '#fff1ec', + '--orange-100': '#ffd3c3', + '--orange-200': '#ffbda5', + '--orange-300': '#ff9f7c', + '--orange-400': '#ff8d63', + '--orange-500': '#ff703c', + '--orange-600': '#e86637', + '--orange-700': '#b5502b', + '--orange-800': '#8c3e21', + '--yellow-50': '#fff8ea', + '--yellow-100': '#FFE09D', + '--yellow-200': '#ffe09d', + '--yellow-300': '#FFC954', + '--yellow-400': '#ffc954', + '--yellow-500': '#E89325', + '--yellow-600': '#e8aa25', + '--yellow-700': '#b5851d', + '--yellow-800': '#8c6717', + '--violet-50': '#f3eaff', + '--violet-100': '#dabdff', + '--violet-200': '#c99dff', + '--violet-300': '#b070ff', + '--violet-400': '#a155ff', + '--violet-500': '#892aff', + '--violet-600': '#7d26e8', + '--violet-700': '#611eb5', + '--violet-800': '#4b178c', + '--violet-dusty-50': '#f5f4ff', + '--violet-dusty-100': '#e2ddff', + '--violet-dusty-200': '#bcb1e9', + '--violet-dusty-300': '#a79cd6', + '--violet-dusty-400': '#9083c5', + '--violet-dusty-500': '#6d619f', + '--violet-dusty-600': '#4d407e', + '--violet-dusty-700': '#382e5e', + '--violet-dusty-800': '#1d113e', + '--pink-50': '#fff0ff', + '--pink-100': '#ffd3ff', + '--pink-200': '#ffa9fa', + '--pink-300': '#ff87eb', + '--pink-400': '#e14adf', + '--pink-500': '#b229b9', + '--pink-600': '#7d0480', + '--pink-700': '#4d0050', + '--pink-800': '#340439', + '--salad-50': '#e8fef9', + '--salad-100': '#b7faeb', + '--salad-200': '#95f8e2', + '--salad-300': '#64f5d4', + '--salad-400': '#46f3cc', + '--salad-500': '#18f0bf', + '--salad-600': '#16daae', + '--salad-700': '#11aa88', + '--salad-800': '#0d8469', + '--intergalactic-bg-primary-neutral': '#ffffff', + '--intergalactic-bg-primary-neutral-hover': '#f7f8f9', + '--intergalactic-bg-primary-neutral-active': '#eaeff1', + '--intergalactic-bg-primary-info': '#5487ff', + '--intergalactic-bg-primary-success': '#69CD7D', + '--intergalactic-bg-primary-critical': '#ff5454', + '--intergalactic-bg-primary-warning': '#ff8d63', + '--intergalactic-bg-primary-highlight': '#FFE09D', + '--intergalactic-bg-primary-advertising': '#611eb5', + '--intergalactic-bg-primary-muted': '#668791', + '--intergalactic-bg-primary-invert': '#1e262a', + '--intergalactic-bg-primary-invert-hover': '#425a62', + '--intergalactic-bg-primary-invert-active': '#516e78', + '--intergalactic-bg-secondary-neutral': '#f7f8f9', + '--intergalactic-bg-secondary-neutral-hover': '#eaeff1', + '--intergalactic-bg-secondary-neutral-active': '#d5dfe2', + '--intergalactic-bg-secondary-info': '#eaf0ff', + '--intergalactic-bg-secondary-info-hover': '#bdd1ff', + '--intergalactic-bg-secondary-info-active': '#9dbaff', + '--intergalactic-bg-secondary-success': '#ECF9EF', + '--intergalactic-bg-secondary-success-hover': '#C4FFBA', + '--intergalactic-bg-secondary-success-active': '#A9E2B4', + '--intergalactic-bg-secondary-critical': '#ffeaea', + '--intergalactic-bg-secondary-critical-hover': '#ffbdbd', + '--intergalactic-bg-secondary-critical-active': '#ff9d9d', + '--intergalactic-bg-secondary-warning': '#fff1ec', + '--intergalactic-bg-secondary-warning-hover': '#ffd3c3', + '--intergalactic-bg-secondary-warning-active': '#ffbda5', + '--intergalactic-bg-secondary-highlight': '#fff8ea', + '--intergalactic-bg-secondary-highlight-hover': '#FFE09D', + '--intergalactic-bg-secondary-highlight-active': '#ffe09d', + '--intergalactic-bg-secondary-advertising': '#f3eaff', + '--intergalactic-bg-secondary-advertising-hover': '#dabdff', + '--intergalactic-bg-secondary-advertising-active': '#c99dff', + '--intergalactic-bg-highlight-results': 'rgba(255, 201, 84, 0.4)', + '--intergalactic-bg-highlight-focus': 'rgba(84, 135, 255, 0.2)', + '--intergalactic-text-primary': '#1e262a', + '--intergalactic-text-secondary': '#668791', + '--intergalactic-text-placeholder': '#85a2ab', + '--intergalactic-text-success': '#44C15D', + '--intergalactic-text-success-hover-active': '#3EB055', + '--intergalactic-text-critical': '#E82525', + '--intergalactic-text-critical-hover-active': '#e82525', + '--intergalactic-text-primary-invert': '#ffffff', + '--intergalactic-text-secondary-invert': 'rgba(255, 255, 255, 0.8)', + '--intergalactic-text-link': '#2969ff', + '--intergalactic-text-link-hover-active': '#2560e8', + '--intergalactic-text-link-invert': '#9dbaff', + '--intergalactic-text-link-invert-hover': '#709bff', + '--intergalactic-text-link-visited': '#892aff', + '--intergalactic-text-hint': '#668791', + '--intergalactic-text-hint-hover-active': '#516e78', + '--intergalactic-text-hint-invert': '#d5dfe2', + '--intergalactic-text-hint-invert-hover-active': '#b0c4c9', + '--intergalactic-text-large-secondary': '#b0c4c9', + '--intergalactic-text-large-info': '#5487ff', + '--intergalactic-text-large-info-hover-active': '#2969ff', + '--intergalactic-text-large-success': '#69CD7D', + '--intergalactic-text-large-success-hover-active': '#44C15D', + '--intergalactic-text-large-critical': '#ff5454', + '--intergalactic-text-large-critical-hover-active': '#E82525', + '--intergalactic-text-advertising': '#611eb5', + '--intergalactic-border-primary': '#d5dfe2', + '--intergalactic-border-secondary': '#eaeff1', + '--intergalactic-border-info': '#9dbaff', + '--intergalactic-border-info-active': '#1e262a', + '--intergalactic-border-success': '#A9E2B4', + '--intergalactic-border-success-active': '#44C15D', + '--intergalactic-border-critical': '#ff9d9d', + '--intergalactic-border-critical-active': '#E82525', + '--intergalactic-border-warning': '#ffbda5', + '--intergalactic-border-warning-active': '#ff703c', + '--intergalactic-border-primary-invert': '#ffffff', + '--intergalactic-border-secondary-invert': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-border-tooltip-invert': '#668791', + '--intergalactic-border-table-accent': '#b0c4c9', + '--intergalactic-border-date-picker-range-comparison': '#892aff', + '--intergalactic-border-critical-pattern': 'repeating-linear-gradient(315deg, rgba(232, 37, 37, 1) 0, rgba(232, 37, 37, 1) 2px, transparent 0, transparent 50%)', + '--intergalactic-control-switch-bg': '#b0c4c9', + '--intergalactic-control-primary-info': '#1e262a', + '--intergalactic-control-primary-info-hover': '#1e262a', + '--intergalactic-control-primary-info-active': '#1e262a', + '--intergalactic-control-primary-success': '#69CD7D', + '--intergalactic-control-primary-success-hover': '#44C15D', + '--intergalactic-control-primary-success-active': '#3EB055', + '--intergalactic-control-primary-critical': '#ff5454', + '--intergalactic-control-primary-critical-hover': '#E82525', + '--intergalactic-control-primary-critical-active': '#e82525', + '--intergalactic-control-primary-brand': '#ff8d63', + '--intergalactic-control-primary-brand-hover': '#ff703c', + '--intergalactic-control-primary-brand-active': '#e86637', + '--intergalactic-control-primary-advertising': '#7d26e8', + '--intergalactic-control-primary-advertising-hover': '#611eb5', + '--intergalactic-control-primary-advertising-active': '#892aff', + '--intergalactic-control-primary-invert': '#ffffff', + '--intergalactic-control-primary-invert-hover': '#f7f8f9', + '--intergalactic-control-primary-invert-active': '#eaeff1', + '--intergalactic-control-secondary-neutral': 'rgba(133, 162, 171, 0.1)', + '--intergalactic-control-secondary-neutral-hover': 'rgba(133, 162, 171, 0.2)', + '--intergalactic-control-secondary-neutral-active': 'rgba(133, 162, 171, 0.3)', + '--intergalactic-control-secondary-info': 'rgba(84, 135, 255, 0.1)', + '--intergalactic-control-secondary-info-hover': 'rgba(84, 135, 255, 0.2)', + '--intergalactic-control-secondary-info-active': 'rgba(84, 135, 255, 0.3)', + '--intergalactic-control-secondary-invert': 'rgba(255, 255, 255, 0.05)', + '--intergalactic-control-secondary-invert-hover': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-control-secondary-invert-active': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-control-tertiary-neutral': 'rgba(133, 162, 171, 0)', + '--intergalactic-control-tertiary-neutral-hover': 'rgba(133, 162, 171, 0.2)', + '--intergalactic-control-tertiary-neutral-active': 'rgba(133, 162, 171, 0.3)', + '--intergalactic-control-tertiary-info': 'rgba(84, 135, 255, 0)', + '--intergalactic-control-tertiary-info-hover': 'rgba(84, 135, 255, 0.2)', + '--intergalactic-control-tertiary-info-active': 'rgba(84, 135, 255, 0.3)', + '--intergalactic-control-tertiary-invert': 'rgba(255, 255, 255, 0)', + '--intergalactic-control-tertiary-invert-hover': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-control-tertiary-invert-active': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-icon-primary-neutral': '#668791', + '--intergalactic-icon-primary-neutral-hover-active': '#565861', + '--intergalactic-icon-primary-info': '#2969ff', + '--intergalactic-icon-primary-info-hover-active': '#0358a1', + '--intergalactic-icon-primary-success': '#69CD7D', + '--intergalactic-icon-primary-success-hover-active': '#037e68', + '--intergalactic-icon-primary-critical': '#ff5454', + '--intergalactic-icon-primary-critical-hover-active': '#cc3a42', + '--intergalactic-icon-primary-warning': '#ff8d63', + '--intergalactic-icon-primary-warning-hover-active': '#cc5024', + '--intergalactic-icon-primary-invert': '#ffffff', + '--intergalactic-icon-primary-invert-hover-active': '#eaeff1', + '--intergalactic-icon-secondary-neutral': '#b0c4c9', + '--intergalactic-icon-secondary-neutral-hover-active': '#878992', + '--intergalactic-icon-secondary-info': '#709bff', + '--intergalactic-icon-secondary-info-hover-active': '#2290cc', + '--intergalactic-icon-secondary-success': '#89FF75', + '--intergalactic-icon-secondary-success-hover-active': '#049b75', + '--intergalactic-icon-secondary-critical': '#FF5454', + '--intergalactic-icon-secondary-critical-hover-active': '#cc6c6b', + '--intergalactic-icon-secondary-warning': '#ff9f7c', + '--intergalactic-icon-secondary-warning-hover-active': '#cc7036', + '--intergalactic-icon-non-interactive': '#1e262a', + '--intergalactic-illustration-red': '#ff788f', + '--intergalactic-illustration-orange': '#ff9400', + '--intergalactic-illustration-yellow': '#ffe84d', + '--intergalactic-illustration-salad': '#c7fa73', + '--intergalactic-illustration-green': '#45e0a8', + '--intergalactic-illustration-blue': '#6edbff', + '--intergalactic-illustration-violet': '#b880ff', + '--intergalactic-illustration-pink': '#ff7ad1', + '--intergalactic-date-picker-cell': '#ffffff', + '--intergalactic-date-picker-cell-current': '#85a2ab', + '--intergalactic-date-picker-cell-hover': '#eaeff1', + '--intergalactic-date-picker-cell-range': '#bdd1ff', + '--intergalactic-date-picker-cell-range-hover': '#9dbaff', + '--intergalactic-date-picker-cell-active': '#709bff', + '--intergalactic-date-picker-cell-active-hover': '#5487ff', + '--intergalactic-date-picker-cell-current-invert': 'rgba(255, 255, 255, 0.5)', + '--intergalactic-date-picker-cell-comparison-active': '#892aff', + '--intergalactic-date-picker-cell-comparison-active-hover': '#7d26e8', + '--intergalactic-dropdown-menu-item': '#ffffff', + '--intergalactic-dropdown-menu-item-hover': '#f7f8f9', + '--intergalactic-dropdown-menu-item-selected': 'rgba(189, 209, 255, 0.7)', + '--intergalactic-dropdown-menu-item-selected-hover': '#bdd1ff', + '--intergalactic-feature-popover-bg': '#FFE09D', + '--intergalactic-feature-popover-dot-outer-border': '#FFE09D', + '--intergalactic-feature-popover-bg-neutral': '#1d113e', + '--intergalactic-feature-popover-dot-neutral': '#89FF75', + '--intergalactic-feature-popover-dot-neutral-outer-border': '#89FF75', + '--intergalactic-progress-bar-bg': '#eaeff1', + '--intergalactic-progress-bar-bg-hover': '#d5dfe2', + '--intergalactic-progress-bar-bg-invert': 'rgba(255, 255, 255, 0.2)', + '--intergalactic-progress-bar-bg-invert-hover': 'rgba(255, 255, 255, 0.4)', + '--intergalactic-progress-bar-value-gradient': 'linear-gradient(-45deg, rgba(68, 193, 93, 0.9) 25%, rgba(68, 193, 93, 1) 0%, rgba(68, 193, 93, 1) 50%, rgba(68, 193, 93, 0.9) 0%, rgba(68, 193, 93, 0.9) 75%, rgba(68, 193, 93, 1) 0%)', + '--intergalactic-progress-bar-pattern-gradient': 'linear-gradient(-45deg, rgba(234, 239, 241, 0.9) 25%, rgba(234, 239, 241, 1) 0%, rgba(234, 239, 241, 1) 50%, rgba(234, 239, 241, 0.9) 0%, rgba(234, 239, 241, 0.9) 75%, rgba(234, 239, 241, 1) 0%)', + '--intergalactic-progress-bar-value-bg': '#000000', + '--intergalactic-skeleton-bg': 'rgba(234, 239, 241, 0.8)', + '--intergalactic-skeleton-bg-invert': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-slider-rating-normal': '#b0c4c9', + '--intergalactic-slider-rating-hover-active': '#ffe09d', + '--intergalactic-table-th-primary-cell': '#f7f8f9', + '--intergalactic-table-th-primary-cell-hover': '#eaeff1', + '--intergalactic-table-th-primary-cell-active': '#eaeff1', + '--intergalactic-table-th-secondary-cell': '#ffffff', + '--intergalactic-table-th-gradient': 'linear-gradient(to right, rgba(234, 239, 241, 0) 0%, rgba(234, 239, 241, 1) 100%)', + '--intergalactic-table-td-cell': '#ffffff', + '--intergalactic-table-td-cell-hover': '#f4f7f8', + '--intergalactic-table-td-cell-active': '#eef2f4', + '--intergalactic-table-td-cell-unread': '#f7f8f9', + '--intergalactic-table-td-cell-accordion': '#f7f8f9', + '--intergalactic-table-td-cell-selected': '#eaf0ff', + '--intergalactic-table-td-cell-selected-hover': '#bdd1ff', + '--intergalactic-table-td-cell-selected-active': '#bdd1ff', + '--intergalactic-table-td-cell-new': '#ECF9EF', + '--intergalactic-table-td-cell-new-hover': '#C4FFBA', + '--intergalactic-table-td-cell-new-active': '#C4FFBA', + '--intergalactic-table-td-cell-critical': '#ffeaea', + '--intergalactic-table-td-cell-critical-hover': '#ffbdbd', + '--intergalactic-table-td-cell-critical-active': '#ffbdbd', + '--intergalactic-table-td-cell-warning': '#fff1ec', + '--intergalactic-table-td-cell-warning-hover': '#ffd3c3', + '--intergalactic-table-td-cell-warning-active': '#ffd3c3', + '--intergalactic-brand-primary': '#ff8d63', + '--intergalactic-brand-secondary': '#611eb5', + '--intergalactic-brand-pinterest': '#bd081c', + '--intergalactic-brand-instagram': '#e4405f', + '--intergalactic-brand-youtube': '#ff0000', + '--intergalactic-brand-facebook': '#1877f2', + '--intergalactic-brand-linkedIn': '#0a66c2', + '--intergalactic-brand-twitter': '#1d9bf0', + '--intergalactic-brand-google-blue': '#1a0dab', + '--intergalactic-brand-google-green': '#016723', + '--intergalactic-brand-google-my-business': '#1a73e8', + '--intergalactic-box-shadow-card': '0 0 0 1px #eaeff1', + '--intergalactic-box-shadow-card-hover': '3px 3px 30px 0px rgba(30, 38, 42, 0.15)', + '--intergalactic-box-shadow-dnd': '0px 0px 1px 0px rgba(30, 38, 42, 0.16), 0px 12px 40px 0px rgba(30, 38, 42, 0.16)', + '--intergalactic-box-shadow-modal': '0px 3px 8px 0px rgba(30, 38, 42, 0.2)', + '--intergalactic-box-shadow-popper': '0px 1px 12px 0px rgba(30, 38, 42, 0.15)', + '--intergalactic-keyboard-focus-outline': '#1e262a', + '--intergalactic-keyboard-focus-invalid-outline': '#ff5454', + '--intergalactic-keyboard-focus-invalid': '0px 0px 0px 3px rgba(255, 84, 84, 0.5)', + '--intergalactic-keyboard-focus-valid-outline': '#69CD7D', + '--intergalactic-keyboard-focus-valid': '0px 0px 0px 3px rgba(105, 205, 125, 0.5)', + '--intergalactic-keyboard-focus-invert-outline': 'rgba(255, 255, 255, 0.8)', + '--intergalactic-keyboard-focus-invert': '0px 0px 0px 3px rgba(255, 255, 255, 0.8)', + '--intergalactic-keyboard-focus': '0px 0px 0px 3px rgba(30, 38, 42, 0.5)', + '--intergalactic-base': 'Inter', + '--intergalactic-lh-800': '117%', + '--intergalactic-lh-700': '110%', + '--intergalactic-lh-600': '125%', + '--intergalactic-lh-500': '117%', + '--intergalactic-lh-400': '120%', + '--intergalactic-lh-300': '150%', + '--intergalactic-lh-200': '142%', + '--intergalactic-lh-100': '133%', + '--intergalactic-semi-bold': '600', + '--intergalactic-bold': '700', + '--intergalactic-regular': '400', + '--intergalactic-medium': '500', + '--intergalactic-fs-50': '10px', + '--intergalactic-fs-100': '12px', + '--intergalactic-fs-200': '14px', + '--intergalactic-fs-300': '16px', + '--intergalactic-fs-400': '20px', + '--intergalactic-fs-500': '24px', + '--intergalactic-fs-600': '32px', + '--intergalactic-fs-700': '36px', + '--intergalactic-fs-800': '48px', + '--intergalactic-compact': '0.3', + '--intergalactic-scale-indent': '4px', + '--intergalactic-form-control-s': '20px', + '--intergalactic-form-control-m': '28px', + '--intergalactic-form-control-l': '40px', + '--intergalactic-spacing-05x': '2px', + '--intergalactic-spacing-1x': '4px', + '--intergalactic-spacing-2x': '8px', + '--intergalactic-spacing-3x': '12px', + '--intergalactic-spacing-4x': '16px', + '--intergalactic-spacing-5x': '20px', + '--intergalactic-spacing-6x': '24px', + '--intergalactic-spacing-8x': '32px', + '--intergalactic-spacing-10x': '40px', + '--intergalactic-spacing-14x': '56px', + '--intergalactic-spacing-20x': '80px', + '--intergalactic-spacing-24x': '96px', + '--intergalactic-spacing-30x': '120px', + '--intergalactic-rounded-extra-small': '2px', + '--intergalactic-rounded-small': '4px', + '--intergalactic-rounded-medium': '6px', + '--intergalactic-rounded-large': '12px', + '--intergalactic-rounded-extra-large': '24px', + '--intergalactic-addon-rounded': '4px', + '--intergalactic-badge-rounded': '6px', + '--intergalactic-chart-rounded': '2px', + '--intergalactic-counter-rounded': '12px', + '--intergalactic-tag-rounded': '24px', + '--intergalactic-switch-rounded': '24px', + '--intergalactic-control-rounded': '6px', + '--intergalactic-progress-bar-rounded': '6px', + '--intergalactic-surface-rounded': '6px', + '--intergalactic-popper-rounded': '6px', + '--intergalactic-modal-rounded': '12px', + '--intergalactic-disabled-opacity': '0.5', + '--intergalactic-screen-extra-small': '320px', + '--intergalactic-screen-small': '768px', + '--intergalactic-screen-medium': '1200px', + '--intergalactic-screen-large': '1920px', + '--intergalactic-overlay-primary': 'rgba(30, 38, 42, 0.7)', + '--intergalactic-overlay-secondary': 'rgba(30, 38, 42, 0.4)', + '--intergalactic-overlay-limitation-primary': '#f7f8f9', + '--intergalactic-overlay-limitation-secondary': 'rgba(255, 255, 255, 0.85)', + '--intergalactic-z-index-deep': '-999', + '--intergalactic-z-index-overlay': '500', + '--intergalactic-z-index-modal': '900', + '--intergalactic-z-index-popper': '700', + '--intergalactic-z-index-dropdown': '750', + '--intergalactic-z-index-tooltip': '800', + '--intergalactic-z-index-notice-bubble': '999', + '--intergalactic-tooltip-default': '#ffffff', + '--intergalactic-tooltip-warning': '#ffbdbd', + '--intergalactic-tooltip-invert': '#1e262a', + '--intergalactic-neighbor-location-neutral': '#ffffff80', + '--intergalactic-neighbor-location-invert': '#00000080', + '--intergalactic-scroll-area-shadow-left': 'linear-gradient(to right, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-right': 'linear-gradient(to left, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-top': 'linear-gradient(to bottom, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-bottom': 'linear-gradient(to top, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-dropdown-menu-left': 'linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-right': 'linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-bottom': 'linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-top': 'linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-bar-background': 'rgba(30, 38, 42, 0.3)', + '--intergalactic-tag-primary-gray-normal': '#ecedf0', + '--intergalactic-tag-primary-gray-hover-active': '#e3e4e9', + '--intergalactic-tag-primary-blue-normal': '#d0eeff', + '--intergalactic-tag-primary-blue-hover-active': '#b7e4ff', + '--intergalactic-tag-primary-green-normal': '#cff1ea', + '--intergalactic-tag-primary-green-hover-active': '#b7eae0', + '--intergalactic-tag-primary-orange-normal': '#ffddd2', + '--intergalactic-tag-primary-orange-hover-active': '#ffccbb', + '--intergalactic-tag-primary-red-normal': '#ffcedc', + '--intergalactic-tag-primary-red-hover-active': '#ffb6ca', + '--intergalactic-tag-primary-violet-normal': '#f4e3ff', + '--intergalactic-tag-primary-violet-hover-active': '#efd5ff', + '--intergalactic-tag-primary-yellow-normal': '#fee6d1', + '--intergalactic-tag-primary-yellow-hover-active': '#fedab9', + '--intergalactic-tag-primary-white-normal': 'rgba(255, 255, 255, 0.15)', + '--intergalactic-tag-primary-white-hover-active': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-tag-primary-gray-text': '#668791', + '--intergalactic-tag-primary-blue-text': '#2969ff', + '--intergalactic-tag-primary-green-text': '#44C15D', + '--intergalactic-tag-primary-orange-text': '#ff703c', + '--intergalactic-tag-primary-red-text': '#E82525', + '--intergalactic-tag-primary-violet-text': '#892aff', + '--intergalactic-tag-primary-yellow-text': '#E89325', + '--intergalactic-tag-primary-white-text': '#ffffff', + '--intergalactic-tag-secondary-normal': '#ffffff', + '--intergalactic-tag-secondary-hover-active': '#f7f8f9', + '--intergalactic-tag-secondary-white-normal': 'rgba(255, 255, 255, 0)', + '--intergalactic-tag-secondary-white-hover-active': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-tag-secondary-gray-text': '#668791', + '--intergalactic-tag-secondary-white-text': '#ffffff', + '--intergalactic-chart-palette-order-1': '#709bff', + '--intergalactic-chart-palette-order-2': '#A9E2B4', + '--intergalactic-chart-palette-order-3': '#ff8d63', + '--intergalactic-chart-palette-order-4': '#ff87eb', + '--intergalactic-chart-palette-order-5': '#ffe09d', + '--intergalactic-chart-palette-order-6': '#a155ff', + '--intergalactic-chart-palette-order-7': '#FF5454', + '--intergalactic-chart-palette-order-8': '#95f8e2', + '--intergalactic-chart-palette-order-9': '#5487ff', + '--intergalactic-chart-palette-order-10': '#89FF75', + '--intergalactic-chart-palette-order-11': '#ffbda5', + '--intergalactic-chart-palette-order-12': '#e14adf', + '--intergalactic-chart-palette-order-13': '#FFC954', + '--intergalactic-chart-palette-order-14': '#c99dff', + '--intergalactic-chart-palette-order-15': '#ff5454', + '--intergalactic-chart-palette-order-16': '#64f5d4', + '--intergalactic-chart-palette-order-17': '#9dbaff', + '--intergalactic-chart-palette-order-18': '#69CD7D', + '--intergalactic-chart-palette-order-19': '#ff9f7c', + '--intergalactic-chart-palette-order-20': '#ffa9fa', + '--intergalactic-chart-palette-order-21': '#ffc954', + '--intergalactic-chart-palette-order-22': '#b070ff', + '--intergalactic-chart-palette-order-23': '#ff9d9d', + '--intergalactic-chart-palette-order-24': '#46f3cc', + '--intergalactic-chart-palette-order-total-amount': '#85a2ab', + '--intergalactic-chart-palette-order-other-data': '#d5dfe2', + '--intergalactic-chart-palette-order-null': '#eaeff1', + '--intergalactic-chart-grid-line': '#eaeff1', + '--intergalactic-chart-grid-x-axis': '#d5dfe2', + '--intergalactic-chart-grid-y-accent-hover-line': '#b0c4c9', + '--intergalactic-chart-grid-text-label': '#668791', + '--intergalactic-chart-grid-bar-chart-hover': 'rgba(213, 223, 226, 0.3)', + '--intergalactic-chart-grid-bar-chart-base-bg': '#eaeff1', + '--intergalactic-chart-grid-period-bg': 'rgba(213, 223, 226, 0.2)', + '--intergalactic-chart-grid-period-pattern': 'rgba(30, 38, 42, 0.15)', + '--intergalactic-chart-grid-border': '#ffffff', + '--intergalactic-chart-x-axis-accent-period-active': '#668791', + '--intergalactic-chart-x-axis-accent-data-start-tracking': 'rgba(105, 205, 125, 0.2)', + '--intergalactic-header-bg': '#382e5e', + '--intergalactic-header-border-primary': '#382e5e', + '--intergalactic-header-border-secondary': '#ffffff26', + '--intergalactic-sidebar-nav-control-hover': 'rgba(234, 239, 241, 0.7)', + '--intergalactic-sidebar-nav-control-active': '#e2ddff', + '--intergalactic-sidebar-nav-control-text-normal': '#6d619f', + '--intergalactic-sidebar-nav-control-text-active': '#4d407e', + '--intergalactic-sidebar-nav-control-icon-normal': '#9083c5', + '--intergalactic-sidebar-nav-control-icon-active': '#4d407e', + '--intergalactic-duration-extra-slow': '500', + '--intergalactic-duration-slow': '400', + '--intergalactic-duration-medium': '300', + '--intergalactic-duration-fast': '200', + '--intergalactic-duration-extra-fast': '100', + '--intergalactic-duration-switch': '100', + '--intergalactic-duration-popper': '200', + '--intergalactic-duration-control': '200', + '--intergalactic-duration-modal': '200', + '--intergalactic-duration-accordion': '200', + '--intergalactic-duration-counter': '200', +}; diff --git a/semcore/core/src/theme/themes/new-adjusted.css b/semcore/core/src/theme/themes/new-adjusted.css new file mode 100644 index 0000000000..bcdbae17a9 --- /dev/null +++ b/semcore/core/src/theme/themes/new-adjusted.css @@ -0,0 +1,877 @@ +:root { + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --gray-50: #f3f4f4; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --gray-100: #dedfe2; + --gray-200: #c4c5ca; + --gray-300: #a9aab1; + --gray-400: #90929a; + --gray-500: #6c6e79; + --gray-600: #484a52; + --gray-700: #2f3035; + --gray-800: #131416; + --gray-white: #ffffff; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --blue-50: #eef4ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --blue-100: #d0e0fe; + --blue-200: #aac6fb; + --blue-300: #83aaf7; + --blue-400: #5e8ef2; + --blue-500: #2661e8; + --blue-600: #1640a1; + --blue-700: #0e2a6a; + --blue-800: #08183c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --green-50: #dcfdf0; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --green-100: #9df4d7; + --green-200: #48e3b8; + --green-300: #35c59f; + --green-400: #2a8; + --green-500: #0a8266; + --green-600: #075844; + --green-700: #033427; + --green-800: #021912; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --red-50: #ffefec; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --red-100: #ffd0c8; + --red-200: #ffa79a; + --red-300: #ff786b; + --red-400: #ff3f38; + --red-500: #ca201f; + --red-600: #8b1312; + --red-700: #550807; + --red-800: #2c0202; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --orange-50: #ffefe9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --orange-100: #ffd4c6; + --orange-200: #fcb097; + --orange-300: #f48a66; + --orange-400: #ea622f; + --orange-500: #b4481e; + --orange-600: #7b2f13; + --orange-700: #4a1a09; + --orange-800: #260a02; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --yellow-50: #fff2d7; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --yellow-100: #ffd997; + --yellow-200: #fbb829; + --yellow-300: #da9f21; + --yellow-400: #bb881c; + --yellow-500: #8e6711; + --yellow-600: #614509; + --yellow-700: #3a2803; + --yellow-800: #1d1201; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-50: #f5f1ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-100: #e2d8ff; + --violet-200: #cbb7ff; + --violet-300: #b494ff; + --violet-400: #a070fe; + --violet-500: #8426f5; + --violet-600: #5a17a9; + --violet-700: #350a69; + --violet-800: #1a0239; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-dusty-50: #f1f5f4; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-dusty-100: #d8e2e1; + --violet-dusty-200: #b8cac8; + --violet-dusty-300: #96b1af; + --violet-dusty-400: #7b9996; + --violet-dusty-500: #5c7472; + --violet-dusty-600: #3e4e4d; + --violet-dusty-700: #232e2d; + --violet-dusty-800: #0f1515; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --pink-50: #fff0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --pink-100: #ffd3ff; + --pink-200: #ffa9fa; + --pink-300: #ff87eb; + --pink-400: #e14adf; + --pink-500: #b229b9; + --pink-600: #7d0480; + --pink-700: #4d0050; + --pink-800: #340439; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --salad-50: #e8fef9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --salad-100: #b7faeb; + --salad-200: #95f8e2; + --salad-300: #64f5d4; + --salad-400: #46f3cc; + --salad-500: #18f0bf; + --salad-600: #16daae; + --salad-700: #11aa88; + --salad-800: #0d8469; + /* Primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral: #ffffff; + /* Hover state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-hover: #f3f4f4; + /* Active (selected) state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-active: #dedfe2; + /* Accent background of the message with regular information. */ + --intergalactic-bg-primary-info: #5e8ef2; + /* Accent background of the message or banner with information about the successful result. */ + --intergalactic-bg-primary-success: #2a8; + /* Accent background of a message or a banner with a critical information. */ + --intergalactic-bg-primary-critical: #ff3f38; + /* Accent background of a message or a banner with a warning information. */ + --intergalactic-bg-primary-warning: #ea622f; + /* Accent background of the information you want to highlight. */ + --intergalactic-bg-primary-highlight: #ffd997; + /* Accent background for the advertising banners and controls. */ + --intergalactic-bg-primary-advertising: #350a69; + /* Accented muted background for a message with regular information. */ + --intergalactic-bg-primary-muted: #6c6e79; + /* Inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert: #131416; + /* Hover state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-hover: #2f3035; + /* Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-active: #484a52; + /* Secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral: #f3f4f4; + /* Hover state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-hover: #dedfe2; + /* Active (selected) state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-active: #c4c5ca; + /* Secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info: #eef4ff; + /* Hover state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-hover: #d0e0fe; + /* Active (selected) state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-active: #aac6fb; + /* Secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success: #dcfdf0; + /* Hover state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-hover: #9df4d7; + /* Active (selected) state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-active: #48e3b8; + /* Secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical: #ffefec; + /* Hover state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-hover: #ffd0c8; + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-active: #ffa79a; + /* Secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning: #ffefe9; + /* Hover state of the secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning-hover: #ffd4c6; + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-warning-active: #fcb097; + /* Secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight: #fff2d7; + /* Hover state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-hover: #ffd997; + /* Active (selected) state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-active: #fbb829; + /* Secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising: #f5f1ff; + /* Hover state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-hover: #e2d8ff; + /* Active (selected) state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-active: #cbb7ff; + /* Highlighting the search results. */ + --intergalactic-bg-highlight-results: rgba(218, 159, 33, 0.4); + /* Focusing values in the input. */ + --intergalactic-bg-highlight-focus: rgba(94, 142, 242, 0.2); + /* Primary text. */ + --intergalactic-text-primary: #131416; + /* Secondary text. */ + --intergalactic-text-secondary: #6c6e79; + /* Placeholder text only. */ + --intergalactic-text-placeholder: #90929a; + /* Text associated with success states and data. */ + --intergalactic-text-success: #0a8266; + /* Hover and active states for the text associated with success states and data. */ + --intergalactic-text-success-hover-active: #075844; + /* Text associated with critical states and data. */ + --intergalactic-text-critical: #ca201f; + /* Hover and active states for the text associated with critical states and data. */ + --intergalactic-text-critical-hover-active: #8b1312; + /* Inverted version of the primary text. */ + --intergalactic-text-primary-invert: #ffffff; + /* Inverted version of the secondary text. */ + --intergalactic-text-secondary-invert: rgba(255, 255, 255, 0.8); + /* Link text. */ + --intergalactic-text-link: #2661e8; + /* Hover and active states for the link text. */ + --intergalactic-text-link-hover-active: #1640a1; + /* Inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert: #aac6fb; + /* Hover and active states of the inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert-hover: #83aaf7; + /* Visited link text. */ + --intergalactic-text-link-visited: #8426f5; + /* Hint link text. */ + --intergalactic-text-hint: #6c6e79; + /* Hover and active states of the hint link text. */ + --intergalactic-text-hint-hover-active: #484a52; + /* Inverted version of the hint link text. */ + --intergalactic-text-hint-invert: #c4c5ca; + /* Hover and active states of the inverted version of the hint link text. */ + --intergalactic-text-hint-invert-hover-active: #a9aab1; + /* Secondary text. Use with font-size ≥20px. */ + --intergalactic-text-large-secondary: #a9aab1; + /* Link text with font-size ≥20px. */ + --intergalactic-text-large-info: #5e8ef2; + /* Hover and active states of the link text with font-size ≥20px. */ + --intergalactic-text-large-info-hover-active: #2661e8; + /* Text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success: #2a8; + /* Hover and active states of the text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success-hover-active: #0a8266; + /* Text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical: #ff3f38; + /* Hover and active states of the text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical-hover-active: #ca201f; + /* Advertising text. */ + --intergalactic-text-advertising: #350a69; + /* Neutral primary border. */ + --intergalactic-border-primary: #c4c5ca; + /* Subtle secondary border. */ + --intergalactic-border-secondary: #dedfe2; + /* Subtle secondary border in the informational message. */ + --intergalactic-border-info: #aac6fb; + /* Active border in focused input filed. */ + --intergalactic-border-info-active: #131416; + /* Subtle secondary border in the successful message and input field. */ + --intergalactic-border-success: #48e3b8; + /* Active border in the focused input field with valid state. */ + --intergalactic-border-success-active: #0a8266; + /* Subtle secondary border in the critical message and invalid input field. */ + --intergalactic-border-critical: #ffa79a; + /* Active border in the focused input field with invalid state, and active state of the other components with invalid state. */ + --intergalactic-border-critical-active: #ca201f; + /* Subtle secondary border in the warning message. */ + --intergalactic-border-warning: #fcb097; + /* Active border in components with warning intention. */ + --intergalactic-border-warning-active: #b4481e; + /* Inverted version of the neutral primary border. Use it for borders on the dark or color background. */ + --intergalactic-border-primary-invert: #ffffff; + /* Inverted version of the neutral secondary border. Use it for borders on the dark or color background. */ + --intergalactic-border-secondary-invert: rgba(255, 255, 255, 0.3); + /* Border of the Tooltip with dark theme. */ + --intergalactic-border-tooltip-invert: #6c6e79; + /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */ + --intergalactic-border-table-accent: #a9aab1; + /* Border color of the second period for the comparison mode in the DatePicker. */ + --intergalactic-border-date-picker-range-comparison: #8426f5; + /* Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states. */ + --intergalactic-border-critical-pattern: repeating-linear-gradient(315deg, rgba(202, 32, 31, 1) 0, rgba(202, 32, 31, 1) 2px, transparent 0, transparent 50%); + /* Subtle background of the Switch control. */ + --intergalactic-control-switch-bg: #a9aab1; + /* Background of the regular primary control. */ + --intergalactic-control-primary-info: #131416; + /* Hover state of the regular primary control. */ + --intergalactic-control-primary-info-hover: #131416; + /* Active (selected) state of the regular primary control. */ + --intergalactic-control-primary-info-active: #131416; + /* Background of the primary control with successful theme. */ + --intergalactic-control-primary-success: #2a8; + /* Hover state of the primary control with successful theme. */ + --intergalactic-control-primary-success-hover: #0a8266; + /* Active (selected) state of the primary control with successful theme. */ + --intergalactic-control-primary-success-active: #075844; + /* Background of the primary control with danger theme. */ + --intergalactic-control-primary-critical: #ff3f38; + /* Hover state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-hover: #ca201f; + /* Active (selected) state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-active: #8b1312; + /* Background of the primary brand colored control. */ + --intergalactic-control-primary-brand: #ea622f; + /* Hover state of the primary brand colored control. */ + --intergalactic-control-primary-brand-hover: #b4481e; + /* Active state of the primary brand colored control. */ + --intergalactic-control-primary-brand-active: #7b2f13; + /* Background of the advertising primary control. */ + --intergalactic-control-primary-advertising: #5a17a9; + /* Hover state of the advertising primary control. */ + --intergalactic-control-primary-advertising-hover: #350a69; + /* Active (selected) state of the advertising primary control. */ + --intergalactic-control-primary-advertising-active: #8426f5; + /* Inverted background of the primary control. */ + --intergalactic-control-primary-invert: #ffffff; + /* Hover state of the inverted primary control. */ + --intergalactic-control-primary-invert-hover: #f3f4f4; + /* Active (selected) state of the inverted primary control. */ + --intergalactic-control-primary-invert-active: #dedfe2; + /* Background of the regular secondary control. */ + --intergalactic-control-secondary-neutral: rgba(144, 146, 154, 0.1); + /* Hover state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-hover: rgba(144, 146, 154, 0.2); + /* Active (selected) state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-active: rgba(144, 146, 154, 0.3); + /* Background of the accent secondary control. */ + --intergalactic-control-secondary-info: rgba(94, 142, 242, 0.1); + /* Hover state of the accent secondary control. */ + --intergalactic-control-secondary-info-hover: rgba(94, 142, 242, 0.2); + /* Active (selected) state of the accent secondary control. */ + --intergalactic-control-secondary-info-active: rgba(94, 142, 242, 0.3); + /* Background of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert: rgba(255, 255, 255, 0.05); + /* Hover state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-active: rgba(255, 255, 255, 0.3); + /* Background of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral: rgba(144, 146, 154, 0); + /* Hover state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-hover: rgba(144, 146, 154, 0.2); + /* Active (selected) state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-active: rgba(144, 146, 154, 0.3); + /* Background of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info: rgba(94, 142, 242, 0); + /* Hover state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-hover: rgba(94, 142, 242, 0.2); + /* Active (selected) state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-active: rgba(94, 142, 242, 0.3); + /* Background of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert: rgba(255, 255, 255, 0); + /* Hover state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-active: rgba(255, 255, 255, 0.3); + /* Primary neutral icon. */ + --intergalactic-icon-primary-neutral: #6c6e79; + /* Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color. */ + --intergalactic-icon-primary-neutral-hover-active: #565861; + /* Primary link-lookalike icon. */ + --intergalactic-icon-primary-info: #2661e8; + /* Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color. */ + --intergalactic-icon-primary-info-hover-active: #0358a1; + /* Primary success icon. */ + --intergalactic-icon-primary-success: #2a8; + /* Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color. */ + --intergalactic-icon-primary-success-hover-active: #037e68; + /* Primary critical icon. */ + --intergalactic-icon-primary-critical: #ff3f38; + /* Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color. */ + --intergalactic-icon-primary-critical-hover-active: #cc3a42; + /* Primary warning icon. */ + --intergalactic-icon-primary-warning: #ea622f; + /* Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color. */ + --intergalactic-icon-primary-warning-hover-active: #cc5024; + /* Inverted version of the primary icon. */ + --intergalactic-icon-primary-invert: #ffffff; + /* Hover and active (selected) states of the inverted version of the primary icon. */ + --intergalactic-icon-primary-invert-hover-active: #dedfe2; + /* Secondary neutral icon. */ + --intergalactic-icon-secondary-neutral: #a9aab1; + /* Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color. */ + --intergalactic-icon-secondary-neutral-hover-active: #878992; + /* Secondary link-lookalike icon. */ + --intergalactic-icon-secondary-info: #83aaf7; + /* Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color. */ + --intergalactic-icon-secondary-info-hover-active: #2290cc; + /* Secondary success icon. */ + --intergalactic-icon-secondary-success: #35c59f; + /* Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color. */ + --intergalactic-icon-secondary-success-hover-active: #049b75; + /* Secondary critical icon. */ + --intergalactic-icon-secondary-critical: #ff786b; + /* Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color. */ + --intergalactic-icon-secondary-critical-hover-active: #cc6c6b; + /* Secondary warning icon. */ + --intergalactic-icon-secondary-warning: #f48a66; + /* Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color. */ + --intergalactic-icon-secondary-warning-hover-active: #cc7036; + /* Color for the default non-interactive icon. */ + --intergalactic-icon-non-interactive: #131416; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-red: #ff788f; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-orange: #ff9400; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-yellow: #ffe84d; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-salad: #c7fa73; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-green: #45e0a8; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-blue: #6edbff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-violet: #b880ff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-pink: #ff7ad1; + /* Default date-picker cell background. */ + --intergalactic-date-picker-cell: #ffffff; + /* Color for marking the cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current: #90929a; + /* Hover state of the default date-picker cell background. */ + --intergalactic-date-picker-cell-hover: #dedfe2; + /* Background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range: #d0e0fe; + /* Hover state of the background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range-hover: #aac6fb; + /* Active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active: #83aaf7; + /* Hover for the active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active-hover: #5e8ef2; + /* Color for marking the active cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5); + /* Active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active: #8426f5; + /* Hover for the active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active-hover: #5a17a9; + /* Default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item: #ffffff; + /* Hover state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-hover: #f3f4f4; + /* Active (selected) state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected: rgba(208, 224, 254, 0.7); + /* Hover state for the selected state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected-hover: #d0e0fe; + /* Color of the FeaturePopover background with accent theme. */ + --intergalactic-feature-popover-bg: #ffd997; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */ + --intergalactic-feature-popover-dot-outer-border: #ffd997; + /* Color of the FeaturePopover background with neutral theme. */ + --intergalactic-feature-popover-bg-neutral: #0f1515; + /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral: #35c59f; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral-outer-border: #35c59f; + /* Background color of the ProgressBar. */ + --intergalactic-progress-bar-bg: #dedfe2; + /* Hover state of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-hover: #c4c5ca; + /* Inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert: rgba(255, 255, 255, 0.2); + /* Hover state for the inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert-hover: rgba(255, 255, 255, 0.4); + /* Value with gradient for the ProgressBar. */ + --intergalactic-progress-bar-value-gradient: linear-gradient(-45deg, rgba(68, 193, 93, 0.9) 25%, rgba(68, 193, 93, 1) 0%, rgba(68, 193, 93, 1) 50%, rgba(68, 193, 93, 0.9) 0%, rgba(68, 193, 93, 0.9) 75%, rgba(68, 193, 93, 1) 0%); + /* Null value gradient for the ProgressBar. */ + --intergalactic-progress-bar-pattern-gradient: linear-gradient(-45deg, rgba(234, 239, 241, 0.9) 25%, rgba(234, 239, 241, 1) 0%, rgba(234, 239, 241, 1) 50%, rgba(234, 239, 241, 0.9) 0%, rgba(234, 239, 241, 0.9) 75%, rgba(234, 239, 241, 1) 0%); + /* Base value background for the ProgressBar. It is used to create gradients for the values. */ + --intergalactic-progress-bar-value-bg: #000000; + /* Default color for the Skeleton. */ + --intergalactic-skeleton-bg: rgba(222, 223, 226, 0.8); + /* Inverted version of the default color for the Skeleton. */ + --intergalactic-skeleton-bg-invert: rgba(255, 255, 255, 0.3); + /* Icon color for the SliderRating component in its normal state. */ + --intergalactic-slider-rating-normal: #a9aab1; + /* Icon color for the SliderRating component in its hovered and active states. */ + --intergalactic-slider-rating-hover-active: #fbb829; + /* Background of the header cell in the primary Table. */ + --intergalactic-table-th-primary-cell: #f3f4f4; + /* Background of the hovered header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-hover: #dedfe2; + /* Background of the active header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-active: #dedfe2; + /* Background of the header cell in the secondary Table. */ + --intergalactic-table-th-secondary-cell: #ffffff; + /* Background gradient for sorting icon that absolute positioned in the table head. */ + --intergalactic-table-th-gradient: linear-gradient(to right, rgba(222, 223, 226, 0) 0%, rgba(222, 223, 226, 1) 100%); + /* Background of the default cell in the Table. */ + --intergalactic-table-td-cell: #ffffff; + /* Background of the default hovered cell in the Table. */ + --intergalactic-table-td-cell-hover: #efeff1; + /* Background of the default active cell in the Table. */ + --intergalactic-table-td-cell-active: #e5e5e8; + /* Background of the unread cell in the Table. */ + --intergalactic-table-td-cell-unread: #f3f4f4; + /* Background of the cell inside an Accordion in the Table. */ + --intergalactic-table-td-cell-accordion: #f3f4f4; + /* Background of the selected cell in the Table. */ + --intergalactic-table-td-cell-selected: #eef4ff; + /* Background of the hovered selected cell in the Table. */ + --intergalactic-table-td-cell-selected-hover: #d0e0fe; + /* Background of the active selected cell in the Table. */ + --intergalactic-table-td-cell-selected-active: #d0e0fe; + /* Background of the cell with new information in the Table. */ + --intergalactic-table-td-cell-new: #dcfdf0; + /* Background of the hovered cell with new information in the Table. */ + --intergalactic-table-td-cell-new-hover: #9df4d7; + /* Background of the active cell with new information in the Table. */ + --intergalactic-table-td-cell-new-active: #9df4d7; + /* Background of the cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical: #ffefec; + /* Background of the hovered cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-hover: #ffd0c8; + /* Background of the active cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-active: #ffd0c8; + /* Background of the cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning: #ffefe9; + /* Background of the hovered cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-hover: #ffd4c6; + /* Background of the active cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-active: #ffd4c6; + /* Primary brand color. */ + --intergalactic-brand-primary: #ea622f; + /* Secondary brand color. */ + --intergalactic-brand-secondary: #350a69; + /* Pinterest brand color. */ + --intergalactic-brand-pinterest: #bd081c; + /* Instagram brand color. */ + --intergalactic-brand-instagram: #e4405f; + /* Youtube brand color. */ + --intergalactic-brand-youtube: #ff0000; + /* Facebook brand color. */ + --intergalactic-brand-facebook: #1877f2; + /* LinkedIn brand color. */ + --intergalactic-brand-linkedIn: #0a66c2; + /* Twitter brand color. */ + --intergalactic-brand-twitter: #1d9bf0; + /* Google brand color for the link. */ + --intergalactic-brand-google-blue: #1a0dab; + /* Google green brand color for the link. */ + --intergalactic-brand-google-green: #016723; + /* Google My Business brand color. */ + --intergalactic-brand-google-my-business: #1a73e8; + /* Default shadow of the Card. */ + --intergalactic-box-shadow-card: 0 0 0 1px #dedfe2; + /* Hover state for the shadow of the Card with hover state. */ + --intergalactic-box-shadow-card-hover: 3px 3px 30px 0px rgba(19, 20, 22, 0.15); + /* Shadow for show that element are being drag-and-drop. */ + --intergalactic-box-shadow-dnd: 0px 0px 1px 0px rgba(19, 20, 22, 0.16), 0px 12px 40px 0px rgba(19, 20, 22, 0.16); + /* Default shadow if the Modal window. */ + --intergalactic-box-shadow-modal: 0px 3px 8px 0px rgba(19, 20, 22, 0.2); + /* Default shadow of all Poppers, Dropdowns and Tooltips. */ + --intergalactic-box-shadow-popper: 0px 1px 12px 0px rgba(19, 20, 22, 0.15); + /* Color for default keyboard focus outline styles. */ + --intergalactic-keyboard-focus-outline: #131416; + /* Color for keyboard focus outline styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid-outline: #ff3f38; + /* Keyboard focus styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 63, 56, 0.5); + /* Color for keyboard focus outline styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid-outline: #2a8; + /* Keyboard focus styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(2, 10, 8, 0.5); + /* Color for keyboard focus outline styles to use on the dark and color background. */ + --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8); + /* Keyboard focus styles for use on dark backgrounds. */ + --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8); + /* Default keyboard focus box-shadow styles. */ + --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(19, 20, 22, 0.5); + /* Base font family. */ + --intergalactic-base: Inter; + /* Use with font-size-800. */ + --intergalactic-lh-800: 117%; + /* Use with font-size-700. */ + --intergalactic-lh-700: 110%; + /* Use with font-size-600. */ + --intergalactic-lh-600: 125%; + /* Use with font-size-500. */ + --intergalactic-lh-500: 117%; + /* Use with font-size-400. */ + --intergalactic-lh-400: 120%; + /* Use with font-size-300. */ + --intergalactic-lh-300: 150%; + /* Use with font-size-200. */ + --intergalactic-lh-200: 142%; + /* Use with font-size-100. */ + --intergalactic-lh-100: 133%; + /* Semi-bold font weight. */ + --intergalactic-semi-bold: 600; + /* Bold font weight. */ + --intergalactic-bold: 700; + /* Regular font weight. */ + --intergalactic-regular: 400; + /* Medium font weight. */ + --intergalactic-medium: 500; + /* Use only for text in Badge component. */ + --intergalactic-fs-50: 10px; + /* Use this font-size with caution for text in some additional messages. Always check its contrast and readability. */ + --intergalactic-fs-100: 12px; + --intergalactic-fs-200: 14px; + --intergalactic-fs-300: 16px; + --intergalactic-fs-400: 20px; + --intergalactic-fs-500: 24px; + --intergalactic-fs-600: 32px; + --intergalactic-fs-700: 36px; + --intergalactic-fs-800: 48px; + /* Compact letter spacing. */ + --intergalactic-compact: 0.3; + /* Base denominator of the design system. */ + --intergalactic-scale-indent: 4px; + /* Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions. */ + --intergalactic-form-control-s: 20px; + /* Default size of the controls. */ + --intergalactic-form-control-m: 28px; + /* Large size of the controls. */ + --intergalactic-form-control-l: 40px; + /* 2px */ + --intergalactic-spacing-05x: 2px; + /* 4px */ + --intergalactic-spacing-1x: 4px; + /* 8px */ + --intergalactic-spacing-2x: 8px; + /* 12px */ + --intergalactic-spacing-3x: 12px; + /* 16px */ + --intergalactic-spacing-4x: 16px; + /* 20px */ + --intergalactic-spacing-5x: 20px; + /* 24px */ + --intergalactic-spacing-6x: 24px; + /* 32px */ + --intergalactic-spacing-8x: 32px; + /* 40px */ + --intergalactic-spacing-10x: 40px; + /* 56px */ + --intergalactic-spacing-14x: 56px; + /* 80px */ + --intergalactic-spacing-20x: 80px; + /* 96px */ + --intergalactic-spacing-24x: 96px; + /* 120px */ + --intergalactic-spacing-30x: 120px; + --intergalactic-rounded-extra-small: 2px; + --intergalactic-rounded-small: 4px; + --intergalactic-rounded-medium: 6px; + --intergalactic-rounded-large: 12px; + --intergalactic-rounded-extra-large: 24px; + /* Use for rounding addons and small controls like Checkbox. */ + --intergalactic-addon-rounded: 4px; + /* Use for rounding Badge. */ + --intergalactic-badge-rounded: 6px; + /* Use for rounding big and small charts like bar, histogram and others. */ + --intergalactic-chart-rounded: 2px; + /* Use for rounding Counter. */ + --intergalactic-counter-rounded: 12px; + /* Use for rounding Tag. */ + --intergalactic-tag-rounded: 24px; + /* Use for rounding Switch. */ + --intergalactic-switch-rounded: 24px; + /* Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc. */ + --intergalactic-control-rounded: 6px; + /* Use for rounding bars: ProgressBar, SliderBar, etc. */ + --intergalactic-progress-bar-rounded: 6px; + /* Use for rounding surfaces like Card, blocks, widgets, Notice, etc. */ + --intergalactic-surface-rounded: 6px; + /* Use for rounding all kinds of poppers and dropdowns. */ + --intergalactic-popper-rounded: 6px; + /* Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard). */ + --intergalactic-modal-rounded: 12px; + /* Use for the disabled state of all kind of the controls and elements. */ + --intergalactic-disabled-opacity: 0.5; + /* Extra small screens (small phones). */ + --intergalactic-screen-extra-small: 320px; + /* Small screens (phones and small tablets). */ + --intergalactic-screen-small: 768px; + /* Medium screens (tablets and small laptops). */ + --intergalactic-screen-medium: 1200px; + /* Large screens (tablets and laptops). */ + --intergalactic-screen-large: 1920px; + /* Use for cover the content under the modal dialogs. */ + --intergalactic-overlay-primary: rgba(19, 20, 22, 0.7); + /* Use for the secondary modal dialogs that were opened upon the other modal dialogs. */ + --intergalactic-overlay-secondary: rgba(19, 20, 22, 0.4); + /* Use as a primary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-primary: #f3f4f4; + /* Use as a secondary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-secondary: rgba(255, 255, 255, 0.85); + --intergalactic-z-index-deep: -999; + --intergalactic-z-index-overlay: 500; + --intergalactic-z-index-modal: 900; + --intergalactic-z-index-popper: 700; + --intergalactic-z-index-dropdown: 750; + --intergalactic-z-index-tooltip: 800; + --intergalactic-z-index-notice-bubble: 999; + /* Default Tooltip background. */ + --intergalactic-tooltip-default: #ffffff; + /* Warning Tooltip background. */ + --intergalactic-tooltip-warning: #ffd0c8; + /* Inverted version of the default Tooltip background. */ + --intergalactic-tooltip-invert: #131416; + /* Neutral border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-neutral: #ffffff80; + /* Inverted border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-invert: #00000080; + /* Left-to-right fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-left: linear-gradient(to right, rgba(19, 20, 22, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Right-to-left fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-right: linear-gradient(to left, rgba(19, 20, 22, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Top-to-bottom fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-top: linear-gradient(to bottom, rgba(19, 20, 22, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Bottom-to-top fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-bottom: linear-gradient(to top, rgba(19, 20, 22, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Left-to-right fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-left: linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Right-to-left fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-right: linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-bottom: linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Background color for ScrollBar. */ + --intergalactic-scroll-bar-background: rgba(19, 20, 22, 0.3); + /* Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-normal: #ecedf0; + /* Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-hover-active: #e3e4e9; + /* Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-normal: #d0eeff; + /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-hover-active: #b7e4ff; + /* Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-normal: #cff1ea; + /* Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-hover-active: #b7eae0; + /* Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-normal: #ffddd2; + /* Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-hover-active: #ffccbb; + /* Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-normal: #ffcedc; + /* Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-hover-active: #ffb6ca; + /* Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-normal: #f4e3ff; + /* Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-hover-active: #efd5ff; + /* Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-normal: #fee6d1; + /* Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-hover-active: #fedab9; + /* Primary white tag. */ + --intergalactic-tag-primary-white-normal: rgba(255, 255, 255, 0.15); + /* Hover and active (selected) state of the primary white tag. */ + --intergalactic-tag-primary-white-hover-active: rgba(255, 255, 255, 0.3); + /* Gray text for the primary gray tag. */ + --intergalactic-tag-primary-gray-text: #6c6e79; + /* Blue text for the primary blue tag. */ + --intergalactic-tag-primary-blue-text: #2661e8; + /* Green text for the primary green tag. */ + --intergalactic-tag-primary-green-text: #0a8266; + /* Orange text for the primary orange tag. */ + --intergalactic-tag-primary-orange-text: #b4481e; + /* Red text for the primary red tag. */ + --intergalactic-tag-primary-red-text: #ca201f; + /* Violet text for the primary violet tag. */ + --intergalactic-tag-primary-violet-text: #8426f5; + /* Yellow text for the primary yellow tag. */ + --intergalactic-tag-primary-yellow-text: #8e6711; + /* White text for the primary white tag. */ + --intergalactic-tag-primary-white-text: #ffffff; + /* Background color for the default secondary tag. */ + --intergalactic-tag-secondary-normal: #ffffff; + /* Hover and active (selected) states of the background color for the default secondary tag. */ + --intergalactic-tag-secondary-hover-active: #f3f4f4; + /* White secondary tag. */ + --intergalactic-tag-secondary-white-normal: rgba(255, 255, 255, 0); + /* Active state of the secondary white tag. */ + --intergalactic-tag-secondary-white-hover-active: rgba(255, 255, 255, 0.1); + /* Gray text for the default secondary tag. */ + --intergalactic-tag-secondary-gray-text: #6c6e79; + /* White text for the secondary white tag. */ + --intergalactic-tag-secondary-white-text: #ffffff; + /* 1 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-1: #83aaf7; + /* 2 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-2: #48e3b8; + /* 3 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-3: #ea622f; + /* 4 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-4: #ff87eb; + /* 5 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-5: #fbb829; + /* 6 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-6: #a070fe; + /* 7 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-7: #ff786b; + /* 8 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-8: #95f8e2; + /* 9 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-9: #5e8ef2; + /* 10 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-10: #35c59f; + /* 11 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-11: #fcb097; + /* 12 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-12: #e14adf; + /* 13 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-13: #da9f21; + /* 14 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-14: #cbb7ff; + /* 15 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-15: #ff3f38; + /* 16 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-16: #64f5d4; + /* 17 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-17: #aac6fb; + /* 18 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-18: #2a8; + /* 19 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-19: #f48a66; + /* 20 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-20: #ffa9fa; + /* 21 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-21: #bb881c; + /* 22 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-22: #b494ff; + /* 23 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-23: #ffa79a; + /* 24 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-24: #46f3cc; + /* Use it to show total value. */ + --intergalactic-chart-palette-order-total-amount: #90929a; + /* Use it to indicate voids, missing or some other data. */ + --intergalactic-chart-palette-order-other-data: #c4c5ca; + /* Use it to show null value. */ + --intergalactic-chart-palette-order-null: #dedfe2; + /* Default chart grid line. */ + --intergalactic-chart-grid-line: #dedfe2; + /* X-axis line on the chart grid. */ + --intergalactic-chart-grid-x-axis: #c4c5ca; + /* Accent line for the hover state on the chart grid. */ + --intergalactic-chart-grid-y-accent-hover-line: #a9aab1; + /* Text label on the chart grid. */ + --intergalactic-chart-grid-text-label: #6c6e79; + /* Background color for the hover state of a bar on the chart grid. */ + --intergalactic-chart-grid-bar-chart-hover: rgba(196, 197, 202, 0.3); + /* Default background color of a bar in the BarChart. */ + --intergalactic-chart-grid-bar-chart-base-bg: #dedfe2; + /* Use for highlighting a period on the chart grid. */ + --intergalactic-chart-grid-period-bg: rgba(196, 197, 202, 0.2); + /* Stripe color for diagonal pattern background. */ + --intergalactic-chart-grid-period-pattern: rgba(19, 20, 22, 0.15); + /* Border for distinguishing data sets and chart dots on the chart grid. */ + --intergalactic-chart-grid-border: #ffffff; + /* Background color for the clickable date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-period-active: #6c6e79; + /* Background color for the "Start tracking" date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(2, 10, 8, 0.2); + --intergalactic-header-bg: #232e2d; + --intergalactic-header-border-primary: #232e2d; + --intergalactic-header-border-secondary: #ffffff26; + --intergalactic-sidebar-nav-control-hover: rgba(222, 223, 226, 0.7); + --intergalactic-sidebar-nav-control-active: #d8e2e1; + --intergalactic-sidebar-nav-control-text-normal: #5c7472; + --intergalactic-sidebar-nav-control-text-active: #3e4e4d; + --intergalactic-sidebar-nav-control-icon-normal: #7b9996; + --intergalactic-sidebar-nav-control-icon-active: #3e4e4d; + /* Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen) */ + --intergalactic-duration-extra-slow: 500; + /* Should be used for more larger scale animations (such as page transitions) */ + --intergalactic-duration-slow: 400; + /* Should be used for more complex effects (such as Modal) */ + --intergalactic-duration-medium: 300; + /* Should be used for more complex effects (such as Dropdown or Accordion) */ + --intergalactic-duration-fast: 200; + /* Should be used for simpler effects and relatively small-sized animations (such as fades or color changes) */ + --intergalactic-duration-extra-fast: 100; + /* Use for small controls like Switch or Slider. */ + --intergalactic-duration-switch: 100; + /* Use for components based on popper like Tooltip, Dropdown or Filter trigger. */ + --intergalactic-duration-popper: 200; + /* Use for small controls like Checkbox or Radio. */ + --intergalactic-duration-control: 200; + /* Use for Modal, Fullscreen Modal, Side panel or other kind of windows. */ + --intergalactic-duration-modal: 200; + /* Use for Accordion. */ + --intergalactic-duration-accordion: 200; + /* Use for Summary or Counter. */ + --intergalactic-duration-counter: 200; +} \ No newline at end of file diff --git a/semcore/core/src/theme/themes/new-adjusted.ts b/semcore/core/src/theme/themes/new-adjusted.ts new file mode 100644 index 0000000000..35c2c2d500 --- /dev/null +++ b/semcore/core/src/theme/themes/new-adjusted.ts @@ -0,0 +1,489 @@ +export default { + '--gray-50': '#f3f4f4', + '--gray-100': '#dedfe2', + '--gray-200': '#c4c5ca', + '--gray-300': '#a9aab1', + '--gray-400': '#90929a', + '--gray-500': '#6c6e79', + '--gray-600': '#484a52', + '--gray-700': '#2f3035', + '--gray-800': '#131416', + '--gray-white': '#ffffff', + '--blue-50': '#eef4ff', + '--blue-100': '#d0e0fe', + '--blue-200': '#aac6fb', + '--blue-300': '#83aaf7', + '--blue-400': '#5e8ef2', + '--blue-500': '#2661e8', + '--blue-600': '#1640a1', + '--blue-700': '#0e2a6a', + '--blue-800': '#08183c', + '--green-50': '#dcfdf0', + '--green-100': '#9df4d7', + '--green-200': '#48e3b8', + '--green-300': '#35c59f', + '--green-400': '#2a8', + '--green-500': '#0a8266', + '--green-600': '#075844', + '--green-700': '#033427', + '--green-800': '#021912', + '--red-50': '#ffefec', + '--red-100': '#ffd0c8', + '--red-200': '#ffa79a', + '--red-300': '#ff786b', + '--red-400': '#ff3f38', + '--red-500': '#ca201f', + '--red-600': '#8b1312', + '--red-700': '#550807', + '--red-800': '#2c0202', + '--orange-50': '#ffefe9', + '--orange-100': '#ffd4c6', + '--orange-200': '#fcb097', + '--orange-300': '#f48a66', + '--orange-400': '#ea622f', + '--orange-500': '#b4481e', + '--orange-600': '#7b2f13', + '--orange-700': '#4a1a09', + '--orange-800': '#260a02', + '--yellow-50': '#fff2d7', + '--yellow-100': '#ffd997', + '--yellow-200': '#fbb829', + '--yellow-300': '#da9f21', + '--yellow-400': '#bb881c', + '--yellow-500': '#8e6711', + '--yellow-600': '#614509', + '--yellow-700': '#3a2803', + '--yellow-800': '#1d1201', + '--violet-50': '#f5f1ff', + '--violet-100': '#e2d8ff', + '--violet-200': '#cbb7ff', + '--violet-300': '#b494ff', + '--violet-400': '#a070fe', + '--violet-500': '#8426f5', + '--violet-600': '#5a17a9', + '--violet-700': '#350a69', + '--violet-800': '#1a0239', + '--violet-dusty-50': '#f1f5f4', + '--violet-dusty-100': '#d8e2e1', + '--violet-dusty-200': '#b8cac8', + '--violet-dusty-300': '#96b1af', + '--violet-dusty-400': '#7b9996', + '--violet-dusty-500': '#5c7472', + '--violet-dusty-600': '#3e4e4d', + '--violet-dusty-700': '#232e2d', + '--violet-dusty-800': '#0f1515', + '--pink-50': '#fff0ff', + '--pink-100': '#ffd3ff', + '--pink-200': '#ffa9fa', + '--pink-300': '#ff87eb', + '--pink-400': '#e14adf', + '--pink-500': '#b229b9', + '--pink-600': '#7d0480', + '--pink-700': '#4d0050', + '--pink-800': '#340439', + '--salad-50': '#e8fef9', + '--salad-100': '#b7faeb', + '--salad-200': '#95f8e2', + '--salad-300': '#64f5d4', + '--salad-400': '#46f3cc', + '--salad-500': '#18f0bf', + '--salad-600': '#16daae', + '--salad-700': '#11aa88', + '--salad-800': '#0d8469', + '--intergalactic-bg-primary-neutral': '#ffffff', + '--intergalactic-bg-primary-neutral-hover': '#f3f4f4', + '--intergalactic-bg-primary-neutral-active': '#dedfe2', + '--intergalactic-bg-primary-info': '#5e8ef2', + '--intergalactic-bg-primary-success': '#2a8', + '--intergalactic-bg-primary-critical': '#ff3f38', + '--intergalactic-bg-primary-warning': '#ea622f', + '--intergalactic-bg-primary-highlight': '#ffd997', + '--intergalactic-bg-primary-advertising': '#350a69', + '--intergalactic-bg-primary-muted': '#6c6e79', + '--intergalactic-bg-primary-invert': '#131416', + '--intergalactic-bg-primary-invert-hover': '#2f3035', + '--intergalactic-bg-primary-invert-active': '#484a52', + '--intergalactic-bg-secondary-neutral': '#f3f4f4', + '--intergalactic-bg-secondary-neutral-hover': '#dedfe2', + '--intergalactic-bg-secondary-neutral-active': '#c4c5ca', + '--intergalactic-bg-secondary-info': '#eef4ff', + '--intergalactic-bg-secondary-info-hover': '#d0e0fe', + '--intergalactic-bg-secondary-info-active': '#aac6fb', + '--intergalactic-bg-secondary-success': '#dcfdf0', + '--intergalactic-bg-secondary-success-hover': '#9df4d7', + '--intergalactic-bg-secondary-success-active': '#48e3b8', + '--intergalactic-bg-secondary-critical': '#ffefec', + '--intergalactic-bg-secondary-critical-hover': '#ffd0c8', + '--intergalactic-bg-secondary-critical-active': '#ffa79a', + '--intergalactic-bg-secondary-warning': '#ffefe9', + '--intergalactic-bg-secondary-warning-hover': '#ffd4c6', + '--intergalactic-bg-secondary-warning-active': '#fcb097', + '--intergalactic-bg-secondary-highlight': '#fff2d7', + '--intergalactic-bg-secondary-highlight-hover': '#ffd997', + '--intergalactic-bg-secondary-highlight-active': '#fbb829', + '--intergalactic-bg-secondary-advertising': '#f5f1ff', + '--intergalactic-bg-secondary-advertising-hover': '#e2d8ff', + '--intergalactic-bg-secondary-advertising-active': '#cbb7ff', + '--intergalactic-bg-highlight-results': 'rgba(218, 159, 33, 0.4)', + '--intergalactic-bg-highlight-focus': 'rgba(94, 142, 242, 0.2)', + '--intergalactic-text-primary': '#131416', + '--intergalactic-text-secondary': '#6c6e79', + '--intergalactic-text-placeholder': '#90929a', + '--intergalactic-text-success': '#0a8266', + '--intergalactic-text-success-hover-active': '#075844', + '--intergalactic-text-critical': '#ca201f', + '--intergalactic-text-critical-hover-active': '#8b1312', + '--intergalactic-text-primary-invert': '#ffffff', + '--intergalactic-text-secondary-invert': 'rgba(255, 255, 255, 0.8)', + '--intergalactic-text-link': '#2661e8', + '--intergalactic-text-link-hover-active': '#1640a1', + '--intergalactic-text-link-invert': '#aac6fb', + '--intergalactic-text-link-invert-hover': '#83aaf7', + '--intergalactic-text-link-visited': '#8426f5', + '--intergalactic-text-hint': '#6c6e79', + '--intergalactic-text-hint-hover-active': '#484a52', + '--intergalactic-text-hint-invert': '#c4c5ca', + '--intergalactic-text-hint-invert-hover-active': '#a9aab1', + '--intergalactic-text-large-secondary': '#a9aab1', + '--intergalactic-text-large-info': '#5e8ef2', + '--intergalactic-text-large-info-hover-active': '#2661e8', + '--intergalactic-text-large-success': '#2a8', + '--intergalactic-text-large-success-hover-active': '#0a8266', + '--intergalactic-text-large-critical': '#ff3f38', + '--intergalactic-text-large-critical-hover-active': '#ca201f', + '--intergalactic-text-advertising': '#350a69', + '--intergalactic-border-primary': '#c4c5ca', + '--intergalactic-border-secondary': '#dedfe2', + '--intergalactic-border-info': '#aac6fb', + '--intergalactic-border-info-active': '#131416', + '--intergalactic-border-success': '#48e3b8', + '--intergalactic-border-success-active': '#0a8266', + '--intergalactic-border-critical': '#ffa79a', + '--intergalactic-border-critical-active': '#ca201f', + '--intergalactic-border-warning': '#fcb097', + '--intergalactic-border-warning-active': '#b4481e', + '--intergalactic-border-primary-invert': '#ffffff', + '--intergalactic-border-secondary-invert': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-border-tooltip-invert': '#6c6e79', + '--intergalactic-border-table-accent': '#a9aab1', + '--intergalactic-border-date-picker-range-comparison': '#8426f5', + '--intergalactic-border-critical-pattern': 'repeating-linear-gradient(315deg, rgba(202, 32, 31, 1) 0, rgba(202, 32, 31, 1) 2px, transparent 0, transparent 50%)', + '--intergalactic-control-switch-bg': '#a9aab1', + '--intergalactic-control-primary-info': '#131416', + '--intergalactic-control-primary-info-hover': '#131416', + '--intergalactic-control-primary-info-active': '#131416', + '--intergalactic-control-primary-success': '#2a8', + '--intergalactic-control-primary-success-hover': '#0a8266', + '--intergalactic-control-primary-success-active': '#075844', + '--intergalactic-control-primary-critical': '#ff3f38', + '--intergalactic-control-primary-critical-hover': '#ca201f', + '--intergalactic-control-primary-critical-active': '#8b1312', + '--intergalactic-control-primary-brand': '#ea622f', + '--intergalactic-control-primary-brand-hover': '#b4481e', + '--intergalactic-control-primary-brand-active': '#7b2f13', + '--intergalactic-control-primary-advertising': '#5a17a9', + '--intergalactic-control-primary-advertising-hover': '#350a69', + '--intergalactic-control-primary-advertising-active': '#8426f5', + '--intergalactic-control-primary-invert': '#ffffff', + '--intergalactic-control-primary-invert-hover': '#f3f4f4', + '--intergalactic-control-primary-invert-active': '#dedfe2', + '--intergalactic-control-secondary-neutral': 'rgba(144, 146, 154, 0.1)', + '--intergalactic-control-secondary-neutral-hover': 'rgba(144, 146, 154, 0.2)', + '--intergalactic-control-secondary-neutral-active': 'rgba(144, 146, 154, 0.3)', + '--intergalactic-control-secondary-info': 'rgba(94, 142, 242, 0.1)', + '--intergalactic-control-secondary-info-hover': 'rgba(94, 142, 242, 0.2)', + '--intergalactic-control-secondary-info-active': 'rgba(94, 142, 242, 0.3)', + '--intergalactic-control-secondary-invert': 'rgba(255, 255, 255, 0.05)', + '--intergalactic-control-secondary-invert-hover': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-control-secondary-invert-active': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-control-tertiary-neutral': 'rgba(144, 146, 154, 0)', + '--intergalactic-control-tertiary-neutral-hover': 'rgba(144, 146, 154, 0.2)', + '--intergalactic-control-tertiary-neutral-active': 'rgba(144, 146, 154, 0.3)', + '--intergalactic-control-tertiary-info': 'rgba(94, 142, 242, 0)', + '--intergalactic-control-tertiary-info-hover': 'rgba(94, 142, 242, 0.2)', + '--intergalactic-control-tertiary-info-active': 'rgba(94, 142, 242, 0.3)', + '--intergalactic-control-tertiary-invert': 'rgba(255, 255, 255, 0)', + '--intergalactic-control-tertiary-invert-hover': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-control-tertiary-invert-active': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-icon-primary-neutral': '#6c6e79', + '--intergalactic-icon-primary-neutral-hover-active': '#565861', + '--intergalactic-icon-primary-info': '#2661e8', + '--intergalactic-icon-primary-info-hover-active': '#0358a1', + '--intergalactic-icon-primary-success': '#2a8', + '--intergalactic-icon-primary-success-hover-active': '#037e68', + '--intergalactic-icon-primary-critical': '#ff3f38', + '--intergalactic-icon-primary-critical-hover-active': '#cc3a42', + '--intergalactic-icon-primary-warning': '#ea622f', + '--intergalactic-icon-primary-warning-hover-active': '#cc5024', + '--intergalactic-icon-primary-invert': '#ffffff', + '--intergalactic-icon-primary-invert-hover-active': '#dedfe2', + '--intergalactic-icon-secondary-neutral': '#a9aab1', + '--intergalactic-icon-secondary-neutral-hover-active': '#878992', + '--intergalactic-icon-secondary-info': '#83aaf7', + '--intergalactic-icon-secondary-info-hover-active': '#2290cc', + '--intergalactic-icon-secondary-success': '#35c59f', + '--intergalactic-icon-secondary-success-hover-active': '#049b75', + '--intergalactic-icon-secondary-critical': '#ff786b', + '--intergalactic-icon-secondary-critical-hover-active': '#cc6c6b', + '--intergalactic-icon-secondary-warning': '#f48a66', + '--intergalactic-icon-secondary-warning-hover-active': '#cc7036', + '--intergalactic-icon-non-interactive': '#131416', + '--intergalactic-illustration-red': '#ff788f', + '--intergalactic-illustration-orange': '#ff9400', + '--intergalactic-illustration-yellow': '#ffe84d', + '--intergalactic-illustration-salad': '#c7fa73', + '--intergalactic-illustration-green': '#45e0a8', + '--intergalactic-illustration-blue': '#6edbff', + '--intergalactic-illustration-violet': '#b880ff', + '--intergalactic-illustration-pink': '#ff7ad1', + '--intergalactic-date-picker-cell': '#ffffff', + '--intergalactic-date-picker-cell-current': '#90929a', + '--intergalactic-date-picker-cell-hover': '#dedfe2', + '--intergalactic-date-picker-cell-range': '#d0e0fe', + '--intergalactic-date-picker-cell-range-hover': '#aac6fb', + '--intergalactic-date-picker-cell-active': '#83aaf7', + '--intergalactic-date-picker-cell-active-hover': '#5e8ef2', + '--intergalactic-date-picker-cell-current-invert': 'rgba(255, 255, 255, 0.5)', + '--intergalactic-date-picker-cell-comparison-active': '#8426f5', + '--intergalactic-date-picker-cell-comparison-active-hover': '#5a17a9', + '--intergalactic-dropdown-menu-item': '#ffffff', + '--intergalactic-dropdown-menu-item-hover': '#f3f4f4', + '--intergalactic-dropdown-menu-item-selected': 'rgba(208, 224, 254, 0.7)', + '--intergalactic-dropdown-menu-item-selected-hover': '#d0e0fe', + '--intergalactic-feature-popover-bg': '#ffd997', + '--intergalactic-feature-popover-dot-outer-border': '#ffd997', + '--intergalactic-feature-popover-bg-neutral': '#0f1515', + '--intergalactic-feature-popover-dot-neutral': '#35c59f', + '--intergalactic-feature-popover-dot-neutral-outer-border': '#35c59f', + '--intergalactic-progress-bar-bg': '#dedfe2', + '--intergalactic-progress-bar-bg-hover': '#c4c5ca', + '--intergalactic-progress-bar-bg-invert': 'rgba(255, 255, 255, 0.2)', + '--intergalactic-progress-bar-bg-invert-hover': 'rgba(255, 255, 255, 0.4)', + '--intergalactic-progress-bar-value-gradient': 'linear-gradient(-45deg, rgba(68, 193, 93, 0.9) 25%, rgba(68, 193, 93, 1) 0%, rgba(68, 193, 93, 1) 50%, rgba(68, 193, 93, 0.9) 0%, rgba(68, 193, 93, 0.9) 75%, rgba(68, 193, 93, 1) 0%)', + '--intergalactic-progress-bar-pattern-gradient': 'linear-gradient(-45deg, rgba(234, 239, 241, 0.9) 25%, rgba(234, 239, 241, 1) 0%, rgba(234, 239, 241, 1) 50%, rgba(234, 239, 241, 0.9) 0%, rgba(234, 239, 241, 0.9) 75%, rgba(234, 239, 241, 1) 0%)', + '--intergalactic-progress-bar-value-bg': '#000000', + '--intergalactic-skeleton-bg': 'rgba(222, 223, 226, 0.8)', + '--intergalactic-skeleton-bg-invert': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-slider-rating-normal': '#a9aab1', + '--intergalactic-slider-rating-hover-active': '#fbb829', + '--intergalactic-table-th-primary-cell': '#f3f4f4', + '--intergalactic-table-th-primary-cell-hover': '#dedfe2', + '--intergalactic-table-th-primary-cell-active': '#dedfe2', + '--intergalactic-table-th-secondary-cell': '#ffffff', + '--intergalactic-table-th-gradient': 'linear-gradient(to right, rgba(222, 223, 226, 0) 0%, rgba(222, 223, 226, 1) 100%)', + '--intergalactic-table-td-cell': '#ffffff', + '--intergalactic-table-td-cell-hover': '#efeff1', + '--intergalactic-table-td-cell-active': '#e5e5e8', + '--intergalactic-table-td-cell-unread': '#f3f4f4', + '--intergalactic-table-td-cell-accordion': '#f3f4f4', + '--intergalactic-table-td-cell-selected': '#eef4ff', + '--intergalactic-table-td-cell-selected-hover': '#d0e0fe', + '--intergalactic-table-td-cell-selected-active': '#d0e0fe', + '--intergalactic-table-td-cell-new': '#dcfdf0', + '--intergalactic-table-td-cell-new-hover': '#9df4d7', + '--intergalactic-table-td-cell-new-active': '#9df4d7', + '--intergalactic-table-td-cell-critical': '#ffefec', + '--intergalactic-table-td-cell-critical-hover': '#ffd0c8', + '--intergalactic-table-td-cell-critical-active': '#ffd0c8', + '--intergalactic-table-td-cell-warning': '#ffefe9', + '--intergalactic-table-td-cell-warning-hover': '#ffd4c6', + '--intergalactic-table-td-cell-warning-active': '#ffd4c6', + '--intergalactic-brand-primary': '#ea622f', + '--intergalactic-brand-secondary': '#350a69', + '--intergalactic-brand-pinterest': '#bd081c', + '--intergalactic-brand-instagram': '#e4405f', + '--intergalactic-brand-youtube': '#ff0000', + '--intergalactic-brand-facebook': '#1877f2', + '--intergalactic-brand-linkedIn': '#0a66c2', + '--intergalactic-brand-twitter': '#1d9bf0', + '--intergalactic-brand-google-blue': '#1a0dab', + '--intergalactic-brand-google-green': '#016723', + '--intergalactic-brand-google-my-business': '#1a73e8', + '--intergalactic-box-shadow-card': '0 0 0 1px #dedfe2', + '--intergalactic-box-shadow-card-hover': '3px 3px 30px 0px rgba(19, 20, 22, 0.15)', + '--intergalactic-box-shadow-dnd': '0px 0px 1px 0px rgba(19, 20, 22, 0.16), 0px 12px 40px 0px rgba(19, 20, 22, 0.16)', + '--intergalactic-box-shadow-modal': '0px 3px 8px 0px rgba(19, 20, 22, 0.2)', + '--intergalactic-box-shadow-popper': '0px 1px 12px 0px rgba(19, 20, 22, 0.15)', + '--intergalactic-keyboard-focus-outline': '#131416', + '--intergalactic-keyboard-focus-invalid-outline': '#ff3f38', + '--intergalactic-keyboard-focus-invalid': '0px 0px 0px 3px rgba(255, 63, 56, 0.5)', + '--intergalactic-keyboard-focus-valid-outline': '#2a8', + '--intergalactic-keyboard-focus-valid': '0px 0px 0px 3px rgba(2, 10, 8, 0.5)', + '--intergalactic-keyboard-focus-invert-outline': 'rgba(255, 255, 255, 0.8)', + '--intergalactic-keyboard-focus-invert': '0px 0px 0px 3px rgba(255, 255, 255, 0.8)', + '--intergalactic-keyboard-focus': '0px 0px 0px 3px rgba(19, 20, 22, 0.5)', + '--intergalactic-base': 'Inter', + '--intergalactic-lh-800': '117%', + '--intergalactic-lh-700': '110%', + '--intergalactic-lh-600': '125%', + '--intergalactic-lh-500': '117%', + '--intergalactic-lh-400': '120%', + '--intergalactic-lh-300': '150%', + '--intergalactic-lh-200': '142%', + '--intergalactic-lh-100': '133%', + '--intergalactic-semi-bold': '600', + '--intergalactic-bold': '700', + '--intergalactic-regular': '400', + '--intergalactic-medium': '500', + '--intergalactic-fs-50': '10px', + '--intergalactic-fs-100': '12px', + '--intergalactic-fs-200': '14px', + '--intergalactic-fs-300': '16px', + '--intergalactic-fs-400': '20px', + '--intergalactic-fs-500': '24px', + '--intergalactic-fs-600': '32px', + '--intergalactic-fs-700': '36px', + '--intergalactic-fs-800': '48px', + '--intergalactic-compact': '0.3', + '--intergalactic-scale-indent': '4px', + '--intergalactic-form-control-s': '20px', + '--intergalactic-form-control-m': '28px', + '--intergalactic-form-control-l': '40px', + '--intergalactic-spacing-05x': '2px', + '--intergalactic-spacing-1x': '4px', + '--intergalactic-spacing-2x': '8px', + '--intergalactic-spacing-3x': '12px', + '--intergalactic-spacing-4x': '16px', + '--intergalactic-spacing-5x': '20px', + '--intergalactic-spacing-6x': '24px', + '--intergalactic-spacing-8x': '32px', + '--intergalactic-spacing-10x': '40px', + '--intergalactic-spacing-14x': '56px', + '--intergalactic-spacing-20x': '80px', + '--intergalactic-spacing-24x': '96px', + '--intergalactic-spacing-30x': '120px', + '--intergalactic-rounded-extra-small': '2px', + '--intergalactic-rounded-small': '4px', + '--intergalactic-rounded-medium': '6px', + '--intergalactic-rounded-large': '12px', + '--intergalactic-rounded-extra-large': '24px', + '--intergalactic-addon-rounded': '4px', + '--intergalactic-badge-rounded': '6px', + '--intergalactic-chart-rounded': '2px', + '--intergalactic-counter-rounded': '12px', + '--intergalactic-tag-rounded': '24px', + '--intergalactic-switch-rounded': '24px', + '--intergalactic-control-rounded': '6px', + '--intergalactic-progress-bar-rounded': '6px', + '--intergalactic-surface-rounded': '6px', + '--intergalactic-popper-rounded': '6px', + '--intergalactic-modal-rounded': '12px', + '--intergalactic-disabled-opacity': '0.5', + '--intergalactic-screen-extra-small': '320px', + '--intergalactic-screen-small': '768px', + '--intergalactic-screen-medium': '1200px', + '--intergalactic-screen-large': '1920px', + '--intergalactic-overlay-primary': 'rgba(19, 20, 22, 0.7)', + '--intergalactic-overlay-secondary': 'rgba(19, 20, 22, 0.4)', + '--intergalactic-overlay-limitation-primary': '#f3f4f4', + '--intergalactic-overlay-limitation-secondary': 'rgba(255, 255, 255, 0.85)', + '--intergalactic-z-index-deep': '-999', + '--intergalactic-z-index-overlay': '500', + '--intergalactic-z-index-modal': '900', + '--intergalactic-z-index-popper': '700', + '--intergalactic-z-index-dropdown': '750', + '--intergalactic-z-index-tooltip': '800', + '--intergalactic-z-index-notice-bubble': '999', + '--intergalactic-tooltip-default': '#ffffff', + '--intergalactic-tooltip-warning': '#ffd0c8', + '--intergalactic-tooltip-invert': '#131416', + '--intergalactic-neighbor-location-neutral': '#ffffff80', + '--intergalactic-neighbor-location-invert': '#00000080', + '--intergalactic-scroll-area-shadow-left': 'linear-gradient(to right, rgba(19, 20, 22, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-right': 'linear-gradient(to left, rgba(19, 20, 22, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-top': 'linear-gradient(to bottom, rgba(19, 20, 22, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-bottom': 'linear-gradient(to top, rgba(19, 20, 22, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-dropdown-menu-left': 'linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-right': 'linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-bottom': 'linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-top': 'linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-bar-background': 'rgba(19, 20, 22, 0.3)', + '--intergalactic-tag-primary-gray-normal': '#ecedf0', + '--intergalactic-tag-primary-gray-hover-active': '#e3e4e9', + '--intergalactic-tag-primary-blue-normal': '#d0eeff', + '--intergalactic-tag-primary-blue-hover-active': '#b7e4ff', + '--intergalactic-tag-primary-green-normal': '#cff1ea', + '--intergalactic-tag-primary-green-hover-active': '#b7eae0', + '--intergalactic-tag-primary-orange-normal': '#ffddd2', + '--intergalactic-tag-primary-orange-hover-active': '#ffccbb', + '--intergalactic-tag-primary-red-normal': '#ffcedc', + '--intergalactic-tag-primary-red-hover-active': '#ffb6ca', + '--intergalactic-tag-primary-violet-normal': '#f4e3ff', + '--intergalactic-tag-primary-violet-hover-active': '#efd5ff', + '--intergalactic-tag-primary-yellow-normal': '#fee6d1', + '--intergalactic-tag-primary-yellow-hover-active': '#fedab9', + '--intergalactic-tag-primary-white-normal': 'rgba(255, 255, 255, 0.15)', + '--intergalactic-tag-primary-white-hover-active': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-tag-primary-gray-text': '#6c6e79', + '--intergalactic-tag-primary-blue-text': '#2661e8', + '--intergalactic-tag-primary-green-text': '#0a8266', + '--intergalactic-tag-primary-orange-text': '#b4481e', + '--intergalactic-tag-primary-red-text': '#ca201f', + '--intergalactic-tag-primary-violet-text': '#8426f5', + '--intergalactic-tag-primary-yellow-text': '#8e6711', + '--intergalactic-tag-primary-white-text': '#ffffff', + '--intergalactic-tag-secondary-normal': '#ffffff', + '--intergalactic-tag-secondary-hover-active': '#f3f4f4', + '--intergalactic-tag-secondary-white-normal': 'rgba(255, 255, 255, 0)', + '--intergalactic-tag-secondary-white-hover-active': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-tag-secondary-gray-text': '#6c6e79', + '--intergalactic-tag-secondary-white-text': '#ffffff', + '--intergalactic-chart-palette-order-1': '#83aaf7', + '--intergalactic-chart-palette-order-2': '#48e3b8', + '--intergalactic-chart-palette-order-3': '#ea622f', + '--intergalactic-chart-palette-order-4': '#ff87eb', + '--intergalactic-chart-palette-order-5': '#fbb829', + '--intergalactic-chart-palette-order-6': '#a070fe', + '--intergalactic-chart-palette-order-7': '#ff786b', + '--intergalactic-chart-palette-order-8': '#95f8e2', + '--intergalactic-chart-palette-order-9': '#5e8ef2', + '--intergalactic-chart-palette-order-10': '#35c59f', + '--intergalactic-chart-palette-order-11': '#fcb097', + '--intergalactic-chart-palette-order-12': '#e14adf', + '--intergalactic-chart-palette-order-13': '#da9f21', + '--intergalactic-chart-palette-order-14': '#cbb7ff', + '--intergalactic-chart-palette-order-15': '#ff3f38', + '--intergalactic-chart-palette-order-16': '#64f5d4', + '--intergalactic-chart-palette-order-17': '#aac6fb', + '--intergalactic-chart-palette-order-18': '#2a8', + '--intergalactic-chart-palette-order-19': '#f48a66', + '--intergalactic-chart-palette-order-20': '#ffa9fa', + '--intergalactic-chart-palette-order-21': '#bb881c', + '--intergalactic-chart-palette-order-22': '#b494ff', + '--intergalactic-chart-palette-order-23': '#ffa79a', + '--intergalactic-chart-palette-order-24': '#46f3cc', + '--intergalactic-chart-palette-order-total-amount': '#90929a', + '--intergalactic-chart-palette-order-other-data': '#c4c5ca', + '--intergalactic-chart-palette-order-null': '#dedfe2', + '--intergalactic-chart-grid-line': '#dedfe2', + '--intergalactic-chart-grid-x-axis': '#c4c5ca', + '--intergalactic-chart-grid-y-accent-hover-line': '#a9aab1', + '--intergalactic-chart-grid-text-label': '#6c6e79', + '--intergalactic-chart-grid-bar-chart-hover': 'rgba(196, 197, 202, 0.3)', + '--intergalactic-chart-grid-bar-chart-base-bg': '#dedfe2', + '--intergalactic-chart-grid-period-bg': 'rgba(196, 197, 202, 0.2)', + '--intergalactic-chart-grid-period-pattern': 'rgba(19, 20, 22, 0.15)', + '--intergalactic-chart-grid-border': '#ffffff', + '--intergalactic-chart-x-axis-accent-period-active': '#6c6e79', + '--intergalactic-chart-x-axis-accent-data-start-tracking': 'rgba(2, 10, 8, 0.2)', + '--intergalactic-header-bg': '#232e2d', + '--intergalactic-header-border-primary': '#232e2d', + '--intergalactic-header-border-secondary': '#ffffff26', + '--intergalactic-sidebar-nav-control-hover': 'rgba(222, 223, 226, 0.7)', + '--intergalactic-sidebar-nav-control-active': '#d8e2e1', + '--intergalactic-sidebar-nav-control-text-normal': '#5c7472', + '--intergalactic-sidebar-nav-control-text-active': '#3e4e4d', + '--intergalactic-sidebar-nav-control-icon-normal': '#7b9996', + '--intergalactic-sidebar-nav-control-icon-active': '#3e4e4d', + '--intergalactic-duration-extra-slow': '500', + '--intergalactic-duration-slow': '400', + '--intergalactic-duration-medium': '300', + '--intergalactic-duration-fast': '200', + '--intergalactic-duration-extra-fast': '100', + '--intergalactic-duration-switch': '100', + '--intergalactic-duration-popper': '200', + '--intergalactic-duration-control': '200', + '--intergalactic-duration-modal': '200', + '--intergalactic-duration-accordion': '200', + '--intergalactic-duration-counter': '200', +}; diff --git a/semcore/core/src/theme/themes/new.css b/semcore/core/src/theme/themes/new.css new file mode 100644 index 0000000000..f2f9a4011e --- /dev/null +++ b/semcore/core/src/theme/themes/new.css @@ -0,0 +1,877 @@ +:root { + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --gray-50: #f7f8f9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --gray-100: #eaeff1; + --gray-200: #d5dfe2; + --gray-300: #b0c4c9; + --gray-400: #85a2ab; + --gray-500: #668791; + --gray-600: #516e78; + --gray-700: #425a62; + --gray-800: #1e262a; + --gray-white: #ffffff; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --blue-50: #eaf0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --blue-100: #bdd1ff; + --blue-200: #9dbaff; + --blue-300: #709bff; + --blue-400: #5487ff; + --blue-500: #2969ff; + --blue-600: #2560e8; + --blue-700: #1d4bb5; + --blue-800: #173a8c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --green-50: #ecf9ef; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --green-100: #c5eccd; + --green-200: #a9e2b4; + --green-300: #82d592; + --green-400: #69cd7d; + --green-500: #44c15d; + --green-600: #3eb055; + --green-700: #308942; + --green-800: #256a33; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --red-50: #ffeaea; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --red-100: #ffbdbd; + --red-200: #ff9d9d; + --red-300: #ff7070; + --red-400: #ff5454; + --red-500: #ff2929; + --red-600: #e82525; + --red-700: #b51d1d; + --red-800: #8c1717; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --orange-50: #fff1ec; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --orange-100: #ffd3c3; + --orange-200: #ffbda5; + --orange-300: #ff9f7c; + --orange-400: #ff8d63; + --orange-500: #ff703c; + --orange-600: #e86637; + --orange-700: #b5502b; + --orange-800: #8c3e21; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --yellow-50: #fff8ea; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --yellow-100: #ffeabd; + --yellow-200: #ffe09d; + --yellow-300: #ffd170; + --yellow-400: #ffc954; + --yellow-500: #ffbb29; + --yellow-600: #e8aa25; + --yellow-700: #b5851d; + --yellow-800: #8c6717; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-50: #f3eaff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-100: #dabdff; + --violet-200: #c99dff; + --violet-300: #b070ff; + --violet-400: #a155ff; + --violet-500: #892aff; + --violet-600: #7d26e8; + --violet-700: #611eb5; + --violet-800: #4b178c; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --violet-dusty-50: #f5f4ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --violet-dusty-100: #e2ddff; + --violet-dusty-200: #bcb1e9; + --violet-dusty-300: #a79cd6; + --violet-dusty-400: #9083c5; + --violet-dusty-500: #6d619f; + --violet-dusty-600: #4d407e; + --violet-dusty-700: #382e5e; + --violet-dusty-800: #1d113e; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --pink-50: #fff0ff; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --pink-100: #ffd3ff; + --pink-200: #ffa9fa; + --pink-300: #ff87eb; + --pink-400: #e14adf; + --pink-500: #b229b9; + --pink-600: #7d0480; + --pink-700: #4d0050; + --pink-800: #340439; + /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */ + --salad-50: #e8fef9; + /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */ + --salad-100: #b7faeb; + --salad-200: #95f8e2; + --salad-300: #64f5d4; + --salad-400: #46f3cc; + --salad-500: #18f0bf; + --salad-600: #16daae; + --salad-700: #11aa88; + --salad-800: #0d8469; + /* Primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral: #ffffff; + /* Hover state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-hover: #f7f8f9; + /* Active (selected) state of the primary background of the interface which contains the main data and information. */ + --intergalactic-bg-primary-neutral-active: #eaeff1; + /* Accent background of the message with regular information. */ + --intergalactic-bg-primary-info: #5487ff; + /* Accent background of the message or banner with information about the successful result. */ + --intergalactic-bg-primary-success: #69cd7d; + /* Accent background of a message or a banner with a critical information. */ + --intergalactic-bg-primary-critical: #ff5454; + /* Accent background of a message or a banner with a warning information. */ + --intergalactic-bg-primary-warning: #ff8d63; + /* Accent background of the information you want to highlight. */ + --intergalactic-bg-primary-highlight: #ffeabd; + /* Accent background for the advertising banners and controls. */ + --intergalactic-bg-primary-advertising: #611eb5; + /* Accented muted background for a message with regular information. */ + --intergalactic-bg-primary-muted: #668791; + /* Inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert: #1e262a; + /* Hover state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-hover: #425a62; + /* Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information. */ + --intergalactic-bg-primary-invert-active: #516e78; + /* Secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral: #f7f8f9; + /* Hover state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-hover: #eaeff1; + /* Active (selected) state of the secondary background of the interface which contains the main data and information. */ + --intergalactic-bg-secondary-neutral-active: #d5dfe2; + /* Secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info: #eaf0ff; + /* Hover state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-hover: #bdd1ff; + /* Active (selected) state of the secondary background of a message with regular information. */ + --intergalactic-bg-secondary-info-active: #9dbaff; + /* Secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success: #ecf9ef; + /* Hover state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-hover: #c5eccd; + /* Active (selected) state of the secondary background of the message with success information you want to accent. */ + --intergalactic-bg-secondary-success-active: #a9e2b4; + /* Secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical: #ffeaea; + /* Hover state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-hover: #ffbdbd; + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-critical-active: #ff9d9d; + /* Secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning: #fff1ec; + /* Hover state of the secondary background of the message with warning information you want to accent. */ + --intergalactic-bg-secondary-warning-hover: #ffd3c3; + /* Active (selected) state of the secondary background of the message with critical information you want to accent. */ + --intergalactic-bg-secondary-warning-active: #ffbda5; + /* Secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight: #fff8ea; + /* Hover state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-hover: #ffeabd; + /* Active (selected) state of the secondary background of the information you want to highlight. */ + --intergalactic-bg-secondary-highlight-active: #ffe09d; + /* Secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising: #f3eaff; + /* Hover state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-hover: #dabdff; + /* Active (selected) state of the secondary background for the advertising message you want to accent. */ + --intergalactic-bg-secondary-advertising-active: #c99dff; + /* Highlighting the search results. */ + --intergalactic-bg-highlight-results: rgba(255, 209, 112, 0.4); + /* Focusing values in the input. */ + --intergalactic-bg-highlight-focus: rgba(84, 135, 255, 0.2); + /* Primary text. */ + --intergalactic-text-primary: #1e262a; + /* Secondary text. */ + --intergalactic-text-secondary: #668791; + /* Placeholder text only. */ + --intergalactic-text-placeholder: #85a2ab; + /* Text associated with success states and data. */ + --intergalactic-text-success: #44c15d; + /* Hover and active states for the text associated with success states and data. */ + --intergalactic-text-success-hover-active: #3eb055; + /* Text associated with critical states and data. */ + --intergalactic-text-critical: #ff2929; + /* Hover and active states for the text associated with critical states and data. */ + --intergalactic-text-critical-hover-active: #e82525; + /* Inverted version of the primary text. */ + --intergalactic-text-primary-invert: #ffffff; + /* Inverted version of the secondary text. */ + --intergalactic-text-secondary-invert: rgba(255, 255, 255, 0.8); + /* Link text. */ + --intergalactic-text-link: #2969ff; + /* Hover and active states for the link text. */ + --intergalactic-text-link-hover-active: #2560e8; + /* Inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert: #9dbaff; + /* Hover and active states of the inverted version of the link text. Use on dark background only. */ + --intergalactic-text-link-invert-hover: #709bff; + /* Visited link text. */ + --intergalactic-text-link-visited: #892aff; + /* Hint link text. */ + --intergalactic-text-hint: #668791; + /* Hover and active states of the hint link text. */ + --intergalactic-text-hint-hover-active: #516e78; + /* Inverted version of the hint link text. */ + --intergalactic-text-hint-invert: #d5dfe2; + /* Hover and active states of the inverted version of the hint link text. */ + --intergalactic-text-hint-invert-hover-active: #b0c4c9; + /* Secondary text. Use with font-size ≥20px. */ + --intergalactic-text-large-secondary: #b0c4c9; + /* Link text with font-size ≥20px. */ + --intergalactic-text-large-info: #5487ff; + /* Hover and active states of the link text with font-size ≥20px. */ + --intergalactic-text-large-info-hover-active: #2969ff; + /* Text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success: #69cd7d; + /* Hover and active states of the text with font-size ≥20px associated with success states and data. */ + --intergalactic-text-large-success-hover-active: #44c15d; + /* Text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical: #ff5454; + /* Hover and active states of the text with font-size ≥20px associated with critical states and data. */ + --intergalactic-text-large-critical-hover-active: #ff2929; + /* Advertising text. */ + --intergalactic-text-advertising: #611eb5; + /* Neutral primary border. */ + --intergalactic-border-primary: #d5dfe2; + /* Subtle secondary border. */ + --intergalactic-border-secondary: #eaeff1; + /* Subtle secondary border in the informational message. */ + --intergalactic-border-info: #9dbaff; + /* Active border in focused input filed. */ + --intergalactic-border-info-active: #1e262a; + /* Subtle secondary border in the successful message and input field. */ + --intergalactic-border-success: #a9e2b4; + /* Active border in the focused input field with valid state. */ + --intergalactic-border-success-active: #44c15d; + /* Subtle secondary border in the critical message and invalid input field. */ + --intergalactic-border-critical: #ff9d9d; + /* Active border in the focused input field with invalid state, and active state of the other components with invalid state. */ + --intergalactic-border-critical-active: #ff2929; + /* Subtle secondary border in the warning message. */ + --intergalactic-border-warning: #ffbda5; + /* Active border in components with warning intention. */ + --intergalactic-border-warning-active: #ff703c; + /* Inverted version of the neutral primary border. Use it for borders on the dark or color background. */ + --intergalactic-border-primary-invert: #ffffff; + /* Inverted version of the neutral secondary border. Use it for borders on the dark or color background. */ + --intergalactic-border-secondary-invert: rgba(255, 255, 255, 0.3); + /* Border of the Tooltip with dark theme. */ + --intergalactic-border-tooltip-invert: #668791; + /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */ + --intergalactic-border-table-accent: #b0c4c9; + /* Border color of the second period for the comparison mode in the DatePicker. */ + --intergalactic-border-date-picker-range-comparison: #892aff; + /* Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states. */ + --intergalactic-border-critical-pattern: repeating-linear-gradient(315deg, rgba(255, 41, 41, 1) 0, rgba(255, 41, 41, 1) 2px, transparent 0, transparent 50%); + /* Subtle background of the Switch control. */ + --intergalactic-control-switch-bg: #b0c4c9; + /* Background of the regular primary control. */ + --intergalactic-control-primary-info: #1e262a; + /* Hover state of the regular primary control. */ + --intergalactic-control-primary-info-hover: #1e262a; + /* Active (selected) state of the regular primary control. */ + --intergalactic-control-primary-info-active: #1e262a; + /* Background of the primary control with successful theme. */ + --intergalactic-control-primary-success: #69cd7d; + /* Hover state of the primary control with successful theme. */ + --intergalactic-control-primary-success-hover: #44c15d; + /* Active (selected) state of the primary control with successful theme. */ + --intergalactic-control-primary-success-active: #3eb055; + /* Background of the primary control with danger theme. */ + --intergalactic-control-primary-critical: #ff5454; + /* Hover state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-hover: #ff2929; + /* Active (selected) state of the primary control with danger theme. */ + --intergalactic-control-primary-critical-active: #e82525; + /* Background of the primary brand colored control. */ + --intergalactic-control-primary-brand: #ff8d63; + /* Hover state of the primary brand colored control. */ + --intergalactic-control-primary-brand-hover: #ff703c; + /* Active state of the primary brand colored control. */ + --intergalactic-control-primary-brand-active: #e86637; + /* Background of the advertising primary control. */ + --intergalactic-control-primary-advertising: #7d26e8; + /* Hover state of the advertising primary control. */ + --intergalactic-control-primary-advertising-hover: #611eb5; + /* Active (selected) state of the advertising primary control. */ + --intergalactic-control-primary-advertising-active: #892aff; + /* Inverted background of the primary control. */ + --intergalactic-control-primary-invert: #ffffff; + /* Hover state of the inverted primary control. */ + --intergalactic-control-primary-invert-hover: #f7f8f9; + /* Active (selected) state of the inverted primary control. */ + --intergalactic-control-primary-invert-active: #eaeff1; + /* Background of the regular secondary control. */ + --intergalactic-control-secondary-neutral: rgba(133, 162, 171, 0.1); + /* Hover state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-hover: rgba(133, 162, 171, 0.2); + /* Active (selected) state of the regular secondary control. */ + --intergalactic-control-secondary-neutral-active: rgba(133, 162, 171, 0.3); + /* Background of the accent secondary control. */ + --intergalactic-control-secondary-info: rgba(84, 135, 255, 0.1); + /* Hover state of the accent secondary control. */ + --intergalactic-control-secondary-info-hover: rgba(84, 135, 255, 0.2); + /* Active (selected) state of the accent secondary control. */ + --intergalactic-control-secondary-info-active: rgba(84, 135, 255, 0.3); + /* Background of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert: rgba(255, 255, 255, 0.05); + /* Hover state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the secondary control. */ + --intergalactic-control-secondary-invert-active: rgba(255, 255, 255, 0.3); + /* Background of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral: rgba(133, 162, 171, 0); + /* Hover state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-hover: rgba(133, 162, 171, 0.2); + /* Active (selected) state of the regular tertiary control. */ + --intergalactic-control-tertiary-neutral-active: rgba(133, 162, 171, 0.3); + /* Background of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info: rgba(84, 135, 255, 0); + /* Hover state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-hover: rgba(84, 135, 255, 0.2); + /* Active (selected) state of the accent and link-lookalike tertiary control. */ + --intergalactic-control-tertiary-info-active: rgba(84, 135, 255, 0.3); + /* Background of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert: rgba(255, 255, 255, 0); + /* Hover state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-hover: rgba(255, 255, 255, 0.1); + /* Active (selected) state of the inverted version of the tertiary control. */ + --intergalactic-control-tertiary-invert-active: rgba(255, 255, 255, 0.3); + /* Primary neutral icon. */ + --intergalactic-icon-primary-neutral: #668791; + /* Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color. */ + --intergalactic-icon-primary-neutral-hover-active: #565861; + /* Primary link-lookalike icon. */ + --intergalactic-icon-primary-info: #2969ff; + /* Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color. */ + --intergalactic-icon-primary-info-hover-active: #0358a1; + /* Primary success icon. */ + --intergalactic-icon-primary-success: #69cd7d; + /* Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color. */ + --intergalactic-icon-primary-success-hover-active: #037e68; + /* Primary critical icon. */ + --intergalactic-icon-primary-critical: #ff5454; + /* Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color. */ + --intergalactic-icon-primary-critical-hover-active: #cc3a42; + /* Primary warning icon. */ + --intergalactic-icon-primary-warning: #ff8d63; + /* Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color. */ + --intergalactic-icon-primary-warning-hover-active: #cc5024; + /* Inverted version of the primary icon. */ + --intergalactic-icon-primary-invert: #ffffff; + /* Hover and active (selected) states of the inverted version of the primary icon. */ + --intergalactic-icon-primary-invert-hover-active: #eaeff1; + /* Secondary neutral icon. */ + --intergalactic-icon-secondary-neutral: #b0c4c9; + /* Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color. */ + --intergalactic-icon-secondary-neutral-hover-active: #878992; + /* Secondary link-lookalike icon. */ + --intergalactic-icon-secondary-info: #709bff; + /* Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color. */ + --intergalactic-icon-secondary-info-hover-active: #2290cc; + /* Secondary success icon. */ + --intergalactic-icon-secondary-success: #82d592; + /* Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color. */ + --intergalactic-icon-secondary-success-hover-active: #049b75; + /* Secondary critical icon. */ + --intergalactic-icon-secondary-critical: #ff7070; + /* Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color. */ + --intergalactic-icon-secondary-critical-hover-active: #cc6c6b; + /* Secondary warning icon. */ + --intergalactic-icon-secondary-warning: #ff9f7c; + /* Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color. */ + --intergalactic-icon-secondary-warning-hover-active: #cc7036; + /* Color for the default non-interactive icon. */ + --intergalactic-icon-non-interactive: #1e262a; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-red: #ff788f; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-orange: #ff9400; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-yellow: #ffe84d; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-salad: #c7fa73; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-green: #45e0a8; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-blue: #6edbff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-violet: #b880ff; + /* ⚠️ Use only for illustrations. */ + --intergalactic-illustration-pink: #ff7ad1; + /* Default date-picker cell background. */ + --intergalactic-date-picker-cell: #ffffff; + /* Color for marking the cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current: #85a2ab; + /* Hover state of the default date-picker cell background. */ + --intergalactic-date-picker-cell-hover: #eaeff1; + /* Background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range: #bdd1ff; + /* Hover state of the background for the cell which is included in the date range in the date-picker. */ + --intergalactic-date-picker-cell-range-hover: #9dbaff; + /* Active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active: #709bff; + /* Hover for the active (selected) date-picker cell background. */ + --intergalactic-date-picker-cell-active-hover: #5487ff; + /* Color for marking the active cell with the current date, month or year in the date-picker. */ + --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5); + /* Active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active: #892aff; + /* Hover for the active (selected) date-picker cell background for comparison periods. */ + --intergalactic-date-picker-cell-comparison-active-hover: #7d26e8; + /* Default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item: #ffffff; + /* Hover state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-hover: #f7f8f9; + /* Active (selected) state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected: rgba(189, 209, 255, 0.7); + /* Hover state for the selected state of the default background color for the list item in the dropdown-menu. */ + --intergalactic-dropdown-menu-item-selected-hover: #bdd1ff; + /* Color of the FeaturePopover background with accent theme. */ + --intergalactic-feature-popover-bg: #ffeabd; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */ + --intergalactic-feature-popover-dot-outer-border: #ffeabd; + /* Color of the FeaturePopover background with neutral theme. */ + --intergalactic-feature-popover-bg-neutral: #1d113e; + /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral: #82d592; + /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */ + --intergalactic-feature-popover-dot-neutral-outer-border: #82d592; + /* Background color of the ProgressBar. */ + --intergalactic-progress-bar-bg: #eaeff1; + /* Hover state of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-hover: #d5dfe2; + /* Inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert: rgba(255, 255, 255, 0.2); + /* Hover state for the inverted version of the background color of the ProgressBar. */ + --intergalactic-progress-bar-bg-invert-hover: rgba(255, 255, 255, 0.4); + /* Value with gradient for the ProgressBar. */ + --intergalactic-progress-bar-value-gradient: linear-gradient(-45deg, rgba(68, 193, 93, 0.9) 25%, rgba(68, 193, 93, 1) 0%, rgba(68, 193, 93, 1) 50%, rgba(68, 193, 93, 0.9) 0%, rgba(68, 193, 93, 0.9) 75%, rgba(68, 193, 93, 1) 0%); + /* Null value gradient for the ProgressBar. */ + --intergalactic-progress-bar-pattern-gradient: linear-gradient(-45deg, rgba(234, 239, 241, 0.9) 25%, rgba(234, 239, 241, 1) 0%, rgba(234, 239, 241, 1) 50%, rgba(234, 239, 241, 0.9) 0%, rgba(234, 239, 241, 0.9) 75%, rgba(234, 239, 241, 1) 0%); + /* Base value background for the ProgressBar. It is used to create gradients for the values. */ + --intergalactic-progress-bar-value-bg: #000000; + /* Default color for the Skeleton. */ + --intergalactic-skeleton-bg: rgba(234, 239, 241, 0.8); + /* Inverted version of the default color for the Skeleton. */ + --intergalactic-skeleton-bg-invert: rgba(255, 255, 255, 0.3); + /* Icon color for the SliderRating component in its normal state. */ + --intergalactic-slider-rating-normal: #b0c4c9; + /* Icon color for the SliderRating component in its hovered and active states. */ + --intergalactic-slider-rating-hover-active: #ffe09d; + /* Background of the header cell in the primary Table. */ + --intergalactic-table-th-primary-cell: #f7f8f9; + /* Background of the hovered header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-hover: #eaeff1; + /* Background of the active header cell in the primary Table. */ + --intergalactic-table-th-primary-cell-active: #eaeff1; + /* Background of the header cell in the secondary Table. */ + --intergalactic-table-th-secondary-cell: #ffffff; + /* Background gradient for sorting icon that absolute positioned in the table head. */ + --intergalactic-table-th-gradient: linear-gradient(to right, rgba(234, 239, 241, 0) 0%, rgba(234, 239, 241, 1) 100%); + /* Background of the default cell in the Table. */ + --intergalactic-table-td-cell: #ffffff; + /* Background of the default hovered cell in the Table. */ + --intergalactic-table-td-cell-hover: #f4f7f8; + /* Background of the default active cell in the Table. */ + --intergalactic-table-td-cell-active: #eef2f4; + /* Background of the unread cell in the Table. */ + --intergalactic-table-td-cell-unread: #f7f8f9; + /* Background of the cell inside an Accordion in the Table. */ + --intergalactic-table-td-cell-accordion: #f7f8f9; + /* Background of the selected cell in the Table. */ + --intergalactic-table-td-cell-selected: #eaf0ff; + /* Background of the hovered selected cell in the Table. */ + --intergalactic-table-td-cell-selected-hover: #bdd1ff; + /* Background of the active selected cell in the Table. */ + --intergalactic-table-td-cell-selected-active: #bdd1ff; + /* Background of the cell with new information in the Table. */ + --intergalactic-table-td-cell-new: #ecf9ef; + /* Background of the hovered cell with new information in the Table. */ + --intergalactic-table-td-cell-new-hover: #c5eccd; + /* Background of the active cell with new information in the Table. */ + --intergalactic-table-td-cell-new-active: #c5eccd; + /* Background of the cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical: #ffeaea; + /* Background of the hovered cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-hover: #ffbdbd; + /* Background of the active cell with critical information in the Table. */ + --intergalactic-table-td-cell-critical-active: #ffbdbd; + /* Background of the cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning: #fff1ec; + /* Background of the hovered cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-hover: #ffd3c3; + /* Background of the active cell with warning information in the Table. */ + --intergalactic-table-td-cell-warning-active: #ffd3c3; + /* Primary brand color. */ + --intergalactic-brand-primary: #ff8d63; + /* Secondary brand color. */ + --intergalactic-brand-secondary: #611eb5; + /* Pinterest brand color. */ + --intergalactic-brand-pinterest: #bd081c; + /* Instagram brand color. */ + --intergalactic-brand-instagram: #e4405f; + /* Youtube brand color. */ + --intergalactic-brand-youtube: #ff0000; + /* Facebook brand color. */ + --intergalactic-brand-facebook: #1877f2; + /* LinkedIn brand color. */ + --intergalactic-brand-linkedIn: #0a66c2; + /* Twitter brand color. */ + --intergalactic-brand-twitter: #1d9bf0; + /* Google brand color for the link. */ + --intergalactic-brand-google-blue: #1a0dab; + /* Google green brand color for the link. */ + --intergalactic-brand-google-green: #016723; + /* Google My Business brand color. */ + --intergalactic-brand-google-my-business: #1a73e8; + /* Default shadow of the Card. */ + --intergalactic-box-shadow-card: 0 0 0 1px #eaeff1; + /* Hover state for the shadow of the Card with hover state. */ + --intergalactic-box-shadow-card-hover: 3px 3px 30px 0px rgba(30, 38, 42, 0.15); + /* Shadow for show that element are being drag-and-drop. */ + --intergalactic-box-shadow-dnd: 0px 0px 1px 0px rgba(30, 38, 42, 0.16), 0px 12px 40px 0px rgba(30, 38, 42, 0.16); + /* Default shadow if the Modal window. */ + --intergalactic-box-shadow-modal: 0px 3px 8px 0px rgba(30, 38, 42, 0.2); + /* Default shadow of all Poppers, Dropdowns and Tooltips. */ + --intergalactic-box-shadow-popper: 0px 1px 12px 0px rgba(30, 38, 42, 0.15); + /* Color for default keyboard focus outline styles. */ + --intergalactic-keyboard-focus-outline: #1e262a; + /* Color for keyboard focus outline styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid-outline: #ff5454; + /* Keyboard focus styles for elements with invalid state. */ + --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 84, 84, 0.5); + /* Color for keyboard focus outline styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid-outline: #69cd7d; + /* Keyboard focus styles for elements with valid state. */ + --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(105, 205, 125, 0.5); + /* Color for keyboard focus outline styles to use on the dark and color background. */ + --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8); + /* Keyboard focus styles for use on dark backgrounds. */ + --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8); + /* Default keyboard focus box-shadow styles. */ + --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(30, 38, 42, 0.5); + /* Base font family. */ + --intergalactic-base: Inter; + /* Use with font-size-800. */ + --intergalactic-lh-800: 117%; + /* Use with font-size-700. */ + --intergalactic-lh-700: 110%; + /* Use with font-size-600. */ + --intergalactic-lh-600: 125%; + /* Use with font-size-500. */ + --intergalactic-lh-500: 117%; + /* Use with font-size-400. */ + --intergalactic-lh-400: 120%; + /* Use with font-size-300. */ + --intergalactic-lh-300: 150%; + /* Use with font-size-200. */ + --intergalactic-lh-200: 142%; + /* Use with font-size-100. */ + --intergalactic-lh-100: 133%; + /* Semi-bold font weight. */ + --intergalactic-semi-bold: 600; + /* Bold font weight. */ + --intergalactic-bold: 700; + /* Regular font weight. */ + --intergalactic-regular: 400; + /* Medium font weight. */ + --intergalactic-medium: 500; + /* Use only for text in Badge component. */ + --intergalactic-fs-50: 10px; + /* Use this font-size with caution for text in some additional messages. Always check its contrast and readability. */ + --intergalactic-fs-100: 12px; + --intergalactic-fs-200: 14px; + --intergalactic-fs-300: 16px; + --intergalactic-fs-400: 20px; + --intergalactic-fs-500: 24px; + --intergalactic-fs-600: 32px; + --intergalactic-fs-700: 36px; + --intergalactic-fs-800: 48px; + /* Compact letter spacing. */ + --intergalactic-compact: 0.3; + /* Base denominator of the design system. */ + --intergalactic-scale-indent: 4px; + /* Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions. */ + --intergalactic-form-control-s: 20px; + /* Default size of the controls. */ + --intergalactic-form-control-m: 28px; + /* Large size of the controls. */ + --intergalactic-form-control-l: 40px; + /* 2px */ + --intergalactic-spacing-05x: 2px; + /* 4px */ + --intergalactic-spacing-1x: 4px; + /* 8px */ + --intergalactic-spacing-2x: 8px; + /* 12px */ + --intergalactic-spacing-3x: 12px; + /* 16px */ + --intergalactic-spacing-4x: 16px; + /* 20px */ + --intergalactic-spacing-5x: 20px; + /* 24px */ + --intergalactic-spacing-6x: 24px; + /* 32px */ + --intergalactic-spacing-8x: 32px; + /* 40px */ + --intergalactic-spacing-10x: 40px; + /* 56px */ + --intergalactic-spacing-14x: 56px; + /* 80px */ + --intergalactic-spacing-20x: 80px; + /* 96px */ + --intergalactic-spacing-24x: 96px; + /* 120px */ + --intergalactic-spacing-30x: 120px; + --intergalactic-rounded-extra-small: 2px; + --intergalactic-rounded-small: 4px; + --intergalactic-rounded-medium: 6px; + --intergalactic-rounded-large: 12px; + --intergalactic-rounded-extra-large: 24px; + /* Use for rounding addons and small controls like Checkbox. */ + --intergalactic-addon-rounded: 4px; + /* Use for rounding Badge. */ + --intergalactic-badge-rounded: 6px; + /* Use for rounding big and small charts like bar, histogram and others. */ + --intergalactic-chart-rounded: 2px; + /* Use for rounding Counter. */ + --intergalactic-counter-rounded: 12px; + /* Use for rounding Tag. */ + --intergalactic-tag-rounded: 24px; + /* Use for rounding Switch. */ + --intergalactic-switch-rounded: 24px; + /* Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc. */ + --intergalactic-control-rounded: 6px; + /* Use for rounding bars: ProgressBar, SliderBar, etc. */ + --intergalactic-progress-bar-rounded: 6px; + /* Use for rounding surfaces like Card, blocks, widgets, Notice, etc. */ + --intergalactic-surface-rounded: 6px; + /* Use for rounding all kinds of poppers and dropdowns. */ + --intergalactic-popper-rounded: 6px; + /* Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard). */ + --intergalactic-modal-rounded: 12px; + /* Use for the disabled state of all kind of the controls and elements. */ + --intergalactic-disabled-opacity: 0.5; + /* Extra small screens (small phones). */ + --intergalactic-screen-extra-small: 320px; + /* Small screens (phones and small tablets). */ + --intergalactic-screen-small: 768px; + /* Medium screens (tablets and small laptops). */ + --intergalactic-screen-medium: 1200px; + /* Large screens (tablets and laptops). */ + --intergalactic-screen-large: 1920px; + /* Use for cover the content under the modal dialogs. */ + --intergalactic-overlay-primary: rgba(30, 38, 42, 0.7); + /* Use for the secondary modal dialogs that were opened upon the other modal dialogs. */ + --intergalactic-overlay-secondary: rgba(30, 38, 42, 0.4); + /* Use as a primary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-primary: #f7f8f9; + /* Use as a secondary cover of the content under the messages about limitations. */ + --intergalactic-overlay-limitation-secondary: rgba(255, 255, 255, 0.85); + --intergalactic-z-index-deep: -999; + --intergalactic-z-index-overlay: 500; + --intergalactic-z-index-modal: 900; + --intergalactic-z-index-popper: 700; + --intergalactic-z-index-dropdown: 750; + --intergalactic-z-index-tooltip: 800; + --intergalactic-z-index-notice-bubble: 999; + /* Default Tooltip background. */ + --intergalactic-tooltip-default: #ffffff; + /* Warning Tooltip background. */ + --intergalactic-tooltip-warning: #ffbdbd; + /* Inverted version of the default Tooltip background. */ + --intergalactic-tooltip-invert: #1e262a; + /* Neutral border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-neutral: #ffffff80; + /* Inverted border of the components that are combined with neighbor-location property. */ + --intergalactic-neighbor-location-invert: #00000080; + /* Left-to-right fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-left: linear-gradient(to right, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Right-to-left fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-right: linear-gradient(to left, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Top-to-bottom fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-top: linear-gradient(to bottom, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Bottom-to-top fade shadow for the ScrollArea. */ + --intergalactic-scroll-area-shadow-bottom: linear-gradient(to top, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%); + /* Left-to-right fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-left: linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Right-to-left fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-right: linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-bottom: linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu. */ + --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%); + /* Background color for ScrollBar. */ + --intergalactic-scroll-bar-background: rgba(30, 38, 42, 0.3); + /* Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-normal: #ecedf0; + /* Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-gray-hover-active: #e3e4e9; + /* Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-normal: #d0eeff; + /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-blue-hover-active: #b7e4ff; + /* Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-normal: #cff1ea; + /* Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-green-hover-active: #b7eae0; + /* Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-normal: #ffddd2; + /* Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-orange-hover-active: #ffccbb; + /* Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-normal: #ffcedc; + /* Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-red-hover-active: #ffb6ca; + /* Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-normal: #f4e3ff; + /* Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-violet-hover-active: #efd5ff; + /* Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-normal: #fee6d1; + /* Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath. */ + --intergalactic-tag-primary-yellow-hover-active: #fedab9; + /* Primary white tag. */ + --intergalactic-tag-primary-white-normal: rgba(255, 255, 255, 0.15); + /* Hover and active (selected) state of the primary white tag. */ + --intergalactic-tag-primary-white-hover-active: rgba(255, 255, 255, 0.3); + /* Gray text for the primary gray tag. */ + --intergalactic-tag-primary-gray-text: #668791; + /* Blue text for the primary blue tag. */ + --intergalactic-tag-primary-blue-text: #2969ff; + /* Green text for the primary green tag. */ + --intergalactic-tag-primary-green-text: #44c15d; + /* Orange text for the primary orange tag. */ + --intergalactic-tag-primary-orange-text: #ff703c; + /* Red text for the primary red tag. */ + --intergalactic-tag-primary-red-text: #ff2929; + /* Violet text for the primary violet tag. */ + --intergalactic-tag-primary-violet-text: #892aff; + /* Yellow text for the primary yellow tag. */ + --intergalactic-tag-primary-yellow-text: #ffbb29; + /* White text for the primary white tag. */ + --intergalactic-tag-primary-white-text: #ffffff; + /* Background color for the default secondary tag. */ + --intergalactic-tag-secondary-normal: #ffffff; + /* Hover and active (selected) states of the background color for the default secondary tag. */ + --intergalactic-tag-secondary-hover-active: #f7f8f9; + /* White secondary tag. */ + --intergalactic-tag-secondary-white-normal: rgba(255, 255, 255, 0); + /* Active state of the secondary white tag. */ + --intergalactic-tag-secondary-white-hover-active: rgba(255, 255, 255, 0.1); + /* Gray text for the default secondary tag. */ + --intergalactic-tag-secondary-gray-text: #668791; + /* White text for the secondary white tag. */ + --intergalactic-tag-secondary-white-text: #ffffff; + /* 1 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-1: #709bff; + /* 2 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-2: #a9e2b4; + /* 3 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-3: #ff8d63; + /* 4 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-4: #ff87eb; + /* 5 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-5: #ffe09d; + /* 6 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-6: #a155ff; + /* 7 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-7: #ff7070; + /* 8 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-8: #95f8e2; + /* 9 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-9: #5487ff; + /* 10 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-10: #82d592; + /* 11 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-11: #ffbda5; + /* 12 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-12: #e14adf; + /* 13 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-13: #ffd170; + /* 14 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-14: #c99dff; + /* 15 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-15: #ff5454; + /* 16 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-16: #64f5d4; + /* 17 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-17: #9dbaff; + /* 18 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-18: #69cd7d; + /* 19 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-19: #ff9f7c; + /* 20 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-20: #ffa9fa; + /* 21 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-21: #ffc954; + /* 22 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-22: #b070ff; + /* 23 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-23: #ff9d9d; + /* 24 color in the default list of colors for charts. */ + --intergalactic-chart-palette-order-24: #46f3cc; + /* Use it to show total value. */ + --intergalactic-chart-palette-order-total-amount: #85a2ab; + /* Use it to indicate voids, missing or some other data. */ + --intergalactic-chart-palette-order-other-data: #d5dfe2; + /* Use it to show null value. */ + --intergalactic-chart-palette-order-null: #eaeff1; + /* Default chart grid line. */ + --intergalactic-chart-grid-line: #eaeff1; + /* X-axis line on the chart grid. */ + --intergalactic-chart-grid-x-axis: #d5dfe2; + /* Accent line for the hover state on the chart grid. */ + --intergalactic-chart-grid-y-accent-hover-line: #b0c4c9; + /* Text label on the chart grid. */ + --intergalactic-chart-grid-text-label: #668791; + /* Background color for the hover state of a bar on the chart grid. */ + --intergalactic-chart-grid-bar-chart-hover: rgba(213, 223, 226, 0.3); + /* Default background color of a bar in the BarChart. */ + --intergalactic-chart-grid-bar-chart-base-bg: #eaeff1; + /* Use for highlighting a period on the chart grid. */ + --intergalactic-chart-grid-period-bg: rgba(213, 223, 226, 0.2); + /* Stripe color for diagonal pattern background. */ + --intergalactic-chart-grid-period-pattern: rgba(30, 38, 42, 0.15); + /* Border for distinguishing data sets and chart dots on the chart grid. */ + --intergalactic-chart-grid-border: #ffffff; + /* Background color for the clickable date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-period-active: #668791; + /* Background color for the "Start tracking" date on the X-axis of the chart grid. */ + --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(105, 205, 125, 0.2); + --intergalactic-header-bg: #382e5e; + --intergalactic-header-border-primary: #382e5e; + --intergalactic-header-border-secondary: #ffffff26; + --intergalactic-sidebar-nav-control-hover: rgba(234, 239, 241, 0.7); + --intergalactic-sidebar-nav-control-active: #e2ddff; + --intergalactic-sidebar-nav-control-text-normal: #6d619f; + --intergalactic-sidebar-nav-control-text-active: #4d407e; + --intergalactic-sidebar-nav-control-icon-normal: #9083c5; + --intergalactic-sidebar-nav-control-icon-active: #4d407e; + /* Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen) */ + --intergalactic-duration-extra-slow: 500; + /* Should be used for more larger scale animations (such as page transitions) */ + --intergalactic-duration-slow: 400; + /* Should be used for more complex effects (such as Modal) */ + --intergalactic-duration-medium: 300; + /* Should be used for more complex effects (such as Dropdown or Accordion) */ + --intergalactic-duration-fast: 200; + /* Should be used for simpler effects and relatively small-sized animations (such as fades or color changes) */ + --intergalactic-duration-extra-fast: 100; + /* Use for small controls like Switch or Slider. */ + --intergalactic-duration-switch: 100; + /* Use for components based on popper like Tooltip, Dropdown or Filter trigger. */ + --intergalactic-duration-popper: 200; + /* Use for small controls like Checkbox or Radio. */ + --intergalactic-duration-control: 200; + /* Use for Modal, Fullscreen Modal, Side panel or other kind of windows. */ + --intergalactic-duration-modal: 200; + /* Use for Accordion. */ + --intergalactic-duration-accordion: 200; + /* Use for Summary or Counter. */ + --intergalactic-duration-counter: 200; +} \ No newline at end of file diff --git a/semcore/core/src/theme/themes/new.ts b/semcore/core/src/theme/themes/new.ts new file mode 100644 index 0000000000..99a0d00d4b --- /dev/null +++ b/semcore/core/src/theme/themes/new.ts @@ -0,0 +1,489 @@ +export default { + '--gray-50': '#f7f8f9', + '--gray-100': '#eaeff1', + '--gray-200': '#d5dfe2', + '--gray-300': '#b0c4c9', + '--gray-400': '#85a2ab', + '--gray-500': '#668791', + '--gray-600': '#516e78', + '--gray-700': '#425a62', + '--gray-800': '#1e262a', + '--gray-white': '#ffffff', + '--blue-50': '#eaf0ff', + '--blue-100': '#bdd1ff', + '--blue-200': '#9dbaff', + '--blue-300': '#709bff', + '--blue-400': '#5487ff', + '--blue-500': '#2969ff', + '--blue-600': '#2560e8', + '--blue-700': '#1d4bb5', + '--blue-800': '#173a8c', + '--green-50': '#ecf9ef', + '--green-100': '#c5eccd', + '--green-200': '#a9e2b4', + '--green-300': '#82d592', + '--green-400': '#69cd7d', + '--green-500': '#44c15d', + '--green-600': '#3eb055', + '--green-700': '#308942', + '--green-800': '#256a33', + '--red-50': '#ffeaea', + '--red-100': '#ffbdbd', + '--red-200': '#ff9d9d', + '--red-300': '#ff7070', + '--red-400': '#ff5454', + '--red-500': '#ff2929', + '--red-600': '#e82525', + '--red-700': '#b51d1d', + '--red-800': '#8c1717', + '--orange-50': '#fff1ec', + '--orange-100': '#ffd3c3', + '--orange-200': '#ffbda5', + '--orange-300': '#ff9f7c', + '--orange-400': '#ff8d63', + '--orange-500': '#ff703c', + '--orange-600': '#e86637', + '--orange-700': '#b5502b', + '--orange-800': '#8c3e21', + '--yellow-50': '#fff8ea', + '--yellow-100': '#ffeabd', + '--yellow-200': '#ffe09d', + '--yellow-300': '#ffd170', + '--yellow-400': '#ffc954', + '--yellow-500': '#ffbb29', + '--yellow-600': '#e8aa25', + '--yellow-700': '#b5851d', + '--yellow-800': '#8c6717', + '--violet-50': '#f3eaff', + '--violet-100': '#dabdff', + '--violet-200': '#c99dff', + '--violet-300': '#b070ff', + '--violet-400': '#a155ff', + '--violet-500': '#892aff', + '--violet-600': '#7d26e8', + '--violet-700': '#611eb5', + '--violet-800': '#4b178c', + '--violet-dusty-50': '#f5f4ff', + '--violet-dusty-100': '#e2ddff', + '--violet-dusty-200': '#bcb1e9', + '--violet-dusty-300': '#a79cd6', + '--violet-dusty-400': '#9083c5', + '--violet-dusty-500': '#6d619f', + '--violet-dusty-600': '#4d407e', + '--violet-dusty-700': '#382e5e', + '--violet-dusty-800': '#1d113e', + '--pink-50': '#fff0ff', + '--pink-100': '#ffd3ff', + '--pink-200': '#ffa9fa', + '--pink-300': '#ff87eb', + '--pink-400': '#e14adf', + '--pink-500': '#b229b9', + '--pink-600': '#7d0480', + '--pink-700': '#4d0050', + '--pink-800': '#340439', + '--salad-50': '#e8fef9', + '--salad-100': '#b7faeb', + '--salad-200': '#95f8e2', + '--salad-300': '#64f5d4', + '--salad-400': '#46f3cc', + '--salad-500': '#18f0bf', + '--salad-600': '#16daae', + '--salad-700': '#11aa88', + '--salad-800': '#0d8469', + '--intergalactic-bg-primary-neutral': '#ffffff', + '--intergalactic-bg-primary-neutral-hover': '#f7f8f9', + '--intergalactic-bg-primary-neutral-active': '#eaeff1', + '--intergalactic-bg-primary-info': '#5487ff', + '--intergalactic-bg-primary-success': '#69cd7d', + '--intergalactic-bg-primary-critical': '#ff5454', + '--intergalactic-bg-primary-warning': '#ff8d63', + '--intergalactic-bg-primary-highlight': '#ffeabd', + '--intergalactic-bg-primary-advertising': '#611eb5', + '--intergalactic-bg-primary-muted': '#668791', + '--intergalactic-bg-primary-invert': '#1e262a', + '--intergalactic-bg-primary-invert-hover': '#425a62', + '--intergalactic-bg-primary-invert-active': '#516e78', + '--intergalactic-bg-secondary-neutral': '#f7f8f9', + '--intergalactic-bg-secondary-neutral-hover': '#eaeff1', + '--intergalactic-bg-secondary-neutral-active': '#d5dfe2', + '--intergalactic-bg-secondary-info': '#eaf0ff', + '--intergalactic-bg-secondary-info-hover': '#bdd1ff', + '--intergalactic-bg-secondary-info-active': '#9dbaff', + '--intergalactic-bg-secondary-success': '#ecf9ef', + '--intergalactic-bg-secondary-success-hover': '#c5eccd', + '--intergalactic-bg-secondary-success-active': '#a9e2b4', + '--intergalactic-bg-secondary-critical': '#ffeaea', + '--intergalactic-bg-secondary-critical-hover': '#ffbdbd', + '--intergalactic-bg-secondary-critical-active': '#ff9d9d', + '--intergalactic-bg-secondary-warning': '#fff1ec', + '--intergalactic-bg-secondary-warning-hover': '#ffd3c3', + '--intergalactic-bg-secondary-warning-active': '#ffbda5', + '--intergalactic-bg-secondary-highlight': '#fff8ea', + '--intergalactic-bg-secondary-highlight-hover': '#ffeabd', + '--intergalactic-bg-secondary-highlight-active': '#ffe09d', + '--intergalactic-bg-secondary-advertising': '#f3eaff', + '--intergalactic-bg-secondary-advertising-hover': '#dabdff', + '--intergalactic-bg-secondary-advertising-active': '#c99dff', + '--intergalactic-bg-highlight-results': 'rgba(255, 209, 112, 0.4)', + '--intergalactic-bg-highlight-focus': 'rgba(84, 135, 255, 0.2)', + '--intergalactic-text-primary': '#1e262a', + '--intergalactic-text-secondary': '#668791', + '--intergalactic-text-placeholder': '#85a2ab', + '--intergalactic-text-success': '#44c15d', + '--intergalactic-text-success-hover-active': '#3eb055', + '--intergalactic-text-critical': '#ff2929', + '--intergalactic-text-critical-hover-active': '#e82525', + '--intergalactic-text-primary-invert': '#ffffff', + '--intergalactic-text-secondary-invert': 'rgba(255, 255, 255, 0.8)', + '--intergalactic-text-link': '#2969ff', + '--intergalactic-text-link-hover-active': '#2560e8', + '--intergalactic-text-link-invert': '#9dbaff', + '--intergalactic-text-link-invert-hover': '#709bff', + '--intergalactic-text-link-visited': '#892aff', + '--intergalactic-text-hint': '#668791', + '--intergalactic-text-hint-hover-active': '#516e78', + '--intergalactic-text-hint-invert': '#d5dfe2', + '--intergalactic-text-hint-invert-hover-active': '#b0c4c9', + '--intergalactic-text-large-secondary': '#b0c4c9', + '--intergalactic-text-large-info': '#5487ff', + '--intergalactic-text-large-info-hover-active': '#2969ff', + '--intergalactic-text-large-success': '#69cd7d', + '--intergalactic-text-large-success-hover-active': '#44c15d', + '--intergalactic-text-large-critical': '#ff5454', + '--intergalactic-text-large-critical-hover-active': '#ff2929', + '--intergalactic-text-advertising': '#611eb5', + '--intergalactic-border-primary': '#d5dfe2', + '--intergalactic-border-secondary': '#eaeff1', + '--intergalactic-border-info': '#9dbaff', + '--intergalactic-border-info-active': '#1e262a', + '--intergalactic-border-success': '#a9e2b4', + '--intergalactic-border-success-active': '#44c15d', + '--intergalactic-border-critical': '#ff9d9d', + '--intergalactic-border-critical-active': '#ff2929', + '--intergalactic-border-warning': '#ffbda5', + '--intergalactic-border-warning-active': '#ff703c', + '--intergalactic-border-primary-invert': '#ffffff', + '--intergalactic-border-secondary-invert': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-border-tooltip-invert': '#668791', + '--intergalactic-border-table-accent': '#b0c4c9', + '--intergalactic-border-date-picker-range-comparison': '#892aff', + '--intergalactic-border-critical-pattern': 'repeating-linear-gradient(315deg, rgba(255, 41, 41, 1) 0, rgba(255, 41, 41, 1) 2px, transparent 0, transparent 50%)', + '--intergalactic-control-switch-bg': '#b0c4c9', + '--intergalactic-control-primary-info': '#1e262a', + '--intergalactic-control-primary-info-hover': '#1e262a', + '--intergalactic-control-primary-info-active': '#1e262a', + '--intergalactic-control-primary-success': '#69cd7d', + '--intergalactic-control-primary-success-hover': '#44c15d', + '--intergalactic-control-primary-success-active': '#3eb055', + '--intergalactic-control-primary-critical': '#ff5454', + '--intergalactic-control-primary-critical-hover': '#ff2929', + '--intergalactic-control-primary-critical-active': '#e82525', + '--intergalactic-control-primary-brand': '#ff8d63', + '--intergalactic-control-primary-brand-hover': '#ff703c', + '--intergalactic-control-primary-brand-active': '#e86637', + '--intergalactic-control-primary-advertising': '#7d26e8', + '--intergalactic-control-primary-advertising-hover': '#611eb5', + '--intergalactic-control-primary-advertising-active': '#892aff', + '--intergalactic-control-primary-invert': '#ffffff', + '--intergalactic-control-primary-invert-hover': '#f7f8f9', + '--intergalactic-control-primary-invert-active': '#eaeff1', + '--intergalactic-control-secondary-neutral': 'rgba(133, 162, 171, 0.1)', + '--intergalactic-control-secondary-neutral-hover': 'rgba(133, 162, 171, 0.2)', + '--intergalactic-control-secondary-neutral-active': 'rgba(133, 162, 171, 0.3)', + '--intergalactic-control-secondary-info': 'rgba(84, 135, 255, 0.1)', + '--intergalactic-control-secondary-info-hover': 'rgba(84, 135, 255, 0.2)', + '--intergalactic-control-secondary-info-active': 'rgba(84, 135, 255, 0.3)', + '--intergalactic-control-secondary-invert': 'rgba(255, 255, 255, 0.05)', + '--intergalactic-control-secondary-invert-hover': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-control-secondary-invert-active': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-control-tertiary-neutral': 'rgba(133, 162, 171, 0)', + '--intergalactic-control-tertiary-neutral-hover': 'rgba(133, 162, 171, 0.2)', + '--intergalactic-control-tertiary-neutral-active': 'rgba(133, 162, 171, 0.3)', + '--intergalactic-control-tertiary-info': 'rgba(84, 135, 255, 0)', + '--intergalactic-control-tertiary-info-hover': 'rgba(84, 135, 255, 0.2)', + '--intergalactic-control-tertiary-info-active': 'rgba(84, 135, 255, 0.3)', + '--intergalactic-control-tertiary-invert': 'rgba(255, 255, 255, 0)', + '--intergalactic-control-tertiary-invert-hover': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-control-tertiary-invert-active': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-icon-primary-neutral': '#668791', + '--intergalactic-icon-primary-neutral-hover-active': '#565861', + '--intergalactic-icon-primary-info': '#2969ff', + '--intergalactic-icon-primary-info-hover-active': '#0358a1', + '--intergalactic-icon-primary-success': '#69cd7d', + '--intergalactic-icon-primary-success-hover-active': '#037e68', + '--intergalactic-icon-primary-critical': '#ff5454', + '--intergalactic-icon-primary-critical-hover-active': '#cc3a42', + '--intergalactic-icon-primary-warning': '#ff8d63', + '--intergalactic-icon-primary-warning-hover-active': '#cc5024', + '--intergalactic-icon-primary-invert': '#ffffff', + '--intergalactic-icon-primary-invert-hover-active': '#eaeff1', + '--intergalactic-icon-secondary-neutral': '#b0c4c9', + '--intergalactic-icon-secondary-neutral-hover-active': '#878992', + '--intergalactic-icon-secondary-info': '#709bff', + '--intergalactic-icon-secondary-info-hover-active': '#2290cc', + '--intergalactic-icon-secondary-success': '#82d592', + '--intergalactic-icon-secondary-success-hover-active': '#049b75', + '--intergalactic-icon-secondary-critical': '#ff7070', + '--intergalactic-icon-secondary-critical-hover-active': '#cc6c6b', + '--intergalactic-icon-secondary-warning': '#ff9f7c', + '--intergalactic-icon-secondary-warning-hover-active': '#cc7036', + '--intergalactic-icon-non-interactive': '#1e262a', + '--intergalactic-illustration-red': '#ff788f', + '--intergalactic-illustration-orange': '#ff9400', + '--intergalactic-illustration-yellow': '#ffe84d', + '--intergalactic-illustration-salad': '#c7fa73', + '--intergalactic-illustration-green': '#45e0a8', + '--intergalactic-illustration-blue': '#6edbff', + '--intergalactic-illustration-violet': '#b880ff', + '--intergalactic-illustration-pink': '#ff7ad1', + '--intergalactic-date-picker-cell': '#ffffff', + '--intergalactic-date-picker-cell-current': '#85a2ab', + '--intergalactic-date-picker-cell-hover': '#eaeff1', + '--intergalactic-date-picker-cell-range': '#bdd1ff', + '--intergalactic-date-picker-cell-range-hover': '#9dbaff', + '--intergalactic-date-picker-cell-active': '#709bff', + '--intergalactic-date-picker-cell-active-hover': '#5487ff', + '--intergalactic-date-picker-cell-current-invert': 'rgba(255, 255, 255, 0.5)', + '--intergalactic-date-picker-cell-comparison-active': '#892aff', + '--intergalactic-date-picker-cell-comparison-active-hover': '#7d26e8', + '--intergalactic-dropdown-menu-item': '#ffffff', + '--intergalactic-dropdown-menu-item-hover': '#f7f8f9', + '--intergalactic-dropdown-menu-item-selected': 'rgba(189, 209, 255, 0.7)', + '--intergalactic-dropdown-menu-item-selected-hover': '#bdd1ff', + '--intergalactic-feature-popover-bg': '#ffeabd', + '--intergalactic-feature-popover-dot-outer-border': '#ffeabd', + '--intergalactic-feature-popover-bg-neutral': '#1d113e', + '--intergalactic-feature-popover-dot-neutral': '#82d592', + '--intergalactic-feature-popover-dot-neutral-outer-border': '#82d592', + '--intergalactic-progress-bar-bg': '#eaeff1', + '--intergalactic-progress-bar-bg-hover': '#d5dfe2', + '--intergalactic-progress-bar-bg-invert': 'rgba(255, 255, 255, 0.2)', + '--intergalactic-progress-bar-bg-invert-hover': 'rgba(255, 255, 255, 0.4)', + '--intergalactic-progress-bar-value-gradient': 'linear-gradient(-45deg, rgba(68, 193, 93, 0.9) 25%, rgba(68, 193, 93, 1) 0%, rgba(68, 193, 93, 1) 50%, rgba(68, 193, 93, 0.9) 0%, rgba(68, 193, 93, 0.9) 75%, rgba(68, 193, 93, 1) 0%)', + '--intergalactic-progress-bar-pattern-gradient': 'linear-gradient(-45deg, rgba(234, 239, 241, 0.9) 25%, rgba(234, 239, 241, 1) 0%, rgba(234, 239, 241, 1) 50%, rgba(234, 239, 241, 0.9) 0%, rgba(234, 239, 241, 0.9) 75%, rgba(234, 239, 241, 1) 0%)', + '--intergalactic-progress-bar-value-bg': '#000000', + '--intergalactic-skeleton-bg': 'rgba(234, 239, 241, 0.8)', + '--intergalactic-skeleton-bg-invert': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-slider-rating-normal': '#b0c4c9', + '--intergalactic-slider-rating-hover-active': '#ffe09d', + '--intergalactic-table-th-primary-cell': '#f7f8f9', + '--intergalactic-table-th-primary-cell-hover': '#eaeff1', + '--intergalactic-table-th-primary-cell-active': '#eaeff1', + '--intergalactic-table-th-secondary-cell': '#ffffff', + '--intergalactic-table-th-gradient': 'linear-gradient(to right, rgba(234, 239, 241, 0) 0%, rgba(234, 239, 241, 1) 100%)', + '--intergalactic-table-td-cell': '#ffffff', + '--intergalactic-table-td-cell-hover': '#f4f7f8', + '--intergalactic-table-td-cell-active': '#eef2f4', + '--intergalactic-table-td-cell-unread': '#f7f8f9', + '--intergalactic-table-td-cell-accordion': '#f7f8f9', + '--intergalactic-table-td-cell-selected': '#eaf0ff', + '--intergalactic-table-td-cell-selected-hover': '#bdd1ff', + '--intergalactic-table-td-cell-selected-active': '#bdd1ff', + '--intergalactic-table-td-cell-new': '#ecf9ef', + '--intergalactic-table-td-cell-new-hover': '#c5eccd', + '--intergalactic-table-td-cell-new-active': '#c5eccd', + '--intergalactic-table-td-cell-critical': '#ffeaea', + '--intergalactic-table-td-cell-critical-hover': '#ffbdbd', + '--intergalactic-table-td-cell-critical-active': '#ffbdbd', + '--intergalactic-table-td-cell-warning': '#fff1ec', + '--intergalactic-table-td-cell-warning-hover': '#ffd3c3', + '--intergalactic-table-td-cell-warning-active': '#ffd3c3', + '--intergalactic-brand-primary': '#ff8d63', + '--intergalactic-brand-secondary': '#611eb5', + '--intergalactic-brand-pinterest': '#bd081c', + '--intergalactic-brand-instagram': '#e4405f', + '--intergalactic-brand-youtube': '#ff0000', + '--intergalactic-brand-facebook': '#1877f2', + '--intergalactic-brand-linkedIn': '#0a66c2', + '--intergalactic-brand-twitter': '#1d9bf0', + '--intergalactic-brand-google-blue': '#1a0dab', + '--intergalactic-brand-google-green': '#016723', + '--intergalactic-brand-google-my-business': '#1a73e8', + '--intergalactic-box-shadow-card': '0 0 0 1px #eaeff1', + '--intergalactic-box-shadow-card-hover': '3px 3px 30px 0px rgba(30, 38, 42, 0.15)', + '--intergalactic-box-shadow-dnd': '0px 0px 1px 0px rgba(30, 38, 42, 0.16), 0px 12px 40px 0px rgba(30, 38, 42, 0.16)', + '--intergalactic-box-shadow-modal': '0px 3px 8px 0px rgba(30, 38, 42, 0.2)', + '--intergalactic-box-shadow-popper': '0px 1px 12px 0px rgba(30, 38, 42, 0.15)', + '--intergalactic-keyboard-focus-outline': '#1e262a', + '--intergalactic-keyboard-focus-invalid-outline': '#ff5454', + '--intergalactic-keyboard-focus-invalid': '0px 0px 0px 3px rgba(255, 84, 84, 0.5)', + '--intergalactic-keyboard-focus-valid-outline': '#69cd7d', + '--intergalactic-keyboard-focus-valid': '0px 0px 0px 3px rgba(105, 205, 125, 0.5)', + '--intergalactic-keyboard-focus-invert-outline': 'rgba(255, 255, 255, 0.8)', + '--intergalactic-keyboard-focus-invert': '0px 0px 0px 3px rgba(255, 255, 255, 0.8)', + '--intergalactic-keyboard-focus': '0px 0px 0px 3px rgba(30, 38, 42, 0.5)', + '--intergalactic-base': 'Inter', + '--intergalactic-lh-800': '117%', + '--intergalactic-lh-700': '110%', + '--intergalactic-lh-600': '125%', + '--intergalactic-lh-500': '117%', + '--intergalactic-lh-400': '120%', + '--intergalactic-lh-300': '150%', + '--intergalactic-lh-200': '142%', + '--intergalactic-lh-100': '133%', + '--intergalactic-semi-bold': '600', + '--intergalactic-bold': '700', + '--intergalactic-regular': '400', + '--intergalactic-medium': '500', + '--intergalactic-fs-50': '10px', + '--intergalactic-fs-100': '12px', + '--intergalactic-fs-200': '14px', + '--intergalactic-fs-300': '16px', + '--intergalactic-fs-400': '20px', + '--intergalactic-fs-500': '24px', + '--intergalactic-fs-600': '32px', + '--intergalactic-fs-700': '36px', + '--intergalactic-fs-800': '48px', + '--intergalactic-compact': '0.3', + '--intergalactic-scale-indent': '4px', + '--intergalactic-form-control-s': '20px', + '--intergalactic-form-control-m': '28px', + '--intergalactic-form-control-l': '40px', + '--intergalactic-spacing-05x': '2px', + '--intergalactic-spacing-1x': '4px', + '--intergalactic-spacing-2x': '8px', + '--intergalactic-spacing-3x': '12px', + '--intergalactic-spacing-4x': '16px', + '--intergalactic-spacing-5x': '20px', + '--intergalactic-spacing-6x': '24px', + '--intergalactic-spacing-8x': '32px', + '--intergalactic-spacing-10x': '40px', + '--intergalactic-spacing-14x': '56px', + '--intergalactic-spacing-20x': '80px', + '--intergalactic-spacing-24x': '96px', + '--intergalactic-spacing-30x': '120px', + '--intergalactic-rounded-extra-small': '2px', + '--intergalactic-rounded-small': '4px', + '--intergalactic-rounded-medium': '6px', + '--intergalactic-rounded-large': '12px', + '--intergalactic-rounded-extra-large': '24px', + '--intergalactic-addon-rounded': '4px', + '--intergalactic-badge-rounded': '6px', + '--intergalactic-chart-rounded': '2px', + '--intergalactic-counter-rounded': '12px', + '--intergalactic-tag-rounded': '24px', + '--intergalactic-switch-rounded': '24px', + '--intergalactic-control-rounded': '6px', + '--intergalactic-progress-bar-rounded': '6px', + '--intergalactic-surface-rounded': '6px', + '--intergalactic-popper-rounded': '6px', + '--intergalactic-modal-rounded': '12px', + '--intergalactic-disabled-opacity': '0.5', + '--intergalactic-screen-extra-small': '320px', + '--intergalactic-screen-small': '768px', + '--intergalactic-screen-medium': '1200px', + '--intergalactic-screen-large': '1920px', + '--intergalactic-overlay-primary': 'rgba(30, 38, 42, 0.7)', + '--intergalactic-overlay-secondary': 'rgba(30, 38, 42, 0.4)', + '--intergalactic-overlay-limitation-primary': '#f7f8f9', + '--intergalactic-overlay-limitation-secondary': 'rgba(255, 255, 255, 0.85)', + '--intergalactic-z-index-deep': '-999', + '--intergalactic-z-index-overlay': '500', + '--intergalactic-z-index-modal': '900', + '--intergalactic-z-index-popper': '700', + '--intergalactic-z-index-dropdown': '750', + '--intergalactic-z-index-tooltip': '800', + '--intergalactic-z-index-notice-bubble': '999', + '--intergalactic-tooltip-default': '#ffffff', + '--intergalactic-tooltip-warning': '#ffbdbd', + '--intergalactic-tooltip-invert': '#1e262a', + '--intergalactic-neighbor-location-neutral': '#ffffff80', + '--intergalactic-neighbor-location-invert': '#00000080', + '--intergalactic-scroll-area-shadow-left': 'linear-gradient(to right, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-right': 'linear-gradient(to left, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-top': 'linear-gradient(to bottom, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-shadow-bottom': 'linear-gradient(to top, rgba(30, 38, 42, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%)', + '--intergalactic-scroll-area-dropdown-menu-left': 'linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-right': 'linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-bottom': 'linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-area-dropdown-menu-top': 'linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)', + '--intergalactic-scroll-bar-background': 'rgba(30, 38, 42, 0.3)', + '--intergalactic-tag-primary-gray-normal': '#ecedf0', + '--intergalactic-tag-primary-gray-hover-active': '#e3e4e9', + '--intergalactic-tag-primary-blue-normal': '#d0eeff', + '--intergalactic-tag-primary-blue-hover-active': '#b7e4ff', + '--intergalactic-tag-primary-green-normal': '#cff1ea', + '--intergalactic-tag-primary-green-hover-active': '#b7eae0', + '--intergalactic-tag-primary-orange-normal': '#ffddd2', + '--intergalactic-tag-primary-orange-hover-active': '#ffccbb', + '--intergalactic-tag-primary-red-normal': '#ffcedc', + '--intergalactic-tag-primary-red-hover-active': '#ffb6ca', + '--intergalactic-tag-primary-violet-normal': '#f4e3ff', + '--intergalactic-tag-primary-violet-hover-active': '#efd5ff', + '--intergalactic-tag-primary-yellow-normal': '#fee6d1', + '--intergalactic-tag-primary-yellow-hover-active': '#fedab9', + '--intergalactic-tag-primary-white-normal': 'rgba(255, 255, 255, 0.15)', + '--intergalactic-tag-primary-white-hover-active': 'rgba(255, 255, 255, 0.3)', + '--intergalactic-tag-primary-gray-text': '#668791', + '--intergalactic-tag-primary-blue-text': '#2969ff', + '--intergalactic-tag-primary-green-text': '#44c15d', + '--intergalactic-tag-primary-orange-text': '#ff703c', + '--intergalactic-tag-primary-red-text': '#ff2929', + '--intergalactic-tag-primary-violet-text': '#892aff', + '--intergalactic-tag-primary-yellow-text': '#ffbb29', + '--intergalactic-tag-primary-white-text': '#ffffff', + '--intergalactic-tag-secondary-normal': '#ffffff', + '--intergalactic-tag-secondary-hover-active': '#f7f8f9', + '--intergalactic-tag-secondary-white-normal': 'rgba(255, 255, 255, 0)', + '--intergalactic-tag-secondary-white-hover-active': 'rgba(255, 255, 255, 0.1)', + '--intergalactic-tag-secondary-gray-text': '#668791', + '--intergalactic-tag-secondary-white-text': '#ffffff', + '--intergalactic-chart-palette-order-1': '#709bff', + '--intergalactic-chart-palette-order-2': '#a9e2b4', + '--intergalactic-chart-palette-order-3': '#ff8d63', + '--intergalactic-chart-palette-order-4': '#ff87eb', + '--intergalactic-chart-palette-order-5': '#ffe09d', + '--intergalactic-chart-palette-order-6': '#a155ff', + '--intergalactic-chart-palette-order-7': '#ff7070', + '--intergalactic-chart-palette-order-8': '#95f8e2', + '--intergalactic-chart-palette-order-9': '#5487ff', + '--intergalactic-chart-palette-order-10': '#82d592', + '--intergalactic-chart-palette-order-11': '#ffbda5', + '--intergalactic-chart-palette-order-12': '#e14adf', + '--intergalactic-chart-palette-order-13': '#ffd170', + '--intergalactic-chart-palette-order-14': '#c99dff', + '--intergalactic-chart-palette-order-15': '#ff5454', + '--intergalactic-chart-palette-order-16': '#64f5d4', + '--intergalactic-chart-palette-order-17': '#9dbaff', + '--intergalactic-chart-palette-order-18': '#69cd7d', + '--intergalactic-chart-palette-order-19': '#ff9f7c', + '--intergalactic-chart-palette-order-20': '#ffa9fa', + '--intergalactic-chart-palette-order-21': '#ffc954', + '--intergalactic-chart-palette-order-22': '#b070ff', + '--intergalactic-chart-palette-order-23': '#ff9d9d', + '--intergalactic-chart-palette-order-24': '#46f3cc', + '--intergalactic-chart-palette-order-total-amount': '#85a2ab', + '--intergalactic-chart-palette-order-other-data': '#d5dfe2', + '--intergalactic-chart-palette-order-null': '#eaeff1', + '--intergalactic-chart-grid-line': '#eaeff1', + '--intergalactic-chart-grid-x-axis': '#d5dfe2', + '--intergalactic-chart-grid-y-accent-hover-line': '#b0c4c9', + '--intergalactic-chart-grid-text-label': '#668791', + '--intergalactic-chart-grid-bar-chart-hover': 'rgba(213, 223, 226, 0.3)', + '--intergalactic-chart-grid-bar-chart-base-bg': '#eaeff1', + '--intergalactic-chart-grid-period-bg': 'rgba(213, 223, 226, 0.2)', + '--intergalactic-chart-grid-period-pattern': 'rgba(30, 38, 42, 0.15)', + '--intergalactic-chart-grid-border': '#ffffff', + '--intergalactic-chart-x-axis-accent-period-active': '#668791', + '--intergalactic-chart-x-axis-accent-data-start-tracking': 'rgba(105, 205, 125, 0.2)', + '--intergalactic-header-bg': '#382e5e', + '--intergalactic-header-border-primary': '#382e5e', + '--intergalactic-header-border-secondary': '#ffffff26', + '--intergalactic-sidebar-nav-control-hover': 'rgba(234, 239, 241, 0.7)', + '--intergalactic-sidebar-nav-control-active': '#e2ddff', + '--intergalactic-sidebar-nav-control-text-normal': '#6d619f', + '--intergalactic-sidebar-nav-control-text-active': '#4d407e', + '--intergalactic-sidebar-nav-control-icon-normal': '#9083c5', + '--intergalactic-sidebar-nav-control-icon-active': '#4d407e', + '--intergalactic-duration-extra-slow': '500', + '--intergalactic-duration-slow': '400', + '--intergalactic-duration-medium': '300', + '--intergalactic-duration-fast': '200', + '--intergalactic-duration-extra-fast': '100', + '--intergalactic-duration-switch': '100', + '--intergalactic-duration-popper': '200', + '--intergalactic-duration-control': '200', + '--intergalactic-duration-modal': '200', + '--intergalactic-duration-accordion': '200', + '--intergalactic-duration-counter': '200', +}; diff --git a/semcore/core/src/theme/utils.ts b/semcore/core/src/theme/utils.ts index 01a86a8374..bc4fbc47ea 100644 --- a/semcore/core/src/theme/utils.ts +++ b/semcore/core/src/theme/utils.ts @@ -96,6 +96,32 @@ export const processTokens = (base: TokensInput, tokens: TokensInput, featureHig traverse(tokens); traverse(featureHighlight, [], highlightTokens); + const resolveOklch = (raw: string): string => { + const trimmed = raw.trim(); + if (!trimmed.startsWith('oklch(') || !trimmed.endsWith(')')) return raw; + const inner = trimmed.slice(6, -1).trim(); + const parts = inner.split(/[\s/]+/); + const L = parts[0]; + const C = parts[1] ?? '0'; + const hasAlpha = parts.length > 3; + const alpha = hasAlpha ? parseFloat(parts[parts.length - 1]) : 1; + const isWhite = (C === '0' || parseFloat(C) === 0) && (L === '1' || L === '100%' || parseFloat(L) === 1); + if (isWhite) { + return alpha < 1 ? `rgba(255, 255, 255, ${alpha})` : '#ffffff'; + } + try { + const c = new Color(trimmed); + const srgb = c.to('sRGB'); + const r = Math.round(srgb.r * 255); + const g = Math.round(srgb.g * 255); + const b = Math.round(srgb.b * 255); + const a = srgb.alpha ?? 1; + return a < 1 ? `rgba(${r}, ${g}, ${b}, ${a})` : srgb.toString({ format: 'hex' }); + } catch { + return raw; + } + }; + const resolveColor = (color: string): string => { if (color.includes('linear-gradient')) { if (color.includes('rgba')) { @@ -106,13 +132,14 @@ export const processTokens = (base: TokensInput, tokens: TokensInput, featureHig } if (color.startsWith('rgba(') && color.endsWith(')')) { const lastComa = color.lastIndexOf(','); - const alpha = Number.parseFloat(color.substring(lastComa + 1, color.length - 1)); + const alpha = Number.parseFloat(color.substring(lastComa + 1, color.length - 1).trim()); if (Number.isNaN(alpha)) { throw new Error(`Unable to parse rgba of ${color}`); } - let resolvedColor = color.substring('rgba('.length, lastComa); + let resolvedColor = color.substring('rgba('.length, lastComa).trim(); if (resolvedColor.startsWith('{')) resolvedColor = resolveColor(resolvedColor); if (resolvedColor.startsWith('$')) resolvedColor = resolveColor(resolvedColor); + resolvedColor = resolveOklch(resolvedColor); if (resolvedColor.startsWith('#')) { if (resolvedColor.length === 1 + 3) { resolvedColor = [resolvedColor[1], resolvedColor[2], resolvedColor[3]] @@ -134,69 +161,127 @@ export const processTokens = (base: TokensInput, tokens: TokensInput, featureHig } if (!resolvedColor || resolvedColor.split(',').length !== 3) { - throw new Error(`Unable to produce rgba of ${color} (input format is not supported yet)`); + try { + const c = new Color(resolvedColor.trim()); + const srgb = c.to('sRGB'); + resolvedColor = [ + Math.round(srgb.r * 255), + Math.round(srgb.g * 255), + Math.round(srgb.b * 255), + ].join(', '); + } catch (e) { + throw new Error( + `Unable to produce rgba of ${color} (input format is not supported yet): ${e instanceof Error ? e.message : e}`, + ); + } } return `rgba(${resolvedColor}, ${alpha})`; } - if (color.split(', ').length === 2) { - const baseColor = resolveColor(color.split(', ')[0]); - const [r, g, b] = ( - baseColor.length === 4 - ? [baseColor[1], baseColor[2], baseColor[3]] - : [baseColor.substring(1, 3), baseColor.substring(3, 5), baseColor.substring(5, 7)] - ).map((chunk) => Number.parseInt(chunk, 16)); - const a = Number.parseFloat(color.split(', ')[1]); - - return `rgba(${r}, ${g}, ${b}, ${a})`; - } if (color.startsWith('{') && color.split('.').length > 0 && color.endsWith('}')) { - const path = color.substring(1, color.length - 1); - const resolvedColor = + const path = color.substring(1, color.length - 1).trim(); + let resolvedColor = getByPath(base as any, path)?.value ?? values[path.split('.').join('-')]; if (!resolvedColor) { throw new Error(`Color ${color} was not found in base palette`); } - return resolvedColor; + resolvedColor = resolveOklch(resolvedColor); + return resolveColor(resolvedColor); } if (color.startsWith('$') && color.split('.').length > 0) { - const path = color.substring(1); - const resolvedColor = + const path = color.substring(1).trim(); + let resolvedColor = getByPath(base as any, path)?.value ?? values[path.split('.').join('-')]; if (!resolvedColor) { throw new Error(`Color ${color} was not found`); } - return resolvedColor; + resolvedColor = resolveOklch(resolvedColor); + return resolveColor(resolvedColor); } if (color.startsWith('#')) { return color; } + if (color.startsWith('oklch(') && color.endsWith(')')) { + const resolved = resolveOklch(color); + if (resolved !== color) return resolved; + try { + const c = new Color(color); + const srgb = c.to('sRGB'); + const r = Math.round(srgb.r * 255); + const g = Math.round(srgb.g * 255); + const b = Math.round(srgb.b * 255); + const alpha = srgb.alpha ?? 1; + if (alpha < 1) { + return `rgba(${r}, ${g}, ${b}, ${alpha})`; + } + return srgb.toString({ format: 'hex' }); + } catch (e) { + throw new Error(`Unable to process oklch color ${color}: ${e instanceof Error ? e.message : e}`); + } + } throw new Error(`Unable to process color ${color}`); }; - const resolveToken = (token: string): string => { + const resolveToken = (token: string, refStack: Set = new Set()): string => { if (token.includes('*')) { const [value, factor] = token.split('*'); - const resolvedValue = resolveToken(value); + const resolvedValue = resolveToken(value, refStack); if (!resolvedValue.endsWith('px')) { throw new Error(`Unsupported expression ${token}`); } return `${Number.parseFloat(resolvedValue) * Number.parseFloat(factor)}px`; - } else if (token.includes('{') && token.includes('}')) { - const reference = token - .substring(token.indexOf('{') + 1, token.indexOf('}')) - .replace(/\./g, '-'); - const resolvedToken = - token.substring(0, token.indexOf('{')) + - values[reference] + - token.substring(token.indexOf('}') + 1); - if (!resolvedToken || resolvedToken.includes('{')) { - throw new Error(`On moment of resolving ${token}, ${resolvedToken} was not resolved yet`); + } + let result = token; + while (result.includes('{') && result.includes('}')) { + const match = result.match(/\{([^}]+)\}/); + if (!match) break; + const reference = match[1].replace(/\./g, '-'); + if (refStack.has(reference)) { + throw new Error(`Circular token reference detected: ${reference} in "${token}"`); } - return resolvedToken; - } else { - return token; + const rawRefValue = values[reference]; + if (rawRefValue === undefined) { + throw new Error(`Token "${reference}" was not found when resolving "${token}"`); + } + refStack.add(reference); + const replacement = resolveToken(rawRefValue, refStack); + refStack.delete(reference); + result = + result.substring(0, match.index!) + replacement + result.substring(match.index! + match[0].length); } + return result; }; + + /** Replaces simple calc() expressions with computed px values for final CSS/TS output. */ + const evaluateSimpleCalc = (value: string): string => { + let result = value; + let prev: string; + const toPx = (n: number) => `${n % 1 === 0 ? n : Math.round(n * 100) / 100}px`; + do { + prev = result; + const addMatch = result.match(/calc\(\s*([\d.]+)px\s*\+\s*([\d.]+)px\s*\)/); + if (addMatch) { + result = result.replace(addMatch[0], toPx(Number.parseFloat(addMatch[1]) + Number.parseFloat(addMatch[2]))); + continue; + } + const subMatch = result.match(/calc\(\s*([\d.]+)px\s*-\s*([\d.]+)px\s*\)/); + if (subMatch) { + result = result.replace(subMatch[0], toPx(Number.parseFloat(subMatch[1]) - Number.parseFloat(subMatch[2]))); + continue; + } + const mulMatch = result.match(/calc\(\s*([\d.]+)px\s*\*\s*([\d.]+)\s*\)/); + if (mulMatch) { + result = result.replace(mulMatch[0], toPx(Number.parseFloat(mulMatch[1]) * Number.parseFloat(mulMatch[2]))); + continue; + } + const divMatch = result.match(/calc\(\s*([\d.]+)px\s*\/\s*([\d.]+)\s*\)/); + if (divMatch) { + result = result.replace(divMatch[0], toPx(Number.parseFloat(divMatch[1]) / Number.parseFloat(divMatch[2]))); + continue; + } + } while (prev !== result); + return result; + }; + const replaceColors = (str: string) => { let result = ''; for (let i = 0; i < str.length; i++) { @@ -212,11 +297,38 @@ export const processTokens = (base: TokensInput, tokens: TokensInput, featureHig return result; }; + /** Converts color-mix(..., {gray.white} 95%, {blue.500} 5%) to CSS with var() references. */ + const resolveColorMix = (value: string): string => { + return value.replace(/\{([^}]+)\}/g, (_match, ref) => { + const varName = ref.replace(/\./g, '-'); + return `var(--${varName})`; + }); + }; + const rawValues = { ...values }; for (const token in values) { if (types[token] === 'color') { - values[token] = resolveColor(values[token]); + const rawValue = values[token].trim(); + if (rawValue.startsWith('color-mix(')) { + values[token] = resolveColorMix(values[token]); + } else { + values[token] = resolveColor(values[token]); + } + if (typeof values[token] === 'string' && values[token].trim().startsWith('oklch(')) { + try { + const c = new Color(values[token].trim()); + const srgb = c.to('sRGB'); + const r = Math.round(srgb.r * 255); + const g = Math.round(srgb.g * 255); + const b = Math.round(srgb.b * 255); + const alpha = srgb.alpha ?? 1; + values[token] = + alpha < 1 ? `rgba(${r}, ${g}, ${b}, ${alpha})` : srgb.toString({ format: 'hex' }); + } catch { + // leave as-is if conversion fails + } + } } else if (types[token] === 'boxShadow') { values[token] = resolveToken(values[token].split('; ').map(replaceColors).join(', ')); } else if ( @@ -225,7 +337,7 @@ export const processTokens = (base: TokensInput, tokens: TokensInput, featureHig types[token] === 'borderRadius' || types[token] === 'other' ) { - values[token] = resolveToken(values[token]); + values[token] = evaluateSimpleCalc(resolveToken(values[token])); } for (const modification of modifications[token] ?? []) { // refer to https://docs.tokens.studio/tokens/color-modifiers and https://github.com/tokens-studio/figma-plugin/tree/main/src/utils/color if extension is needed diff --git a/stories/theme/charts-theme-playground.stories.tsx b/stories/theme/charts-theme-playground.stories.tsx new file mode 100644 index 0000000000..f66c6a514f --- /dev/null +++ b/stories/theme/charts-theme-playground.stories.tsx @@ -0,0 +1,438 @@ +import { Box, Flex } from '@semcore/ui/base-components'; +import { Chart, ChartLegend, Plot, Line, XAxis, YAxis, minMax, HorizontalBar, HoverLine } from '@semcore/ui/d3-chart'; +import { Text } from '@semcore/ui/typography'; +import type { Meta, StoryObj } from '@storybook/react-vite'; +import { scaleBand, scaleLinear, scaleTime } from 'd3-scale'; +import React from 'react'; + +import { ThemePlaygroundLayout } from './theme-playground-switcher'; +import ChartCategoricalOrderPalette from '../../website/src/docs-components/ChartCategoricalOrderPalette'; +import ChartSequentialOrderPalette from '../../website/src/docs-components/ChartSequentialOrderPalette'; +import BarMockData from '../components/d3-chart/__mocks__/bar'; +import BubbleMockData from '../components/d3-chart/__mocks__/bubble'; +import DonutMockData from '../components/d3-chart/__mocks__/donut'; +import LineMockData from '../components/d3-chart/__mocks__/line'; +import RadarMockData from '../components/d3-chart/__mocks__/radar'; +import ScatterplotMockData from '../components/d3-chart/__mocks__/scatterplot'; +import StackedAreaMockData from '../components/d3-chart/__mocks__/stacked-area'; +import VennMockData from '../components/d3-chart/__mocks__/venn'; +import './theme-playground-fonts.css'; + +/** Line chart (2 series), временная ось X — при каждой перезагрузке страницы генерируются заново */ +const LineChartTwoLinesData = Array.from({ length: 20 }, (_, i) => ({ + date: new Date(2026, 0, 1 + i), + line1: Math.round(Math.random() * 10 * 10) / 10, + line2: Math.round(Math.random() * 10 * 10) / 10, +})); + +/** Line.Area chart, временная ось X — при каждой перезагрузке страницы генерируются заново */ +const LineAreaChartData = Array.from({ length: 20 }, (_, i) => { + const y = Math.round(Math.random() * 8 * 10) / 10; + const spread = Math.round(Math.random() * 4 * 10) / 10; + return { + date: new Date(2026, 0, 1 + i), + y, + y0: Math.max(0, y - spread), + y1: y + spread, + }; +}); + +/** 10 data series for Line chart (временная ось X) — при каждой перезагрузке страницы генерируются заново */ +const LineChartTenSeriesData = Array.from({ length: 20 }, (_, i) => { + const row: Record = { + date: new Date(2026, 0, 1 + i), + }; + for (let s = 1; s <= 10; s++) { + row[`line${s}`] = Math.round(Math.random() * 3 * 10) / 10; + } + return row; +}); + +/** 5 data series for Scatterplot with chart-palette-order-1 … chart-palette-order-5 */ +const ScatterplotFiveSeriesData = [ + { x: 0, y1: 2, y2: 5, y3: 7, y4: 1, y5: 9 }, + { x: 1, y1: 4, y2: 7, y3: 3, y4: 6, y5: 2 }, + { x: 2, y1: 6, y2: 3, y3: 9, y4: 4, y5: 8 }, + { x: 3, y1: 8, y2: 1, y3: 2, y4: 9, y5: 5 }, + { x: 4, y1: 5, y2: 9, y3: 6, y4: 3, y5: 10 }, + { x: 5, y1: 7, y2: 2, y3: 4, y4: 8, y5: 1 }, + { x: 6, y1: 3, y2: 6, y3: 8, y4: 2, y5: 7 }, + { x: 7, y1: 9, y2: 4, y3: 1, y4: 10, y5: 4 }, + { x: 8, y1: 1, y2: 8, y3: 10, y4: 5, y5: 6 }, + { x: 9, y1: 10, y2: 0, y3: 5, y4: 7, y5: 3 }, +]; + +const LAZZER_FONT = '\'Lazzer\', sans-serif'; + +/** Stacked bar: 5 months, 3 series (для графика над Horizontal bar) */ +const stackedBarChartData = [ + { month: 'Jan', a: 4, b: 3, c: 2 }, + { month: 'Feb', a: 5, b: 4, c: 1 }, + { month: 'Mar', a: 3, b: 5, c: 3 }, + { month: 'Apr', a: 6, b: 2, c: 4 }, + { month: 'May', a: 4, b: 4, c: 5 }, +]; +const stackedBarLegendIds = ['a', 'b', 'c'] as const; +const stackedBarColorMap = { a: 'blue-500', b: 'blue-300', c: 'blue-100' } as const; + +const meta: Meta = { + title: 'Theme/Charts Theme Playground', +}; + +export default meta; + +type Story = StoryObj; + +const vennLegendMap = { + G: { label: 'Good' }, + F: { label: 'Fast' }, + C: { label: 'Clean' }, +}; + +const formatXDate = (value: Date) => `${value.toLocaleDateString('en-US', { month: 'short' })} ${value.getDate()}`; + +function LineAreaChart({ + data, + width, + height, +}: { + data: Array<{ date: Date; y: number; y0: number; y1: number }>; + width: number; + height: number; +}) { + const MARGIN = 40; + const xScale = scaleTime() + .range([MARGIN, width - MARGIN]) + .domain(minMax(data, 'date') as [Date, Date]); + const yScale = scaleLinear() + .range([height - MARGIN, MARGIN]) + .domain([0, Math.max(...data.map((d) => d.y1))]); + const yTicks = yScale.ticks(3); + const xTicks = xScale.ticks(10); + return ( + + + + + + + {(p: { value: Date }) => ({ children: formatXDate(p.value) })} + + + {({ xIndex }: { xIndex: number | null }) => { + if (xIndex == null) return { children: null }; + const d = data[xIndex]; + return { + children: ( + <> + {formatXDate(d.date)} + + y + {d.y} + + + ), + }; + }} + + + + + + ); +} + +/** Reserve enough space on the left so long Y-axis (category) labels are not clipped */ +const HORIZONTAL_BAR_Y_AXIS_MARGIN = 80; + +function HorizontalBarChart({ + data, + width, + height, +}: { + data: Array<{ category: string; bar: number }>; + width: number; + height: number; +}) { + const MARGIN = 40; + const xScale = scaleLinear() + .range([HORIZONTAL_BAR_Y_AXIS_MARGIN, width - MARGIN]) + .domain([0, Math.max(...data.map((d) => d.bar), 10)]); + const yScale = scaleBand() + .range([height - MARGIN, MARGIN]) + .domain(data.map((d) => d.category)) + .paddingInner(0.4) + .paddingOuter(0.2); + return ( + + + + + + + + + + + ); +} + +function ChartsThemePlaygroundContent() { + const [stackedBarVisible, setStackedBarVisible] = React.useState< + Record<(typeof stackedBarLegendIds)[number], boolean> + >({ a: true, b: true, c: true }); + const stackedBarLegendItems = React.useMemo( + () => + stackedBarLegendIds.map((id) => ({ + id, + label: id, + checked: stackedBarVisible[id], + color: stackedBarColorMap[id], + })), + [stackedBarVisible], + ); + const stackedBarDataFiltered = React.useMemo( + () => + stackedBarChartData.map((row) => { + const out: Record = { month: row.month }; + stackedBarLegendIds.forEach((key) => { + if (stackedBarVisible[key]) out[key] = row[key]; + }); + return out; + }), + [stackedBarVisible], + ); + + return ( + + + + + Charts theme playground + + + + + + + + Line chart + + `${value.toLocaleDateString('en-US', { month: 'short' })} ${value.getDate()}`} + showDots + aria-label='Line chart' + /> + + + + Line.Area chart + + + + + + Area chart (stacked) + + `${value.toLocaleDateString('en-US', { month: 'short' })} ${value.getDate()}`} + showDots + stacked + aria-label='Area chart stacked' + /> + + + + Histogram + + + + + + Horizontal bar chart + + + + + + Bubble chart + + + + + + Scatterplot chart + + + + + + Scatterplot chart (5 series) + + + + + + + + Donut chart + + + + + + Donut chart (halfsize) + + + + + + Venn chart + + + + + + Bar + + + setStackedBarVisible((prev) => ({ ...prev, [key]: checked }))} + /> + + + + + + Compact horizontal bar chart + + + + + + Radar chart + + + + + + + + + Line chart + + `${value.toLocaleDateString('en-US', { month: 'short' })} ${value.getDate()}`} + showDots + legendProps={{ flexWrap: 'wrap' }} + aria-label='Line chart with 10 datasets' + /> + + + + + Categorical order (chart palette) + + + + + + + Sequential order (base palette) + + + + + + ); +} + +export const Default: Story = { + render: () => , +}; diff --git a/stories/theme/dashboard-playground.stories.tsx b/stories/theme/dashboard-playground.stories.tsx new file mode 100644 index 0000000000..ab3d8a69f8 --- /dev/null +++ b/stories/theme/dashboard-playground.stories.tsx @@ -0,0 +1,1068 @@ +import BookM from '@semcore/icon/Book/m'; +import Chat from '@semcore/icon/Chat/m'; +import FileExportM from '@semcore/icon/FileExport/m'; +import MathPlusM from '@semcore/icon/MathPlus/m'; +import Congrats from '@semcore/illustration/Congrats'; +import MailSent from '@semcore/illustration/MailSent'; +import { Box, Flex } from '@semcore/ui/base-components'; +import { LinkTrigger } from '@semcore/ui/base-trigger'; +import Breadcrumbs from '@semcore/ui/breadcrumbs'; +import Button, { ButtonLink } from '@semcore/ui/button'; +import Card from '@semcore/ui/card'; +import { + Chart, + ChartLegend, + HorizontalBar, + minMax, + Plot, + ResponsiveContainer, + XAxis, + YAxis, +} from '@semcore/ui/d3-chart'; +import { DataTable } from '@semcore/ui/data-table'; +import type { DataTableData, DataTableSort } from '@semcore/ui/data-table'; +import Divider from '@semcore/ui/divider'; +import Link from '@semcore/ui/link'; +import Pagination from '@semcore/ui/pagination'; +import Pills from '@semcore/ui/pills'; +import ProductHead, { Info, Title } from '@semcore/ui/product-head'; +import Select from '@semcore/ui/select'; +import TabLine from '@semcore/ui/tab-line'; +import Tooltip, { DescriptionTooltip } from '@semcore/ui/tooltip'; +import { Text } from '@semcore/ui/typography'; +import { Error, NoData } from '@semcore/ui/widget-empty'; +import type { Meta, StoryObj } from '@storybook/react-vite'; +import { scaleBand, scaleLinear } from 'd3-scale'; +import React from 'react'; + +import { ThemePlaygroundLayout, ThemeSwitcherDropdown } from './theme-playground-switcher'; +import BarMockData from '../components/d3-chart/__mocks__/bar'; +import DonutMockData from '../components/d3-chart/__mocks__/donut'; +import LineMockData from '../components/d3-chart/__mocks__/line'; +import ScatterplotMockData from '../components/d3-chart/__mocks__/scatterplot'; +import './theme-playground-fonts.css'; + +const meta: Meta = { + title: 'Theme/Dashboard Playground', +}; + +export default meta; + +type Story = StoryObj; + +const dataTableData: DataTableData = [ + { keyword: 'ebay buy', kd: '77.8', cpc: '$1.25', vol: '32,500,000' }, + { keyword: 'www.ebay.com', kd: '11.2', cpc: '$3.40', vol: '65,457,920' }, + { keyword: 'ebay store', kd: '10.0', cpc: '$0.65', vol: '47,354,640' }, + { keyword: 'ebay buy', kd: '75.89', cpc: '$0.00', vol: '21,644,290' }, +]; + +const rowThemeStyles = ['success', 'info', 'muted', 'warning', 'danger'] as const; +const primaryDataTableThemedRows: DataTableData = rowThemeStyles.map((theme, i) => ({ + theme, + metric: String(100 - i * 15), + value: String(250 + i * 50), + change: `${i % 2 === 0 ? '+' : ''}${(i - 2) * 5}%`, +})); +const primaryDataTablePlainRows: DataTableData = [ + { theme: 'neutral', metric: '72', value: '520', change: '+3%' }, + { theme: 'neutral', metric: '58', value: '410', change: '-1%' }, + { theme: 'neutral', metric: '91', value: '680', change: '+7%' }, + { theme: 'neutral', metric: '44', value: '290', change: '-2%' }, + { theme: 'neutral', metric: '63', value: '395', change: '+5%' }, +]; +const primaryDataTableData: DataTableData = [...primaryDataTableThemedRows, ...primaryDataTablePlainRows]; + +const vennChartData = { + 'G': 200, + 'F': 200, + 'C': 500, + 'G/F': 100, + 'G/C': 100, + 'F/C': 100, + 'G/F/C': 100, +}; +const vennChartLegendMap = { + G: { label: 'Good' }, + F: { label: 'Fast' }, + C: { label: 'Clean' }, +}; + +/** Stacked bar: 5 months (scaleBand = отдельные столбцы), 3 series */ +const barChartData = [ + { month: 'Jan', a: 4, b: 3, c: 2 }, + { month: 'Feb', a: 5, b: 4, c: 1 }, + { month: 'Mar', a: 3, b: 5, c: 3 }, + { month: 'Apr', a: 6, b: 2, c: 4 }, + { month: 'May', a: 4, b: 4, c: 5 }, +]; + +const barChartLegendItemIds = ['a', 'b', 'c'] as const; +const barChartColorMap = { a: 'blue-500', b: 'blue-300', c: 'blue-100' } as const; + +const CHART_HEIGHT = 180; +/** Height for charts that need extra space (axis labels, legend) so content isn't clipped */ +const CHART_CONTAINER_HEIGHT = 240; +/** Reserve space for legend above the plot so X axis isn't clipped */ +const LEGEND_RESERVE_HEIGHT = 44; +/** Fixed number of Y-axis ticks; scale domain is derived from data and .nice() so data always fits */ +const Y_TICKS_COUNT = 3; +/** Reserve enough space on the left so long Y-axis (category) labels are not clipped */ +const HORIZONTAL_BAR_Y_AXIS_MARGIN = 80; + +const PLOT_PADDING = 6; +const LINE_CHART_MARGIN_X = 24; +const AREA_CHART_MARGIN_X = 24; + +/** Build Y scale from data so that .ticks(n) always fits the data range (no manual tick count tuning) */ +function useLineChartYScale( + data: Array>, + groupKey: string, + plotHeight: number, +) { + return React.useMemo(() => { + const valueKeys = data.length ? Object.keys(data[0]).filter((k) => k !== groupKey) : []; + const allValues = data.flatMap((d) => valueKeys.map((k) => Number(d[k])).filter(Number.isFinite)); + const min = allValues.length ? Math.min(0, ...allValues) : 0; + const max = allValues.length ? Math.max(...allValues) : 10; + return scaleLinear() + .domain([min, max]) + .nice() + .range([plotHeight - LINE_CHART_MARGIN_X, PLOT_PADDING]); + }, [data, groupKey, plotHeight]); +} + +/** Build Y scale for stacked area from data (domain = 0 to max stacked value) */ +function useAreaChartYScale( + data: Array>, + groupKey: string, + plotHeight: number, +) { + return React.useMemo(() => { + const valueKeys = data.length ? Object.keys(data[0]).filter((k) => k !== groupKey) : []; + const stackedMax = + data.length && valueKeys.length + ? Math.max( + ...data.map((row) => + valueKeys.reduce((sum, k) => sum + (Number(row[k]) || 0), 0), + ), + ) + : 10; + return scaleLinear() + .domain([0, stackedMax]) + .nice() + .range([plotHeight - AREA_CHART_MARGIN_X, PLOT_PADDING]); + }, [data, groupKey, plotHeight]); +} + +function LineChartWithDataDrivenScale({ + width, + height, +}: { + width: number; + height: number; +}) { + const plotHeight = height - LEGEND_RESERVE_HEIGHT; + const yScale = useLineChartYScale(LineMockData.TwoLines, 'x', plotHeight); + return ( + + ); +} + +function AreaChartWithDataDrivenScale({ + width, + height, +}: { + width: number; + height: number; +}) { + const plotHeight = height - LEGEND_RESERVE_HEIGHT; + const yScale = useAreaChartYScale(LineMockData.ThreeLines, 'x', plotHeight); + return ( + + ); +} + +function ResponsiveChartWrapper({ + children, + containerHeight = CHART_HEIGHT, +}: { + children: (size: [number, number]) => React.ReactNode; + containerHeight?: number; +}) { + const [size, setSize] = React.useState<[number, number]>([0, 0]); + return ( + + {size[0] > 0 ? children(size) : null} + + ); +} + +/** Fills parent height and passes measured size to chart so it adapts when card height is driven by sibling (e.g. table) */ +function FillHeightChartWrapper({ + children, +}: { + children: (size: [number, number]) => React.ReactNode; +}) { + const ref = React.useRef(null); + const [size, setSize] = React.useState<[number, number]>([0, 0]); + + React.useEffect(() => { + const el = ref.current; + if (!el) return; + const ro = new ResizeObserver((entries) => { + const { width, height } = entries[0].contentRect; + setSize([width, height]); + }); + ro.observe(el); + return () => ro.disconnect(); + }, []); + + return ( + + {size[0] > 0 && size[1] > 0 ? children(size) : null} + + ); +} + +function BarChartHorizontal({ + data, + width, + height, +}: { + data: Array<{ category: string; bar: number }>; + width: number; + height: number; +}) { + const MARGIN = 24; + const xScale = scaleLinear() + .range([HORIZONTAL_BAR_Y_AXIS_MARGIN, width - MARGIN]) + .domain([0, Math.max(...data.map((d) => d.bar), 10)]); + const yScale = scaleBand() + .range([height - MARGIN, MARGIN]) + .domain(data.map((d) => d.category)) + .paddingInner(0.4) + .paddingOuter(0.2); + return ( + + + + + + + + + + + ); +} + +type PrimaryTableRow = (typeof primaryDataTableData)[number]; +function DashboardPlaygroundContent() { + const [tabValue, setTabValue] = React.useState(1); + const [primaryTablePage, setPrimaryTablePage] = React.useState(1); + const [primaryTableSort, setPrimaryTableSort] = React.useState< + DataTableSort + >(['metric', 'asc']); + const [barChartVisibleKeys, setBarChartVisibleKeys] = React.useState< + Record<(typeof barChartLegendItemIds)[number], boolean> + >({ a: true, b: true, c: true }); + const barChartLegendItems = React.useMemo( + () => + barChartLegendItemIds.map((id) => ({ + id, + label: id, + checked: barChartVisibleKeys[id], + color: barChartColorMap[id], + })), + [barChartVisibleKeys], + ); + const barChartDataFiltered = React.useMemo( + () => + barChartData.map((row) => { + const out: Record = { month: row.month }; + barChartLegendItemIds.forEach((key) => { + if (barChartVisibleKeys[key]) out[key] = row[key]; + }); + return out; + }), + [barChartVisibleKeys], + ); + const primaryTableSortedData = React.useMemo( + () => + [...primaryDataTableData].sort((a, b) => { + const [prop, direction] = primaryTableSort; + const aVal = a[prop]; + const bVal = b[prop]; + if (prop === 'metric' || prop === 'value') { + const diff = Number(aVal) - Number(bVal); + return direction === 'asc' ? diff : -diff; + } + if (prop === 'change') { + const parseChange = (s: string) => Number(String(s).replace(/[^-\d]/g, '')) || 0; + const diff = parseChange(String(aVal)) - parseChange(String(bVal)); + return direction === 'asc' ? diff : -diff; + } + const cmp = String(aVal).localeCompare(String(bVal)); + return direction === 'asc' ? cmp : -cmp; + }), + [primaryTableSort], + ); + + return ( + + + + + + Projects + Dashboard + + Theme playground + + + + + Feedback + + User manual + + + + + + + <Text color='text-secondary' noWrap> + Theme playground + </Text> + + + + + + + + + + + + + Filter: + + + + + + + + + + + + + + + + + + + + 19 hours ago + + + Keywords: + + + + Competitors: + + + + setDomain1(v)} + > + setDomain1(undefined)} + /> + + {domainOptions.map((opt) => ( + + {opt.label} + + ))} + + + + + + + + + + + + + + + + + + + + + + servicetitan.com + + 0.01% + 0 + + + + + thriveagency.com + + 0.02% + +0.02 + + + + + domain3.com + + 0.015% + +0.01 + + + + + domain4.com + + 0.012% + 0 + + + + + domain5.com + + 0.018% + +0.01 + + + + + {([width, height]) => ( + formatXDate(value as Date)} + showDots + aria-label='Visibility over time' + /> + )} + + + + + + + ); +} + +export const Default: Story = { + render: () => , +}; diff --git a/stories/theme/theme-playground-fonts.css b/stories/theme/theme-playground-fonts.css new file mode 100644 index 0000000000..a9174362d9 --- /dev/null +++ b/stories/theme/theme-playground-fonts.css @@ -0,0 +1,7 @@ +@font-face { + font-family: 'Lazzer'; + src: url('./fonts/LazzerVF.woff2') format('woff2'); + font-weight: 100 900; + font-style: normal; + font-display: swap; +} diff --git a/stories/theme/theme-playground-switcher.tsx b/stories/theme/theme-playground-switcher.tsx new file mode 100644 index 0000000000..2a672bdab0 --- /dev/null +++ b/stories/theme/theme-playground-switcher.tsx @@ -0,0 +1,169 @@ +import aquaGreenThemeTokens from '@semcore/core/lib/theme/themes/aqua-green'; +import darkThemeTokens from '@semcore/core/lib/theme/themes/dark'; +import defaultThemeTokens from '@semcore/core/lib/theme/themes/default'; +import highlightsAquaGreen from '@semcore/core/lib/theme/themes/highlights-aqua-green'; +import highlightsDark from '@semcore/core/lib/theme/themes/highlights-dark'; +import highlightsLight from '@semcore/core/lib/theme/themes/highlights-light'; +import highlightsLightNew from '@semcore/core/lib/theme/themes/highlights-light-new'; +import highlightsLightNew2ver from '@semcore/core/lib/theme/themes/highlights-light-new-2ver'; +import highlightsLimeGreen from '@semcore/core/lib/theme/themes/highlights-lime-green'; +import highlightsNew from '@semcore/core/lib/theme/themes/highlights-new'; +import highlightsNewAdjusted from '@semcore/core/lib/theme/themes/highlights-new-adjusted'; +import lightNewThemeTokens from '@semcore/core/lib/theme/themes/light-new'; +import lightNew2verThemeTokens from '@semcore/core/lib/theme/themes/light-new-2ver'; +import limeGreenThemeTokens from '@semcore/core/lib/theme/themes/lime-green'; +import newThemeTokens from '@semcore/core/lib/theme/themes/new'; +import newAdjustedThemeTokens from '@semcore/core/lib/theme/themes/new-adjusted'; +import { ThemeProvider } from '@semcore/core/lib/utils/ThemeProvider'; +import { Box } from '@semcore/ui/base-components'; +import Button from '@semcore/ui/button'; +import DropdownMenu from '@semcore/ui/dropdown-menu'; +import React from 'react'; + +export const THEMES = [ + { id: 'light', label: '[current] light', tokens: defaultThemeTokens }, + { id: 'new-adjusted', label: '[new] light-new adjusted from Lesha', tokens: newAdjustedThemeTokens }, + { id: 'light-new', label: '[new] light-new', tokens: lightNewThemeTokens }, + { id: 'light-new-2ver', label: '[new] light-new-crazy', tokens: lightNew2verThemeTokens }, + { id: 'new', label: '[new] product test', tokens: newThemeTokens }, + { id: 'aqua-green', label: '[marketing] 🟦 aqua green', tokens: aquaGreenThemeTokens }, + { id: 'lime-green', label: '[marketing] 🟩 lime green', tokens: limeGreenThemeTokens }, + { id: 'dark', label: '[current] dark (for website)', tokens: darkThemeTokens }, +] as const; + +/** Feature Highlight tokens per theme (border, bg, control, etc. for NoticeFH, ButtonFH, etc.) */ +const HIGHLIGHTS_BY_THEME_ID: Record<(typeof THEMES)[number]['id'], Record> = { + 'light': highlightsLight, + 'new-adjusted': highlightsNewAdjusted, + 'light-new': highlightsLightNew, + 'light-new-2ver': highlightsLightNew2ver, + 'new': highlightsNew, + 'aqua-green': highlightsAquaGreen, + 'lime-green': highlightsLimeGreen, + 'dark': highlightsDark, +}; + +export const BG_PRIMARY_TOKEN = '--intergalactic-bg-primary-neutral'; + +type ThemePlaygroundContextValue = { + themeIndex: number; + setThemeIndex: (index: number) => void; + currentTheme: (typeof THEMES)[number]; + themes: readonly (typeof THEMES)[number][]; +}; + +const ThemePlaygroundContext = React.createContext(null); + +function useThemePlaygroundContext() { + const ctx = React.useContext(ThemePlaygroundContext); + if (!ctx) { + throw new Error('ThemeSwitcherDropdown must be used inside ThemePlaygroundLayout'); + } + return ctx; +} + +type ThemeSwitcherDropdownProps = { + dropdownMenuProps?: Partial>; + triggerProps?: Partial>; +}; + +/** Renders only the theme dropdown. Use inside ThemePlaygroundLayout when switcherVariant="inline" to place the switcher in your own layout (e.g. ProductHead.Buttons). */ +export function ThemeSwitcherDropdown({ + dropdownMenuProps, + triggerProps = {}, +}: ThemeSwitcherDropdownProps) { + const { themeIndex, setThemeIndex, currentTheme, themes } = useThemePlaygroundContext(); + const defaultTriggerProps = { use: 'secondary' as const, size: 'l' as const }; + const mergedTriggerProps = { ...defaultTriggerProps, ...triggerProps }; + + return ( + + + Theme: {currentTheme.label} + + + {themes.map((theme, index) => ( + setThemeIndex(index)} + > + {theme.label} + + ))} + + + ); +} + +type ThemePlaygroundLayoutProps = { + children: React.ReactNode; + /** + * - 'fixed' (default): switcher in a fixed box top-right. + * - 'inline': no fixed box; render ThemeSwitcherDropdown inside children where you need it (e.g. ProductHead.Buttons). + */ + switcherVariant?: 'fixed' | 'inline'; + /** Props for the theme dropdown (e.g. disablePortal for use inside modals). Only used when switcherVariant='fixed'. */ + dropdownMenuProps?: Partial>; + /** z-index for the fixed switcher box (default 1000). Only used when switcherVariant='fixed'. */ + switcherZIndex?: number; +}; + +export function ThemePlaygroundLayout({ + children, + switcherVariant = 'fixed', + dropdownMenuProps, + switcherZIndex = 1000, +}: ThemePlaygroundLayoutProps) { + const [themeIndex, setThemeIndex] = React.useState(0); + const currentTheme = THEMES[themeIndex]; + const tokensWithHighlights = React.useMemo( + () => ({ + ...currentTheme.tokens, + ...(HIGHLIGHTS_BY_THEME_ID[currentTheme.id] ?? {}), + }), + [currentTheme], + ); + + React.useEffect(() => { + const prevBackground = document.body.style.background; + document.body.style.background = `var(${BG_PRIMARY_TOKEN})`; + document.body.style.setProperty(BG_PRIMARY_TOKEN, currentTheme.tokens[BG_PRIMARY_TOKEN] ?? ''); + return () => { + document.body.style.background = prevBackground; + document.body.style.removeProperty(BG_PRIMARY_TOKEN); + }; + }, [currentTheme.tokens]); + + const contextValue: ThemePlaygroundContextValue = { + themeIndex, + setThemeIndex, + currentTheme, + themes: THEMES, + }; + + return ( + + + {switcherVariant === 'fixed' && ( + + + + )} + {children} + + + ); +} diff --git a/stories/theme/theme-playground.stories.tsx b/stories/theme/theme-playground.stories.tsx new file mode 100644 index 0000000000..a3db35db01 --- /dev/null +++ b/stories/theme/theme-playground.stories.tsx @@ -0,0 +1,1301 @@ +import MathPlusM from '@semcore/icon/MathPlus/m'; +import SettingsM from '@semcore/icon/Settings/m'; +import SummaryAI from '@semcore/icon/SummaryAI/m'; +import Accordion from '@semcore/ui/accordion'; +import Badge from '@semcore/ui/badge'; +import { Box, Flex } from '@semcore/ui/base-components'; +import { FilterTrigger } from '@semcore/ui/base-trigger'; +import Breadcrumbs from '@semcore/ui/breadcrumbs'; +import BulkTextarea from '@semcore/ui/bulk-textarea'; +import Button, { + ButtonLink, + type ButtonProps, + type ButtonLinkProps, +} from '@semcore/ui/button'; +import Card from '@semcore/ui/card'; +import Checkbox from '@semcore/ui/checkbox'; +import ColorPicker, { PaletteManager } from '@semcore/ui/color-picker'; +import Counter from '@semcore/ui/counter'; +import { DatePicker, DateRangePicker, DateRangeComparator } from '@semcore/ui/date-picker'; +import Divider from '@semcore/ui/divider'; +import Dot from '@semcore/ui/dot'; +import DnD from '@semcore/ui/drag-and-drop'; +import DropdownMenu from '@semcore/ui/dropdown-menu'; +import { + BadgeFH, + ButtonFH, + CheckboxFH, + InputFH, + NoticeFH, + PillsFH, + RadioFH, + SelectFH, + SwitchFH, + TabLineFH, +} from '@semcore/ui/feature-highlight'; +import Flag from '@semcore/ui/flags'; +import InlineInput from '@semcore/ui/inline-input'; +import Input from '@semcore/ui/input'; +import InputMask from '@semcore/ui/input-mask'; +import InputNumber from '@semcore/ui/input-number'; +import InputTags from '@semcore/ui/input-tags'; +import Link from '@semcore/ui/link'; +import Notice from '@semcore/ui/notice'; +import Pills from '@semcore/ui/pills'; +import ProgressBar from '@semcore/ui/progress-bar'; +import Radio, { RadioGroup } from '@semcore/ui/radio'; +import Select from '@semcore/ui/select'; +import Skeleton from '@semcore/ui/skeleton'; +import Slider from '@semcore/ui/slider'; +import Spin from '@semcore/ui/spin'; +import Switch from '@semcore/ui/switch'; +import TabLine from '@semcore/ui/tab-line'; +import Tag, { TagContainer } from '@semcore/ui/tag'; +import Textarea from '@semcore/ui/textarea'; +import Tooltip from '@semcore/ui/tooltip'; +import { List, Text } from '@semcore/ui/typography'; +import type { Meta, StoryObj } from '@storybook/react-vite'; +import React from 'react'; + +import { ThemePlaygroundLayout } from './theme-playground-switcher'; +import './theme-playground-fonts.css'; + +const LAZZER_FONT = '\'Lazzer\', sans-serif'; + +function FeatureHighlightDemo() { + const [selectValue, setSelectValue] = React.useState(''); + return ( + + + + + Primary + + + + Secondary + + AI powered + + + + + + One + + + Two + + + + + + + {selectValue} + + + One + Two + Three + + + + + + + + AI powered + + + + + + Receive updates + + + + + + Radio button with AI accent + + + + + + First option + + + + + + +
+ + Checkbox with AI accent + + + + + + + First option + + + + + + + + +
+ + + First option + + + Second option + + Third option + + + How would you rate this update? + + + ); +} + +const meta: Meta = { + title: 'Theme/Theme Playground', +}; + +export default meta; + +type Story = StoryObj; + +type ButtonRowProps = Pick; + +function ButtonRow({ use, theme, size = 'm' }: ButtonRowProps) { + return ( + + + + + + + + FilterTrigger + + + + + Color + + + + + + + Tooltip + + + + Default + + + Warning + + + + Invert + + + + + + Input + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + InputNumber & InputRange + + + + + Number + + + + + + + + + Range (From – To) + + + + setInputRangeFrom(String(v ?? ''))} + /> + + + + setInputRangeTo(String(v ?? ''))} + /> + + + + + + + + InputTags + + + + + tag 1 + + + + tag 2 + + + + + + + + InputPhone + + + + + Phone + + + + + + + + + + + + InlineInput + + + + + + + + + + + Textarea + + +