diff --git a/semcore/core/package.json b/semcore/core/package.json
index add778c1d8..b5cfe877d4 100644
--- a/semcore/core/package.json
+++ b/semcore/core/package.json
@@ -41,6 +41,26 @@
"import": "./lib/theme/themes/highlights-light.css",
"require": "./lib/theme/themes/highlights-light.css"
},
+ "./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/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/new.json b/semcore/core/src/theme/new.json
new file mode 100644
index 0000000000..520ad1e653
--- /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": "{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": "{gray.white}, 0.15",
+ "type": "color",
+ "description": "Primary white tag."
+ },
+ "white-hover-active": {
+ "value": "{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..bfa814a5f8 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'];
const warning = !process.argv.includes('--no-warning');
diff --git a/semcore/core/src/theme/themes/auto.css b/semcore/core/src/theme/themes/auto.css
index 1fef6aa40c..ab9dc877d6 100644
--- a/semcore/core/src/theme/themes/auto.css
+++ b/semcore/core/src/theme/themes/auto.css
@@ -1745,4 +1745,881 @@
--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;
}
\ No newline at end of file
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/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/stories/theme/charts-theme-playground.stories.tsx b/stories/theme/charts-theme-playground.stories.tsx
new file mode 100644
index 0000000000..f5a8e58f39
--- /dev/null
+++ b/stories/theme/charts-theme-playground.stories.tsx
@@ -0,0 +1,392 @@
+import darkThemeTokens from '@semcore/core/lib/theme/themes/dark';
+import defaultThemeTokens from '@semcore/core/lib/theme/themes/default';
+import newThemeTokens from '@semcore/core/lib/theme/themes/new';
+import { ThemeProvider } from '@semcore/core/lib/utils/ThemeProvider';
+import { Box, Flex } from '@semcore/ui/base-components';
+import Button from '@semcore/ui/button';
+import { Chart, Plot, Line, XAxis, YAxis, minMax, HorizontalBar, HoverRect } from '@semcore/ui/d3-chart';
+import DropdownMenu from '@semcore/ui/dropdown-menu';
+import { Text } from '@semcore/ui/typography';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { scaleBand, scaleLinear } from 'd3-scale';
+import React from 'react';
+import './theme-playground-fonts.css';
+
+const LAZZER_FONT = '\'Lazzer\', sans-serif';
+
+const meta: Meta = {
+ title: 'Theme/Charts Theme Playground',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const THEMES = [
+ { id: 'light', label: 'Light', tokens: defaultThemeTokens },
+ { id: 'new', label: 'New', tokens: newThemeTokens },
+ { id: 'dark', label: 'Dark', tokens: darkThemeTokens },
+] as const;
+
+const BG_PRIMARY_TOKEN = '--intergalactic-bg-primary-neutral';
+
+const lineChartData = [
+ { x: 0, line1: 2, line2: 3 },
+ { x: 1, line1: 4, line2: 2 },
+ { x: 2, line1: 3, line2: 5 },
+ { x: 3, line1: 6, line2: 4 },
+ { x: 4, line1: 5, line2: 6 },
+ { x: 5, line1: 7, line2: 5 },
+ { x: 6, line1: 6, line2: 7 },
+ { x: 7, line1: 8, line2: 6 },
+ { x: 8, line1: 9, line2: 8 },
+ { x: 9, line1: 10, line2: 9 },
+];
+
+// Данные для Line with Area: в каждой строке x, y (линия), y0 и y1 (границы заливки), как в документации
+const lineAreaChartData = [
+ { x: 0, y: 2, y0: 0, y1: 4 },
+ { x: 1, y: 4, y0: 0, y1: 6 },
+ { x: 2, y: 3, y0: 0, y1: 5 },
+ { x: 3, y: 6, y0: 0, y1: 8 },
+ { x: 4, y: 5, y0: 0, y1: 7 },
+ { x: 5, y: 7, y0: 0, y1: 9 },
+ { x: 6, y: 6, y0: 0, y1: 8 },
+ { x: 7, y: 8, y0: 0, y1: 10 },
+ { x: 8, y: 9, y0: 0, y1: 10 },
+ { x: 9, y: 10, y0: 0, y1: 12 },
+];
+
+const areaChartDataStacked = [
+ { time: new Date('2024-01-01'), line1: 2, line2: 3 },
+ { time: new Date('2024-01-06'), line1: 4, line2: 2 },
+ { time: new Date('2024-01-11'), line1: 3, line2: 4 },
+ { time: new Date('2024-01-16'), line1: 6, line2: 3 },
+ { time: new Date('2024-01-21'), line1: 5, line2: 4 },
+ { time: new Date('2024-01-26'), line1: 7, line2: 5 },
+ { time: new Date('2024-01-31'), line1: 6, line2: 3 },
+ { time: new Date('2024-02-05'), line1: 8, line2: 5 },
+ { time: new Date('2024-02-10'), line1: 9, line2: 6 },
+ { time: new Date('2024-02-15'), line1: 10, line2: 8 },
+];
+
+const barChartData = [
+ { category: 'Cat 1', bar: 4 },
+ { category: 'Cat 2', bar: 8 },
+ { category: 'Cat 3', bar: 5 },
+ { category: 'Cat 4', bar: 7 },
+ { category: 'Cat 5', bar: 9 },
+];
+
+const donutChartData = {
+ a: 3,
+ b: 5,
+ c: 2,
+ d: 4,
+};
+
+const vennChartData = {
+ 'G': 200,
+ 'F': 200,
+ 'C': 500,
+ 'G/F': 100,
+ 'G/C': 100,
+ 'F/C': 100,
+ 'G/F/C': 100,
+};
+
+const vennLegendMap = {
+ G: { label: 'Good' },
+ F: { label: 'Fast' },
+ C: { label: 'Clean' },
+};
+
+const radarChartData = {
+ categories: ['Var 1', 'Var 2', 'Var 3', 'Var 4', 'Var 5', 'Var 6'],
+ data_1: [1, 3, 5, 5, 9, 2],
+ data_2: [5, 2, 1, 2, 7, 6],
+};
+
+const bubbleChartData = [
+ { x: 2, y: 3, value: 5040, label: 'A' },
+ { x: 1, y: 9, value: 40, label: 'B' },
+ { x: 6, y: 2, value: 45634, label: 'C' },
+ { x: 4, y: 7, value: 245, label: 'D' },
+ { x: 9, y: 5, value: 7462, label: 'E' },
+];
+
+const scatterplotChartData = [
+ { x: 0, y: 1 },
+ { x: 1, y: 3 },
+ { x: 2, y: 2 },
+ { x: 3, y: 5 },
+ { x: 4, y: 4 },
+ { x: 5, y: 2 },
+ { x: 6, y: 4 },
+ { x: 7, y: 3 },
+ { x: 8, y: 5 },
+ { x: 9, y: 1 },
+];
+
+function LineAreaChart({
+ data,
+ width,
+ height,
+}: {
+ data: Array<{ x: number; y: number; y0: number; y1: number }>;
+ width: number;
+ height: number;
+}) {
+ const MARGIN = 40;
+ const xScale = scaleLinear()
+ .range([MARGIN, width - MARGIN])
+ .domain(minMax(data, 'x'));
+ const yScale = scaleLinear()
+ .range([height - MARGIN, MARGIN])
+ .domain([0, Math.max(...data.map((d) => d.y1))]);
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function HorizontalBarChart({
+ data,
+ width,
+ height,
+}: {
+ data: Array<{ category: string; bar: number }>;
+ width: number;
+ height: number;
+}) {
+ const MARGIN = 40;
+ const xScale = scaleLinear()
+ .range([MARGIN * 2, 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 [themeIndex, setThemeIndex] = React.useState(0);
+ const currentTheme = THEMES[themeIndex];
+
+ 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]);
+
+ return (
+
+
+
+
+ Charts theme playground
+
+
+
+
+ Theme: {currentTheme.label}
+
+
+ {THEMES.map((theme, index) => (
+ setThemeIndex(index)}
+ >
+ {theme.label}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ Line chart
+
+
+
+
+
+ Line.Area chart
+
+
+
+
+
+ Area chart (stacked)
+
+
+
+
+
+ Bar chart
+
+
+
+
+
+ Bubble chart
+
+
+
+
+
+ Scatterplot chart
+
+
+
+
+
+
+
+ Donut chart
+
+
+
+
+
+ Donut chart (halfsize)
+
+
+
+
+
+ Venn chart
+
+
+
+
+
+ Horizontal bar chart
+
+
+
+
+
+ Compact horizontal bar chart
+
+
+
+
+
+ Radar chart
+
+
+
+
+
+
+
+ );
+}
+
+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..9371c9c15a
--- /dev/null
+++ b/stories/theme/dashboard-playground.stories.tsx
@@ -0,0 +1,662 @@
+import darkThemeTokens from '@semcore/core/lib/theme/themes/dark';
+import defaultThemeTokens from '@semcore/core/lib/theme/themes/default';
+import newThemeTokens from '@semcore/core/lib/theme/themes/new';
+import { ThemeProvider } from '@semcore/core/lib/utils/ThemeProvider';
+import BookM from '@semcore/icon/Book/m';
+import Chat from '@semcore/icon/Chat/m';
+import MathPlusM from '@semcore/icon/MathPlus/m';
+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,
+ HorizontalBar,
+ minMax,
+ Plot,
+ ResponsiveContainer,
+ XAxis,
+ YAxis,
+} from '@semcore/ui/d3-chart';
+import { DataTable } from '@semcore/ui/data-table';
+import type { DataTableData } from '@semcore/ui/data-table';
+import DropdownMenu from '@semcore/ui/dropdown-menu';
+import Link from '@semcore/ui/link';
+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 from '@semcore/ui/tooltip';
+import { Text } from '@semcore/ui/typography';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { scaleBand, scaleLinear } from 'd3-scale';
+import React from 'react';
+import './theme-playground-fonts.css';
+
+const meta: Meta = {
+ title: 'Theme/Dashboard Playground',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const THEMES = [
+ { id: 'light', label: 'Light', tokens: defaultThemeTokens },
+ { id: 'new', label: 'New', tokens: newThemeTokens },
+ { id: 'dark', label: 'Dark', tokens: darkThemeTokens },
+] as const;
+
+const BG_PRIMARY_TOKEN = '--intergalactic-bg-primary-neutral';
+
+const lineChartData = [
+ { x: 0, line1: 2, line2: 3 },
+ { x: 1, line1: 4, line2: 2 },
+ { x: 2, line1: 3, line2: 5 },
+ { x: 3, line1: 6, line2: 4 },
+ { x: 4, line1: 5, line2: 6 },
+ { x: 5, line1: 7, line2: 5 },
+ { x: 6, line1: 6, line2: 7 },
+ { x: 7, line1: 8, line2: 6 },
+ { x: 8, line1: 9, line2: 8 },
+ { x: 9, line1: 10, line2: 9 },
+];
+
+const lineAreaChartData = [
+ { x: 0, y: 2, y0: 0, y1: 4 },
+ { x: 1, y: 4, y0: 0, y1: 6 },
+ { x: 2, y: 3, y0: 0, y1: 5 },
+ { x: 3, y: 6, y0: 0, y1: 8 },
+ { x: 4, y: 5, y0: 0, y1: 7 },
+ { x: 5, y: 7, y0: 0, y1: 9 },
+ { x: 6, y: 6, y0: 0, y1: 8 },
+ { x: 7, y: 8, y0: 0, y1: 10 },
+ { x: 8, y: 9, y0: 0, y1: 10 },
+ { x: 9, y: 10, y0: 0, y1: 12 },
+];
+
+const barChartData = [
+ { category: 'A', bar: 4 },
+ { category: 'B', bar: 8 },
+ { category: 'C', bar: 5 },
+ { category: 'D', bar: 7 },
+ { category: 'E', bar: 9 },
+];
+
+const donutChartData = { a: 3, b: 5, c: 2, d: 4 };
+
+const scatterplotChartData = [
+ { x: 0, y: 1 },
+ { x: 1, y: 3 },
+ { x: 2, y: 2 },
+ { x: 3, y: 5 },
+ { x: 4, y: 4 },
+ { x: 5, y: 2 },
+ { x: 6, y: 4 },
+ { x: 7, y: 3 },
+ { x: 8, y: 5 },
+ { x: 9, y: 1 },
+];
+
+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 internalLinkingData = [
+ { category: '0', value: 13 },
+ { category: '1', value: 18 },
+ { category: '2-5', value: 25 },
+ { category: '6-15', value: 22 },
+ { category: '16-50', value: 26 },
+ { category: '51-150', value: 17 },
+ { category: '151-500', value: 12 },
+ { category: '500+', value: 16 },
+];
+
+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;
+
+const PLOT_PADDING = 6;
+const LINE_CHART_MARGIN_X = 30;
+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(lineChartData, 'x', plotHeight);
+ return (
+
+ );
+}
+
+function AreaChartWithDataDrivenScale({
+ width,
+ height,
+}: {
+ width: number;
+ height: number;
+}) {
+ const plotHeight = height - LEGEND_RESERVE_HEIGHT;
+ const yScale = useAreaChartYScale(areaChartData, '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}
+
+ );
+}
+
+const areaChartData = [
+ { x: 0, area1: 2, area2: 3, area3: 1 },
+ { x: 1, area1: 4, area2: 2, area3: 4 },
+ { x: 2, area1: 3, area2: 5, area3: 2 },
+ { x: 3, area1: 6, area2: 4, area3: 5 },
+ { x: 4, area1: 5, area2: 6, area3: 4 },
+ { x: 5, area1: 7, area2: 5, area3: 6 },
+ { x: 6, area1: 6, area2: 7, area3: 5 },
+ { x: 7, area1: 8, area2: 6, area3: 7 },
+ { x: 8, area1: 9, area2: 8, area3: 8 },
+ { x: 9, area1: 10, area2: 9, area3: 9 },
+];
+
+function BarChartHorizontal({
+ data,
+ width,
+ height,
+}: {
+ data: Array<{ category: string; bar: number }>;
+ width: number;
+ height: number;
+}) {
+ const MARGIN = 24;
+ const xScale = scaleLinear()
+ .range([MARGIN * 2, 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 DashboardPlaygroundContent() {
+ const [themeIndex, setThemeIndex] = React.useState(0);
+ const [tabValue, setTabValue] = React.useState(1);
+ const currentTheme = THEMES[themeIndex];
+
+ 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]);
+
+ return (
+
+
+
+
+
+ Projects
+ Dashboard
+
+ Theme playground
+
+
+
+
+ Feedback
+
+ User manual
+
+
+
+
+
+
+ <Text color='text-secondary' noWrap>
+ Theme playground
+ </Text>
+
+
+
+
+
+
+ Theme: {currentTheme.label}
+
+
+ {THEMES.map((theme, index) => (
+ setThemeIndex(index)}
+ >
+ {theme.label}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ Filter:
+
+
+
+ 1 hour ago
+
+
+
+
+
+
+ Overview
+ Analytics
+ Reports
+
+
+
+
+
+ Line
+ The line goes where it wants.
+
+
+
+ {([width, height]) => (
+
+ )}
+
+
+
+
+
+
+ Area
+ Three layers — like a cake.
+
+
+
+ {([width, height]) => (
+
+ )}
+
+
+
+
+
+
+ Bar
+ Bars grow sideways.
+
+
+
+ {([width, height]) => (
+
+ )}
+
+
+
+
+
+
+ Donut
+ A donut hole put to good use.
+
+
+
+ {([width, height]) => {
+ const size = Math.min(width, height);
+ return (
+
+ );
+ }}
+
+
+
+
+
+
+ Scatterplot
+ Points scattered every which way.
+
+
+
+ {([width, height]) => (
+
+ )}
+
+
+
+
+
+
+
+ Table
+ Rows and columns get along.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Histogram
+
+ Incoming links
+ Outgoing links
+
+
+
+
+
+ {([width, height]) => (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export const Default: Story = {
+ render: () => ,
+};
diff --git a/stories/theme/datatable-theme-playground.stories.tsx b/stories/theme/datatable-theme-playground.stories.tsx
new file mode 100644
index 0000000000..d83ef55794
--- /dev/null
+++ b/stories/theme/datatable-theme-playground.stories.tsx
@@ -0,0 +1,129 @@
+import darkThemeTokens from '@semcore/core/lib/theme/themes/dark';
+import defaultThemeTokens from '@semcore/core/lib/theme/themes/default';
+import newThemeTokens from '@semcore/core/lib/theme/themes/new';
+import { ThemeProvider } from '@semcore/core/lib/utils/ThemeProvider';
+import { Box, Flex } from '@semcore/ui/base-components';
+import Button from '@semcore/ui/button';
+import { DataTable } from '@semcore/ui/data-table';
+import type { DataTableData } from '@semcore/ui/data-table';
+import DropdownMenu from '@semcore/ui/dropdown-menu';
+import { Text } from '@semcore/ui/typography';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import './theme-playground-fonts.css';
+
+const LAZZER_FONT = '\'Lazzer\', sans-serif';
+
+const meta: Meta = {
+ title: 'Theme/DataTable Theme Playground',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const THEMES = [
+ { id: 'light', label: 'Light', tokens: defaultThemeTokens },
+ { id: 'new', label: 'New', tokens: newThemeTokens },
+ { id: 'dark', label: 'Dark', tokens: darkThemeTokens },
+] as const;
+
+const BG_PRIMARY_TOKEN = '--intergalactic-bg-primary-neutral';
+
+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' },
+];
+
+function DataTableThemePlaygroundContent() {
+ const [themeIndex, setThemeIndex] = React.useState(0);
+ const currentTheme = THEMES[themeIndex];
+
+ 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]);
+
+ return (
+
+
+
+
+ DataTable theme playground
+
+
+
+
+ Theme: {currentTheme.label}
+
+
+ {THEMES.map((theme, index) => (
+ setThemeIndex(index)}
+ >
+ {theme.label}
+
+ ))}
+
+
+
+
+
+
+
+
+ DataTable
+
+
+
+
+
+ DataTable (secondary)
+
+
+
+
+
+
+ );
+}
+
+export const Default: Story = {
+ render: () => ,
+};
diff --git a/stories/theme/fonts/LazzerVF.woff2 b/stories/theme/fonts/LazzerVF.woff2
new file mode 100755
index 0000000000..ca3be29402
Binary files /dev/null and b/stories/theme/fonts/LazzerVF.woff2 differ
diff --git a/stories/theme/popups-and-dialogs-theme.stories.tsx b/stories/theme/popups-and-dialogs-theme.stories.tsx
new file mode 100644
index 0000000000..aa2f57f98a
--- /dev/null
+++ b/stories/theme/popups-and-dialogs-theme.stories.tsx
@@ -0,0 +1,386 @@
+import darkThemeTokens from '@semcore/core/lib/theme/themes/dark';
+import defaultThemeTokens from '@semcore/core/lib/theme/themes/default';
+import newThemeTokens from '@semcore/core/lib/theme/themes/new';
+import { ThemeProvider } from '@semcore/core/lib/utils/ThemeProvider';
+import { Box, Flex } from '@semcore/ui/base-components';
+import Button from '@semcore/ui/button';
+import Carousel from '@semcore/ui/carousel';
+import DropdownMenu from '@semcore/ui/dropdown-menu';
+import FeaturePopover from '@semcore/ui/feature-popover';
+import { FeedbackRating } from '@semcore/ui/feedback-form';
+import FullscreenModal from '@semcore/ui/fullscreen-modal';
+import Link from '@semcore/ui/link';
+import Modal from '@semcore/ui/modal';
+import SidePanel from '@semcore/ui/side-panel';
+import SpinContainer from '@semcore/ui/spin-container';
+import { Text } from '@semcore/ui/typography';
+import Wizard from '@semcore/ui/wizard';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import './theme-playground-fonts.css';
+
+const LAZZER_FONT = '\'Lazzer\', sans-serif';
+
+const meta: Meta = {
+ title: 'Theme/Popups and Dialogs Theme',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const THEMES = [
+ { id: 'light', label: 'Light', tokens: defaultThemeTokens },
+ { id: 'new', label: 'New', tokens: newThemeTokens },
+ { id: 'dark', label: 'Dark', tokens: darkThemeTokens },
+] as const;
+
+const BG_PRIMARY_TOKEN = '--intergalactic-bg-primary-neutral';
+
+const CAROUSEL_ITEMS = [
+ { src: 'https://picsum.photos/id/1023/600/400', alt: 'A cyclist performing stunts in the forest' },
+ { src: 'https://picsum.photos/id/1024/600/400', alt: 'A vulture flies with its wings spread wide' },
+ { src: 'https://picsum.photos/id/1025/600/400', alt: 'A pug wrapped in a blanket in the forest' },
+];
+const CAROUSEL_WIDTH = 400;
+const CAROUSEL_IMAGE_WIDTH = CAROUSEL_WIDTH - 75;
+
+const WIZARD_STEPS = [
+ { title: 'Step 1' },
+ { title: 'Step 2' },
+ { title: 'Step 3' },
+];
+
+function PopupsAndDialogsContent() {
+ const [themeIndex, setThemeIndex] = React.useState(0);
+ const [modalVisible, setModalVisible] = React.useState(false);
+ const [fullscreenVisible, setFullscreenVisible] = React.useState(false);
+ const [sidePanelVisible, setSidePanelVisible] = React.useState(false);
+ const [wizardVisible, setWizardVisible] = React.useState(false);
+ const [wizardStep, setWizardStep] = React.useState(1);
+ const [feedbackRatingVisible, setFeedbackRatingVisible] = React.useState(false);
+ const [feedbackRatingValue, setFeedbackRatingValue] = React.useState(0);
+ const [feedbackRatingNotification, setFeedbackRatingNotification] = React.useState(true);
+ const [feedbackRatingStatus, setFeedbackRatingStatus] = React.useState<'default' | 'loading' | 'success' | 'error'>('default');
+ const currentTheme = THEMES[themeIndex];
+
+ 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 handleFeedbackRatingVisibleChange = React.useCallback((visible: boolean, rating: number) => {
+ setFeedbackRatingVisible(visible);
+ setFeedbackRatingValue(visible ? rating : 0);
+ }, []);
+
+ const handleFeedbackRatingSubmit = React.useCallback(async (values: Record) => {
+ setFeedbackRatingStatus('loading');
+ await new Promise((r) => setTimeout(r, 500));
+ setFeedbackRatingStatus('success');
+ setFeedbackRatingVisible(false);
+ setFeedbackRatingNotification(false);
+ }, []);
+
+ return (
+
+
+
+
+ Theme: {currentTheme.label}
+
+
+ {THEMES.map((theme, index) => (
+ setThemeIndex(index)}
+ >
+ {theme.label}
+
+ ))}
+
+
+
+
+
+
+ Popups, dialogs and overlays theme
+
+
+
+
+ Carousel
+
+
+
+ {CAROUSEL_ITEMS.map((item, index) => (
+
+ 
+
+ ))}
+
+
+
+
+ DropdownMenu
+
+
+
+ Open menu
+
+ Item 1
+ Item 2
+ Item 3
+
+
+
+
+
+ FeaturePopover
+
+
+ )} disablePortal placement='right-start'>
+
+
+
+
+
+ Popover title
+
+
+ Short description for theme playground.
+
+
+
+
+
+
+ FullscreenModal
+
+
+
+ setFullscreenVisible(false)}>
+
+ Back
+
+
+
+ Body content
+
+
+
+
+
+
+
+
+
+
+ FeedbackRating
+
+
+ setFeedbackRatingNotification(false)}
+ status={feedbackRatingStatus}
+ onSubmit={handleFeedbackRatingSubmit}
+ errorFeedbackEmail='feedback@example.com'
+ formConfig={[
+ { key: 'option1', label: 'Score is more accurate', type: 'checkbox' },
+ { key: 'option2', label: 'Formula is more transparent', type: 'checkbox' },
+ { key: 'option3', label: 'It\'s easier to use for evaluation', type: 'checkbox' },
+ {
+ key: 'description',
+ label: 'If there anything we could improve?',
+ type: 'textarea',
+ validate: FeedbackRating.validate.description('Please share your ideas.'),
+ },
+ {
+ key: 'email',
+ label: 'Reply-to email',
+ type: 'email',
+ validate: FeedbackRating.validate.email('Please enter valid email'),
+ description: (
+ <>
+ We will only use this email to respond to you on your feedback.
+ {' '}
+ Privacy Policy
+
+ ),
+ },
+ ]}
+ />
+
+
+
+ Modal
+
+
+
+ setModalVisible(false)}>
+ Modal title
+
+ Modal content for theme playground.
+
+
+
+
+
+
+ SidePanel
+
+
+
+ setSidePanelVisible(false)} aria-label='Side panel'>
+
+ Back
+ Panel title
+
+
+ Panel body content
+
+
+
+
+
+
+
+
+
+ SpinContainer
+
+
+
+
+ Loading content
+
+
+
+
+
+ Invert theme
+
+
+
+
+
+
+ Wizard
+
+
+
+ setWizardVisible(false)}
+ >
+
+ setWizardStep(1)} completed={wizardStep > 1}>
+ {WIZARD_STEPS[0].title}
+
+ setWizardStep(2)} completed={wizardStep > 2}>
+ {WIZARD_STEPS[1].title}
+
+ setWizardStep(3)}>
+ {WIZARD_STEPS[2].title}
+
+
+
+ {WIZARD_STEPS.map((stepData, index) => (
+
+
+ {stepData.title}
+
+
+ ))}
+
+ {wizardStep > 1 && (
+ setWizardStep(wizardStep - 1)}
+ stepName={WIZARD_STEPS[wizardStep - 2].title}
+ />
+ )}
+ {wizardStep < WIZARD_STEPS.length && (
+ setWizardStep(wizardStep + 1)}
+ stepName={WIZARD_STEPS[wizardStep].title}
+ />
+ )}
+ {wizardStep === WIZARD_STEPS.length && (
+
+ )}
+
+
+
+
+
+
+ );
+}
+
+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.stories.tsx b/stories/theme/theme-playground.stories.tsx
new file mode 100644
index 0000000000..1962f7bf0b
--- /dev/null
+++ b/stories/theme/theme-playground.stories.tsx
@@ -0,0 +1,1010 @@
+import darkThemeTokens from '@semcore/core/lib/theme/themes/dark';
+import defaultThemeTokens from '@semcore/core/lib/theme/themes/default';
+import newThemeTokens from '@semcore/core/lib/theme/themes/new';
+import { ThemeProvider } from '@semcore/core/lib/utils/ThemeProvider';
+import MathPlusM from '@semcore/icon/MathPlus/m';
+import SettingsM from '@semcore/icon/Settings/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 } 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 } from '@semcore/ui/date-picker';
+import Divider from '@semcore/ui/divider';
+import Dot from '@semcore/ui/dot';
+import DropdownMenu from '@semcore/ui/dropdown-menu';
+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 { Text } from '@semcore/ui/typography';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import './theme-playground-fonts.css';
+
+const LAZZER_FONT = '\'Lazzer\', sans-serif';
+
+const meta: Meta = {
+ title: 'Theme/Theme Playground',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+/** List of themes for switching. To add a new theme: add JSON to semcore/core/src/theme, run process-theme, add the export to core/package.json and add an entry here. */
+const THEMES = [
+ { id: 'light', label: 'Light', tokens: defaultThemeTokens },
+ { id: 'new', label: 'New', tokens: newThemeTokens },
+ { id: 'dark', label: 'Dark', tokens: darkThemeTokens },
+] as const;
+
+function ButtonRow({
+ use,
+ theme,
+ size = 'm',
+}: {
+ use: 'primary' | 'secondary' | 'tertiary';
+ theme: 'info' | 'success' | 'danger' | 'brand' | 'muted' | 'invert';
+ size?: 'm' | 'l';
+}) {
+ return (
+
+
+
+
+
+ );
+}
+
+function ButtonLinkRow({
+ use,
+ size = 300,
+}: {
+ use: 'primary' | 'secondary';
+ size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
+}) {
+ return (
+
+
+ ButtonLink
+
+
+ ButtonLink
+
+
+
+ );
+}
+
+const BG_PRIMARY_TOKEN = '--intergalactic-bg-primary-neutral';
+
+const SELECT_OPTIONS = [
+ { value: '1', label: 'Option 1', children: 'Option 1' },
+ { value: '2', label: 'Option 2', children: 'Option 2' },
+ { value: '3', label: 'Option 3', children: 'Option 3' },
+];
+
+const FILTER_TRIGGER_OPTIONS = ['Blue', 'Gray', 'Green', 'Orange', 'Pink', 'Red', 'Salad', 'Violet', 'Yellow'];
+
+function ThemePlaygroundContent() {
+ const [themeIndex, setThemeIndex] = React.useState(0);
+ const [radioValue, setRadioValue] = React.useState('1');
+ const [pillsValue, setPillsValue] = React.useState(null);
+ const [tabValue, setTabValue] = React.useState(1);
+ const [sliderValue, setSliderValue] = React.useState(50);
+ const [dateValue, setDateValue] = React.useState(new Date());
+ const [bulkTextareaValue, setBulkTextareaValue] = React.useState('');
+ const [colorValue, setColorValue] = React.useState('#2DAF00');
+ const [inputRangeFrom, setInputRangeFrom] = React.useState('');
+ const [inputRangeTo, setInputRangeTo] = React.useState('');
+ const [inputPhoneCountry, setInputPhoneCountry] = React.useState<'DE' | 'GB'>('DE');
+ const [inputPhoneValue, setInputPhoneValue] = React.useState('+49');
+ const currentTheme = THEMES[themeIndex];
+
+ 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]);
+
+ return (
+
+
+
+
+ Theme: {currentTheme.label}
+
+
+ {THEMES.map((theme, index) => (
+ setThemeIndex(index)}
+ >
+ {theme.label}
+
+ ))}
+
+
+
+
+
+
+ Theme playground
+
+
+
+ Accordion
+
+
+
+
+ {[1, 2].map((index) => (
+
+
+
+
+ Section
+ {' '}
+ {index}
+
+
+
+
+ Content for section
+ {' '}
+ {index}
+ .
+
+
+
+ ))}
+
+
+
+
+ {[1, 2].map((index) => (
+
+
+
+
+ Section
+ {' '}
+ {index}
+
+
+
+
+ Content for section
+ {' '}
+ {index}
+ .
+
+
+
+ ))}
+
+
+
+
+
+ Badge
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Breadcrumbs
+
+
+
+ Projects
+ Dashboard
+
+ Current page
+
+
+
+
+
+ Button
+
+
+
+ {/* Column 1: buttons with themes except invert */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Column 2: buttons with invert theme only on dark background */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ButtonLink
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Link
+
+
+
+ Primary link
+
+
+ Critical link
+
+
+ Success link
+
+
+ Secondary link
+
+
+
+
+ Card
+
+
+
+
+
+
+ Fastest animals
+
+
+
+
+ This is a list of the fastest animals in the world, by types of animal.
+
+
+
+
+ The peregrine falcon is the fastest bird, and the fastest member of the animal
+ kingdom, with a diving speed of over 300 km/h (190 mph). The fastest land animal is
+ the cheetah.
+
+
+
+
+
+
+ Checkbox & Radio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ColorPicker
+
+
+
+
+ Main theme color
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Counter
+
+
+ 42
+ 42
+ 42
+ 42
+ 42
+
+
+
+ Divider
+
+
+
+ Horizontal
+
+
+
+ Vertical
+
+
+
+
+
+ Dot
+
+
+ 3
+ 12
+
+
+
+
+ FilterTrigger
+
+
+
+
+ Color
+
+
+
+
+
+
+ Tooltip
+
+
+
+ Hover me
+
+
+ Button with tooltip
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ InputNumber & InputRange
+
+
+
+
+ Number
+
+
+
+
+
+
+
+
+ Range (From – To)
+
+
+
+ setInputRangeFrom(String(v ?? ''))}
+ />
+
+
+
+ setInputRangeTo(String(v ?? ''))}
+ />
+
+
+
+
+
+
+
+ InputTags
+
+
+
+
+ tag 1
+
+
+
+ tag 2
+
+
+
+
+
+
+
+ InputPhone
+
+
+
+
+ Phone
+
+
+
+
+
+
+
+
+
+
+
+ InlineInput
+
+
+
+
+
+
+
+
+
+
+ Textarea
+
+
+
+
+
+
+
+
+ BulkTextarea
+
+
+
+
+
+ Keywords
+
+
+
+
+
+
+
+
+
+
+
+
+ Select
+
+
+
+
+
+
+
+ DatePicker
+
+
+
+
+ Select date
+
+
+
+
+
+
+
+
+
+ Switch
+
+
+
+
+ Switch M
+
+
+
+ Checked
+
+
+
+ Switch L
+
+
+
+ Disabled
+
+
+
+
+ Skeleton
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tag
+
+
+
+ Primary
+
+
+ Secondary
+
+
+ Additional
+
+
+ Disabled
+
+
+
+ {(['gray', 'blue', 'green', 'red', 'orange', 'yellow', 'violet', 'pink', 'salad'] as const).map(
+ (color) => (
+
+ {color}
+
+ ),
+ )}
+
+
+ {(['gray', 'blue', 'green', 'red', 'orange', 'yellow', 'violet', 'pink', 'salad'] as const).map(
+ (color) => (
+
+ {color}
+
+ ),
+ )}
+
+
+ {(['gray', 'blue', 'green', 'red', 'orange', 'yellow', 'violet', 'pink', 'salad'] as const).map(
+ (color) => (
+
+ {color}
+
+ ),
+ )}
+
+
+ {(['gray', 'blue', 'green', 'red', 'orange', 'yellow', 'violet', 'pink', 'salad'] as const).map(
+ (color) => (
+
+ {color}
+
+ ),
+ )}
+
+
+ {(['gray', 'blue', 'green', 'red', 'orange', 'yellow', 'violet', 'pink', 'salad'] as const).map(
+ (color) => (
+
+ {color}
+
+ ),
+ )}
+
+
+ {(['gray', 'blue', 'green', 'red', 'orange', 'yellow', 'violet', 'pink', 'salad'] as const).map(
+ (color) => (
+
+ {color}
+
+ ),
+ )}
+
+
+ {(['gray', 'blue', 'green', 'red', 'orange', 'yellow', 'violet', 'pink', 'salad'] as const).map(
+ (color) => (
+
+
+ {color}
+
+
+
+ ),
+ )}
+
+
+ {(['gray', 'blue', 'green', 'red', 'orange', 'yellow', 'violet', 'pink', 'salad'] as const).map(
+ (color) => (
+
+
+ {color}
+
+
+
+ ),
+ )}
+
+
+ {(['gray', 'blue', 'green', 'red', 'orange', 'yellow', 'violet', 'pink', 'salad'] as const).map(
+ (color) => (
+
+
+ {color}
+
+
+
+ ),
+ )}
+
+
+
+ Pills
+
+
+
+ Option 1
+ Option 2
+ Option 3
+
+
+ Option 1
+ Option 2
+
+
+ Disabled
+ Option 2
+
+
+
+
+ Slider
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ TabLine
+
+
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+
+
+
+ ProgressBar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Spin
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Notice
+
+
+
+
+ Info notice
+ Short message for theme playground.
+
+
+
+
+
+ Warning notice
+ Short message for theme playground.
+
+
+
+
+
+ Danger notice
+ Short message for theme playground.
+
+
+
+
+
+ Success notice
+ Short message for theme playground.
+
+
+
+
+
+ Muted notice
+ Short message for theme playground.
+
+
+
+
+
+
+ );
+}
+
+export const Default: Story = {
+ render: () => ,
+};