diff --git a/semcore/badge/src/Badge.tsx b/semcore/badge/src/Badge.tsx
index a5844e3449..34b9f39c25 100644
--- a/semcore/badge/src/Badge.tsx
+++ b/semcore/badge/src/Badge.tsx
@@ -53,7 +53,7 @@ class RootBadge extends Component<
if (type === 'unavailable' && !inverted) {
return resolveColor('--intergalactic-text-secondary');
- }
+ } // TODO: --intergalactic-badge-text-secondary
return undefined;
}
@@ -64,27 +64,27 @@ class RootBadge extends Component<
if (inverted) {
return resolveColor('--gray-white');
- }
+ } // TODO: --intergalactic-badge-bg-invert
switch (type) {
case 'admin': {
return resolveColor('--blue-400');
- }
+ } // TODO: --intergalactic-badge-bg-admin
case 'alpha': {
return resolveColor('--red-400');
- }
+ } // TODO: --intergalactic-badge-bg-alpha
case 'beta': {
return resolveColor('--orange-400');
- }
+ } // TODO: --intergalactic-badge-bg-beta
case 'new': {
return resolveColor('--green-400');
- }
+ } // TODO: --intergalactic-badge-bg-new
case 'soon': {
return resolveColor('--gray-400');
- }
+ } // TODO: --intergalactic-badge-bg-soon
case 'unavailable': {
return resolveColor('--gray-100');
- }
+ } // TODO: --intergalactic-badge-bg-unavailable
default: {
const t: never = type;
throw new Error(`Type can't be "${t}"`);
diff --git a/semcore/badge/src/style/badge.shadow.css b/semcore/badge/src/style/badge.shadow.css
index 1bb5f69c18..10e3a520ef 100644
--- a/semcore/badge/src/style/badge.shadow.css
+++ b/semcore/badge/src/style/badge.shadow.css
@@ -11,7 +11,7 @@ SBadge {
letter-spacing: 0.3px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-badge-text-primary-invert */
}
SBadge[bg] {
@@ -20,7 +20,7 @@ SBadge[bg] {
SBadge[inverted] {
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
-}
+} /* TODO: --intergalactic-badge-text-primary */
SBadge[color] {
color: var(--color);
diff --git a/semcore/base-components/src/components/hint/style/hint.shadow.css b/semcore/base-components/src/components/hint/style/hint.shadow.css
index 3e66b92d97..42e1b824a8 100644
--- a/semcore/base-components/src/components/hint/style/hint.shadow.css
+++ b/semcore/base-components/src/components/hint/style/hint.shadow.css
@@ -8,8 +8,8 @@ SHintPopper {
opacity: 0;
pointer-events: none;
- background: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140));
- border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369));
+ background: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert or consider adding hint category */
+ border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert or consider adding hint category */
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-2x, 8px);
border-radius: var(--intergalactic-rounded-small, 4px);
diff --git a/semcore/base-trigger/src/style/base-trigger.shadow.css b/semcore/base-trigger/src/style/base-trigger.shadow.css
index 93335b2862..34904de782 100644
--- a/semcore/base-trigger/src/style/base-trigger.shadow.css
+++ b/semcore/base-trigger/src/style/base-trigger.shadow.css
@@ -19,7 +19,7 @@ SBaseTrigger {
font-family: inherit;
cursor: pointer;
- background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+ background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-select-trigger-normal */
font-weight: var(--intergalactic-regular, 400);
border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
@@ -40,13 +40,13 @@ SBaseTrigger {
}
&:hover {
- background-color: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180));
+ background-color: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); /* TODO: --intergalactic-control-select-trigger-hover */
}
&:active,
&[active] {
border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
- background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+ background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-select-trigger-active */
}
}
diff --git a/semcore/button/src/component/Button/button.shadow.css b/semcore/button/src/component/Button/button.shadow.css
index cc7d5f67d5..1bc9544c9c 100644
--- a/semcore/button/src/component/Button/button.shadow.css
+++ b/semcore/button/src/component/Button/button.shadow.css
@@ -20,7 +20,7 @@ SButton {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
font-weight: var(--intergalactic-medium, 500);
- color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+ color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); /* TODO: --intergalactic-control-text-secondary */
min-width: fit-content;
&::-moz-focus-inner {
@@ -61,120 +61,121 @@ SButton[size='l'] {
}
SButton[theme='primary-info'] {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
&:hover {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.007 140));
}
&:active,
&[active] {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-info-active, oklch(0 0 140));
}
}
SButton[theme='primary-success'] {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170));
&:hover {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-success-hover, oklch(0.6 0.155 170));
}
&:active,
&[active] {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-success-active, oklch(0.58 0.151 170));
}
}
SButton[theme='primary-brand'] {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
- background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary */
+ background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3)); /* TODO:: update the value to a lighter lavander color */
&:hover {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary */
background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.6 0.244 297.8));
}
&:active,
&[active] {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary */
background-color: var(--intergalactic-control-primary-brand-active, oklch(0.58 0.254 297.1));
}
}
SButton[theme='primary-warning'] {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3));
&:hover {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.6 0.244 297.8));
}
&:active,
&[active] {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-brand-active, oklch(0.58 0.254 297.1));
}
}
SButton[theme='primary-danger'] {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5));
&:hover {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-critical-hover, oklch(0.6 0.219 25.5));
}
&:active,
&[active] {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-critical-active, oklch(0.58 0.215 26));
}
}
SButton[theme='primary-invert'] {
- color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */
background-color: var(--intergalactic-control-primary-invert, oklch(1 0 0));
&:hover {
- color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */
background-color: var(--intergalactic-control-primary-invert-hover, oklch(0.96 0.001 180));
}
&:active,
&[active] {
- color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */
background-color: var(--intergalactic-control-primary-invert-active, oklch(0.94 0.002 180));
}
}
SButton[theme='secondary-muted'] {
- color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+ color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); /* TODO: --intergalactic-control-text-secondary */
border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
background-color: var(--intergalactic-control-secondary-neutral, oklch(0.177 0.033 175.6 / 0.028));
&:hover {
background-color: var(--intergalactic-control-secondary-neutral-hover,
oklch(0.176 0.033 175.6 / 0.056));
- color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */
}
&:active,
&[active] {
background-color: var(--intergalactic-control-secondary-neutral-active,
oklch(0.176 0.033 175.7 / 0.084));
- color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */
}
}
+/* Remove this theme */
SButton[theme='secondary-info'] {
background-color: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039));
color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
@@ -193,23 +194,24 @@ SButton[theme='secondary-info'] {
}
SButton[theme='secondary-invert'] {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
border-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391));
background-color: var(--intergalactic-control-secondary-invert, oklch(0.969 0.057 140 / 0.118));
&:hover {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-secondary-invert-hover, oklch(0.976 0.043 140 / 0.145));
}
&:active,
&[active] {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-secondary-invert-active,
oklch(0.983 0.03 140 / 0.183));
}
}
+/* Remove this theme */
SButton[theme='tertiary-info'] {
color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
background-color: var(--intergalactic-control-tertiary-info, transparent);
@@ -227,34 +229,34 @@ SButton[theme='tertiary-info'] {
}
SButton[theme='tertiary-muted'] {
- color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+ color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); /* TODO: --intergalactic-control-text-tertiary */
background-color: var(--intergalactic-control-tertiary-neutral, transparent);
&:hover {
background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.176 0.033 175.6 / 0.056));
- color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */
}
&:active,
&[active] {
background-color: var(--intergalactic-control-tertiary-neutral-active,
oklch(0.176 0.033 175.7 / 0.084));
- color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */
}
}
SButton[theme='tertiary-invert'] {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-tertiary-invert, transparent);
&:hover {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-tertiary-invert-hover, oklch(0.976 0.043 140 / 0.145));
}
&:active,
&[active] {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-tertiary-invert-active, oklch(0.983 0.03 140 / 0.183));
}
}
@@ -283,11 +285,11 @@ SButton[neighborLocation='left'] {
&:after {
background-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391));
- }
+ } /* TODO: need to add a new variables for neighbor location borders based on the final UI */
&[theme='secondary-muted'] {
&:after {
- background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+ background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: need to add a new variables for neighbor location borders based on the final UI */
}
}
}
diff --git a/semcore/checkbox/src/style/checkbox.shadow.css b/semcore/checkbox/src/style/checkbox.shadow.css
index 2cc6c1746f..079fa1add8 100644
--- a/semcore/checkbox/src/style/checkbox.shadow.css
+++ b/semcore/checkbox/src/style/checkbox.shadow.css
@@ -44,9 +44,9 @@ SCheckbox {
left: 0;
right: 0;
bottom: 0;
- background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+ background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-checkbox-bg-normal */
border: 1px solid;
- border-radius: var(--intergalactic-addon-rounded, 4px);
+ border-radius: var(--intergalactic-addon-rounded, 4px); /* TODO: --intergalactic-checkbox-rounded */
transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out;
outline-color: transparent;
}
@@ -64,11 +64,11 @@ SCheckbox {
}
&[state='normal']:before {
- border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+ border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-checkbox-border */
}
&[state='normal']:focus-visible:before {
- border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
+ border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: ...? do we need this? checkbox get focus outline from Box and these color is rewritten */
}
}
@@ -106,19 +106,19 @@ SText[size='m'] {
SControl[checked]~SCheckbox[state='normal']:before,
SControl[checked]~SCheckbox[state='invalid']:before {
- background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
- border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
+ background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */
+ border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */
}
SControl[indeterminate]~SCheckbox[state='normal']:before {
- background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
- border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
+ background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */
+ border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */
}
SCheckbox[state='invalid'],
SControl[checked]~SCheckbox[state='invalid'] {
&:before {
- border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23));
+ border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); /* TODO: ...? not sure if we need to add special vars for invalid checkbox */
}
}
@@ -139,13 +139,13 @@ SControl[disabled] ~ SCheckbox[state='invalid'] > SInvalidPattern {
SControl[checked]~SCheckbox {
&[state='invalid']:before {
- background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5));
- border-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5));
+ background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* TODO: ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/
+ border-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* TODO: ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/
}
}
SControl[indeterminate]~SCheckbox:after {
- background-color: #ffffff;
+ background-color: #ffffff; /* TODO: --gray-white? */
margin: auto;
/* disable-tokens-validator */
border-radius: 1px;
@@ -162,8 +162,8 @@ SControl[indeterminate]~SCheckbox[size='m']:after {
}
SControl[indeterminate]~SCheckbox[state='invalid']:before {
- background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5));
- border-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5));
+ background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* TODO: ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/
+ border-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* TODO: ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/
}
SCheckbox[checked][theme][state='normal']:before {
diff --git a/semcore/d3-chart/src/style/bubble.shadow.css b/semcore/d3-chart/src/style/bubble.shadow.css
index a0fc502333..1b9dc48d0f 100644
--- a/semcore/d3-chart/src/style/bubble.shadow.css
+++ b/semcore/d3-chart/src/style/bubble.shadow.css
@@ -2,7 +2,7 @@
SBubble {
fill: var(--intergalactic-chart-palette-order-1, oklch(0.58 0.168 278.2));
- stroke: var(--intergalactic-chart-grid-border, #fff);
+ stroke: var(--intergalactic-chart-grid-border, #ffffff);
stroke-width: 2px;
transition-property: cx, cy;
transition-duration: var(--duration);
diff --git a/semcore/d3-chart/src/style/donut.shadow.css b/semcore/d3-chart/src/style/donut.shadow.css
index afddadf31b..2a36c8d566 100644
--- a/semcore/d3-chart/src/style/donut.shadow.css
+++ b/semcore/d3-chart/src/style/donut.shadow.css
@@ -1,7 +1,7 @@
@import './var.css';
SPie {
- stroke: var(--intergalactic-chart-grid-border, #fff);
+ stroke: var(--intergalactic-chart-grid-border, #ffffff);
fill: var(--intergalactic-chart-palette-order-1, oklch(0.58 0.168 278.2));
}
diff --git a/semcore/d3-chart/src/style/dot.shadow.css b/semcore/d3-chart/src/style/dot.shadow.css
index 18c0d21ae1..ebcb1d42c9 100644
--- a/semcore/d3-chart/src/style/dot.shadow.css
+++ b/semcore/d3-chart/src/style/dot.shadow.css
@@ -8,7 +8,7 @@ SDots {
SDot {
stroke-width: 1px;
- stroke: var(--intergalactic-chart-grid-border, #fff);
+ stroke: var(--intergalactic-chart-grid-border, #ffffff);
fill: var(--intergalactic-chart-palette-order-1, oklch(0.58 0.168 278.2));
transition-property: cx, cy, x, y;
transition-timing-function: ease-in-out;
diff --git a/semcore/d3-chart/src/style/radar.shadow.css b/semcore/d3-chart/src/style/radar.shadow.css
index 05a7e1bfe8..f74de46b38 100644
--- a/semcore/d3-chart/src/style/radar.shadow.css
+++ b/semcore/d3-chart/src/style/radar.shadow.css
@@ -47,7 +47,7 @@ SPolygon[pattern][color] {
SPolygonDot {
stroke-width: 2px;
- stroke: var(--intergalactic-chart-grid-border, #fff);
+ stroke: var(--intergalactic-chart-grid-border, #ffffff);
r: 6px;
fill: var(--intergalactic-chart-palette-order-1, oklch(0.58 0.168 278.2));
}
diff --git a/semcore/d3-chart/src/style/radial-tree.shadow.css b/semcore/d3-chart/src/style/radial-tree.shadow.css
index f2fb411b23..96bfb16292 100644
--- a/semcore/d3-chart/src/style/radial-tree.shadow.css
+++ b/semcore/d3-chart/src/style/radial-tree.shadow.css
@@ -22,7 +22,7 @@ SCap {
}
SCap[pattern] {
- stroke: var(--intergalactic-chart-grid-border, #fff);
+ stroke: var(--intergalactic-chart-grid-border, #ffffff);
stroke-width: 1px;
}
diff --git a/semcore/d3-chart/src/style/venn.shadow.css b/semcore/d3-chart/src/style/venn.shadow.css
index 7d10e659c5..417b260e2f 100644
--- a/semcore/d3-chart/src/style/venn.shadow.css
+++ b/semcore/d3-chart/src/style/venn.shadow.css
@@ -2,7 +2,7 @@
SCircle {
fill: var(--intergalactic-chart-palette-order-2, oklch(0.82 0.15 170));
- stroke: var(--intergalactic-chart-grid-border, #fff);
+ stroke: var(--intergalactic-chart-grid-border, #ffffff);
stroke-width: 2px;
fill-opacity: 0.5;
transition-property: cx, cy;
@@ -34,7 +34,7 @@ SCircle[transparent] {
}
SIntersection {
- stroke: var(--intergalactic-chart-grid-border, #fff);
+ stroke: var(--intergalactic-chart-grid-border, #ffffff);
stroke-width: 2px;
fill-opacity: 0;
diff --git a/semcore/data-table/src/components/Body/style.shadow.css b/semcore/data-table/src/components/Body/style.shadow.css
index 2ab50dd985..d2d98fd64d 100644
--- a/semcore/data-table/src/components/Body/style.shadow.css
+++ b/semcore/data-table/src/components/Body/style.shadow.css
@@ -59,7 +59,7 @@ SCollapseRow[gridArea] > SCellWrapper, SRow[isAccordionRow] > SCellWrapper {
SCollapseRow[gridArea] > SCellWrapper > SCell:not([withoutBorder]),
SAccordionRows > SRow[isAccordionRow]:last-child > SCellWrapper > SCell:not([withoutBorder]) {
- border-bottom: 1px solid var(--intergalactic-border-table-accent, oklch(0.137 0.026 175.7 / 0.161));
+ border-bottom: 1px solid var(--intergalactic-border-table-accent, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-table-border-accent */
}
SCollapseRow > SCellWrapper > SCell {
diff --git a/semcore/data-table/src/components/Head/style.shadow.css b/semcore/data-table/src/components/Head/style.shadow.css
index c5340d3492..124491bc5c 100644
--- a/semcore/data-table/src/components/Head/style.shadow.css
+++ b/semcore/data-table/src/components/Head/style.shadow.css
@@ -130,7 +130,7 @@ SColumn[use='primary'] {
SColumn[use='secondary'] {
padding: var(--intergalactic-spacing-2x, 8px);
- border-bottom: 1px solid var(--intergalactic-border-table-accent, oklch(0.137 0.026 175.7 / 0.161));
+ border-bottom: 1px solid var(--intergalactic-border-table-accent, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-table-border-accent */
background-color: var(--intergalactic-table-th-secondary-cell, oklch(1 0 0));
SSortWrapper::before {
diff --git a/semcore/dot/src/style/dot.shadow.css b/semcore/dot/src/style/dot.shadow.css
index ec36b6a3f6..78e5547217 100644
--- a/semcore/dot/src/style/dot.shadow.css
+++ b/semcore/dot/src/style/dot.shadow.css
@@ -4,8 +4,8 @@ SDot {
justify-content: center;
font-size: var(--intergalactic-fs-50, 10px);
line-height: normal;
- background-color: var(--intergalactic-icon-primary-warning, oklch(0.728 0.188 51.8));
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ background-color: var(--intergalactic-icon-primary-warning, oklch(0.728 0.188 51.8)); /* TODO: --intergalactic-dot-bg */
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-dot-text */
box-sizing: border-box;
z-index: 1;
border-radius: 100%;
diff --git a/semcore/dropdown/src/style/dropdown.shadow.css b/semcore/dropdown/src/style/dropdown.shadow.css
index c39f012ddb..eef34c1d96 100644
--- a/semcore/dropdown/src/style/dropdown.shadow.css
+++ b/semcore/dropdown/src/style/dropdown.shadow.css
@@ -57,7 +57,7 @@ SDropdownPopper {
SDropdownItem[selected]:not(SDropdownItem[isMenuItemCheckbox]) {
background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.525 0.265 263 / 0.077));
- box-shadow: 2px 0px 0px 0px var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)) inset;
+ box-shadow: 2px 0px 0px 0px var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)) inset; /* TODO: --intergalactic-dropdown-menu-item-selected-border */
&:hover {
background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.52 0.268 263.2 / 0.191));
diff --git a/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css b/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css
index b8c65da677..823a6b2d00 100644
--- a/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css
+++ b/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css
@@ -13,8 +13,7 @@ SHighlightedCheckbox:not([state="invalid"]) {
input[data-ui-name="CheckboxFH.Value"]:checked + [data-ui-name="Value.CheckMark"] {
border-color: transparent;
- background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) padding-box,
- var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box;
+ background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) padding-box, var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box;
}
[data-ui-name="Value.CheckMark"]::before {
diff --git a/semcore/feature-highlight/src/components/pills/pills.shadow.css b/semcore/feature-highlight/src/components/pills/pills.shadow.css
index 83fb070568..271f87ac69 100644
--- a/semcore/feature-highlight/src/components/pills/pills.shadow.css
+++ b/semcore/feature-highlight/src/components/pills/pills.shadow.css
@@ -1,8 +1,7 @@
SHighlightedPill {
border: 1px solid transparent;
background:
- linear-gradient(white, white) padding-box,
- var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box;
+ linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box;
background-origin: border-box;
background-clip: padding-box, border-box;
z-index: 1;
@@ -46,14 +45,12 @@ SHighlightedPill {
}
&:hover {
- background: var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box,
- var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box;
+ background: var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box, var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box;
}
&[selected] {
background:
- var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box,
- var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1))) border-box;
+ var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box, var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1))) border-box;
background-origin: border-box;
background-clip: padding-box, border-box;
border-color: transparent;
diff --git a/semcore/feature-popover/src/style/feature-popover.shadow.css b/semcore/feature-popover/src/style/feature-popover.shadow.css
index e4bd72c3d3..4df66ad267 100644
--- a/semcore/feature-popover/src/style/feature-popover.shadow.css
+++ b/semcore/feature-popover/src/style/feature-popover.shadow.css
@@ -9,12 +9,12 @@ SFeaturePopover {
position: relative;
&[theme='accent'] {
- background-color: var(--intergalactic-feature-popover-bg, oklch(0.88 0.078 303));
- color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+ background-color: var(--intergalactic-feature-popover-bg, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-bg-accent */
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-feature-popover-text */
}
&[theme='neutral'] {
- background-color: var(--intergalactic-feature-popover-bg-neutral, oklch(0.23 0.01 140));
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ background-color: var(--intergalactic-feature-popover-bg-neutral, oklch(0.23 0.01 140)); /* TODO: --intergalactic-feature-popover-bg-neutral */
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-feature-popover-text-invert */
}
}
@@ -94,18 +94,18 @@ SSpot {
&[theme='accent'] {
&::before {
- background-color: var(--intergalactic-feature-popover-dot-outer-border, oklch(0.88 0.078 303));
+ background-color: var(--intergalactic-feature-popover-dot-outer-border, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-dot-outer-border-accent */
}
&::after {
- background-color: var(--intergalactic-feature-popover-bg, oklch(0.88 0.078 303));
+ background-color: var(--intergalactic-feature-popover-bg, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-dot-accent */
}
}
&[theme='neutral'] {
&::before {
- background-color: var(--intergalactic-feature-popover-dot-neutral-outer-border, oklch(0.88 0.078 303));
+ background-color: var(--intergalactic-feature-popover-dot-neutral-outer-border, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-dot-outer-border-neutral */
}
&::after {
- background-color: var(--intergalactic-feature-popover-dot-neutral, oklch(0.88 0.078 303));
+ background-color: var(--intergalactic-feature-popover-dot-neutral, oklch(0.88 0.078 303)); /* TODO: --intergalactic-feature-popover-dot-neutral */
}
}
}
diff --git a/semcore/feedback-form/src/style/checkbox-button.shadow.css b/semcore/feedback-form/src/style/checkbox-button.shadow.css
index ee72f4f557..85e31f1d07 100644
--- a/semcore/feedback-form/src/style/checkbox-button.shadow.css
+++ b/semcore/feedback-form/src/style/checkbox-button.shadow.css
@@ -1,6 +1,7 @@
SCheckboxButton {
margin-top: var(--intergalactic-spacing-2x, 8px);
- border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+ /* add background-color: var(--intergalactic-control-checkbox-button-bg-normal); */
+ border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-checkbox-button-border */
border-radius: var(--intergalactic-rounded-medium, 6px);
label {
@@ -12,10 +13,10 @@ SCheckboxButton {
SCheckboxButton:hover, SCheckboxButton[checked] {
cursor: pointer;
- border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
- background-color: rgba(0, 143, 248, 0.10);
+ border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-control-checkbox-button-border-selected */
+ background-color: rgba(0, 143, 248, 0.10); /* TODO: --intergalactic-control-checkbox-button-bg-hover on :hover:not([checked]), --intergalactic-control-checkbox-button-bg-selected on [checked] */
}
SCheckboxButton[checked]:hover {
- background-color: rgba(0, 143, 248, 0.20);
+ background-color: rgba(0, 143, 248, 0.20); /* TODO: --intergalactic-control-checkbox-button-bg-selected-hover */
}
diff --git a/semcore/feedback-form/src/style/slider-rating.shadow.css b/semcore/feedback-form/src/style/slider-rating.shadow.css
index e0a3494905..23765dc382 100644
--- a/semcore/feedback-form/src/style/slider-rating.shadow.css
+++ b/semcore/feedback-form/src/style/slider-rating.shadow.css
@@ -20,9 +20,9 @@ SStar[filled]:active {
SStar path {
fill: var(--intergalactic-slider-rating-normal, oklch(0.7 0.003 162.2));
-}
+} /* TODO: --intergalactic-control-slider-rating-icon */
SStar[filled] path {
stroke-width: 0;
- fill: var(--intergalactic-slider-rating-hover-active, oklch(0.66 0.212 300.1));
+ fill: var(--intergalactic-slider-rating-hover-active, oklch(0.66 0.212 300.1)); /* TODO: --intergalactic-control-slider-rating-icon-hover-active */
}
diff --git a/semcore/mini-chart/src/component/score/line.shadow.css b/semcore/mini-chart/src/component/score/line.shadow.css
index fe53257aa9..6447478756 100644
--- a/semcore/mini-chart/src/component/score/line.shadow.css
+++ b/semcore/mini-chart/src/component/score/line.shadow.css
@@ -41,7 +41,7 @@ SLineSegmentItem:last-child {
SLineSegmentItem {
height: 8px;
background: transparent;
- border-right-color: var(--intergalactic-chart-grid-border, #fff);
+ border-right-color: var(--intergalactic-chart-grid-border, #ffffff);
border-right-style: solid;
border-right-width: 1px;
box-sizing: content-box;
diff --git a/semcore/notice-bubble/src/style/notice-bubble.shadow.css b/semcore/notice-bubble/src/style/notice-bubble.shadow.css
index 5eb240bc4c..e58b969080 100644
--- a/semcore/notice-bubble/src/style/notice-bubble.shadow.css
+++ b/semcore/notice-bubble/src/style/notice-bubble.shadow.css
@@ -12,11 +12,11 @@ SView {
gap: var(--intergalactic-spacing-2x, 8px);
&[type='info'] {
- background: var(--intergalactic-bg-primary-invert, oklch(0.23 0.01 140));
+ background: var(--intergalactic-bg-primary-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-notice-bubble-bg-info */
}
&[type='warning'] {
- background: var(--intergalactic-bg-primary-critical, oklch(0.64 0.226 24.5));
+ background: var(--intergalactic-bg-primary-critical, oklch(0.64 0.226 24.5)); /* TODO: --intergalactic-notice-bubble-bg-critical */
}
}
diff --git a/semcore/pills/src/style/pills.shadow.css b/semcore/pills/src/style/pills.shadow.css
index e0c73a046b..0a40d3c0c4 100644
--- a/semcore/pills/src/style/pills.shadow.css
+++ b/semcore/pills/src/style/pills.shadow.css
@@ -3,11 +3,11 @@ SPills {
align-items: center;
justify-content: center;
isolation: isolate;
- border-radius: var(--intergalactic-control-rounded, 6px);
+ border-radius: var(--intergalactic-control-rounded, 6px); /* TODO: --intergalactic-pills-rounded */
SPill[selected] {
- background: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039));
- border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
+ background: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039)); /* TODO: --intergalactic-control-pills-bg-selected */
+ border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-control-pills-border-selected */
z-index: 3;
}
SPill:focus-visible, SPill[selected] {
@@ -39,9 +39,9 @@ SPill {
vertical-align: middle;
font-family: inherit;
cursor: pointer;
- background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
- border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
- border-radius: var(--intergalactic-control-rounded, 6px);
+ background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-pills-bg-normal */
+ border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-pills-border */
+ border-radius: var(--intergalactic-control-rounded, 6px); /* TODO: --intergalactic-pills-rounded */
&::-moz-focus-inner {
border: none;
@@ -54,7 +54,7 @@ SPill {
}
&:hover {
- background: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180));
+ background: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); /* TODO: --intergalactic-control-pills-bg-hover */
}
}
diff --git a/semcore/radio/src/style/radio.shadow.css b/semcore/radio/src/style/radio.shadow.css
index 9147ccb8bf..20d4a75ff5 100644
--- a/semcore/radio/src/style/radio.shadow.css
+++ b/semcore/radio/src/style/radio.shadow.css
@@ -33,7 +33,7 @@ SValue {
left: 0;
right: 0;
bottom: 0;
- background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+ background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-radio-bg-normal */
border: 1px solid;
border-radius: 50%;
transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out;
@@ -51,7 +51,7 @@ SValue {
width: 0;
height: 0;
border-radius: 50%;
- background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+ background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-radio-bg-normal */
}
}
@@ -83,11 +83,11 @@ SValue[size='l'] {
}
SValue[state='normal']::before {
- border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+ border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-radio-border */
}
SValue[state='invalid']::before {
- border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23));
+ border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); /* TODO: ...? not sure if we need to add special vars for invalid radio */
}
SControl {
@@ -106,18 +106,18 @@ SControl:checked~SValue[size='l']::after {
}
SControl:focus-visible+SValue[state='normal']::before {
- border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
+ border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: ...? do we need this? radio get focus outline from Box and these color is rewritten */
@mixin focus-outline-mixin;
}
SControl:checked~SValue::before,
SControl:checked:focus-visible~SValue::before {
- border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
- background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
+ border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-radio-bg-selected */
+ background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-radio-bg-selected */
}
SControl:focus-visible+SValue[state='invalid']::before {
- border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23));
+ border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); /* TODO: ...? not sure if we need to add special vars for invalid radio */
@mixin focus-outline-mixin;
outline-color: var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652));
}
@@ -143,6 +143,6 @@ SInvalidPattern {
border-radius: 50%;
background-image: var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, oklch(0.7 0.21 23) 0, oklch(0.7 0.21 23) 1px, transparent 0, transparent 50%));
background-size: 6px 6px;
- background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+ background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-radio-bg-normal */
}
}
diff --git a/semcore/select/src/style/select.shadow.css b/semcore/select/src/style/select.shadow.css
index acc81137c6..04cae287a4 100644
--- a/semcore/select/src/style/select.shadow.css
+++ b/semcore/select/src/style/select.shadow.css
@@ -48,13 +48,13 @@ SOptionCheckbox[size='l'][selected]::after {
}
SOptionCheckbox[selected]:before {
- background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
- border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
+ background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */
+ border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */
}
SOptionCheckbox[indeterminate]:before {
- background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
- border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
+ background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */
+ border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */
}
SOptionCheckbox[theme]:before {
@@ -76,7 +76,7 @@ SOptionCheckbox[selected] {
}
SOptionCheckbox[indeterminate]:after {
- background-color: #ffffff;
+ background-color: #ffffff; /* TODO: --gray-white */
background-image: none;
margin: auto;
/* disable-tokens-validator */
diff --git a/semcore/slider/src/style/slider.shadow.css b/semcore/slider/src/style/slider.shadow.css
index b63325e5a7..e7936885d1 100644
--- a/semcore/slider/src/style/slider.shadow.css
+++ b/semcore/slider/src/style/slider.shadow.css
@@ -15,11 +15,11 @@ SSlider {
height: 4px;
width: 100%;
border-radius: var(--intergalactic-progress-bar-rounded, 6px);
- background-color: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
+ background-color: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); /* TODO: --intergalactic-control-slider-bar-bg */
}
&:hover:before {
- background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+ background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-slider-bar-bg-hover */
}
&:active SKnob,
@@ -50,7 +50,7 @@ SBar {
border-radius: var(--intergalactic-progress-bar-rounded, 6px);
box-sizing: border-box;
background-size: 12px;
- background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
+ background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-slider-bar-value-bg */
cursor: pointer;
transition: calc(var(--intergalactic-duration-control, 200) * 1ms) width ease-in-out;
}
@@ -62,14 +62,14 @@ SKnob {
width: 20px;
border-radius: 50%;
box-sizing: border-box;
- background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
- border: 5px solid var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
+ background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-slider-knob-bg */
+ border: 5px solid var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-slider-knob-border */
cursor: pointer;
transform: translate(-50%, -50%);
transition: calc(var(--intergalactic-duration-control, 200) * 1ms) left ease-in-out;
&:hover {
- border-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.007 140));
+ border-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.007 140)); /* TODO: --intergalactic-control-slider-knob-border-hover */
}
}
diff --git a/semcore/spin/src/style/spin.shadow.css b/semcore/spin/src/style/spin.shadow.css
index 76c28f4640..a3e049ebfe 100644
--- a/semcore/spin/src/style/spin.shadow.css
+++ b/semcore/spin/src/style/spin.shadow.css
@@ -19,11 +19,11 @@ SSpin {
}
SSpin[theme='dark'] {
- fill: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+ fill: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-spin-bg */
}
SSpin[theme='invert'] {
- fill: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391));
+ fill: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391)); /* TODO: --intergalactic-spin-bg-invert */
}
SSpin[centered] {
diff --git a/semcore/switch/src/style/switch.shadow.css b/semcore/switch/src/style/switch.shadow.css
index 87649cdf08..b65962db82 100644
--- a/semcore/switch/src/style/switch.shadow.css
+++ b/semcore/switch/src/style/switch.shadow.css
@@ -76,7 +76,7 @@ SSwitch[disabled] {
}
SToggle {
- background: var(--intergalactic-control-switch-bg, oklch(0.88 0.002 175.6));
+ background: var(--intergalactic-control-switch-bg, oklch(0.74 0.003 165.2)); /* TODO: --intergalactic-control-switch-bg */
position: relative;
color: var(--intergalactic-icon-secondary-neutral, oklch(0.104 0.023 162.3 / 0.385));
cursor: pointer;
@@ -86,13 +86,13 @@ SToggle {
}
SToggle[checked][theme='info'] {
- color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
- background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
+ color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-switch-bg-info-active */
+ background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-switch-bg-info-active */
}
SToggle[checked][theme='success'] {
- color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170));
- background-color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170));
+ color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170)); /* TODO: --intergalactic-control-switch-bg-success-active */
+ background-color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170)); /* TODO: --intergalactic-control-switch-bg-success-active */
}
SToggle[checked][theme='custom'] {
@@ -119,7 +119,7 @@ SToggle[neighborLocation='right'] {
SSlider {
/* margin: 0 var(--intergalactic-spacing-05x, 2px); */
- background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+ background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-switch-handle */
transform: translateX(-50%) scaleX(1);
transition: transform calc(var(--intergalactic-duration-switch, 100) * 1ms) ease-in-out;
display: flex;
diff --git a/semcore/tab-line/src/style/tab-line.shadow.css b/semcore/tab-line/src/style/tab-line.shadow.css
index a32fbe69e6..7b0ab427d6 100644
--- a/semcore/tab-line/src/style/tab-line.shadow.css
+++ b/semcore/tab-line/src/style/tab-line.shadow.css
@@ -6,7 +6,7 @@ STabLine {
}
STabLine[underlined] {
- border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+ border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-tab-line-border */
}
STabLineItem {
@@ -61,12 +61,12 @@ STabLineItem {
}
&:hover::before {
- background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+ background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-tab-line-border-hover */
}
&[selected]::after {
transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms);
- background-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
+ background-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-control-tab-line-border-active */
}
& SText:not(:last-child) {
@@ -82,7 +82,7 @@ SCaret {
position: absolute;
bottom: -1px;
height: 3px;
- background: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
+ background: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-control-tab-line-border-active */
transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out;
}
diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css
index 396d05d0de..f0230d0316 100644
--- a/semcore/tag/src/style/tag.shadow.css
+++ b/semcore/tag/src/style/tag.shadow.css
@@ -45,9 +45,9 @@ STagContainerClose {
align-items: center;
justify-content: center;
vertical-align: middle;
- border: 1px solid var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+ border: 1px solid var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-tag-primary-border */
box-sizing: border-box;
- background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+ background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-tag-primary-bg-normal */
border-radius: var(--intergalactic-tag-rounded, 24px);
padding-left: var(--intergalactic-spacing-1x, 4px);
padding-right: var(--intergalactic-spacing-1x, 4px);
@@ -170,6 +170,7 @@ STag[theme="secondary"],
STagContainerClose[theme="secondary"],
STag[theme="additional"],
STagContainerClose[theme="additional"] {
+ /* chenge to ...? secondary: change to --intergalactic-tag-secondary-border; additional: change to --intergalactic-tag-additional-bg-normal */
&::before {
opacity: 0.01;
}
@@ -209,7 +210,7 @@ STag[theme="secondary-invert"],
STagContainerClose[theme="secondary-invert"],
STag[theme="additional-invert"],
STagContainerClose[theme="additional-invert"] {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO:--intergalactic-tag-secondary-white-text */
}
STag[theme="additional"] {
diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css
index 83e233902a..6a2e50be7c 100644
--- a/semcore/tooltip/src/style/tooltip.shadow.css
+++ b/semcore/tooltip/src/style/tooltip.shadow.css
@@ -3,7 +3,7 @@ STooltip {
padding: var(--intergalactic-spacing-3x, 12px);
border-radius: var(--intergalactic-popper-rounded, 6px);
box-sizing: border-box;
- color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-tooltip-text */
font-size: var(--intergalactic-fs-200, 14px);
line-height: var(--intergalactic-lh-200, 142%);
word-wrap: break-word;
@@ -15,18 +15,18 @@ STooltip {
/* stylelint-disable-next-line no-duplicate-selectors */
STooltip {
- background-color: var(--intergalactic-tooltip-default, oklch(1 0 0));
+ background-color: var(--intergalactic-tooltip-default, oklch(1 0 0)); /* TODO: --intergalactic-tooltip-bg-default */
border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
}
STooltip[theme='invert'] {
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
- background-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140));
- border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369));
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-tooltip-text-invert */
+ background-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert */
+ border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert */
}
STooltip[theme='warning'] {
- background-color: var(--intergalactic-tooltip-warning, oklch(0.958 0.029 5.7));
+ background-color: var(--intergalactic-tooltip-warning, oklch(0.958 0.029 5.7)); /* TODO: --intergalactic-tooltip-bg-warning */
border: 1px solid var(--intergalactic-border-critical-active, oklch(0.7 0.21 23));
}
@@ -47,15 +47,15 @@ SArrow {
/* stylelint-disable-next-line no-duplicate-selectors */
&:before {
- border-color: var(--intergalactic-tooltip-default, oklch(1 0 0));
+ border-color: var(--intergalactic-tooltip-default, oklch(1 0 0)); /* TODO: --intergalactic-tooltip-bg-default */
}
}
SArrow[theme='invert'] {
- border-color: var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369));
+ border-color: var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert */
&::before {
- border-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140));
+ border-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert */
}
}
@@ -63,7 +63,7 @@ SArrow[theme='warning'] {
border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23));
&::before {
- border-color: var(--intergalactic-tooltip-warning, oklch(0.958 0.029 5.7));
+ border-color: var(--intergalactic-tooltip-warning, oklch(0.958 0.029 5.7)); /* TODO: --intergalactic-tooltip-bg-warning */
}
}
diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css
index a4acb742fd..142d7dae97 100644
--- a/semcore/wizard/src/style/wizard.shadow.css
+++ b/semcore/wizard/src/style/wizard.shadow.css
@@ -7,8 +7,8 @@ SWizard {
}
SSidebar {
- background: var(--intergalactic-control-primary-advertising, oklch(0.23 0.01 140));
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+ background: var(--intergalactic-control-primary-advertising, oklch(0.64 0.223 299.3)); /* TODO: --intergalactic-wizard-sidebar-bg */
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-wizard-sidebar-text-primary */
font-weight: var(--intergalactic-bold, 700);
font-size: var(--intergalactic-fs-300, 16px);
line-height: var(--intergalactic-lh-300, 150%);
@@ -38,11 +38,11 @@ SSidebar {
}
&:hover {
- background: var(--intergalactic-control-primary-advertising-hover, oklch(0.36 0.005 140));
+ background: var(--intergalactic-control-primary-advertising-hover, oklch(0.6 0.244 297.8)); /* TODO: --intergalactic-wizard-sidebar-control-hover */
z-index: 2;
}
&[active] {
- background: var(--intergalactic-control-primary-advertising-active, oklch(0.4 0.004 140));
+ background: var(--intergalactic-control-primary-advertising-active, oklch(0.58 0.254 297.1)); /* TODO: --intergalactic-wizard-sidebar-control-active */
}
&:disabled,
&[disabled] {
@@ -63,7 +63,7 @@ SSidebar {
overflow: auto;
}
&[active]:hover SStepDescription {
- background: var(--intergalactic-control-primary-advertising-active, oklch(0.4 0.004 140));
+ background: var(--intergalactic-control-primary-advertising-active, oklch(0.58 0.254 297.1)); /* TODO: --intergalactic-wizard-sidebar-control-active */
}
}
}
@@ -101,7 +101,7 @@ SContent {
flex: 1;
border-radius: 0 var(--intergalactic-modal-rounded, 14px) var(--intergalactic-modal-rounded, 14px)
0;
- background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+ background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-wizard-bg */
SWizardStepTitle {
display: block;
diff --git a/stories/components/tooltip/docs/examples/custom_bg_color.tsx b/stories/components/tooltip/docs/examples/custom_bg_color.tsx
index f7dd7a4f79..82ed05853e 100644
--- a/stories/components/tooltip/docs/examples/custom_bg_color.tsx
+++ b/stories/components/tooltip/docs/examples/custom_bg_color.tsx
@@ -8,7 +8,7 @@ const Demo = () => (
Colored tooltip
(
background: 'var(--intergalactic-bg-primary-advertising)',
color: 'var(--intergalactic-text-primary-invert)',
borderRadius: 'var(--intergalactic-popper-rounded)',
- borderColor: 'var(--intergalactic-border-tooltip-invert)',
+ borderColor: 'var(--intergalactic-tooltip-border-invert)',
}}
p={3}
>
diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts
index 1598ef1226..72a0e6f965 100644
--- a/tools/theme/src/theme.ts
+++ b/tools/theme/src/theme.ts
@@ -259,261 +259,217 @@ export const theme: Theme = {
},
semanticTokens: {
colors: {
- bg_primary_neutral_DEFAULT: {
- value: neutral.at(L_BG_PRIMARY),
- description: 'Primary background of the interface which contains the main data and information.',
+ badge_bg_admin: {
+ value: colors.blue['400'].value,
+ description: 'Background color of the admin Badge.',
},
- bg_primary_neutral_hover: {
- value: neutral.at(L_BG_PRIMARY_HOVER),
- description: 'Hover state of the primary background of the interface which contains the main data and information.',
+ badge_bg_alpha: {
+ value: colors.red['400'].value,
+ description: 'Background color of the alpha Badge.',
},
- bg_primary_neutral_active: {
- value: neutral.at(L_BG_PRIMARY_ACTIVE),
- description: 'Active (selected) state of the primary background of the interface which contains the main data and information.',
+ badge_bg_beta: {
+ value: colors.orange['400'].value,
+ description: 'Background color of the beta Badge.',
},
- bg_primary_info: {
- value: info.at(L_BG_STRONG),
- description: 'Accent background of the message with regular information.',
+ badge_bg_invert: {
+ value: '{baseTokens.colors.gray.white}',
+ description: 'Background color of the inverted Badge.',
},
- bg_primary_success: {
- value: success.at(L_BG_STRONG),
- description: 'Accent background of the message or banner with information about the successful result.',
+ badge_bg_new: {
+ value: colors.green['400'].value,
+ description: 'Background color of the new Badge.',
+ },
+ badge_bg_soon: {
+ value: colors.gray['400'].value,
+ description: 'Background color of the soon Badge.',
+ },
+ badge_bg_unavailable: {
+ value: colors.gray['100'].value,
+ description: 'Background color of the unavailable Badge.',
+ },
+ badge_text_primary_DEFAULT: {
+ value: '{semanticTokens.colors.text_primary_DEFAULT}',
+ description: 'Primary text color for Badge.',
+ },
+ badge_text_primary_invert: {
+ value: '{semanticTokens.colors.text_primary_invert}',
+ description: 'Inverted primary text color for Badge.',
+ },
+ badge_text_secondary: {
+ value: '{semanticTokens.colors.text_secondary_DEFAULT}',
+ description: 'Secondary text color for Badge.',
+ },
+ bg_highlight_focus: {
+ value: focus.opaqueAt(L_BG_SECONDARY_ACTIVE),
+ description: 'Focusing values in the input.',
+ },
+ bg_highlight_results: {
+ value: highlight.at(L_BG_SECONDARY_ACTIVE),
+ description: 'Highlighting the search results.',
+ },
+ bg_primary_advertising: {
+ value: advertising.at(L_BG_STRONG),
+ description: 'Accent background for the advertising banners and controls.',
},
bg_primary_critical: {
value: error.at(L_BG_STRONG),
description: 'Accent background of a message or a banner with a critical information.',
},
- bg_primary_warning: {
- value: warning.at(0.7),
- description: 'Accent background of a message or a banner with a warning information.',
- },
bg_primary_highlight: {
value: highlight.at(L_BG_MEDIUM),
description: 'Accent background of the information you want to highlight.',
},
- bg_primary_advertising: {
- value: advertising.at(L_BG_STRONG),
- description: 'Accent background for the advertising banners and controls.',
- },
- bg_primary_muted: {
- value: neutral.at(L_BG_STRONG),
- description: 'Accented muted background for a message with regular information.',
+ bg_primary_info: {
+ value: info.at(L_BG_STRONG),
+ description: 'Accent background of the message with regular information.',
},
bg_primary_invert_DEFAULT: {
value: neutral.at(L_INV_BG_PRIMARY),
description: 'Inverted version of the primary background of the interface that contains the main data and information.',
},
- bg_primary_invert_hover: {
- value: neutral.at(L_INV_BG_PRIMARY_HOVER),
- description: 'Hover state for the inverted version of the primary background of the interface that contains the main data and information.',
- },
bg_primary_invert_active: {
value: neutral.at(L_INV_BG_PRIMARY_ACTIVE),
description: 'Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information.',
},
- bg_secondary_neutral_DEFAULT: {
- value: neutral.at(L_BG_SECONDARY),
- description: 'Secondary background of the interface which contains the main data and information.',
+ bg_primary_invert_hover: {
+ value: neutral.at(L_INV_BG_PRIMARY_HOVER),
+ description: 'Hover state for the inverted version of the primary background of the interface that contains the main data and information.',
},
- bg_secondary_neutral_hover: {
- value: neutral.at(L_BG_SECONDARY_HOVER),
- description: 'Hover state of the secondary background of the interface which contains the main data and information.',
+ bg_primary_muted: {
+ value: neutral.at(L_BG_STRONG),
+ description: 'Accented muted background for a message with regular information.',
},
- bg_secondary_neutral_active: {
- value: neutral.at(L_BG_SECONDARY_ACTIVE),
- description: 'Active (selected) state of the secondary background of the interface which contains the main data and information.',
+ bg_primary_neutral_DEFAULT: {
+ value: neutral.at(L_BG_PRIMARY),
+ description: 'Primary background of the interface which contains the main data and information.',
},
- bg_secondary_info_DEFAULT: {
- value: info.at(L_BG_LIGHT),
- description: 'Secondary background of a message with regular information.',
+ bg_primary_neutral_active: {
+ value: neutral.at(L_BG_PRIMARY_ACTIVE),
+ description: 'Active (selected) state of the primary background of the interface which contains the main data and information.',
},
- bg_secondary_info_hover: {
- value: info.at(L_BG_SECONDARY_HOVER),
- description: 'Hover state of the secondary background of a message with regular information.',
+ bg_primary_neutral_hover: {
+ value: neutral.at(L_BG_PRIMARY_HOVER),
+ description: 'Hover state of the primary background of the interface which contains the main data and information.',
},
- bg_secondary_info_active: {
- value: info.at(L_BG_SECONDARY_ACTIVE),
- description: 'Active (selected) state of the secondary background of a message with regular information.',
+ bg_primary_success: {
+ value: success.at(L_BG_STRONG),
+ description: 'Accent background of the message or banner with information about the successful result.',
},
- bg_secondary_success_DEFAULT: {
- value: success.at(L_BG_LIGHT),
- description: 'Secondary background of the message with success information you want to accent.',
+ bg_primary_warning: {
+ value: warning.at(0.7),
+ description: 'Accent background of a message or a banner with a warning information.',
},
- bg_secondary_success_hover: {
- value: success.at(L_BG_SECONDARY_HOVER),
- description: 'Hover state of the secondary background of the message with success information you want to accent.',
+ bg_secondary_advertising_DEFAULT: {
+ value: advertising.at(L_BG_SECONDARY),
+ description: 'Secondary background for the advertising message you want to accent.',
},
- bg_secondary_success_active: {
- value: success.at(L_BG_SECONDARY_ACTIVE),
- description: 'Active (selected) state of the secondary background of the message with success information you want to accent.',
+ bg_secondary_advertising_active: {
+ value: advertising.at(L_BG_SECONDARY_ACTIVE),
+ description: 'Active (selected) state of the secondary background for the advertising message you want to accent.',
+ },
+ bg_secondary_advertising_hover: {
+ value: advertising.at(L_BG_SECONDARY_HOVER),
+ description: 'Hover state of the secondary background for the advertising message you want to accent.',
},
bg_secondary_critical_DEFAULT: {
value: error.at(L_BG_LIGHT),
description: 'Secondary background of the message with critical information you want to accent.',
},
- bg_secondary_critical_hover: {
- value: error.at(L_BG_SECONDARY_HOVER),
- description: 'Hover state of the secondary background of the message with critical information you want to accent.',
- },
bg_secondary_critical_active: {
value: error.at(L_BG_SECONDARY_ACTIVE),
description: 'Active (selected) state of the secondary background of the message with critical information you want to accent.',
},
- bg_secondary_warning_DEFAULT: {
- value: warning.at(L_BG_SECONDARY),
- description: 'Secondary background of the message with warning information you want to accent.',
- },
- bg_secondary_warning_hover: {
- value: warning.at(L_BG_SECONDARY_HOVER),
- description: 'Hover state of the secondary background of the message with warning information you want to accent.',
- },
- bg_secondary_warning_active: {
- value: warning.at(L_BG_SECONDARY_ACTIVE),
- description: 'Active (selected) state of the secondary background of the message with critical information you want to accent.',
+ bg_secondary_critical_hover: {
+ value: error.at(L_BG_SECONDARY_HOVER),
+ description: 'Hover state of the secondary background of the message with critical information you want to accent.',
},
bg_secondary_highlight_DEFAULT: {
value: highlight.at(L_BG_SECONDARY),
description: 'Secondary background of the information you want to highlight.',
},
- bg_secondary_highlight_hover: {
- value: highlight.at(L_BG_SECONDARY_HOVER),
- description: 'Hover state of the secondary background of the information you want to highlight.',
- },
bg_secondary_highlight_active: {
value: highlight.at(L_BG_SECONDARY_ACTIVE),
description: 'Active (selected) state of the secondary background of the information you want to highlight.',
},
- bg_secondary_advertising_DEFAULT: {
- value: advertising.at(L_BG_SECONDARY),
- description: 'Secondary background for the advertising message you want to accent.',
+ bg_secondary_highlight_hover: {
+ value: highlight.at(L_BG_SECONDARY_HOVER),
+ description: 'Hover state of the secondary background of the information you want to highlight.',
},
- bg_secondary_advertising_hover: {
- value: advertising.at(L_BG_SECONDARY_HOVER),
- description: 'Hover state of the secondary background for the advertising message you want to accent.',
+ bg_secondary_info_DEFAULT: {
+ value: info.at(L_BG_LIGHT),
+ description: 'Secondary background of a message with regular information.',
},
- bg_secondary_advertising_active: {
- value: advertising.at(L_BG_SECONDARY_ACTIVE),
- description: 'Active (selected) state of the secondary background for the advertising message you want to accent.',
+ bg_secondary_info_active: {
+ value: info.at(L_BG_SECONDARY_ACTIVE),
+ description: 'Active (selected) state of the secondary background of a message with regular information.',
},
- bg_highlight_results: {
- value: highlight.at(L_BG_SECONDARY_ACTIVE),
- description: 'Highlighting the search results.',
+ bg_secondary_info_hover: {
+ value: info.at(L_BG_SECONDARY_HOVER),
+ description: 'Hover state of the secondary background of a message with regular information.',
},
- bg_highlight_focus: {
- value: focus.opaqueAt(L_BG_SECONDARY_ACTIVE),
- description: 'Focusing values in the input.',
+ bg_secondary_neutral_DEFAULT: {
+ value: neutral.at(L_BG_SECONDARY),
+ description: 'Secondary background of the interface which contains the main data and information.',
},
- text_primary_DEFAULT: {
- value: neutral.opaqueAt(L_TEXT_PRIMARY),
- description: 'Default body and UI copy; strongest reading emphasis for primary content.',
+ bg_secondary_neutral_active: {
+ value: neutral.at(L_BG_SECONDARY_ACTIVE),
+ description: 'Active (selected) state of the secondary background of the interface which contains the main data and information.',
},
- text_primary_invert: {
- value: neutral.opaqueInvAt(L_INV_TEXT_PRIMARY),
- description: 'Inverted version of the primary text.',
+ bg_secondary_neutral_hover: {
+ value: neutral.at(L_BG_SECONDARY_HOVER),
+ description: 'Hover state of the secondary background of the interface which contains the main data and information.',
},
- text_secondary_DEFAULT: {
- value: neutral.opaqueAt(L_TEXT_SECONDARY),
- description: 'Supporting text: captions, metadata, hints in flowing copy—visually quieter than primary body text.',
+ bg_secondary_success_DEFAULT: {
+ value: success.at(L_BG_LIGHT),
+ description: 'Secondary background of the message with success information you want to accent.',
},
- text_secondary_invert: {
- value: neutral.opaqueInvAt(L_INV_TEXT_SECONDARY),
- description: 'Inverted version of the secondary text.',
+ bg_secondary_success_active: {
+ value: success.at(L_BG_SECONDARY_ACTIVE),
+ description: 'Active (selected) state of the secondary background of the message with success information you want to accent.',
},
- text_placeholder: {
- value: neutral.opaqueAt(L_TEXT_PLACEHOLDER),
- description: 'Placeholder text color for inputs and fields.',
+ bg_secondary_success_hover: {
+ value: success.at(L_BG_SECONDARY_HOVER),
+ description: 'Hover state of the secondary background of the message with success information you want to accent.',
},
- text_success_DEFAULT: {
- value: success.at(L_TEXT_SECONDARY),
- description: 'Text associated with success states and data.',
+ bg_secondary_warning_DEFAULT: {
+ value: warning.at(L_BG_SECONDARY),
+ description: 'Secondary background of the message with warning information you want to accent.',
},
- text_success_hover_active: {
- value: success.at(L_TEXT_SECONDARY_HOVER),
- description: 'Hover and active states for the text associated with success states and data.',
+ bg_secondary_warning_active: {
+ value: warning.at(L_BG_SECONDARY_ACTIVE),
+ description: 'Active (selected) state of the secondary background of the message with critical information you want to accent.',
},
- text_critical_DEFAULT: {
- value: error.at(L_TEXT_SECONDARY),
- description: 'Text associated with critical states and data.',
+ bg_secondary_warning_hover: {
+ value: warning.at(L_BG_SECONDARY_HOVER),
+ description: 'Hover state of the secondary background of the message with warning information you want to accent.',
},
- text_critical_hover_active: {
- value: error.at(L_TEXT_SECONDARY_HOVER),
- description: 'Hover and active states for the text associated with critical states and data.',
+ border_critical_DEFAULT: {
+ value: error.opaqueAt(L_BORDER_PRIMARY),
+ description: 'Subtle secondary border in the critical message and invalid input field.',
},
- text_link_DEFAULT: {
- value: link.at(L_TEXT_SECONDARY),
- description: 'Default interactive link color for unfollowed links.',
+ border_critical_active: {
+ value: error.at(L_BORDER_ACTIVE),
+ description: 'Active border in the focused input field with invalid state, and active state of the other components with invalid state.',
},
- text_link_hover_active: {
- value: link.at(L_TEXT_SECONDARY_HOVER),
- description: 'Hover and active states for the link text.',
+ border_critical_pattern: {
+ value: 'repeating-linear-gradient(315deg, {semanticTokens.colors.border.critical.active} 0, {semanticTokens.colors.border.critical.active} 1px, transparent 0, transparent 50%)',
+ description: 'Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states.',
},
- text_link_invert_DEFAULT: {
- value: link.at(L_INV_TEXT_SECONDARY),
- description: 'Inverted version of the link text. Use on dark background only.',
+ border_info_DEFAULT: {
+ value: info.opaqueAt(L_BORDER_PRIMARY),
+ description: 'Subtle secondary border in the informational message.',
},
- text_link_invert_hover: {
- value: link.at(L_INV_TEXT_SECONDARY_HOVER),
- description: 'Hover and active states of the inverted version of the link text. Use on dark background only.',
+ border_info_active: {
+ value: info.at(L_BORDER_ACTIVE),
+ description: 'Active border in focused input filed.',
},
- text_link_visited: {
- value: violet.at(L_TEXT_SECONDARY),
- description: 'Visited link state so users can tell visited destinations apart from default links.',
+ border_primary_DEFAULT: {
+ value: neutral.opaqueAt(L_BORDER_PRIMARY),
+ description: 'Default stroke for interactive controls and structured surfaces.',
},
- text_hint_DEFAULT: {
- value: neutral.opaqueAt(L_TEXT_SECONDARY),
- description: 'Supplementary helper text near controls (short guidance), distinct from placeholder text inside inputs.',
- },
- text_hint_hover_active: {
- value: neutral.opaqueAt(L_TEXT_SECONDARY_HOVER),
- description: 'Hover and active states of the hint link text.',
- },
- text_hint_invert_DEFAULT: {
- value: neutral.at(L_INV_TEXT_SECONDARY),
- description: 'Inverted version of the hint link text.',
- },
- text_hint_invert_hover_active: {
- value: neutral.at(L_INV_TEXT_SECONDARY_HOVER),
- description: 'Hover and active states of the inverted version of the hint link text.',
- },
- text_large_secondary: {
- value: '{semanticTokens.colors.text.secondary}',
- description: 'Secondary text. Use with font-size ≥20px.',
- },
- text_large_info_DEFAULT: {
- value: info.at(L_TEXT_SECONDARY),
- description: 'Link text with font-size ≥20px.',
- },
- text_large_info_hover_active: {
- value: info.at(L_TEXT_SECONDARY_HOVER),
- description: 'Hover and active states of the link text with font-size ≥20px.',
- },
- text_large_success_DEFAULT: {
- value: '{semanticTokens.colors.text.success}',
- description: 'Text with font-size ≥20px associated with success states and data.',
- },
- text_large_success_hover_active: {
- value: '{semanticTokens.colors.text.success.hover.active}',
- description: 'Hover and active states of the text with font-size ≥20px associated with success states and data.',
- },
- text_large_critical_DEFAULT: {
- value: '{semanticTokens.colors.text.critical}',
- description: 'Text with font-size ≥20px associated with critical states and data.',
- },
- text_large_critical_hover_active: {
- value: '{semanticTokens.colors.text.critical.hover.active}',
- description: 'Hover and active states of the text with font-size ≥20px associated with critical states and data.',
- },
- text_advertising: {
- value: advertising.at(L_TEXT_PRIMARY),
- description: 'Promotional or sponsored emphasis (ads, marketing callouts)—use sparingly so it stays noticeable.',
- },
- border_primary_DEFAULT: {
- value: neutral.opaqueAt(L_BORDER_PRIMARY),
- description: 'Default stroke for interactive controls and structured surfaces.',
- },
- border_primary_invert: {
- value: neutral.opaqueInvAt(L_INV_BORDER_PRIMARY),
- description: 'Inverted version of the neutral primary border. Use it for borders on the dark or color background.',
+ border_primary_invert: {
+ value: neutral.opaqueInvAt(L_INV_BORDER_PRIMARY),
+ description: 'Inverted version of the neutral primary border. Use it for borders on the dark or color background.',
},
border_secondary_DEFAULT: {
value: neutral.opaqueAt(L_BORDER_SECONDARY),
@@ -523,14 +479,6 @@ export const theme: Theme = {
value: neutral.opaqueInvAt(L_INV_BORDER_SECONDARY),
description: 'Inverted version of the neutral secondary border. Use it for borders on the dark or color background.',
},
- border_info_DEFAULT: {
- value: info.opaqueAt(L_BORDER_PRIMARY),
- description: 'Subtle secondary border in the informational message.',
- },
- border_info_active: {
- value: info.at(L_BORDER_ACTIVE),
- description: 'Active border in focused input filed.',
- },
border_success_DEFAULT: {
value: success.opaqueAt(L_BORDER_PRIMARY),
description: 'Subtle secondary border in the successful message and input field.',
@@ -539,18 +487,6 @@ export const theme: Theme = {
value: success.at(L_BORDER_ACTIVE),
description: 'Active border in the focused input field with valid state.',
},
- border_critical_DEFAULT: {
- value: error.opaqueAt(L_BORDER_PRIMARY),
- description: 'Subtle secondary border in the critical message and invalid input field.',
- },
- border_critical_active: {
- value: error.at(L_BORDER_ACTIVE),
- description: 'Active border in the focused input field with invalid state, and active state of the other components with invalid state.',
- },
- border_critical_pattern: {
- value: 'repeating-linear-gradient(315deg, {semanticTokens.colors.border.critical.active} 0, {semanticTokens.colors.border.critical.active} 1px, transparent 0, transparent 50%)',
- description: 'Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states.',
- },
border_warning_DEFAULT: {
value: warning.opaqueAt(L_BORDER_PRIMARY),
description: 'Subtle secondary border in the warning message.',
@@ -559,189 +495,597 @@ export const theme: Theme = {
value: warning.at(L_BORDER_ACTIVE),
description: 'Active border in components with warning intention.',
},
- border_tooltip_invert: {
- value: neutral.opaqueInvAt(L_INV_BORDER_SECONDARY),
- description: 'Border of the Tooltip with dark theme.',
+ brand_facebook: {
+ value: '#1877f2',
+ description: 'Official Facebook brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.',
},
- border_table_accent: {
- value: neutral.opaqueAt(L_BORDER_PRIMARY),
- description: 'Accent borders in the Table: for the accordion in the table and for the header of the secondary table.',
+ brand_google_blue: { value: '#1a0dab', description: 'Google brand color for the link.' },
+ brand_google_green: {
+ value: '#016723',
+ description: 'Google green brand color for the link.',
},
- border_date_picker_range_comparison: {
- value: highlight.at(L_BORDER_ACTIVE),
- description: 'Border color of the second period for the comparison mode in the DatePicker.',
+ brand_google_my_business: {
+ value: '#1a73e8',
+ description: 'Official Google My Business brand fill for logos and icons in approved placements; follow Google brand guidelines for size and clear space.',
},
- control_switch_bg: {
- value: neutral.at(L_BG_MEDIUM),
- description: 'Subtle background of the Switch control.',
+ brand_gradient: {
+ value: 'linear-gradient(180deg, #DCEEEB 0%, #EEE9FF 100%)',
+ description: 'Brand light gradient for branded surfaces.',
},
- control_primary_info_DEFAULT: {
- value: neutral.at(L_BG_BUTTON_STRONG),
- description: 'Background of the regular primary control.',
+ brand_instagram: {
+ value: '#e4405f',
+ description: 'Official Instagram brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.',
},
- control_primary_info_hover: {
- value: neutral.at(L_BG_BUTTON_STRONG_HOVER),
- description: 'Hover state of the regular primary control.',
+ brand_linkedIn: {
+ value: '#0a66c2',
+ description: 'Official LinkedIn brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.',
},
- control_primary_info_active: {
- value: neutral.at(L_BG_BUTTON_STRONG_ACTIVE),
- description: 'Active (selected) state of the regular primary control.',
+ brand_pinterest: {
+ value: '#bd081c',
+ description: 'Official Pinterest brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.',
},
- control_primary_success_DEFAULT: {
- value: green.at(L_BG_BUTTON),
- description: 'Background of the primary control with successful theme.',
+ brand_primary: {
+ value: violet.at(0.74),
+ description: 'Primary brand accent for logos and branded surfaces.',
},
- control_primary_success_hover: {
- value: green.at(L_BG_BUTTON_HOVER),
- description: 'Hover state of the primary control with successful theme.',
+ brand_secondary: {
+ value: gray.at(0.22),
+ description: 'Secondary brand accent for paired brand treatments (secondary marks, duo-tone lockups).',
},
- control_primary_success_active: {
- value: green.at(L_BG_BUTTON_ACTIVE),
- description: 'Active (selected) state of the primary control with successful theme.',
+ brand_twitter: {
+ value: '#1d9bf0',
+ description: 'Official Twitter brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.',
},
- control_primary_critical_DEFAULT: {
- value: error.at(L_BG_BUTTON),
- description: 'Background of the primary control with danger theme.',
+ brand_youtube: {
+ value: '#ff0000',
+ description: 'Official YouTube brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.',
},
- control_primary_critical_hover: {
- value: error.at(L_BG_BUTTON_HOVER),
- description: 'Hover state of the primary control with danger theme.',
+ chart_data_critical: {
+ value: colors.red['400'].value,
+ description: 'Critical data color for charts.',
},
- control_primary_critical_active: {
- value: error.at(L_BG_BUTTON_ACTIVE),
- description: 'Active (selected) state of the primary control with danger theme.',
+ chart_data_success: {
+ value: colors.green['300'].value,
+ description: 'Success data color for charts.',
},
- control_primary_brand_DEFAULT: {
- value: brand.at(L_BG_BUTTON),
- description: 'Background of the primary brand colored control.',
+ chart_data_warning: {
+ value: colors.orange['300'].value,
+ description: 'Warning data color for charts.',
},
- control_primary_brand_hover: {
- value: brand.at(L_BG_BUTTON_HOVER),
- description: 'Hover state of the primary brand colored control.',
+ chart_grid_bar_chart_base_bg: {
+ value: neutral.at(L_BG_LIGHT),
+ description: 'Default background color of a bar in the BarChart.',
},
- control_primary_brand_active: {
- value: brand.at(L_BG_BUTTON_ACTIVE),
- description: 'Active state of the primary brand colored control.',
+ chart_grid_bar_chart_hover: {
+ value: neutral.opaqueAt(L_BG_PRIMARY_HOVER),
+ description: 'Background color for the hover state of a bar on the chart grid.',
},
- control_primary_advertising_DEFAULT: {
- value: gray.at(L_INV_BG_PRIMARY),
- description: 'Background of the advertising primary control.',
+ chart_grid_border: {
+ value: '{baseTokens.colors.gray.white}',
+ description: 'Border for distinguishing data sets and chart dots on the chart grid.',
},
- control_primary_advertising_hover: {
- value: gray.at(L_INV_BG_PRIMARY_HOVER),
- description: 'Hover state of the advertising primary control.',
+ chart_grid_line: {
+ value: neutral.at(L_BORDER_SECONDARY),
+ description: 'Grid and axis guide lines for charts.',
},
- control_primary_advertising_active: {
- value: gray.at(L_INV_BG_PRIMARY_ACTIVE),
- description: 'Active (selected) state of the advertising primary control.',
+ chart_grid_period_bg: {
+ value: neutral.at(L_BG_LIGHT),
+ description: 'Use for highlighting a period on the chart grid.',
},
- control_primary_invert_DEFAULT: {
- value: neutral.at(L_INV_BG_BUTTON),
- description: 'Inverted background of the primary control.',
+ chart_grid_period_pattern: {
+ value: neutral.at(L_BORDER_SECONDARY),
+ description: 'Stripe color for diagonal pattern background.',
},
- control_primary_invert_hover: {
- value: neutral.at(L_INV_BG_BUTTON_HOVER),
- description: 'Hover state of the inverted primary control.',
+ chart_grid_text_label: {
+ value: neutral.opaqueAt(L_TEXT_SECONDARY),
+ description: 'Text label on the chart grid.',
},
- control_primary_invert_active: {
- value: neutral.at(L_INV_BG_BUTTON_ACTIVE),
- description: 'Active (selected) state of the inverted primary control.',
+ chart_grid_x_axis: {
+ value: neutral.at(L_BORDER_PRIMARY),
+ description: 'X-axis line on the chart grid.',
},
- control_secondary_neutral_DEFAULT: {
- value: neutral.opaqueAt(L_BG_SECONDARY),
- description: 'Background of the regular secondary control.',
+ chart_grid_y_accent_hover_line: {
+ value: neutral.at(L_BORDER_PRIMARY),
+ description: 'Accent line for the hover state on the chart grid.',
},
- control_secondary_neutral_hover: {
- value: neutral.opaqueAt(L_BG_SECONDARY_HOVER),
- description: 'Hover state of the regular secondary control.',
+ chart_palette_order_1: {
+ value: colors.blue['400'].value,
+ description: '1 color in the default list of colors for charts.',
},
- control_secondary_neutral_active: {
- value: neutral.opaqueAt(L_BG_SECONDARY_ACTIVE),
- description: 'Active (selected) state of the regular secondary control.',
+ chart_palette_order_10: {
+ value: colors.green['300'].value,
+ description: '10 color in the default list of colors for charts.',
},
- control_secondary_info_DEFAULT: {
- value: info.opaqueAt(L_BG_SECONDARY),
- description: 'Background of the accent secondary control.',
+ chart_palette_order_11: {
+ value: colors.yellow['300'].value,
+ description: '11 color in the default list of colors for charts.',
},
- control_secondary_info_hover: {
- value: info.opaqueAt(L_BG_SECONDARY_HOVER),
- description: 'Hover state of the accent secondary control.',
+ chart_palette_order_12: {
+ value: colors.pink['200'].value,
+ description: '12 color in the default list of colors for charts.',
},
- control_secondary_info_active: {
- value: info.opaqueAt(L_BG_SECONDARY_ACTIVE),
- description: 'Active (selected) state of the accent secondary control.',
+ chart_palette_order_13: {
+ value: colors.salad['400'].value,
+ description: '13 color in the default list of colors for charts.',
},
- control_secondary_invert_DEFAULT: {
- value: neutral.opaqueInvAt(L_INV_BG_SECONDARY),
- description: 'Background of the inverted version of the secondary control.',
+ chart_palette_order_14: {
+ value: colors.violet['200'].value,
+ description: '14 color in the default list of colors for charts.',
},
- control_secondary_invert_hover: {
- value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_HOVER),
- description: 'Hover state of the inverted version of the secondary control.',
+ chart_palette_order_15: {
+ value: colors.red['400'].value,
+ description: '15 color in the default list of colors for charts.',
},
- control_secondary_invert_active: {
- value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_ACTIVE),
- description: 'Active (selected) state of the inverted version of the secondary control.',
+ chart_palette_order_16: {
+ value: colors.green['400'].value,
+ description: '16 color in the default list of colors for charts.',
},
- control_tertiary_neutral_DEFAULT: {
- value: 'transparent',
- description: 'Background of the regular tertiary control.',
+ chart_palette_order_17: {
+ value: colors.blue['200'].value,
+ description: '17 color in the default list of colors for charts.',
},
- control_tertiary_neutral_hover: {
- value: neutral.opaqueAt(L_BG_SECONDARY_HOVER),
- description: 'Hover state of the regular tertiary control.',
+ chart_palette_order_18: {
+ value: colors.salad['300'].value,
+ description: '18 color in the default list of colors for charts.',
},
- control_tertiary_neutral_active: {
+ chart_palette_order_19: {
+ value: colors.yellow['400'].value,
+ description: '19 color in the default list of colors for charts.',
+ },
+ chart_palette_order_2: {
+ value: colors.green['200'].value,
+ description: '2 color in the default list of colors for charts.',
+ },
+ chart_palette_order_20: {
+ value: colors.red['200'].value,
+ description: '20 color in the default list of colors for charts.',
+ },
+ chart_palette_order_21: {
+ value: colors.yellow['500'].value,
+ description: '21 color in the default list of colors for charts.',
+ },
+ chart_palette_order_22: {
+ value: colors.violet['400'].value,
+ description: '22 color in the default list of colors for charts.',
+ },
+ chart_palette_order_23: {
+ value: colors.pink['400'].value,
+ description: '23 color in the default list of colors for charts.',
+ },
+ chart_palette_order_24: {
+ value: colors.salad['500'].value,
+ description: '24 color in the default list of colors for charts.',
+ },
+ chart_palette_order_3: {
+ value: colors.violet['300'].value,
+ description: '3 color in the default list of colors for charts.',
+ },
+ chart_palette_order_4: {
+ value: colors.yellow['200'].value,
+ description: '4 color in the default list of colors for charts.',
+ },
+ chart_palette_order_5: {
+ value: colors.red['300'].value,
+ description: '5 color in the default list of colors for charts.',
+ },
+ chart_palette_order_6: {
+ value: colors.blue['200'].value,
+ description: '6 color in the default list of colors for charts.',
+ },
+ chart_palette_order_7: {
+ value: colors.pink['300'].value,
+ description: '7 color in the default list of colors for charts.',
+ },
+ chart_palette_order_8: {
+ value: colors.salad['200'].value,
+ description: '8 color in the default list of colors for charts.',
+ },
+ chart_palette_order_9: {
+ value: colors.blue['500'].value,
+ description: '9 color in the default list of colors for charts.',
+ },
+ chart_palette_order_null: {
+ value: colors.gray['100'].value,
+ description: 'Use it to show null value on the chart.',
+ },
+ chart_palette_order_other_data: {
+ value: colors.gray['200'].value,
+ description: 'Use it to indicate voids, missing or some other data on the chart.',
+ },
+ chart_palette_order_total_amount: {
+ value: colors.gray['400'].value,
+ description: 'Use it to show total value on the chart.',
+ },
+ chart_x_axis_accent_data_start_tracking: {
+ value: success.opaqueAt(L_BG_LIGHT),
+ description: 'Background color for the "Start tracking" date on the X-axis of the chart grid.',
+ },
+ chart_x_axis_accent_period_active: {
+ value: neutral.opaqueAt(L_BG_LIGHT),
+ description: 'Background color for the clickable date on the X-axis of the chart grid.',
+ },
+ control_checkbox_bg_normal: {
+ value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}',
+ description: 'Background color of the Checkbox.',
+ },
+ control_checkbox_bg_selected: {
+ value: '{semanticTokens.colors.control_primary_info_DEFAULT}',
+ description: 'Background color of the checked Checkbox.',
+ },
+ control_checkbox_border: {
+ value: '{semanticTokens.colors.border_primary_DEFAULT}',
+ description: 'Border color of the Checkbox.',
+ },
+ control_checkbox_button_bg_hover: {
+ value: '{semanticTokens.colors.control_secondary_info_DEFAULT}',
+ description: 'Hover state of the Checkbox button background.',
+ },
+ control_checkbox_button_bg_normal: {
+ value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}',
+ description: 'Normal state of the Checkbox button background.',
+ },
+ control_checkbox_button_bg_selected_DEFAULT: {
+ value: '{semanticTokens.colors.control_secondary_info_active}',
+ description: 'Selected state of the Checkbox button background.',
+ },
+ control_checkbox_button_bg_selected_hover: {
+ value: '{semanticTokens.colors.control_secondary_info_active}',
+ description: 'Hover for a selected state of the Checkbox button background.',
+ },
+ control_checkbox_button_border_DEFAULT: {
+ value: '{semanticTokens.colors.border_primary_DEFAULT}',
+ description: 'Border color of the Checkbox button in its normal state.',
+ },
+ control_checkbox_button_border_selected: {
+ value: '{semanticTokens.colors.border_info_active}',
+ description: 'Border color of the Checkbox button in its active state.',
+ },
+ control_radio_bg_normal: {
+ value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}',
+ description: 'Background color of the Radio.',
+ },
+ control_radio_bg_selected: {
+ value: '{semanticTokens.colors.control_primary_info}',
+ description: 'Selected state of the Radio background.',
+ },
+ control_radio_border: {
+ value: '{semanticTokens.colors.border_primary_DEFAULT}',
+ description: 'Border color of the Radio.',
+ },
+ control_primary_advertising_DEFAULT: {
+ value: advertising.at(L_BG_BUTTON),
+ description: 'Background of the advertising primary control.',
+ },
+ control_primary_advertising_active: {
+ value: advertising.at(L_BG_BUTTON_ACTIVE),
+ description: 'Active (selected) state of the advertising primary control.',
+ },
+ control_primary_advertising_hover: {
+ value: advertising.at(L_BG_BUTTON_HOVER),
+ description: 'Hover state of the advertising primary control.',
+ },
+ control_primary_brand_DEFAULT: {
+ value: brand.at(L_BG_BUTTON),
+ description: 'Background of the primary brand colored control.',
+ },
+ control_primary_brand_active: {
+ value: brand.at(L_BG_BUTTON_ACTIVE),
+ description: 'Active state of the primary brand colored control.',
+ },
+ control_primary_brand_hover: {
+ value: brand.at(L_BG_BUTTON_HOVER),
+ description: 'Hover state of the primary brand colored control.',
+ },
+ control_primary_critical_DEFAULT: {
+ value: error.at(L_BG_BUTTON),
+ description: 'Background of the primary control with danger theme.',
+ },
+ control_primary_critical_active: {
+ value: error.at(L_BG_BUTTON_ACTIVE),
+ description: 'Active (selected) state of the primary control with danger theme.',
+ },
+ control_primary_critical_hover: {
+ value: error.at(L_BG_BUTTON_HOVER),
+ description: 'Hover state of the primary control with danger theme.',
+ },
+ control_primary_info_DEFAULT: {
+ value: neutral.at(L_BG_BUTTON_STRONG),
+ description: 'Background of the regular primary control.',
+ },
+ control_primary_info_active: {
+ value: neutral.at(L_BG_BUTTON_STRONG_ACTIVE),
+ description: 'Active (selected) state of the regular primary control.',
+ },
+ control_primary_info_hover: {
+ value: neutral.at(L_BG_BUTTON_STRONG_HOVER),
+ description: 'Hover state of the regular primary control.',
+ },
+ control_primary_invert_DEFAULT: {
+ value: neutral.at(L_INV_BG_BUTTON),
+ description: 'Inverted background of the primary control.',
+ },
+ control_primary_invert_active: {
+ value: neutral.at(L_INV_BG_BUTTON_ACTIVE),
+ description: 'Active (selected) state of the inverted primary control.',
+ },
+ control_primary_invert_hover: {
+ value: neutral.at(L_INV_BG_BUTTON_HOVER),
+ description: 'Hover state of the inverted primary control.',
+ },
+ control_primary_success_DEFAULT: {
+ value: green.at(L_BG_BUTTON),
+ description: 'Background of the primary control with successful theme.',
+ },
+ control_primary_success_active: {
+ value: green.at(L_BG_BUTTON_ACTIVE),
+ description: 'Active (selected) state of the primary control with successful theme.',
+ },
+ control_primary_success_hover: {
+ value: green.at(L_BG_BUTTON_HOVER),
+ description: 'Hover state of the primary control with successful theme.',
+ },
+ control_secondary_info_DEFAULT: {
+ value: info.opaqueAt(L_BG_SECONDARY),
+ description: 'Background of the accent secondary control.',
+ },
+ control_secondary_info_active: {
+ value: info.opaqueAt(L_BG_SECONDARY_ACTIVE),
+ description: 'Active (selected) state of the accent secondary control.',
+ },
+ control_secondary_info_hover: {
+ value: info.opaqueAt(L_BG_SECONDARY_HOVER),
+ description: 'Hover state of the accent secondary control.',
+ },
+ control_secondary_invert_DEFAULT: {
+ value: neutral.opaqueInvAt(L_INV_BG_SECONDARY),
+ description: 'Background of the inverted version of the secondary control.',
+ },
+ control_secondary_invert_active: {
+ value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_ACTIVE),
+ description: 'Active (selected) state of the inverted version of the secondary control.',
+ },
+ control_secondary_invert_hover: {
+ value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_HOVER),
+ description: 'Hover state of the inverted version of the secondary control.',
+ },
+ control_secondary_neutral_DEFAULT: {
+ value: neutral.opaqueAt(L_BG_SECONDARY),
+ description: 'Background of the regular secondary control.',
+ },
+ control_secondary_neutral_active: {
value: neutral.opaqueAt(L_BG_SECONDARY_ACTIVE),
- description: 'Active (selected) state of the regular tertiary control.',
+ description: 'Active (selected) state of the regular secondary control.',
+ },
+ control_secondary_neutral_hover: {
+ value: neutral.opaqueAt(L_BG_SECONDARY_HOVER),
+ description: 'Hover state of the regular secondary control.',
+ },
+ control_select_trigger_active: {
+ value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}',
+ description: 'Background of the Select trigger in its active state.',
+ },
+ control_select_trigger_hover: {
+ value: '{semanticTokens.colors.bg_primary_neutral_hover}',
+ description: 'Background of the Select trigger in its hover state.',
+ },
+ control_select_trigger_normal: {
+ value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}',
+ description: 'Background of the Select trigger in its normal state.',
+ },
+ control_slider_bar_bg_DEFAULT: {
+ value: '{semanticTokens.colors.progress_bar_bg_DEFAULT}',
+ description: 'Background of the Slider bar.',
+ },
+ control_slider_bar_bg_hover: {
+ value: '{semanticTokens.colors.progress_bar_bg_hover}',
+ description: 'Hover state of the Slider bar.',
+ },
+ control_slider_bar_value_bg: {
+ value: '{semanticTokens.colors.control_primary_info_DEFAULT}',
+ description: 'Filled part of the Slider bar.',
+ },
+ control_slider_knob_bg_DEFAULT: {
+ value: '{baseTokens.colors.gray.white}',
+ description: 'Knob fill color of the Slider.',
+ },
+ control_slider_knob_border_DEFAULT: {
+ value: '{semanticTokens.colors.control_primary_info_DEFAULT}',
+ description: 'Knob border color of the Slider in its normal state.',
+ },
+ control_slider_knob_border_hover: {
+ value: '{semanticTokens.colors.control_primary_info_hover}',
+ description: 'Knob border color of the Slider in its hover state.',
+ },
+ control_slider_rating_icon_DEFAULT: {
+ value: neutral.at(L_ICON_SECONDARY),
+ description: 'Icon color for the SliderRating component in its normal state.',
+ },
+ control_slider_rating_icon_hover_active: {
+ value: highlight.at(L_ICON_SECONDARY_HOVER),
+ description: 'Icon color for the SliderRating component in its hovered and active states.',
+ },
+ control_switch_bg_DEFAULT: {
+ value: colors.gray['300'].value,
+ description: 'Subtle background of the Switch control.',
+ },
+ control_switch_bg_info_active: {
+ value: '{semanticTokens.colors.control_primary_info_DEFAULT}',
+ description: 'Active background of the Switch control.',
+ },
+ control_switch_bg_success_active: {
+ value: '{semanticTokens.colors.control_primary_success_DEFAULT}',
+ description: 'Active background of the Switch control.',
+ },
+ control_switch_handle: {
+ value: '{baseTokens.colors.gray.white}',
+ description: 'Handle color of the Switch control.',
},
control_tertiary_info_DEFAULT: {
value: 'transparent',
description: 'Background of the accent and link-lookalike tertiary control.',
},
- control_tertiary_info_hover: {
- value: info.opaqueAt(L_BG_SECONDARY_HOVER),
- description: 'Hover state of the accent and link-lookalike tertiary control.',
- },
control_tertiary_info_active: {
value: info.opaqueAt(L_BG_SECONDARY_ACTIVE),
description: 'Active (selected) state of the accent and link-lookalike tertiary control.',
},
+ control_tertiary_info_hover: {
+ value: info.opaqueAt(L_BG_SECONDARY_HOVER),
+ description: 'Hover state of the accent and link-lookalike tertiary control.',
+ },
control_tertiary_invert_DEFAULT: {
value: 'transparent',
description: 'Background of the inverted version of the tertiary control.',
},
+ control_tertiary_invert_active: {
+ value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_ACTIVE),
+ description: 'Active (selected) state of the inverted version of the tertiary control.',
+ },
control_tertiary_invert_hover: {
value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_HOVER),
description: 'Hover state of the inverted version of the tertiary control.',
},
- control_tertiary_invert_active: {
- value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_ACTIVE),
- description: 'Active (selected) state of the inverted version of the tertiary control.',
+ control_tertiary_neutral_DEFAULT: {
+ value: 'transparent',
+ description: 'Background of the regular tertiary control.',
},
- icon_primary_neutral_DEFAULT: {
- value: neutral.opaqueAt(L_ICON_PRIMARY),
- description: 'Default icon weight on normal backgrounds—stronger emphasis than secondary icons.',
+ control_tertiary_neutral_active: {
+ value: neutral.opaqueAt(L_BG_SECONDARY_ACTIVE),
+ description: 'Active (selected) state of the regular tertiary control.',
},
- icon_primary_neutral_hover_active: {
- value: neutral.opaqueAt(L_ICON_PRIMARY_HOVER),
- 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.',
+ control_tertiary_neutral_hover: {
+ value: neutral.opaqueAt(L_BG_SECONDARY_HOVER),
+ description: 'Hover state of the regular tertiary control.',
},
- icon_primary_info_DEFAULT: {
- value: info.opaqueAt(L_ICON_PRIMARY),
- description: 'Primary link-lookalike icon.',
+ control_text_primary_DEFAULT: {
+ value: '{semanticTokens.colors.text_primary_DEFAULT}',
+ description: 'Primary text color for form controls.',
},
- icon_primary_info_hover_active: {
- value: info.opaqueAt(L_ICON_PRIMARY_HOVER),
- 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.',
+ control_text_primary_invert: {
+ value: '{semanticTokens.colors.text_primary_invert}',
+ description: 'Inverted primary text color for form controls.',
},
- icon_primary_success_DEFAULT: {
- value: success.opaqueAt(L_ICON_PRIMARY),
- description: 'Semantic success icon.',
+ control_text_secondary: {
+ value: '{semanticTokens.colors.text_secondary_DEFAULT}',
+ description: 'Secondary text color for form controls.',
},
- icon_primary_success_hover_active: {
- value: success.opaqueAt(L_ICON_PRIMARY_HOVER),
- 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.',
+ control_text_tertiary: {
+ value: '{semanticTokens.colors.text_secondary_DEFAULT}',
+ description: 'Tertiary text color for form controls.',
+ },
+ date_picker_border_range_comparison: {
+ value: highlight.at(L_BORDER_ACTIVE),
+ description: 'Border color of the second period for the comparison mode in the DatePicker.',
+ },
+ date_picker_cell_DEFAULT: {
+ value: neutral.at(L_BG_PRIMARY),
+ description: 'Default date-picker cell background.',
+ },
+ date_picker_cell_active_DEFAULT: {
+ value: focus.at(L_BG_BUTTON),
+ description: 'Active (selected) date-picker cell background.',
+ },
+ date_picker_cell_active_hover: {
+ value: focus.at(L_BG_BUTTON_HOVER),
+ description: 'Hover for the active (selected) date-picker cell background.',
+ },
+ date_picker_cell_comparison_active_DEFAULT: {
+ value: highlight.at(L_BG_BUTTON),
+ description: 'Active (selected) date-picker cell background for comparison periods.',
+ },
+ date_picker_cell_comparison_active_hover: {
+ value: highlight.at(L_BG_BUTTON_HOVER),
+ description: 'Hover for the active (selected) date-picker cell background for comparison periods.',
+ },
+ date_picker_cell_current_DEFAULT: {
+ value: neutral.opaqueAt(L_BORDER_ACTIVE),
+ description: 'Color for marking the cell with the current date, month or year in the date-picker.',
+ },
+ date_picker_cell_current_invert: {
+ value: neutral.opaqueInvAt(L_INV_BORDER_PRIMARY),
+ description: 'Color for marking the active cell with the current date, month or year in the date-picker.',
+ },
+ date_picker_cell_hover: {
+ value: neutral.at(L_BG_PRIMARY_HOVER),
+ description: 'Hover state of the default date-picker cell background.',
+ },
+ date_picker_cell_range_DEFAULT: {
+ value: focus.at(L_BG_SELECTED),
+ description: 'Background for the cell which is included in the date range in the date-picker.',
+ },
+ date_picker_cell_range_hover: {
+ value: focus.at(L_BG_SELECTED_HOVER),
+ description: 'Hover state of the background for the cell which is included in the date range in the date-picker.',
+ },
+ dot_bg: {
+ value: '{semanticTokens.colors.icon_primary_warning_DEFAULT}',
+ description: 'Background color of the Dot.',
+ },
+ dot_text: {
+ value: '{semanticTokens.colors.text_primary_invert}',
+ description: 'Text color of the Dot.',
+ },
+ dropdown_menu_item_DEFAULT: {
+ value: neutral.at(L_BG_PRIMARY),
+ description: 'Default background color for the list item in the dropdown-menu.',
+ },
+ dropdown_menu_item_hover: {
+ value: neutral.opaqueAt(L_BG_PRIMARY_HOVER),
+ description: 'Hover state of the default background color for the list item in the dropdown-menu.',
+ },
+ dropdown_menu_item_selected_DEFAULT: {
+ value: focus.opaqueAt(L_BG_SELECTED),
+ description: 'Active (selected) state of the default background color for the list item in the dropdown-menu.',
+ },
+ dropdown_menu_item_selected_border: {
+ value: '{semanticTokens.colors.control_primary_info_DEFAULT}',
+ description: 'Border color of the selected item in the DropdownMenu.',
+ },
+ dropdown_menu_item_selected_hover: {
+ value: focus.opaqueAt(L_BG_SELECTED_HOVER),
+ description: 'Hover state for the selected state of the default background color for the list item in the dropdown-menu.',
+ },
+ feature_popover_bg_accent: {
+ value: '{semanticTokens.colors.bg.primary.highlight}',
+ description: 'Background of the FeaturePopover with accent theme.',
+ },
+ feature_popover_bg_neutral: {
+ value: neutral.at(L_INV_BG_PRIMARY),
+ description: 'Background of the FeaturePopover with neutral theme.',
+ },
+ feature_popover_dot_accent: {
+ value: '{semanticTokens.colors.bg_primary_highlight}',
+ description: 'Fill color of the FeaturePopover.Spot with accent theme.',
+ },
+ feature_popover_dot_neutral: {
+ value: '{semanticTokens.colors.bg.primary.highlight}',
+ description: 'Fill color of the FeaturePopover.Spot with neutral theme.',
+ },
+ feature_popover_dot_outer_border_accent: {
+ value: '{semanticTokens.colors.bg.primary.highlight}',
+ description: 'Outer border color of the FeaturePopover.Spot with accent theme.',
+ },
+ feature_popover_dot_outer_border_neutral: {
+ value: '{semanticTokens.colors.feature_popover_dot_neutral}',
+ description: 'Outer border color of the FeaturePopover.Spot with neutral theme.',
+ },
+
+ feature_popover_text_DEFAULT: {
+ value: '{semanticTokens.colors.text_primary_DEFAULT}',
+ description: 'Text color of the FeaturePopover.',
+ },
+ feature_popover_text_invert: {
+ value: '{semanticTokens.colors.text_primary_invert}',
+ description: 'Inverted text color of the FeaturePopover.',
+ },
+ footer_bg: { value: '{semanticTokens.colors.page.bg}',
+ description: 'Background fill for the product page footer.',
+ },
+ header_bg: { value: '{semanticTokens.colors.page.bg}' },
+ header_border_primary: { value: '{semanticTokens.colors.border.primary}' },
+ header_border_secondary: { value: '{semanticTokens.colors.border.primary}' },
+ icon_non_interactive: {
+ value: neutral.opaqueAt(L_ICON_NON_INTERACTIVE),
+ description: 'Color for the default non-interactive icon.',
},
icon_primary_critical_DEFAULT: {
value: error.opaqueAt(L_ICON_PRIMARY),
@@ -751,13 +1095,13 @@ export const theme: Theme = {
value: error.opaqueAt(L_ICON_PRIMARY_HOVER),
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.',
},
- icon_primary_warning_DEFAULT: {
- value: warning.opaqueAt(L_ICON_PRIMARY + 0.15),
- description: 'Semantic warning icon.',
+ icon_primary_info_DEFAULT: {
+ value: info.opaqueAt(L_ICON_PRIMARY),
+ description: 'Primary link-lookalike icon.',
},
- icon_primary_warning_hover_active: {
- value: warning.opaqueAt(L_ICON_PRIMARY_HOVER),
- 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.',
+ icon_primary_info_hover_active: {
+ value: info.opaqueAt(L_ICON_PRIMARY_HOVER),
+ 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.',
},
icon_primary_invert_DEFAULT: {
value: neutral.opaqueInvAt(L_INV_ICON_PRIMARY),
@@ -767,13 +1111,37 @@ export const theme: Theme = {
value: neutral.opaqueInvAt(L_INV_ICON_PRIMARY_HOVER),
description: 'Hover and active (selected) states of the inverted version of the primary icon.',
},
- icon_secondary_neutral_DEFAULT: {
- value: neutral.opaqueAt(L_ICON_SECONDARY),
- description: 'De-emphasized icons for dense layouts (tables, tertiary actions).',
+ icon_primary_neutral_DEFAULT: {
+ value: neutral.opaqueAt(L_ICON_PRIMARY),
+ description: 'Default icon weight on normal backgrounds—stronger emphasis than secondary icons.',
+ },
+ icon_primary_neutral_hover_active: {
+ value: neutral.opaqueAt(L_ICON_PRIMARY_HOVER),
+ 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.',
+ },
+ icon_primary_success_DEFAULT: {
+ value: success.opaqueAt(L_ICON_PRIMARY),
+ description: 'Semantic success icon.',
+ },
+ icon_primary_success_hover_active: {
+ value: success.opaqueAt(L_ICON_PRIMARY_HOVER),
+ 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.',
+ },
+ icon_primary_warning_DEFAULT: {
+ value: warning.opaqueAt(L_ICON_PRIMARY + 0.15),
+ description: 'Semantic warning icon.',
+ },
+ icon_primary_warning_hover_active: {
+ value: warning.opaqueAt(L_ICON_PRIMARY_HOVER),
+ 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.',
+ },
+ icon_secondary_critical_DEFAULT: {
+ value: error.opaqueAt(L_ICON_SECONDARY),
+ description: 'Softer error icon for dense UI or inline hints where the surface should stay calm.',
},
- icon_secondary_neutral_hover_active: {
- value: neutral.opaqueAt(L_ICON_SECONDARY_HOVER),
- 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.',
+ icon_secondary_critical_hover_active: {
+ value: error.opaqueAt(L_ICON_SECONDARY_HOVER),
+ 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.',
},
icon_secondary_info_DEFAULT: {
value: info.opaqueAt(L_ICON_SECONDARY),
@@ -783,6 +1151,14 @@ export const theme: Theme = {
value: info.at(L_ICON_SECONDARY_HOVER),
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.',
},
+ icon_secondary_neutral_DEFAULT: {
+ value: neutral.opaqueAt(L_ICON_SECONDARY),
+ description: 'De-emphasized icons for dense layouts (tables, tertiary actions).',
+ },
+ icon_secondary_neutral_hover_active: {
+ value: neutral.opaqueAt(L_ICON_SECONDARY_HOVER),
+ 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.',
+ },
icon_secondary_success_DEFAULT: {
value: success.opaqueAt(L_ICON_SECONDARY),
description: 'Softer success icon for dense UI or inline hints where the surface should stay calm.',
@@ -791,14 +1167,6 @@ export const theme: Theme = {
value: success.opaqueAt(L_ICON_SECONDARY_HOVER),
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.',
},
- icon_secondary_critical_DEFAULT: {
- value: error.opaqueAt(L_ICON_SECONDARY),
- description: 'Softer error icon for dense UI or inline hints where the surface should stay calm.',
- },
- icon_secondary_critical_hover_active: {
- value: error.opaqueAt(L_ICON_SECONDARY_HOVER),
- 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.',
- },
icon_secondary_warning_DEFAULT: {
value: warning.opaqueAt(L_ICON_SECONDARY),
description: 'Softer warning icon for dense UI or inline hints where the surface should stay calm.',
@@ -807,119 +1175,117 @@ export const theme: Theme = {
value: warning.opaqueAt(L_ICON_SECONDARY_HOVER),
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.',
},
- icon_non_interactive: {
- value: neutral.opaqueAt(L_ICON_NON_INTERACTIVE),
- description: 'Color for the default non-interactive icon.',
+ illustration_blue: {
+ value: blue.at(0.84),
+ description: '⚠️ Use only for illustrations.',
},
- illustration_red: {
- value: red.at(0.737),
+ illustration_border: {
+ value: colors.gray['500'].value,
+ description: 'Border color for illustrations.',
+ },
+ illustration_gray: {
+ value: colors.gray['100'].value,
+ description: 'Gray fill color for illustrations.',
+ },
+ illustration_green: {
+ value: green.at(0.812),
description: '⚠️ Use only for illustrations.',
},
illustration_orange: {
value: orange.at(0.823),
description: '⚠️ Use only for illustrations.',
},
- illustration_yellow: {
- value: yellow.at(0.924),
- description: '⚠️ Use only for illustrations.',
- },
- illustration_salad: {
- value: salad.at(0.922),
+ illustration_pink: {
+ value: pink.at(0.76),
description: '⚠️ Use only for illustrations.',
},
- illustration_green: {
- value: green.at(0.812),
+ illustration_red: {
+ value: red.at(0.737),
description: '⚠️ Use only for illustrations.',
},
- illustration_blue: {
- value: blue.at(0.84),
+ illustration_salad: {
+ value: salad.at(0.922),
description: '⚠️ Use only for illustrations.',
},
illustration_violet: {
value: violet.at(0.709),
description: '⚠️ Use only for illustrations.',
},
- illustration_pink: {
- value: pink.at(0.76),
+ illustration_yellow: {
+ value: yellow.at(0.924),
description: '⚠️ Use only for illustrations.',
},
- date_picker_cell_DEFAULT: {
- value: neutral.at(L_BG_PRIMARY),
- description: 'Default date-picker cell background.',
- },
- date_picker_cell_current_DEFAULT: {
- value: neutral.opaqueAt(L_BORDER_ACTIVE),
- description: 'Color for marking the cell with the current date, month or year in the date-picker.',
+ keyboard_focus_invalid_outline: {
+ value: error.opaqueAt(L_BORDER_FOCUS),
+ description: 'Color for keyboard focus outline styles for elements with invalid state.',
},
- date_picker_cell_current_invert: {
- value: neutral.opaqueInvAt(L_INV_BORDER_PRIMARY),
- description: 'Color for marking the active cell with the current date, month or year in the date-picker.',
+ keyboard_focus_invert_outline: {
+ value: 'oklch(1 0 0 / 0.7)',
+ description: 'Color for keyboard focus outline styles to use on the dark and color background.',
},
- date_picker_cell_hover: {
- value: neutral.at(L_BG_PRIMARY_HOVER),
- description: 'Hover state of the default date-picker cell background.',
+ keyboard_focus_outline: {
+ value: focus.opaqueAt(L_BORDER_FOCUS),
+ description: 'Color for default keyboard focus outline styles.',
},
- date_picker_cell_range_DEFAULT: {
- value: focus.at(L_BG_SELECTED),
- description: 'Background for the cell which is included in the date range in the date-picker.',
+ keyboard_focus_valid_outline: {
+ value: success.opaqueAt(L_BORDER_FOCUS),
+ description: 'Color for keyboard focus outline styles for elements with valid state.',
},
- date_picker_cell_range_hover: {
- value: focus.at(L_BG_SELECTED_HOVER),
- description: 'Hover state of the background for the cell which is included in the date range in the date-picker.',
+ neighbor_location_invert: {
+ value: 'oklch(0 0 0 / 0.5)',
+ description: 'Inverted border of the components that are combined with neighbor-location property.',
},
- date_picker_cell_active_DEFAULT: {
- value: focus.at(L_BG_BUTTON),
- description: 'Active (selected) date-picker cell background.',
+ neighbor_location_neutral: {
+ value: 'oklch(1 0 0 / 0.5)',
+ description: 'Neutral border of the components that are combined with neighbor-location property.',
},
- date_picker_cell_active_hover: {
- value: focus.at(L_BG_BUTTON_HOVER),
- description: 'Hover for the active (selected) date-picker cell background.',
+ notice_bubble_bg_critical: {
+ value: '{semanticTokens.colors.bg_primary_critical}',
+ description: 'Critical background of the NoticeBubble.',
},
- date_picker_cell_comparison_active_DEFAULT: {
- value: highlight.at(L_BG_BUTTON),
- description: 'Active (selected) date-picker cell background for comparison periods.',
+ notice_bubble_bg_info: {
+ value: '{semanticTokens.colors.bg_primary_invert_DEFAULT}',
+ description: 'Background of the NoticeBubble.',
},
- date_picker_cell_comparison_active_hover: {
- value: highlight.at(L_BG_BUTTON_HOVER),
- description: 'Hover for the active (selected) date-picker cell background for comparison periods.',
+ overlay_limitation_primary: {
+ value: `oklch(from ${neutral.at(0.97)} l c h / 0.7)`,
+ description: 'Use as a primary cover of the content under the messages about limitations.',
},
- dropdown_menu_item_DEFAULT: {
- value: neutral.at(L_BG_PRIMARY),
- description: 'Default background color for the list item in the dropdown-menu.',
+ overlay_limitation_secondary: {
+ value: 'oklch(1 0 0 / 0.85)',
+ description: 'Use as a secondary cover of the content under the messages about limitations.',
},
- dropdown_menu_item_hover: {
- value: neutral.opaqueAt(L_BG_PRIMARY_HOVER),
- description: 'Hover state of the default background color for the list item in the dropdown-menu.',
+ overlay_primary: {
+ value: neutral.opaqueAt(0.74),
+ description: 'Use for cover the content under the modal dialogs.',
},
- dropdown_menu_item_selected_DEFAULT: {
- value: focus.opaqueAt(L_BG_SELECTED),
- description: 'Active (selected) state of the default background color for the list item in the dropdown-menu.',
+ overlay_secondary: {
+ value: neutral.opaqueAt(0.8),
+ description: 'Use for the secondary modal dialogs that were opened upon the other modal dialogs.',
},
- dropdown_menu_item_selected_hover: {
- value: focus.opaqueAt(L_BG_SELECTED_HOVER),
- description: 'Hover state for the selected state of the default background color for the list item in the dropdown-menu.',
+ page_bg: { value: neutral.at(0.97),
+ description: 'Background fill for the whole product page.',
},
- feature_popover_bg_DEFAULT: {
- value: '{semanticTokens.colors.bg.primary.highlight}',
- description: 'Color of the outer border of the FeaturePopover.Spot.',
+ control_pills_bg_hover: {
+ value: '{semanticTokens.colors.bg_secondary_neutral_DEFAULT}',
+ description: 'Hover state of the Pills background.',
},
- feature_popover_bg_neutral: {
- value: neutral.at(L_INV_BG_PRIMARY),
- description: 'Color of the outer border of the FeaturePopover.Spot.',
+ control_pills_bg_normal: {
+ value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}',
+ description: 'Background of the Pills in its normal state.',
},
- feature_popover_dot_outer_border: {
- value: '{semanticTokens.colors.bg.primary.highlight}',
- description: 'Color of the outer border of the FeaturePopover.Spot.',
+ control_pills_bg_selected: {
+ value: '{semanticTokens.colors.bg_secondary_info_DEFAULT}',
+ description: 'Background of the selected Pill.',
},
- feature_popover_dot_neutral_DEFAULT: {
- value: '{semanticTokens.colors.bg.primary.highlight}',
- description: 'Color of the outer border of the FeaturePopover.Spot.',
+ control_pills_border_DEFAULT: {
+ value: '{semanticTokens.colors.border_primary_DEFAULT}',
+ description: 'Border color of the Pills in its normal state.',
},
- feature_popover_dot_neutral_outer_border: {
- value: '{semanticTokens.colors.feature.popover.dot.neutral}',
- description: 'Color of the outer border of the FeaturePopover.Spot.',
+ control_pills_border_selected: {
+ value: '{semanticTokens.colors.border_info_active}',
+ description: 'Border color of the selected Pill.',
},
-
progress_bar_bg_DEFAULT: {
value: neutral.at(L_BG_LIGHT),
description: 'Background color of the ProgressBar.',
@@ -936,19 +1302,85 @@ export const theme: Theme = {
value: neutral.at(L_INV_BG_MEDIUM),
description: 'Hover state for the inverted version of the background color of the ProgressBar.',
},
- progress_bar_value_gradient: {
- value: `linear-gradient(-45deg, oklch(from ${highlight.at(0.74)} calc(l - 0.05) c h) 25%, ${highlight.at(0.74)} 0%, ${highlight.at(0.74)} 50%, oklch(from ${highlight.at(0.74)} calc(l - 0.05) c h) 0%, oklch(from ${highlight.at(0.74)} calc(l - 0.05) c h) 75%, ${highlight.at(0.74)} 0%)`,
- description: 'Value with gradient for the ProgressBar.',
+ progress_bar_pattern_gradient: {
+ value: 'linear-gradient(-45deg, oklch(0 0 0 / 0.1) 25%, {semanticTokens.colors.progress.bar.bg} 0%, {semanticTokens.colors.progress.bar.bg} 50%, oklch(0 0 0 / 0.1) 0%, oklch(0 0 0 / 0.1) 75%, {semanticTokens.colors.progress.bar.bg} 0%)',
+ description: 'Null value gradient for the ProgressBar.',
},
+
progress_bar_value_bg: {
value: 'oklch(1 0 0)',
description: 'Base value background for the ProgressBar. It is used to create gradients for the values.',
},
- progress_bar_pattern_gradient: {
- value: 'linear-gradient(-45deg, oklch(0 0 0 / 0.1) 25%, {semanticTokens.colors.progress.bar.bg} 0%, {semanticTokens.colors.progress.bar.bg} 50%, oklch(0 0 0 / 0.1) 0%, oklch(0 0 0 / 0.1) 75%, {semanticTokens.colors.progress.bar.bg} 0%)',
- description: 'Null value gradient for the ProgressBar.',
+ progress_bar_value_gradient: {
+ value: `linear-gradient(-45deg, oklch(from ${highlight.at(0.74)} calc(l - 0.05) c h) 25%, ${highlight.at(0.74)} 0%, ${highlight.at(0.74)} 50%, oklch(from ${highlight.at(0.74)} calc(l - 0.05) c h) 0%, oklch(from ${highlight.at(0.74)} calc(l - 0.05) c h) 75%, ${highlight.at(0.74)} 0%)`,
+ description: 'Value with gradient for the ProgressBar.',
+ },
+ scroll_area_dropdown_menu_bottom: {
+ value: 'linear-gradient(to top, {baseTokens.colors.white} 34.38%, transparent 100%)',
+ description: 'Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu.',
+ },
+ scroll_area_dropdown_menu_left: {
+ value: 'linear-gradient(to right, {baseTokens.colors.white} 34.38%, transparent 100%)',
+ description: 'Left-to-right fade shadow for the ScrollArea inside the DropdownMenu.',
+ },
+ scroll_area_dropdown_menu_right: {
+ value: 'linear-gradient(to left, {baseTokens.colors.white} 34.38%, transparent 100%)',
+ description: 'Right-to-left fade shadow for the ScrollArea inside the DropdownMenu.',
+ },
+ scroll_area_dropdown_menu_top: {
+ value: 'linear-gradient(to bottom, {baseTokens.colors.white} 34.38%, transparent 100%)',
+ description: 'Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu.',
+ },
+ scroll_area_shadow_bottom: {
+ value: `linear-gradient(to top, oklch(from ${colors.gray['800'].value} l c h / 0.08) 20.55%, transparent 100%)`,
+ description: 'Bottom-to-top fade shadow for the ScrollArea.',
+ },
+ scroll_area_shadow_left: {
+ value: `linear-gradient(to right, oklch(from ${colors.gray['800'].value} l c h / 0.08) 20.55%, transparent 100%)`,
+ description: 'Left-to-right fade shadow for the ScrollArea.',
+ },
+ scroll_area_shadow_right: {
+ value: `linear-gradient(to left, oklch(from ${colors.gray['800'].value} l c h / 0.08) 20.55%, transparent 100%)`,
+ description: 'Right-to-left fade shadow for the ScrollArea.',
+ },
+ scroll_area_shadow_top: {
+ value: `linear-gradient(to bottom, oklch(from ${colors.gray['800'].value} l c h / 0.08) 20.55%, transparent 100%)`,
+ description: 'Top-to-bottom fade shadow for the ScrollArea.',
+ },
+ scroll_bar_background: {
+ value: neutral.opaqueAt(L_BORDER_PRIMARY),
+ description: 'Background color for ScrollBar.',
+ },
+ sidebar_nav_bg: { value: '{semanticTokens.colors.page.bg}',
+ description: 'Background fill for the product page sidebar.',
+ },
+ sidebar_nav_border: { value: '{semanticTokens.colors.border.primary}',
+ description: 'Color for the border of the page sidebar.',
+ },
+ sidebar_nav_control_active: {
+ value: neutral.opaqueAt(L_BG_SECONDARY_ACTIVE),
+ description: 'Sidebar navigation row active background.',
+ },
+ sidebar_nav_control_hover: {
+ value: neutral.opaqueAt(L_BG_SECONDARY_HOVER),
+ description: 'Sidebar navigation row hover background.',
+ },
+ sidebar_nav_control_icon_active: {
+ value: neutral.at(L_ICON_PRIMARY_HOVER),
+ description: 'Sidebar navigation icon color for the active item.',
+ },
+ sidebar_nav_control_icon_normal: {
+ value: neutral.at(L_ICON_PRIMARY),
+ description: 'Sidebar navigation icon color.',
+ },
+ sidebar_nav_control_text_active: {
+ value: neutral.at(L_TEXT_PRIMARY),
+ description: 'Sidebar navigation label color for the active item.',
+ },
+ sidebar_nav_control_text_normal: {
+ value: neutral.at(L_TEXT_SECONDARY),
+ description: 'Sidebar navigation label color.',
},
-
skeleton_bg_DEFAULT: {
value: neutral.at(L_BG_SKELETON),
description: 'Default color for the Skeleton.',
@@ -957,545 +1389,425 @@ export const theme: Theme = {
value: neutral.at(L_INV_BG_SKELETON),
description: 'Inverted version of the default color for the Skeleton.',
},
- table_th_primary_cell_DEFAULT: {
- value: neutral.at(L_BG_SECONDARY),
- description: 'Background of the header cell in the primary Table.',
+ spin_bg_DEFAULT: {
+ value: '{semanticTokens.colors.border_primary_DEFAULT}',
+ description: 'Track color of the Spin loader.',
},
- table_th_primary_cell_hover: {
- value: neutral.at(L_BG_SECONDARY_ACTIVE),
- description: 'Background of the hovered header cell in the primary Table.',
+ spin_bg_invert: {
+ value: '{semanticTokens.colors.border_primary_invert}',
+ description: 'Inverted track color of the Spin loader.',
},
- table_th_primary_cell_active: {
- value: neutral.at(L_BG_SECONDARY_ACTIVE),
- description: 'Background of the active header cell in the primary Table.',
+ control_tab_line_border_DEFAULT: {
+ value: '{semanticTokens.colors.border_primary_DEFAULT}',
+ description: 'Border color of the TabLine in its normal state.',
},
- table_th_secondary_cell: {
- value: neutral.at(L_BG_PRIMARY),
- description: 'Background of the header cell in the secondary Table.',
+ control_tab_line_border_active: {
+ value: '{semanticTokens.colors.border_info_active}',
+ description: 'Border color of the TabLine in its active state.',
},
- table_th_gradient: {
- value: `linear-gradient(to right, transparent 0%, ${colors.gray['100'].value} 100%)`,
- description: 'Background gradient for sorting icon that absolute positioned in the table head.',
+ control_tab_line_border_hover: {
+ value: '{semanticTokens.colors.border_primary_DEFAULT}',
+ description: 'Border color of the TabLine in its hover state.',
+ },
+ table_border_accent: {
+ value: neutral.opaqueAt(L_BORDER_PRIMARY),
+ description: 'Accent borders in the Table: for the accordion in the table and for the header of the secondary table.',
},
table_td_cell_DEFAULT: {
value: neutral.at(L_BG_PRIMARY),
description: 'Background of the default cell in the Table.',
},
- table_td_cell_hover: {
- value: neutral.at(L_BG_PRIMARY_HOVER),
- description: 'Background of the default hovered cell in the Table.',
+ table_td_cell_accordion: {
+ value: neutral.at(L_BG_PRIMARY),
+ description: 'Background of the cell used for Accordion or actions row, in the Table.',
},
table_td_cell_active: {
value: neutral.at(L_BG_PRIMARY_ACTIVE),
description: 'Background of the default active cell in the Table.',
},
- table_td_cell_unread: {
- value: neutral.at(L_BG_SECONDARY),
- description: 'Background of the unread cell in the Table.',
- },
- table_td_cell_accordion: {
- value: neutral.at(L_BG_PRIMARY),
- description: 'Background of the cell used for Accordion or actions row, in the Table.',
+ table_td_cell_critical_DEFAULT: {
+ value: error.at(L_BG_SECONDARY),
+ description: 'Background of the cell with critical information in the Table.',
},
- table_td_cell_selected_DEFAULT: {
- value: info.at(L_BG_SECONDARY),
- description: 'Background of the selected cell in the Table.',
+ table_td_cell_critical_active: {
+ value: error.at(L_BG_SECONDARY_ACTIVE),
+ description: 'Background of the active cell with critical information in the Table.',
},
- table_td_cell_selected_hover: {
- value: info.at(L_BG_SECONDARY_HOVER),
- description: 'Background of the hovered selected cell in the Table.',
+ table_td_cell_critical_hover: {
+ value: error.at(L_BG_SECONDARY_HOVER),
+ description: 'Background of the hovered cell with critical information in the Table.',
},
- table_td_cell_selected_active: {
- value: info.at(L_BG_SECONDARY_ACTIVE),
- description: 'Background of the active selected cell in the Table.',
+ table_td_cell_hover: {
+ value: neutral.at(L_BG_PRIMARY_HOVER),
+ description: 'Background of the default hovered cell in the Table.',
},
table_td_cell_new_DEFAULT: {
value: success.at(L_BG_SECONDARY),
description: 'Background of the cell with new information in the Table.',
},
+ table_td_cell_new_active: {
+ value: success.at(L_BG_SECONDARY_ACTIVE),
+ description: 'Background of the active cell with new information in the Table.',
+ },
table_td_cell_new_hover: {
value: success.at(L_BG_SECONDARY_HOVER),
description: 'Background of the hovered cell with new information in the Table.',
},
- table_td_cell_new_active: {
- value: success.at(L_BG_SECONDARY_ACTIVE),
- description: 'Background of the active cell with new information in the Table.',
+ table_td_cell_selected_DEFAULT: {
+ value: info.at(L_BG_SECONDARY),
+ description: 'Background of the selected cell in the Table.',
},
- table_td_cell_critical_DEFAULT: {
- value: error.at(L_BG_SECONDARY),
- description: 'Background of the cell with critical information in the Table.',
+ table_td_cell_selected_active: {
+ value: info.at(L_BG_SECONDARY_ACTIVE),
+ description: 'Background of the active selected cell in the Table.',
},
- table_td_cell_critical_hover: {
- value: error.at(L_BG_SECONDARY_HOVER),
- description: 'Background of the hovered cell with critical information in the Table.',
+ table_td_cell_selected_hover: {
+ value: info.at(L_BG_SECONDARY_HOVER),
+ description: 'Background of the hovered selected cell in the Table.',
},
- table_td_cell_critical_active: {
- value: error.at(L_BG_SECONDARY_ACTIVE),
- description: 'Background of the active cell with critical information in the Table.',
+ table_td_cell_unread: {
+ value: neutral.at(L_BG_SECONDARY),
+ description: 'Background of the unread cell in the Table.',
},
table_td_cell_warning_DEFAULT: {
value: warning.at(L_BG_SECONDARY),
description: 'Background of the cell with warning information in the Table.',
},
- table_td_cell_warning_hover: {
- value: warning.at(L_BG_SECONDARY_HOVER),
- description: 'Background of the hovered cell with warning information in the Table.',
- },
table_td_cell_warning_active: {
value: warning.at(L_BG_SECONDARY_ACTIVE),
description: 'Background of the active cell with warning information in the Table.',
},
- brand_primary: {
- value: violet.at(0.74),
- description: 'Primary brand accent for logos and branded surfaces.',
- },
- brand_secondary: {
- value: gray.at(0.22),
- description: 'Secondary brand accent for paired brand treatments (secondary marks, duo-tone lockups).',
- },
- brand_gradient: {
- value: 'linear-gradient(180deg, #DCEEEB 0%, #EEE9FF 100%)',
- description: 'Brand light gradient for branded surfaces.',
- },
- brand_pinterest: {
- value: '#bd081c',
- description: 'Official Pinterest brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.',
- },
- brand_instagram: {
- value: '#e4405f',
- description: 'Official Instagram brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.',
- },
- brand_youtube: {
- value: '#ff0000',
- description: 'Official YouTube brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.',
- },
- brand_facebook: {
- value: '#1877f2',
- description: 'Official Facebook brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.',
- },
- brand_linkedIn: {
- value: '#0a66c2',
- description: 'Official LinkedIn brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.',
- },
- brand_twitter: {
- value: '#1d9bf0',
- description: 'Official Twitter brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.',
- },
- brand_google_blue: { value: '#1a0dab', description: 'Google brand color for the link.' },
- brand_google_green: {
- value: '#016723',
- description: 'Google green brand color for the link.',
- },
- brand_google_my_business: {
- value: '#1a73e8',
- description: 'Official Google My Business brand fill for logos and icons in approved placements; follow Google brand guidelines for size and clear space.',
- },
- keyboard_focus_outline: {
- value: focus.opaqueAt(L_BORDER_FOCUS),
- description: 'Color for default keyboard focus outline styles.',
- },
- keyboard_focus_invalid_outline: {
- value: error.opaqueAt(L_BORDER_FOCUS),
- description: 'Color for keyboard focus outline styles for elements with invalid state.',
- },
- keyboard_focus_valid_outline: {
- value: success.opaqueAt(L_BORDER_FOCUS),
- description: 'Color for keyboard focus outline styles for elements with valid state.',
- },
- keyboard_focus_invert_outline: {
- value: 'oklch(1 0 0 / 0.7)',
- description: 'Color for keyboard focus outline styles to use on the dark and color background.',
+ table_td_cell_warning_hover: {
+ value: warning.at(L_BG_SECONDARY_HOVER),
+ description: 'Background of the hovered cell with warning information in the Table.',
},
- overlay_primary: {
- value: neutral.opaqueAt(0.74),
- description: 'Use for cover the content under the modal dialogs.',
+ table_th_gradient: {
+ value: `linear-gradient(to right, transparent 0%, ${colors.gray['100'].value} 100%)`,
+ description: 'Background gradient for sorting icon that absolute positioned in the table head.',
},
- overlay_secondary: {
- value: neutral.opaqueAt(0.8),
- description: 'Use for the secondary modal dialogs that were opened upon the other modal dialogs.',
+ table_th_primary_cell_DEFAULT: {
+ value: neutral.at(L_BG_SECONDARY),
+ description: 'Background of the header cell in the primary Table.',
},
- overlay_limitation_primary: {
- value: `oklch(from ${neutral.at(0.97)} l c h / 0.7)`,
- description: 'Use as a primary cover of the content under the messages about limitations.',
+ table_th_primary_cell_active: {
+ value: neutral.at(L_BG_SECONDARY_ACTIVE),
+ description: 'Background of the active header cell in the primary Table.',
},
- overlay_limitation_secondary: {
- value: 'oklch(1 0 0 / 0.85)',
- description: 'Use as a secondary cover of the content under the messages about limitations.',
+ table_th_primary_cell_hover: {
+ value: neutral.at(L_BG_SECONDARY_ACTIVE),
+ description: 'Background of the hovered header cell in the primary Table.',
},
- tooltip_default: {
+ table_th_secondary_cell: {
value: neutral.at(L_BG_PRIMARY),
- description: 'Default Tooltip background.',
- },
- tooltip_warning: {
- value: error.at(L_BG_LIGHT),
- description: 'Warning Tooltip background.',
- },
- tooltip_invert: {
- value: neutral.at(L_INV_BG_PRIMARY),
- description: 'Inverted version of the default Tooltip background.',
- },
- neighbor_location_neutral: {
- value: 'oklch(1 0 0 / 0.5)',
- description: 'Neutral border of the components that are combined with neighbor-location property.',
+ description: 'Background of the header cell in the secondary Table.',
},
- neighbor_location_invert: {
- value: 'oklch(0 0 0 / 0.5)',
- description: 'Inverted border of the components that are combined with neighbor-location property.',
+ tag_additional_bg_hover_active: {
+ value: '{semanticTokens.colors.bg_primary_neutral_hover}',
+ description: 'Hover and active states of the additional Tag background.',
},
- scroll_area_shadow_left: {
- value: `linear-gradient(to right, oklch(from ${colors.gray['800'].value} l c h / 0.08) 20.55%, transparent 100%)`,
- description: 'Left-to-right fade shadow for the ScrollArea.',
+ tag_additional_bg_normal: {
+ value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}',
+ description: 'Background of the additional Tag in its normal state.',
},
- scroll_area_shadow_right: {
- value: `linear-gradient(to left, oklch(from ${colors.gray['800'].value} l c h / 0.08) 20.55%, transparent 100%)`,
- description: 'Right-to-left fade shadow for the ScrollArea.',
+ tag_additional_border: {
+ value: '{semanticTokens.colors.border_primary_DEFAULT}',
+ description: 'Border color of the additional Tag.',
},
- scroll_area_shadow_top: {
- value: `linear-gradient(to bottom, oklch(from ${colors.gray['800'].value} l c h / 0.08) 20.55%, transparent 100%)`,
- description: 'Top-to-bottom fade shadow for the ScrollArea.',
+ tag_primary_bg_hover: {
+ value: '{semanticTokens.colors.bg_primary_neutral_hover}',
+ description: 'Hover state of the primary Tag background.',
},
- scroll_area_shadow_bottom: {
- value: `linear-gradient(to top, oklch(from ${colors.gray['800'].value} l c h / 0.08) 20.55%, transparent 100%)`,
- description: 'Bottom-to-top fade shadow for the ScrollArea.',
+ tag_primary_bg_normal: {
+ value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}',
+ description: 'Background of the primary Tag in its normal state.',
},
- scroll_area_dropdown_menu_left: {
- value: 'linear-gradient(to right, {baseTokens.colors.white} 34.38%, transparent 100%)',
- description: 'Left-to-right fade shadow for the ScrollArea inside the DropdownMenu.',
+ tag_primary_blue_hover_active: {
+ value: '#dcd8ff',
+ 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. ',
},
- scroll_area_dropdown_menu_right: {
- value: 'linear-gradient(to left, {baseTokens.colors.white} 34.38%, transparent 100%)',
- description: 'Right-to-left fade shadow for the ScrollArea inside the DropdownMenu.',
+ tag_primary_blue_normal: {
+ value: '#e7e5ff',
+ 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.',
},
- scroll_area_dropdown_menu_bottom: {
- value: 'linear-gradient(to top, {baseTokens.colors.white} 34.38%, transparent 100%)',
- description: 'Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu.',
+ tag_primary_blue_text: {
+ value: '#5c53d9',
+ description: 'Blue text for the primary blue tag.',
},
- scroll_area_dropdown_menu_top: {
- value: 'linear-gradient(to bottom, {baseTokens.colors.white} 34.38%, transparent 100%)',
- description: 'Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu.',
+ tag_primary_border: {
+ value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}',
+ description: 'Border color of the primary Tag.',
},
- scroll_bar_background: {
- value: neutral.opaqueAt(L_BORDER_PRIMARY),
- description: 'Background color for ScrollBar.',
+ tag_primary_gray_hover_active: {
+ value: '#e2e3e2',
+ 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.',
},
tag_primary_gray_normal: {
value: '#ecedec',
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.',
},
- tag_primary_gray_hover_active: {
- value: '#e2e3e2',
- 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.',
- },
tag_primary_gray_text: {
value: '#6a6c6a',
description: 'Gray text for the primary gray tag.',
},
- tag_primary_blue_normal: {
- value: '#e7e5ff',
- 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.',
- },
- tag_primary_blue_hover_active: {
- value: '#dcd8ff',
- 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. ',
- },
- tag_primary_blue_text: {
- value: '#5c53d9',
- description: 'Blue text for the primary blue tag.',
+ tag_primary_green_hover_active: {
+ value: '#b3eedd',
+ 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.',
},
tag_primary_green_normal: {
value: '#ccf4e8',
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.',
},
- tag_primary_green_hover_active: {
- value: '#b3eedd',
- 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.',
- },
tag_primary_green_text: {
value: '#00845f',
description: 'Green text for the primary green tag.',
},
- tag_primary_orange_normal: {
- value: '#ffdecc',
- 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.',
- },
tag_primary_orange_hover_active: {
value: '#ffceb3',
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.',
},
+ tag_primary_orange_normal: {
+ value: '#ffdecc',
+ 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.',
+ },
tag_primary_orange_text: {
value: '#b83c00',
description: 'Orange text for the primary orange tag.',
},
- tag_primary_red_normal: {
- value: '#ffd3d4',
- 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.',
- },
tag_primary_red_hover_active: {
value: '#ffbdbf',
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.',
},
+ tag_primary_red_normal: {
+ value: '#ffd3d4',
+ 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.',
+ },
tag_primary_red_text: {
value: '#c7161b',
description: 'Red text for the primary red tag.',
},
- tag_primary_violet_normal: {
- value: '#f2d8ff',
- 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.',
- },
tag_primary_violet_hover_active: {
value: '#ecc5ff',
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.',
},
+ tag_primary_violet_normal: {
+ value: '#f2d8ff',
+ 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.',
+ },
tag_primary_violet_text: {
value: '#8029ec',
description: 'Violet text for the primary violet tag.',
},
- tag_primary_yellow_normal: {
- value: '#fde5cc',
- 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.',
+ tag_primary_white_hover_active: {
+ value: 'rgba(255, 255, 255, 0.3)',
+ description: 'Hover and active (selected) state of the primary white tag.',
+ },
+ tag_primary_white_normal: {
+ value: 'rgba(255, 255, 255, 0.15)',
+ description: 'Primary tag on bold or dark backgrounds—translucent fill for contrast in the normal state.',
+ },
+ tag_primary_white_text: {
+ value: '#ffffff',
+ description: 'White text for the primary white tag.',
},
tag_primary_yellow_hover_active: {
value: '#fcd8b3',
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.',
},
+ tag_primary_yellow_normal: {
+ value: '#fde5cc',
+ 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.',
+ },
tag_primary_yellow_text: {
value: '#a35400',
description: 'Yellow text for the primary yellow tag.',
},
- tag_primary_white_normal: {
- value: 'rgba(255, 255, 255, 0.15)',
- description: 'Primary tag on bold or dark backgrounds—translucent fill for contrast in the normal state.',
- },
- tag_primary_white_hover_active: {
- value: 'rgba(255, 255, 255, 0.3)',
- description: 'Hover and active (selected) state of the primary white tag.',
+ tag_secondary_border_DEFAULT: {
+ value: '{semanticTokens.colors.border_primary_DEFAULT}',
+ description: 'Border color of the secondary Tag.',
},
- tag_primary_white_text: {
- value: '#ffffff',
- description: 'White text for the primary white tag.',
+ tag_secondary_border_invert: {
+ value: '{semanticTokens.colors.border_secondary_invert}',
+ description: 'Inverted border color of the secondary Tag.',
},
- tag_secondary_normal: {
- value: '#ffffff',
- description: 'Background color for the default secondary tag.',
+ tag_secondary_gray_text: {
+ value: '#6a6c6a',
+ description: 'Gray text for the default secondary tag.',
},
tag_secondary_hover_active: {
value: '#f4f5f5',
description: 'Hover and active (selected) states of the background color for the default secondary tag.',
},
- tag_secondary_white_normal: {
- value: 'rgba(255, 255, 255, 0)',
- description: 'Secondary/outline tag on bold or dark backgrounds—minimal fill in the normal state.',
+ tag_secondary_normal: {
+ value: '#ffffff',
+ description: 'Background color for the default secondary tag.',
},
tag_secondary_white_hover_active: {
value: 'rgba(255, 255, 255, 0.1)',
description: 'Active state of the secondary white tag.',
},
+ tag_secondary_white_normal: {
+ value: 'rgba(255, 255, 255, 0)',
+ description: 'Secondary/outline tag on bold or dark backgrounds—minimal fill in the normal state.',
+ },
tag_secondary_white_text: {
value: '#ffffff',
description: 'White text for the secondary white tag.',
},
- tag_secondary_gray_text: {
- value: '#6a6c6a',
- description: 'Gray text for the default secondary tag.',
- },
- chart_palette_order_1: {
- value: colors.blue['400'].value,
- description: '1 color in the default list of colors for charts.',
- },
- chart_palette_order_2: {
- value: colors.green['200'].value,
- description: '2 color in the default list of colors for charts.',
- },
- chart_palette_order_3: {
- value: colors.violet['300'].value,
- description: '3 color in the default list of colors for charts.',
- },
- chart_palette_order_4: {
- value: colors.yellow['200'].value,
- description: '4 color in the default list of colors for charts.',
- },
- chart_palette_order_5: {
- value: colors.red['300'].value,
- description: '5 color in the default list of colors for charts.',
- },
- chart_palette_order_6: {
- value: colors.blue['200'].value,
- description: '6 color in the default list of colors for charts.',
- },
- chart_palette_order_7: {
- value: colors.pink['300'].value,
- description: '7 color in the default list of colors for charts.',
- },
- chart_palette_order_8: {
- value: colors.salad['200'].value,
- description: '8 color in the default list of colors for charts.',
- },
- chart_palette_order_9: {
- value: colors.blue['500'].value,
- description: '9 color in the default list of colors for charts.',
+ text_advertising: {
+ value: advertising.at(L_TEXT_PRIMARY),
+ description: 'Promotional or sponsored emphasis (ads, marketing callouts)—use sparingly so it stays noticeable.',
},
- chart_palette_order_10: {
- value: colors.green['300'].value,
- description: '10 color in the default list of colors for charts.',
+ text_critical_DEFAULT: {
+ value: error.at(L_TEXT_SECONDARY),
+ description: 'Text associated with critical states and data.',
},
- chart_palette_order_11: {
- value: colors.yellow['300'].value,
- description: '11 color in the default list of colors for charts.',
+ text_critical_hover_active: {
+ value: error.at(L_TEXT_SECONDARY_HOVER),
+ description: 'Hover and active states for the text associated with critical states and data.',
},
- chart_palette_order_12: {
- value: colors.pink['200'].value,
- description: '12 color in the default list of colors for charts.',
+ text_hint_DEFAULT: {
+ value: neutral.opaqueAt(L_TEXT_SECONDARY),
+ description: 'Supplementary helper text near controls (short guidance), distinct from placeholder text inside inputs.',
},
- chart_palette_order_13: {
- value: colors.salad['400'].value,
- description: '13 color in the default list of colors for charts.',
+ text_hint_hover_active: {
+ value: neutral.opaqueAt(L_TEXT_SECONDARY_HOVER),
+ description: 'Hover and active states of the hint link text.',
},
- chart_palette_order_14: {
- value: colors.violet['200'].value,
- description: '14 color in the default list of colors for charts.',
+ text_hint_invert_DEFAULT: {
+ value: neutral.at(L_INV_TEXT_SECONDARY),
+ description: 'Inverted version of the hint link text.',
},
- chart_palette_order_15: {
- value: colors.red['400'].value,
- description: '15 color in the default list of colors for charts.',
+ text_hint_invert_hover_active: {
+ value: neutral.at(L_INV_TEXT_SECONDARY_HOVER),
+ description: 'Hover and active states of the inverted version of the hint link text.',
},
- chart_palette_order_16: {
- value: colors.green['400'].value,
- description: '16 color in the default list of colors for charts.',
+ text_large_critical_DEFAULT: {
+ value: '{semanticTokens.colors.text.critical}',
+ description: 'Text with font-size ≥20px associated with critical states and data.',
},
- chart_palette_order_17: {
- value: colors.blue['200'].value,
- description: '17 color in the default list of colors for charts.',
+ text_large_critical_hover_active: {
+ value: '{semanticTokens.colors.text.critical.hover.active}',
+ description: 'Hover and active states of the text with font-size ≥20px associated with critical states and data.',
},
- chart_palette_order_18: {
- value: colors.salad['300'].value,
- description: '18 color in the default list of colors for charts.',
+ text_large_info_DEFAULT: {
+ value: info.at(L_TEXT_SECONDARY),
+ description: 'Link text with font-size ≥20px.',
},
- chart_palette_order_19: {
- value: colors.yellow['400'].value,
- description: '19 color in the default list of colors for charts.',
+ text_large_info_hover_active: {
+ value: info.at(L_TEXT_SECONDARY_HOVER),
+ description: 'Hover and active states of the link text with font-size ≥20px.',
},
- chart_palette_order_20: {
- value: colors.red['200'].value,
- description: '20 color in the default list of colors for charts.',
+ text_large_secondary: {
+ value: '{semanticTokens.colors.text.secondary}',
+ description: 'Secondary text. Use with font-size ≥20px.',
},
- chart_palette_order_21: {
- value: colors.yellow['500'].value,
- description: '21 color in the default list of colors for charts.',
+ text_large_success_DEFAULT: {
+ value: '{semanticTokens.colors.text.success}',
+ description: 'Text with font-size ≥20px associated with success states and data.',
},
- chart_palette_order_22: {
- value: colors.violet['400'].value,
- description: '22 color in the default list of colors for charts.',
+ text_large_success_hover_active: {
+ value: '{semanticTokens.colors.text.success.hover.active}',
+ description: 'Hover and active states of the text with font-size ≥20px associated with success states and data.',
},
- chart_palette_order_23: {
- value: colors.pink['400'].value,
- description: '23 color in the default list of colors for charts.',
+ text_link_DEFAULT: {
+ value: link.at(L_TEXT_SECONDARY),
+ description: 'Default interactive link color for unfollowed links.',
},
- chart_palette_order_24: {
- value: colors.salad['500'].value,
- description: '24 color in the default list of colors for charts.',
+ text_link_hover_active: {
+ value: link.at(L_TEXT_SECONDARY_HOVER),
+ description: 'Hover and active states for the link text.',
},
- chart_palette_order_total_amount: {
- value: colors.gray['400'].value,
- description: 'Use it to show total value on the chart.',
+ text_link_invert_DEFAULT: {
+ value: link.at(L_INV_TEXT_SECONDARY),
+ description: 'Inverted version of the link text. Use on dark background only.',
},
- chart_palette_order_other_data: {
- value: colors.gray['200'].value,
- description: 'Use it to indicate voids, missing or some other data on the chart.',
+ text_link_invert_hover: {
+ value: link.at(L_INV_TEXT_SECONDARY_HOVER),
+ description: 'Hover and active states of the inverted version of the link text. Use on dark background only.',
},
- chart_palette_order_null: {
- value: colors.gray['100'].value,
- description: 'Use it to show null value on the chart.',
+ text_link_visited: {
+ value: violet.at(L_TEXT_SECONDARY),
+ description: 'Visited link state so users can tell visited destinations apart from default links.',
},
- chart_grid_line: {
- value: neutral.at(L_BORDER_SECONDARY),
- description: 'Grid and axis guide lines for charts.',
+ text_placeholder: {
+ value: neutral.opaqueAt(L_TEXT_PLACEHOLDER),
+ description: 'Placeholder text color for inputs and fields.',
},
- chart_grid_x_axis: {
- value: neutral.at(L_BORDER_PRIMARY),
- description: 'X-axis line on the chart grid.',
+ text_primary_DEFAULT: {
+ value: neutral.opaqueAt(L_TEXT_PRIMARY),
+ description: 'Default body and UI copy; strongest reading emphasis for primary content.',
},
- chart_grid_y_accent_hover_line: {
- value: neutral.at(L_BORDER_PRIMARY),
- description: 'Accent line for the hover state on the chart grid.',
+ text_primary_invert: {
+ value: neutral.opaqueInvAt(L_INV_TEXT_PRIMARY),
+ description: 'Inverted version of the primary text.',
},
- chart_grid_text_label: {
+ text_secondary_DEFAULT: {
value: neutral.opaqueAt(L_TEXT_SECONDARY),
- description: 'Text label on the chart grid.',
- },
- chart_grid_bar_chart_hover: {
- value: neutral.opaqueAt(L_BG_PRIMARY_HOVER),
- description: 'Background color for the hover state of a bar on the chart grid.',
- },
- chart_grid_bar_chart_base_bg: {
- value: neutral.at(L_BG_LIGHT),
- description: 'Default background color of a bar in the BarChart.',
- },
- chart_grid_period_bg: {
- value: neutral.at(L_BG_LIGHT),
- description: 'Use for highlighting a period on the chart grid.',
- },
- chart_grid_period_pattern: {
- value: neutral.at(L_BORDER_SECONDARY),
- description: 'Stripe color for diagonal pattern background.',
- },
- chart_grid_border: {
- value: '{baseTokens.colors.white}',
- description: 'Border for distinguishing data sets and chart dots on the chart grid.',
+ description: 'Supporting text: captions, metadata, hints in flowing copy—visually quieter than primary body text.',
},
- chart_x_axis_accent_period_active: {
- value: neutral.opaqueAt(L_BG_LIGHT),
- description: 'Background color for the clickable date on the X-axis of the chart grid.',
+ text_secondary_invert: {
+ value: neutral.opaqueInvAt(L_INV_TEXT_SECONDARY),
+ description: 'Inverted version of the secondary text.',
},
- chart_x_axis_accent_data_start_tracking: {
- value: success.opaqueAt(L_BG_LIGHT),
- description: 'Background color for the "Start tracking" date on the X-axis of the chart grid.',
+ text_success_DEFAULT: {
+ value: success.at(L_TEXT_SECONDARY),
+ description: 'Text associated with success states and data.',
},
- header_bg: { value: '{semanticTokens.colors.page.bg}' },
- header_border_primary: { value: '{semanticTokens.colors.border.primary}' },
- header_border_secondary: { value: '{semanticTokens.colors.border.primary}' },
- page_bg: { value: neutral.at(0.97),
- description: 'Background fill for the whole product page.',
+ text_success_hover_active: {
+ value: success.at(L_TEXT_SECONDARY_HOVER),
+ description: 'Hover and active states for the text associated with success states and data.',
},
- footer_bg: { value: '{semanticTokens.colors.page.bg}',
- description: 'Background fill for the product page footer.',
+ tooltip_bg_default: {
+ value: neutral.at(L_BG_PRIMARY),
+ description: 'Default Tooltip background.',
},
- sidebar_nav_bg: { value: '{semanticTokens.colors.page.bg}',
- description: 'Background fill for the product page sidebar.',
+ tooltip_bg_invert: {
+ value: neutral.at(L_INV_BG_PRIMARY),
+ description: 'Inverted version of the default Tooltip background.',
},
- sidebar_nav_border: { value: '{semanticTokens.colors.border.primary}',
- description: 'Color for the border of the page sidebar.',
+ tooltip_bg_warning: {
+ value: error.at(L_BG_LIGHT),
+ description: 'Warning Tooltip background.',
},
- sidebar_nav_control_hover: {
- value: neutral.opaqueAt(L_BG_SECONDARY_HOVER),
- description: 'Sidebar navigation row hover background.',
+ tooltip_border_invert: {
+ value: neutral.opaqueInvAt(L_INV_BORDER_SECONDARY),
+ description: 'Border of the Tooltip with dark theme.',
},
- sidebar_nav_control_active: {
- value: neutral.opaqueAt(L_BG_SECONDARY_ACTIVE),
- description: 'Sidebar navigation row active background.',
+ tooltip_text: {
+ value: '{semanticTokens.colors.text_primary_DEFAULT}',
+ description: 'Text color of the default Tooltip.',
},
- sidebar_nav_control_text_normal: {
- value: neutral.at(L_TEXT_SECONDARY),
- description: 'Sidebar navigation label color.',
+ tooltip_text_invert: {
+ value: '{semanticTokens.colors.text_primary_invert}',
+ description: 'Text color of the inverted Tooltip.',
},
- sidebar_nav_control_text_active: {
- value: neutral.at(L_TEXT_PRIMARY),
- description: 'Sidebar navigation label color for the active item.',
+ wizard_bg: {
+ value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}',
+ description: 'Main background of the Wizard.',
},
- sidebar_nav_control_icon_normal: {
- value: neutral.at(L_ICON_PRIMARY),
- description: 'Sidebar navigation icon color.',
+ wizard_sidebar_bg: {
+ value: '{semanticTokens.colors.control_primary_advertising_DEFAULT}',
+ description: 'Background of the Wizard sidebar.',
},
- sidebar_nav_control_icon_active: {
- value: neutral.at(L_ICON_PRIMARY_HOVER),
- description: 'Sidebar navigation icon color for the active item.',
+ wizard_sidebar_control_DEFAULT: {
+ value: '{semanticTokens.colors.control_primary_advertising_DEFAULT}',
+ description: 'Background of the control in the Wizard sidebar in its normal state.',
},
- slider_rating_normal: {
- value: neutral.at(L_ICON_SECONDARY),
- description: 'Icon color for the SliderRating component in its normal state.',
+ wizard_sidebar_control_active: {
+ value: '{semanticTokens.colors.control_primary_advertising_active}',
+ description: 'Active state of the control in the Wizard sidebar.',
},
- slider_rating_hover_active: {
- value: highlight.at(L_ICON_SECONDARY_HOVER),
- description: 'Icon color for the SliderRating component in its hovered and active states.',
+ wizard_sidebar_control_hover: {
+ value: '{semanticTokens.colors.control_primary_advertising_hover}',
+ description: 'Hover state of the control in the Wizard sidebar.',
+ },
+ wizard_sidebar_text_primary: {
+ value: '{semanticTokens.colors.text_primary_invert}',
+ description: 'Primary text color in the Wizard sidebar.',
+ },
+ wizard_sidebar_text_secondary: {
+ value: '{semanticTokens.colors.text_secondary_invert}',
+ description: 'Secondary text color in the Wizard sidebar.',
},
},
opacity: {
@@ -1575,21 +1887,29 @@ export const theme: Theme = {
value: `${RADII['extra-small']}px`,
description: 'Use for rounding big and small charts like bar, histogram and others.',
},
+ 'checkbox': {
+ value: `${RADII.medium}px`,
+ description: 'Use for rounding Checkbox.',
+ },
+ 'control': {
+ value: `${RADII.medium}px`,
+ description: 'Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc.',
+ },
'counter': {
value: `${RADII.large}px`,
description: 'Rounding for counter/numeric capsules used as small indicators.',
},
- 'tag': {
- value: `${RADII['extra-large']}px`,
- description: 'Corner radius for Tag (including removable tags) in dense UI.',
+ 'modal': {
+ value: `${RADII.large + 2}px`,
+ description: 'Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard).',
},
- 'switch': {
- value: `${RADII['extra-large']}px`,
- description: 'Pill-shaped rounding for Switch geometry (full rounded track/thumb pattern).',
+ 'pills': {
+ value: `${RADII.medium}px`,
+ description: 'Use for rounding Pills.',
},
- 'control': {
+ 'popper': {
value: `${RADII.medium}px`,
- description: 'Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc.',
+ description: 'Use for rounding all kinds of poppers and dropdowns.',
},
'progress-bar': {
value: `${RADII.medium}px`,
@@ -1599,13 +1919,13 @@ export const theme: Theme = {
value: `${RADII.medium + 2}px`,
description: 'Use for rounding surfaces like Card, blocks, widgets, Notice, etc.',
},
- 'popper': {
- value: `${RADII.medium}px`,
- description: 'Use for rounding all kinds of poppers and dropdowns.',
+ 'switch': {
+ value: `${RADII['extra-large']}px`,
+ description: 'Pill-shaped rounding for Switch geometry (full rounded track/thumb pattern).',
},
- 'modal': {
- value: `${RADII.large + 2}px`,
- description: 'Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard).',
+ 'tag': {
+ value: `${RADII['extra-large']}px`,
+ description: 'Corner radius for Tag (including removable tags) in dense UI.',
},
},
durations: {
@@ -1729,6 +2049,59 @@ export const theme: Theme = {
},
table: { td: { cell: { actions: { accordion: { value: '{semanticTokens.colors.table_td_cell_accordion}' } } } } },
keyboard: { focus: { outline: { invert: { value: '{semanticTokens.colors.keyboard_focus_invert_outline}' } } } },
+ border: {
+ tooltip: { invert: { value: '{semanticTokens.colors.tooltip_border_invert}' } },
+ table: { accent: { value: '{semanticTokens.colors.table_border_accent}' } },
+ date: { picker: { range: { comparison: { value: '{semanticTokens.colors.date_picker_border_range_comparison}' } } } },
+ },
+ tooltip: {
+ default: { value: '{semanticTokens.colors.tooltip_bg_default}' },
+ invert: { value: '{semanticTokens.colors.tooltip_bg_invert}' },
+ warning: { value: '{semanticTokens.colors.tooltip_bg_warning}' },
+ },
+ feature: {
+ popover: {
+ bg: {
+ DEFAULT: { value: '{semanticTokens.colors.feature_popover_bg_accent}' },
+ neutral: { value: '{semanticTokens.colors.feature_popover_bg_neutral}' },
+ },
+ dot: {
+ DEFAULT: { value: '{semanticTokens.colors.feature_popover_dot_accent}' },
+ outer: { border: { value: '{semanticTokens.colors.feature_popover_dot_outer_border_accent}' } },
+ neutral: {
+ DEFAULT: { value: '{semanticTokens.colors.feature_popover_dot_neutral}' },
+ outer: { border: { value: '{semanticTokens.colors.feature_popover_dot_outer_border_neutral}' } },
+ },
+ },
+ accent: {
+ bg: { value: '{semanticTokens.colors.feature_popover_bg_accent}' },
+ dot: { outer: { border: { value: '{semanticTokens.colors.feature_popover_dot_outer_border_accent}' } } },
+ },
+ neutral: {
+ bg: { value: '{semanticTokens.colors.feature_popover_bg_neutral}' },
+ dot: { outer: { border: { value: '{semanticTokens.colors.feature_popover_dot_outer_border_neutral}' } } },
+ },
+ },
+ },
+ slider: {
+ rating: {
+ normal: { value: '{semanticTokens.colors.control_slider_rating_icon_DEFAULT}' },
+ hover: { active: { value: '{semanticTokens.colors.control_slider_rating_icon_hover_active}' } },
+ },
+ },
+ dot: {
+ notification: {
+ bg: { value: '{semanticTokens.colors.dot_bg}' },
+ text: { value: '{semanticTokens.colors.dot_text}' },
+ },
+ },
+ radio: {
+ border: { value: '{semanticTokens.colors.control_radio_border}' },
+ bg: {
+ normal: { value: '{semanticTokens.colors.control_radio_bg_normal}' },
+ selected: { value: '{semanticTokens.colors.control_radio_bg_selected}' },
+ },
+ },
},
};
@@ -1778,6 +2151,7 @@ export type SemanticTokens = {
'addon': Value;
'badge': Value;
'chart': Value;
+ 'checkbox': Value;
'counter': Value;
'tag': Value;
'switch': Value;
@@ -1786,6 +2160,7 @@ export type SemanticTokens = {
'surface': Value;
'popper': Value;
'modal': Value;
+ 'pills': Value;
};
durations: {
switch: Value;
@@ -1962,23 +2337,75 @@ type SemanticColors = {
DEFAULT: Value;
active: Value;
};
- tooltip: {
- invert: Value;
+ };
+ control: {
+ switch: {
+ bg: {
+ DEFAULT: Value;
+ info: {
+ active: Value;
+ };
+ success: {
+ active: Value;
+ };
+ };
+ handle: Value;
};
- table: {
- accent: Value;
+ slider: {
+ bar: {
+ bg: {
+ DEFAULT: Value;
+ hover: Value;
+ };
+ value: {
+ bg: Value;
+ };
+ };
+ knob: {
+ bg: {
+ DEFAULT: Value;
+ };
+ border: {
+ DEFAULT: Value;
+ hover: Value;
+ };
+ };
};
- date: {
- picker: {
- range: {
- comparison: Value;
+ slider_rating: {
+ icon: {
+ DEFAULT: Value;
+ hover: {
+ active: Value;
};
};
};
- };
- control: {
- switch: {
- bg: Value;
+ checkbox: {
+ border: Value;
+ bg: {
+ normal: Value;
+ selected: Value;
+ };
+ button: {
+ border: {
+ DEFAULT: Value;
+ selected: Value;
+ };
+ bg: {
+ normal: Value;
+ hover: Value;
+ selected: {
+ DEFAULT: Value;
+ hover: Value;
+ };
+ };
+ };
+ };
+ radio: {
+ border: Value;
+ bg: {
+ normal: Value;
+ selected: Value;
+ };
};
primary: {
info: {
@@ -2046,6 +2473,39 @@ type SemanticColors = {
active: Value;
};
};
+ text: {
+ primary: {
+ DEFAULT: Value;
+ invert: Value;
+ };
+ secondary: Value;
+ tertiary: Value;
+ };
+ select: {
+ trigger: {
+ normal: Value;
+ hover: Value;
+ active: Value;
+ };
+ };
+ pills: {
+ bg: {
+ normal: Value;
+ hover: Value;
+ selected: Value;
+ };
+ border: {
+ DEFAULT: Value;
+ selected: Value;
+ };
+ };
+ tab_line: {
+ border: {
+ DEFAULT: Value;
+ hover: Value;
+ active: Value;
+ };
+ };
};
icon: {
primary: {
@@ -2131,6 +2591,8 @@ type SemanticColors = {
blue: Value;
violet: Value;
pink: Value;
+ gray: Value;
+ border: Value;
};
date: {
picker: {
@@ -2156,6 +2618,11 @@ type SemanticColors = {
};
};
};
+ border: {
+ range: {
+ comparison: Value;
+ };
+ };
};
};
dropdown: {
@@ -2166,6 +2633,7 @@ type SemanticColors = {
selected: {
DEFAULT: Value;
hover: Value;
+ border: Value;
};
};
};
@@ -2173,20 +2641,21 @@ type SemanticColors = {
feature: {
popover: {
bg: {
- DEFAULT: Value;
+ accent: Value;
neutral: Value;
};
dot: {
- outer: {
- border: Value;
- };
- neutral: {
- DEFAULT: Value;
- outer: {
- border: Value;
- };
+ accent: Value;
+ neutral: Value;
+ outer_border: {
+ accent: Value;
+ neutral: Value;
};
};
+ text: {
+ DEFAULT: Value;
+ invert: Value;
+ };
};
};
progress: {
@@ -2215,6 +2684,9 @@ type SemanticColors = {
};
};
table: {
+ border: {
+ accent: Value;
+ };
th: {
primary: {
cell: {
@@ -2299,9 +2771,16 @@ type SemanticColors = {
};
};
tooltip: {
- default: Value;
- warning: Value;
- invert: Value;
+ bg: {
+ default: Value;
+ warning: Value;
+ invert: Value;
+ };
+ text: Value;
+ text_invert: Value;
+ border: {
+ invert: Value;
+ };
};
neighbor: {
location: {
@@ -2332,6 +2811,11 @@ type SemanticColors = {
};
tag: {
primary: {
+ bg: {
+ normal: Value;
+ hover: Value;
+ };
+ border: Value;
gray: {
normal: Value;
hover: {
@@ -2390,6 +2874,10 @@ type SemanticColors = {
};
};
secondary: {
+ border: {
+ DEFAULT: Value;
+ invert: Value;
+ };
normal: Value;
hover: {
active: Value;
@@ -2405,8 +2893,22 @@ type SemanticColors = {
text: Value;
};
};
+ additional: {
+ bg: {
+ normal: Value;
+ hover: {
+ active: Value;
+ };
+ };
+ border: Value;
+ };
};
chart: {
+ data: {
+ success: Value;
+ warning: Value;
+ critical: Value;
+ };
palette: {
order: {
1: Value;
@@ -2517,12 +3019,53 @@ type SemanticColors = {
};
};
};
- slider: {
- rating: {
- normal: Value;
- hover: {
+ badge: {
+ bg: {
+ admin: Value;
+ alpha: Value;
+ beta: Value;
+ new: Value;
+ soon: Value;
+ unavailable: Value;
+ invert: Value;
+ };
+ text: {
+ primary: {
+ DEFAULT: Value;
+ invert: Value;
+ };
+ secondary: Value;
+ };
+ };
+ dot: {
+ bg: Value;
+ text: Value;
+ };
+ notice_bubble: {
+ bg: {
+ critical: Value;
+ info: Value;
+ };
+ };
+ spin: {
+ bg: {
+ DEFAULT: Value;
+ invert: Value;
+ };
+ };
+ wizard: {
+ bg: Value;
+ sidebar: {
+ bg: Value;
+ control: {
+ DEFAULT: Value;
+ hover: Value;
active: Value;
};
+ text: {
+ primary: Value;
+ secondary: Value;
+ };
};
};
};
@@ -2598,6 +3141,53 @@ type Deprecates = {
blue: { 400: Value; 500: Value };
table: { td: { cell: { actions: { accordion: Value } } } };
keyboard: { focus: { outline: { invert: Value } } };
+ border: {
+ tooltip: { invert: Value };
+ table: { accent: Value };
+ date: { picker: { range: { comparison: Value } } };
+ };
+ tooltip: {
+ default: Value;
+ invert: Value;
+ warning: Value;
+ };
+ feature: {
+ popover: {
+ bg: { DEFAULT: Value; neutral: Value };
+ dot: {
+ DEFAULT: Value;
+ outer: { border: Value };
+ neutral: { DEFAULT: Value; outer: { border: Value } };
+ };
+ accent: {
+ bg: Value;
+ dot: { outer: { border: Value } };
+ };
+ neutral: {
+ bg: Value;
+ dot: { outer: { border: Value } };
+ };
+ };
+ };
+ slider: {
+ rating: {
+ normal: Value;
+ hover: { active: Value };
+ };
+ };
+ dot: {
+ notification: {
+ bg: Value;
+ text: Value;
+ };
+ };
+ radio: {
+ border: Value;
+ bg: {
+ normal: Value;
+ selected: Value;
+ };
+ };
};
export type BasicColorKeys = `${keyof BaseTokens['colors']}-${Lightness}`;
diff --git a/website/docs/.vitepress/theme/Tooltip.vue b/website/docs/.vitepress/theme/Tooltip.vue
index 8c9c5d891c..d56b781edb 100644
--- a/website/docs/.vitepress/theme/Tooltip.vue
+++ b/website/docs/.vitepress/theme/Tooltip.vue
@@ -31,7 +31,7 @@ export default {
opacity: 0;
transition: calc(var(--intergalactic-duration-popper, 200) * 1ms) all ease-in-out;
color: var(--intergalactic-text-primary-invert, #ffffff);
- background-color: var(--intergalactic-tooltip-invert, #191b23);
+ background-color: var(--intergalactic-tooltip-bg-invert, #191b23);
font-size: var(--intergalactic-fs-100, 12px);
line-height: var(--intergalactic-lh-100, 133%);
text-align: center;
@@ -54,7 +54,7 @@ export default {
top: -10px;
left: 50%;
transform: translateX(-50%);
- border-color: transparent transparent var(--intergalactic-tooltip-invert, #191b23) transparent;
+ border-color: transparent transparent var(--intergalactic-tooltip-bg-invert, #191b23) transparent;
}
.vp-tooltip-container:has(:focus-visible) .vp-tooltip,
@@ -84,10 +84,10 @@ body:has(.vp-tooltip-container > *:first-child:hover + .vp-tooltip) .vp-tooltip-
.dark .vp-tooltip {
color: var(--intergalactic-text-primary, #191b23);
- background-color: var(--intergalactic-tooltip-default, #ffffff);
+ background-color: var(--intergalactic-tooltip-bg-default, #ffffff);
}
.dark .vp-tooltip-arrow {
- border-color: transparent transparent var(--intergalactic-tooltip-default, #ffffff) transparent;
+ border-color: transparent transparent var(--intergalactic-tooltip-bg-default, #ffffff) transparent;
}
diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json
index ac5cf5e783..e03805fcee 100644
--- a/website/docs/style/design-tokens/base-tokens.json
+++ b/website/docs/style/design-tokens/base-tokens.json
@@ -837,5 +837,97 @@
{
"name": "--intergalactic-keyboard-focus-outline-invert",
"value": "oklch(1 0 0 / 0.7)"
+ },
+ {
+ "name": "--intergalactic-border-tooltip-invert",
+ "value": "oklch(0.995 0.008 145.9 / 0.369)"
+ },
+ {
+ "name": "--intergalactic-border-table-accent",
+ "value": "oklch(0.137 0.026 175.7 / 0.161)"
+ },
+ {
+ "name": "--intergalactic-border-date-picker-range-comparison",
+ "value": "oklch(0.7 0.191 301.5)"
+ },
+ {
+ "name": "--intergalactic-tooltip-default",
+ "value": "oklch(1 0 0)"
+ },
+ {
+ "name": "--intergalactic-tooltip-invert",
+ "value": "oklch(0.23 0.01 140)"
+ },
+ {
+ "name": "--intergalactic-tooltip-warning",
+ "value": "oklch(0.958 0.029 5.7)"
+ },
+ {
+ "name": "--intergalactic-feature-popover-bg",
+ "value": "oklch(0.88 0.078 303)"
+ },
+ {
+ "name": "--intergalactic-feature-popover-bg-neutral",
+ "value": "oklch(0.23 0.01 140)"
+ },
+ {
+ "name": "--intergalactic-feature-popover-dot",
+ "value": "oklch(0.88 0.078 303)"
+ },
+ {
+ "name": "--intergalactic-feature-popover-dot-outer-border",
+ "value": "oklch(0.88 0.078 303)"
+ },
+ {
+ "name": "--intergalactic-feature-popover-dot-neutral",
+ "value": "oklch(0.88 0.078 303)"
+ },
+ {
+ "name": "--intergalactic-feature-popover-dot-neutral-outer-border",
+ "value": "oklch(0.88 0.078 303)"
+ },
+ {
+ "name": "--intergalactic-feature-popover-accent-bg",
+ "value": "oklch(0.88 0.078 303)"
+ },
+ {
+ "name": "--intergalactic-feature-popover-accent-dot-outer-border",
+ "value": "oklch(0.88 0.078 303)"
+ },
+ {
+ "name": "--intergalactic-feature-popover-neutral-bg",
+ "value": "oklch(0.23 0.01 140)"
+ },
+ {
+ "name": "--intergalactic-feature-popover-neutral-dot-outer-border",
+ "value": "oklch(0.88 0.078 303)"
+ },
+ {
+ "name": "--intergalactic-slider-rating-normal",
+ "value": "oklch(0.7 0.003 162.2)"
+ },
+ {
+ "name": "--intergalactic-slider-rating-hover-active",
+ "value": "oklch(0.66 0.212 300.1)"
+ },
+ {
+ "name": "--intergalactic-dot-notification-bg",
+ "value": "oklch(0.728 0.188 51.8)"
+ },
+ {
+ "name": "--intergalactic-dot-notification-text",
+ "value": "oklch(0.999 0.001 180 / 0.949)"
+ },
+ {
+ "name": "--intergalactic-radio-border",
+ "value": "oklch(0.137 0.026 175.7 / 0.161)"
+ },
+ {
+ "name": "--intergalactic-radio-bg-normal",
+ "value": "oklch(1 0 0)"
+ },
+ {
+ "name": "--intergalactic-radio-bg-selected",
+ "value": "oklch(0.23 0.01 140)"
}
]
diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
index 75916944a7..8382a8ef6f 100644
--- a/website/docs/style/design-tokens/design-tokens.json
+++ b/website/docs/style/design-tokens/design-tokens.json
@@ -1,4 +1,136 @@
[
+ {
+ "name": "--intergalactic-badge-bg-admin",
+ "value": "oklch(0.58 0.168 278.2)",
+ "description": "Background color of the admin Badge.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-badge-bg-alpha",
+ "value": "oklch(0.64 0.226 24.5)",
+ "description": "Background color of the alpha Badge.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-badge-bg-beta",
+ "value": "oklch(0.64 0.196 47.3)",
+ "description": "Background color of the beta Badge.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-badge-bg-invert",
+ "value": "#ffffff",
+ "description": "Background color of the inverted Badge.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-badge-bg-new",
+ "value": "oklch(0.64 0.161 170)",
+ "description": "Background color of the new Badge.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-badge-bg-soon",
+ "value": "oklch(0.64 0.003 157.8)",
+ "description": "Background color of the soon Badge.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-badge-bg-unavailable",
+ "value": "oklch(0.9 0.002 177)",
+ "description": "Background color of the unavailable Badge.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-badge-text-primary",
+ "value": "oklch(0.1 0.03 137 / 0.899)",
+ "description": "Primary text color for Badge.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-badge-text-primary-invert",
+ "value": "oklch(0.999 0.001 180 / 0.949)",
+ "description": "Inverted primary text color for Badge.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-badge-text-secondary",
+ "value": "oklch(0.088 0.026 147.7 / 0.583)",
+ "description": "Secondary text color for Badge.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-bg-highlight-focus",
+ "value": "oklch(0.524 0.266 263.1 / 0.116)",
+ "description": "Focusing values in the input.",
+ "components": [
+ "date-picker",
+ "time-picker"
+ ]
+ },
+ {
+ "name": "--intergalactic-bg-highlight-results",
+ "value": "oklch(0.94 0.039 303.2)",
+ "description": "Highlighting the search results.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-bg-primary-advertising",
+ "value": "oklch(0.64 0.223 299.3)",
+ "description": "Accent background for the advertising banners and controls.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-bg-primary-critical",
+ "value": "oklch(0.64 0.226 24.5)",
+ "description": "Accent background of a message or a banner with a critical information.",
+ "components": [
+ "counter",
+ "notice-bubble"
+ ]
+ },
+ {
+ "name": "--intergalactic-bg-primary-highlight",
+ "value": "oklch(0.88 0.078 303)",
+ "description": "Accent background of the information you want to highlight.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-bg-primary-info",
+ "value": "oklch(0.64 0.152 276.7)",
+ "description": "Accent background of the message with regular information.",
+ "components": [
+ "counter"
+ ]
+ },
+ {
+ "name": "--intergalactic-bg-primary-invert",
+ "value": "oklch(0.23 0.01 140)",
+ "description": "Inverted version of the primary background of the interface that contains the main data and information.",
+ "components": [
+ "notice-bubble"
+ ]
+ },
+ {
+ "name": "--intergalactic-bg-primary-invert-active",
+ "value": "oklch(0.4 0.004 140)",
+ "description": "Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information.",
+ "components": [
+ "drag-and-drop"
+ ]
+ },
+ {
+ "name": "--intergalactic-bg-primary-invert-hover",
+ "value": "oklch(0.36 0.005 140)",
+ "description": "Hover state for the inverted version of the primary background of the interface that contains the main data and information.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-bg-primary-muted",
+ "value": "oklch(0.64 0.003 157.8)",
+ "description": "Accented muted background for a message with regular information.",
+ "components": []
+ },
{
"name": "--intergalactic-bg-primary-neutral",
"value": "oklch(1 0 0)",
@@ -31,15 +163,6 @@
"wizard"
]
},
- {
- "name": "--intergalactic-bg-primary-neutral-hover",
- "value": "oklch(0.98 0.001 180)",
- "description": "Hover state of the primary background of the interface which contains the main data and information.",
- "components": [
- "base-trigger",
- "pills"
- ]
- },
{
"name": "--intergalactic-bg-primary-neutral-active",
"value": "oklch(0.97 0.001 180)",
@@ -49,11 +172,12 @@
]
},
{
- "name": "--intergalactic-bg-primary-info",
- "value": "oklch(0.64 0.152 276.7)",
- "description": "Accent background of the message with regular information.",
+ "name": "--intergalactic-bg-primary-neutral-hover",
+ "value": "oklch(0.98 0.001 180)",
+ "description": "Hover state of the primary background of the interface which contains the main data and information.",
"components": [
- "counter"
+ "base-trigger",
+ "pills"
]
},
{
@@ -62,15 +186,6 @@
"description": "Accent background of the message or banner with information about the successful result.",
"components": []
},
- {
- "name": "--intergalactic-bg-primary-critical",
- "value": "oklch(0.64 0.226 24.5)",
- "description": "Accent background of a message or a banner with a critical information.",
- "components": [
- "counter",
- "notice-bubble"
- ]
- },
{
"name": "--intergalactic-bg-primary-warning",
"value": "oklch(0.7 0.195 50.5)",
@@ -80,45 +195,82 @@
]
},
{
- "name": "--intergalactic-bg-primary-highlight",
- "value": "oklch(0.88 0.078 303)",
- "description": "Accent background of the information you want to highlight.",
+ "name": "--intergalactic-bg-secondary-advertising",
+ "value": "oklch(0.98 0.013 303.4)",
+ "description": "Secondary background for the advertising message you want to accent.",
"components": []
},
{
- "name": "--intergalactic-bg-primary-advertising",
- "value": "oklch(0.64 0.223 299.3)",
- "description": "Accent background for the advertising banners and controls.",
+ "name": "--intergalactic-bg-secondary-advertising-active",
+ "value": "oklch(0.94 0.039 303.2)",
+ "description": "Active (selected) state of the secondary background for the advertising message you want to accent.",
"components": []
},
{
- "name": "--intergalactic-bg-primary-muted",
- "value": "oklch(0.64 0.003 157.8)",
- "description": "Accented muted background for a message with regular information.",
+ "name": "--intergalactic-bg-secondary-advertising-hover",
+ "value": "oklch(0.96 0.026 303.3)",
+ "description": "Hover state of the secondary background for the advertising message you want to accent.",
"components": []
},
{
- "name": "--intergalactic-bg-primary-invert",
- "value": "oklch(0.23 0.01 140)",
- "description": "Inverted version of the primary background of the interface that contains the main data and information.",
+ "name": "--intergalactic-bg-secondary-critical",
+ "value": "oklch(0.958 0.029 5.7)",
+ "description": "Secondary background of the message with critical information you want to accent.",
"components": [
- "notice-bubble"
+ "bulk-textarea",
+ "notice"
]
},
{
- "name": "--intergalactic-bg-primary-invert-hover",
- "value": "oklch(0.36 0.005 140)",
- "description": "Hover state for the inverted version of the primary background of the interface that contains the main data and information.",
+ "name": "--intergalactic-bg-secondary-critical-active",
+ "value": "oklch(0.938 0.042 8.4)",
+ "description": "Active (selected) state of the secondary background of the message with critical information you want to accent.",
"components": []
},
{
- "name": "--intergalactic-bg-primary-invert-active",
- "value": "oklch(0.4 0.004 140)",
- "description": "Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information.",
+ "name": "--intergalactic-bg-secondary-critical-hover",
+ "value": "oklch(0.958 0.029 5.7)",
+ "description": "Hover state of the secondary background of the message with critical information you want to accent.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-bg-secondary-highlight",
+ "value": "oklch(0.98 0.013 303.4)",
+ "description": "Secondary background of the information you want to highlight.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-bg-secondary-highlight-active",
+ "value": "oklch(0.94 0.039 303.2)",
+ "description": "Active (selected) state of the secondary background of the information you want to highlight.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-bg-secondary-highlight-hover",
+ "value": "oklch(0.96 0.026 303.3)",
+ "description": "Hover state of the secondary background of the information you want to highlight.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-bg-secondary-info",
+ "value": "oklch(0.959 0.021 267.8)",
+ "description": "Secondary background of a message with regular information.",
"components": [
- "drag-and-drop"
+ "notice"
]
},
+ {
+ "name": "--intergalactic-bg-secondary-info-active",
+ "value": "oklch(0.939 0.032 268)",
+ "description": "Active (selected) state of the secondary background of a message with regular information.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-bg-secondary-info-hover",
+ "value": "oklch(0.959 0.021 267.8)",
+ "description": "Hover state of the secondary background of a message with regular information.",
+ "components": []
+ },
{
"name": "--intergalactic-bg-secondary-neutral",
"value": "oklch(0.98 0.001 180)",
@@ -134,15 +286,6 @@
"time-picker"
]
},
- {
- "name": "--intergalactic-bg-secondary-neutral-hover",
- "value": "oklch(0.96 0.001 180)",
- "description": "Hover state of the secondary background of the interface which contains the main data and information.",
- "components": [
- "accordion",
- "time-picker"
- ]
- },
{
"name": "--intergalactic-bg-secondary-neutral-active",
"value": "oklch(0.94 0.002 180)",
@@ -153,25 +296,14 @@
]
},
{
- "name": "--intergalactic-bg-secondary-info",
- "value": "oklch(0.959 0.021 267.8)",
- "description": "Secondary background of a message with regular information.",
+ "name": "--intergalactic-bg-secondary-neutral-hover",
+ "value": "oklch(0.96 0.001 180)",
+ "description": "Hover state of the secondary background of the interface which contains the main data and information.",
"components": [
- "notice"
+ "accordion",
+ "time-picker"
]
},
- {
- "name": "--intergalactic-bg-secondary-info-hover",
- "value": "oklch(0.959 0.021 267.8)",
- "description": "Hover state of the secondary background of a message with regular information.",
- "components": []
- },
- {
- "name": "--intergalactic-bg-secondary-info-active",
- "value": "oklch(0.939 0.032 268)",
- "description": "Active (selected) state of the secondary background of a message with regular information.",
- "components": []
- },
{
"name": "--intergalactic-bg-secondary-success",
"value": "oklch(0.96 0.057 179.7)",
@@ -180,12 +312,6 @@
"notice"
]
},
- {
- "name": "--intergalactic-bg-secondary-success-hover",
- "value": "oklch(0.96 0.057 179.7)",
- "description": "Hover state of the secondary background of the message with success information you want to accent.",
- "components": []
- },
{
"name": "--intergalactic-bg-secondary-success-active",
"value": "oklch(0.94 0.074 178.1)",
@@ -193,24 +319,9 @@
"components": []
},
{
- "name": "--intergalactic-bg-secondary-critical",
- "value": "oklch(0.958 0.029 5.7)",
- "description": "Secondary background of the message with critical information you want to accent.",
- "components": [
- "bulk-textarea",
- "notice"
- ]
- },
- {
- "name": "--intergalactic-bg-secondary-critical-hover",
- "value": "oklch(0.958 0.029 5.7)",
- "description": "Hover state of the secondary background of the message with critical information you want to accent.",
- "components": []
- },
- {
- "name": "--intergalactic-bg-secondary-critical-active",
- "value": "oklch(0.938 0.042 8.4)",
- "description": "Active (selected) state of the secondary background of the message with critical information you want to accent.",
+ "name": "--intergalactic-bg-secondary-success-hover",
+ "value": "oklch(0.96 0.057 179.7)",
+ "description": "Hover state of the secondary background of the message with success information you want to accent.",
"components": []
},
{
@@ -221,12 +332,6 @@
"notice"
]
},
- {
- "name": "--intergalactic-bg-secondary-warning-hover",
- "value": "oklch(0.96 0.05 83.1)",
- "description": "Hover state of the secondary background of the message with warning information you want to accent.",
- "components": []
- },
{
"name": "--intergalactic-bg-secondary-warning-active",
"value": "oklch(0.939 0.069 79.8)",
@@ -234,800 +339,1263 @@
"components": []
},
{
- "name": "--intergalactic-bg-secondary-highlight",
- "value": "oklch(0.98 0.013 303.4)",
- "description": "Secondary background of the information you want to highlight.",
- "components": []
- },
- {
- "name": "--intergalactic-bg-secondary-highlight-hover",
- "value": "oklch(0.96 0.026 303.3)",
- "description": "Hover state of the secondary background of the information you want to highlight.",
- "components": []
- },
- {
- "name": "--intergalactic-bg-secondary-highlight-active",
- "value": "oklch(0.94 0.039 303.2)",
- "description": "Active (selected) state of the secondary background of the information you want to highlight.",
+ "name": "--intergalactic-bg-secondary-warning-hover",
+ "value": "oklch(0.96 0.05 83.1)",
+ "description": "Hover state of the secondary background of the message with warning information you want to accent.",
"components": []
},
{
- "name": "--intergalactic-bg-secondary-advertising",
- "value": "oklch(0.98 0.013 303.4)",
- "description": "Secondary background for the advertising message you want to accent.",
- "components": []
+ "name": "--intergalactic-border-critical",
+ "value": "oklch(0.628 0.257 28.1 / 0.243)",
+ "description": "Subtle secondary border in the critical message and invalid input field.",
+ "components": [
+ "notice"
+ ]
},
{
- "name": "--intergalactic-bg-secondary-advertising-hover",
- "value": "oklch(0.96 0.026 303.3)",
- "description": "Hover state of the secondary background for the advertising message you want to accent.",
- "components": []
+ "name": "--intergalactic-border-critical-active",
+ "value": "oklch(0.7 0.21 23)",
+ "description": "Active border in the focused input field with invalid state, and active state of the other components with invalid state.",
+ "components": [
+ "base-trigger",
+ "bulk-textarea",
+ "checkbox",
+ "inline-input",
+ "input",
+ "radio",
+ "textarea",
+ "tooltip"
+ ]
},
{
- "name": "--intergalactic-bg-secondary-advertising-active",
- "value": "oklch(0.94 0.039 303.2)",
- "description": "Active (selected) state of the secondary background for the advertising message you want to accent.",
- "components": []
+ "name": "--intergalactic-border-critical-pattern",
+ "value": "repeating-linear-gradient(315deg, oklch(0.7 0.21 23) 0, oklch(0.7 0.21 23) 1px, transparent 0, transparent 50%)",
+ "description": "Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states.",
+ "components": [
+ "base-components",
+ "bulk-textarea",
+ "radio",
+ "textarea"
+ ]
},
{
- "name": "--intergalactic-bg-highlight-results",
- "value": "oklch(0.94 0.039 303.2)",
- "description": "Highlighting the search results.",
- "components": []
+ "name": "--intergalactic-border-info",
+ "value": "oklch(0.51 0.274 263.6 / 0.222)",
+ "description": "Subtle secondary border in the informational message.",
+ "components": [
+ "notice"
+ ]
},
{
- "name": "--intergalactic-bg-highlight-focus",
- "value": "oklch(0.524 0.266 263.1 / 0.116)",
- "description": "Focusing values in the input.",
+ "name": "--intergalactic-border-info-active",
+ "value": "oklch(0.7 0.131 275.2)",
+ "description": "Active border in focused input filed.",
"components": [
- "date-picker",
- "time-picker"
+ "base-trigger",
+ "bulk-textarea",
+ "checkbox",
+ "color-picker",
+ "feedback-form",
+ "inline-input",
+ "input",
+ "input-tags",
+ "pills",
+ "radio",
+ "tab-line",
+ "textarea"
]
},
{
- "name": "--intergalactic-text-primary",
- "value": "oklch(0.1 0.03 137 / 0.899)",
- "description": "Default body and UI copy; strongest reading emphasis for primary content.",
+ "name": "--intergalactic-border-primary",
+ "value": "oklch(0.137 0.026 175.7 / 0.161)",
+ "description": "Default stroke for interactive controls and structured surfaces.",
"components": [
- "accordion",
- "badge",
- "base-components",
"base-trigger",
- "breadcrumbs",
"bulk-textarea",
"button",
- "card",
"checkbox",
+ "counter",
"d3-chart",
- "data-table",
"date-picker",
+ "divider",
"dropdown",
- "dropdown-menu",
- "errors",
- "feature-popover",
+ "feedback-form",
"fullscreen-modal",
"inline-input",
"input",
- "input-mask",
- "modal",
- "notice",
- "pagination",
"pills",
- "product-head",
"radio",
+ "select",
"side-panel",
- "switch",
+ "slider",
+ "spin",
"tab-line",
"tab-panel",
"textarea",
- "time-picker",
- "tooltip",
- "typography"
+ "time-picker"
]
},
{
- "name": "--intergalactic-text-primary-invert",
- "value": "oklch(0.999 0.001 180 / 0.949)",
- "description": "Inverted version of the primary text.",
+ "name": "--intergalactic-border-primary-invert",
+ "value": "oklch(0.995 0.008 147.4 / 0.391)",
+ "description": "Inverted version of the neutral primary border. Use it for borders on the dark or color background.",
"components": [
- "badge",
- "base-components",
"button",
- "date-picker",
- "dot",
- "feature-highlight",
- "feature-popover",
- "notice-bubble",
- "tag",
- "tooltip",
- "wizard"
+ "divider",
+ "spin"
]
},
{
- "name": "--intergalactic-text-secondary",
- "value": "oklch(0.088 0.026 147.7 / 0.583)",
- "description": "Supporting text: captions, metadata, hints in flowing copy—visually quieter than primary body text.",
+ "name": "--intergalactic-border-secondary",
+ "value": "oklch(0.176 0.033 175.7 / 0.07)",
+ "description": "Secondary hairline stroke for grids, cards, and subtle dividers.",
"components": [
- "breadcrumbs",
- "bulk-textarea",
- "button",
"card",
- "counter",
+ "color-picker",
"d3-chart",
+ "data-table",
"date-picker",
"dropdown",
- "dropdown-menu",
- "flags",
- "fullscreen-modal",
- "pills",
+ "notice",
"slider",
- "switch",
- "tab-panel",
- "time-picker",
- "typography",
- "widget-empty"
+ "tooltip"
]
},
{
- "name": "--intergalactic-text-secondary-invert",
- "value": "oklch(0.997 0.004 165.9 / 0.684)",
- "description": "Inverted version of the secondary text.",
+ "name": "--intergalactic-border-secondary-invert",
+ "value": "oklch(0.995 0.008 145.9 / 0.369)",
+ "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background.",
"components": []
},
{
- "name": "--intergalactic-text-placeholder",
- "value": "oklch(0.098 0.023 157.4 / 0.457)",
- "description": "Placeholder text color for inputs and fields.",
+ "name": "--intergalactic-border-success",
+ "value": "oklch(0.818 0.171 165.4 / 0.531)",
+ "description": "Subtle secondary border in the successful message and input field.",
+ "components": [
+ "notice"
+ ]
+ },
+ {
+ "name": "--intergalactic-border-success-active",
+ "value": "oklch(0.7 0.166 170)",
+ "description": "Active border in the focused input field with valid state.",
"components": [
"base-trigger",
"bulk-textarea",
"inline-input",
"input",
- "input-mask",
"textarea"
]
},
{
- "name": "--intergalactic-text-success",
- "value": "oklch(0.53 0.142 170)",
- "description": "Text associated with success states and data.",
+ "name": "--intergalactic-border-warning",
+ "value": "oklch(0.77 0.174 64.1 / 0.543)",
+ "description": "Subtle secondary border in the warning message.",
+ "components": [
+ "notice"
+ ]
+ },
+ {
+ "name": "--intergalactic-border-warning-active",
+ "value": "oklch(0.7 0.195 50.5)",
+ "description": "Active border in components with warning intention.",
"components": []
},
{
- "name": "--intergalactic-text-success-hover-active",
- "value": "oklch(0.51 0.137 170)",
- "description": "Hover and active states for the text associated with success states and data.",
+ "name": "--intergalactic-brand-facebook",
+ "value": "#1877f2",
+ "description": "Official Facebook brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.",
"components": []
},
{
- "name": "--intergalactic-text-critical",
- "value": "oklch(0.53 0.206 27.3)",
- "description": "Text associated with critical states and data.",
+ "name": "--intergalactic-brand-google-blue",
+ "value": "#1a0dab",
+ "description": "Google brand color for the link.",
"components": []
},
{
- "name": "--intergalactic-text-critical-hover-active",
- "value": "oklch(0.51 0.202 27.8)",
- "description": "Hover and active states for the text associated with critical states and data.",
+ "name": "--intergalactic-brand-google-green",
+ "value": "#016723",
+ "description": "Google green brand color for the link.",
"components": []
},
{
- "name": "--intergalactic-text-link",
- "value": "oklch(0.53 0.21 263)",
- "description": "Default interactive link color for unfollowed links.",
- "components": [
- "button",
- "link",
- "tab-panel",
- "typography"
- ]
+ "name": "--intergalactic-brand-google-my-business",
+ "value": "#1a73e8",
+ "description": "Official Google My Business brand fill for logos and icons in approved placements; follow Google brand guidelines for size and clear space.",
+ "components": []
},
{
- "name": "--intergalactic-text-link-hover-active",
- "value": "oklch(0.51 0.202 263)",
- "description": "Hover and active states for the link text.",
- "components": [
- "button",
- "link",
- "tab-panel",
- "typography"
+ "name": "--intergalactic-brand-gradient",
+ "value": "linear-gradient(180deg, #DCEEEB 0%, #EEE9FF 100%)",
+ "description": "Brand light gradient for branded surfaces.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-brand-instagram",
+ "value": "#e4405f",
+ "description": "Official Instagram brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-brand-linkedIn",
+ "value": "#0a66c2",
+ "description": "Official LinkedIn brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-brand-pinterest",
+ "value": "#bd081c",
+ "description": "Official Pinterest brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-brand-primary",
+ "value": "oklch(0.74 0.17 303)",
+ "description": "Primary brand accent for logos and branded surfaces.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-brand-secondary",
+ "value": "oklch(0.22 0.01 140)",
+ "description": "Secondary brand accent for paired brand treatments (secondary marks, duo-tone lockups).",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-brand-twitter",
+ "value": "#1d9bf0",
+ "description": "Official Twitter brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-brand-youtube",
+ "value": "#ff0000",
+ "description": "Official YouTube brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-data-critical",
+ "value": "oklch(0.64 0.226 24.5)",
+ "description": "Critical data color for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-data-success",
+ "value": "oklch(0.74 0.17 170)",
+ "description": "Success data color for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-data-warning",
+ "value": "oklch(0.74 0.19 53)",
+ "description": "Warning data color for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-grid-bar-chart-base-bg",
+ "value": "oklch(0.96 0.001 180)",
+ "description": "Default background color of a bar in the BarChart.",
+ "components": [
+ "d3-chart",
+ "mini-chart"
]
},
{
- "name": "--intergalactic-text-link-invert",
- "value": "oklch(0.75 0.125 265.3)",
- "description": "Inverted version of the link text. Use on dark background only.",
+ "name": "--intergalactic-chart-grid-bar-chart-hover",
+ "value": "oklch(0.177 0.033 175.6 / 0.028)",
+ "description": "Background color for the hover state of a bar on the chart grid.",
"components": [
- "notice-bubble"
+ "d3-chart"
]
},
{
- "name": "--intergalactic-text-link-invert-hover",
- "value": "oklch(0.85 0.075 265.9)",
- "description": "Hover and active states of the inverted version of the link text. Use on dark background only.",
- "components": []
+ "name": "--intergalactic-chart-grid-border",
+ "value": "#ffffff",
+ "description": "Border for distinguishing data sets and chart dots on the chart grid.",
+ "components": [
+ "d3-chart",
+ "mini-chart"
+ ]
},
{
- "name": "--intergalactic-text-link-visited",
- "value": "oklch(0.53 0.26 296)",
- "description": "Visited link state so users can tell visited destinations apart from default links.",
+ "name": "--intergalactic-chart-grid-line",
+ "value": "oklch(0.95 0.002 180)",
+ "description": "Grid and axis guide lines for charts.",
"components": [
- "link"
+ "d3-chart"
]
},
{
- "name": "--intergalactic-text-hint",
+ "name": "--intergalactic-chart-grid-period-bg",
+ "value": "oklch(0.96 0.001 180)",
+ "description": "Use for highlighting a period on the chart grid.",
+ "components": [
+ "d3-chart"
+ ]
+ },
+ {
+ "name": "--intergalactic-chart-grid-period-pattern",
+ "value": "oklch(0.95 0.002 180)",
+ "description": "Stripe color for diagonal pattern background.",
+ "components": [
+ "d3-chart"
+ ]
+ },
+ {
+ "name": "--intergalactic-chart-grid-text-label",
"value": "oklch(0.088 0.026 147.7 / 0.583)",
- "description": "Supplementary helper text near controls (short guidance), distinct from placeholder text inside inputs.",
+ "description": "Text label on the chart grid.",
"components": [
- "button",
"d3-chart"
]
},
{
- "name": "--intergalactic-text-hint-hover-active",
- "value": "oklch(0.086 0.026 145.8 / 0.605)",
- "description": "Hover and active states of the hint link text.",
+ "name": "--intergalactic-chart-grid-x-axis",
+ "value": "oklch(0.88 0.002 175.6)",
+ "description": "X-axis line on the chart grid.",
"components": [
- "button",
- "typography"
+ "d3-chart"
]
},
{
- "name": "--intergalactic-text-hint-invert",
- "value": "oklch(0.75 0.003 165.9)",
- "description": "Inverted version of the hint link text.",
+ "name": "--intergalactic-chart-grid-y-accent-hover-line",
+ "value": "oklch(0.88 0.002 175.6)",
+ "description": "Accent line for the hover state on the chart grid.",
+ "components": [
+ "d3-chart"
+ ]
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-1",
+ "value": "oklch(0.58 0.168 278.2)",
+ "description": "1 color in the default list of colors for charts.",
+ "components": [
+ "d3-chart",
+ "mini-chart"
+ ]
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-10",
+ "value": "oklch(0.74 0.17 170)",
+ "description": "10 color in the default list of colors for charts.",
"components": []
},
{
- "name": "--intergalactic-text-hint-invert-hover-active",
- "value": "oklch(0.85 0.002 173.3)",
- "description": "Hover and active states of the inverted version of the hint link text.",
+ "name": "--intergalactic-chart-palette-order-11",
+ "value": "oklch(0.74 0.17 72)",
+ "description": "11 color in the default list of colors for charts.",
"components": []
},
{
- "name": "--intergalactic-text-large-secondary",
- "value": "oklch(0.088 0.026 147.7 / 0.583)",
- "description": "Secondary text. Use with font-size ≥20px.",
+ "name": "--intergalactic-chart-palette-order-12",
+ "value": "oklch(0.82 0.18 330)",
+ "description": "12 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-13",
+ "value": "oklch(0.64 0.22 147)",
+ "description": "13 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-14",
+ "value": "oklch(0.82 0.118 303)",
+ "description": "14 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-15",
+ "value": "oklch(0.64 0.226 24.5)",
+ "description": "15 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-16",
+ "value": "oklch(0.64 0.161 170)",
+ "description": "16 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-17",
+ "value": "oklch(0.82 0.088 272.1)",
+ "description": "17 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-18",
+ "value": "oklch(0.74 0.23 146)",
+ "description": "18 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-19",
+ "value": "oklch(0.64 0.16 64)",
+ "description": "19 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-2",
+ "value": "oklch(0.82 0.15 170)",
+ "description": "2 color in the default list of colors for charts.",
"components": [
- "typography"
+ "d3-chart"
]
},
{
- "name": "--intergalactic-text-large-info",
+ "name": "--intergalactic-chart-palette-order-20",
+ "value": "oklch(0.82 0.13 20)",
+ "description": "20 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-21",
+ "value": "oklch(0.53 0.138 59.9)",
+ "description": "21 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-22",
+ "value": "oklch(0.64 0.223 299.3)",
+ "description": "22 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-23",
+ "value": "oklch(0.64 0.262 330)",
+ "description": "23 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-24",
+ "value": "oklch(0.53 0.189 147)",
+ "description": "24 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-3",
+ "value": "oklch(0.74 0.17 303)",
+ "description": "3 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-4",
+ "value": "oklch(0.82 0.18 80)",
+ "description": "4 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-5",
+ "value": "oklch(0.74 0.19 22)",
+ "description": "5 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-6",
+ "value": "oklch(0.82 0.088 272.1)",
+ "description": "6 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-7",
+ "value": "oklch(0.74 0.225 330)",
+ "description": "7 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-8",
+ "value": "oklch(0.82 0.19 143)",
+ "description": "8 color in the default list of colors for charts.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-9",
"value": "oklch(0.53 0.157 279.2)",
- "description": "Link text with font-size ≥20px.",
+ "description": "9 color in the default list of colors for charts.",
"components": [
"d3-chart"
]
},
{
- "name": "--intergalactic-text-large-info-hover-active",
- "value": "oklch(0.51 0.152 279.7)",
- "description": "Hover and active states of the link text with font-size ≥20px.",
+ "name": "--intergalactic-chart-palette-order-null",
+ "value": "oklch(0.9 0.002 177)",
+ "description": "Use it to show null value on the chart.",
+ "components": [
+ "d3-chart"
+ ]
+ },
+ {
+ "name": "--intergalactic-chart-palette-order-other-data",
+ "value": "oklch(0.82 0.002 171.1)",
+ "description": "Use it to indicate voids, missing or some other data on the chart.",
"components": []
},
{
- "name": "--intergalactic-text-large-success",
- "value": "oklch(0.53 0.142 170)",
- "description": "Text with font-size ≥20px associated with success states and data.",
+ "name": "--intergalactic-chart-palette-order-total-amount",
+ "value": "oklch(0.64 0.003 157.8)",
+ "description": "Use it to show total value on the chart.",
"components": []
},
{
- "name": "--intergalactic-text-large-success-hover-active",
- "value": "oklch(0.51 0.137 170)",
- "description": "Hover and active states of the text with font-size ≥20px associated with success states and data.",
+ "name": "--intergalactic-chart-x-axis-accent-data-start-tracking",
+ "value": "oklch(0.889 0.178 168.8 / 0.21)",
+ "description": "Background color for the \"Start tracking\" date on the X-axis of the chart grid.",
"components": []
},
{
- "name": "--intergalactic-text-large-critical",
- "value": "oklch(0.53 0.206 27.3)",
- "description": "Text with font-size ≥20px associated with critical states and data.",
+ "name": "--intergalactic-chart-x-axis-accent-period-active",
+ "value": "oklch(0.176 0.033 175.6 / 0.056)",
+ "description": "Background color for the clickable date on the X-axis of the chart grid.",
"components": []
},
{
- "name": "--intergalactic-text-large-critical-hover-active",
- "value": "oklch(0.51 0.202 27.8)",
- "description": "Hover and active states of the text with font-size ≥20px associated with critical states and data.",
+ "name": "--intergalactic-control-checkbox-bg-normal",
+ "value": "oklch(1 0 0)",
+ "description": "Background color of the Checkbox.",
"components": []
},
{
- "name": "--intergalactic-text-advertising",
- "value": "oklch(0.23 0.113 296)",
- "description": "Promotional or sponsored emphasis (ads, marketing callouts)—use sparingly so it stays noticeable.",
+ "name": "--intergalactic-control-checkbox-bg-selected",
+ "value": "oklch(0.23 0.01 140)",
+ "description": "Background color of the checked Checkbox.",
"components": []
},
{
- "name": "--intergalactic-border-primary",
+ "name": "--intergalactic-control-checkbox-border",
"value": "oklch(0.137 0.026 175.7 / 0.161)",
- "description": "Default stroke for interactive controls and structured surfaces.",
+ "description": "Border color of the Checkbox.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-checkbox-button-bg-hover",
+ "value": "oklch(0.527 0.264 262.9 / 0.039)",
+ "description": "Hover state of the Checkbox button background.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-checkbox-button-bg-normal",
+ "value": "oklch(1 0 0)",
+ "description": "Normal state of the Checkbox button background.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-checkbox-button-bg-selected",
+ "value": "oklch(0.524 0.266 263.1 / 0.116)",
+ "description": "Selected state of the Checkbox button background.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-checkbox-button-bg-selected-hover",
+ "value": "oklch(0.524 0.266 263.1 / 0.116)",
+ "description": "Hover for a selected state of the Checkbox button background.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-checkbox-button-border",
+ "value": "oklch(0.137 0.026 175.7 / 0.161)",
+ "description": "Border color of the Checkbox button in its normal state.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-checkbox-button-border-selected",
+ "value": "oklch(0.7 0.131 275.2)",
+ "description": "Border color of the Checkbox button in its active state.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-radio-bg-normal",
+ "value": "oklch(1 0 0)",
+ "description": "Background color of the Radio.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-radio-bg-selected",
+ "value": "oklch(0.23 0.01 140)",
+ "description": "Selected state of the Radio background.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-radio-border",
+ "value": "oklch(0.137 0.026 175.7 / 0.161)",
+ "description": "Border color of the Radio.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-primary-advertising",
+ "value": "oklch(0.64 0.223 299.3)",
+ "description": "Background of the advertising primary control.",
+ "components": [
+ "wizard"
+ ]
+ },
+ {
+ "name": "--intergalactic-control-primary-advertising-active",
+ "value": "oklch(0.58 0.254 297.1)",
+ "description": "Active (selected) state of the advertising primary control.",
+ "components": [
+ "wizard"
+ ]
+ },
+ {
+ "name": "--intergalactic-control-primary-advertising-hover",
+ "value": "oklch(0.6 0.244 297.8)",
+ "description": "Hover state of the advertising primary control.",
+ "components": [
+ "wizard"
+ ]
+ },
+ {
+ "name": "--intergalactic-control-primary-brand",
+ "value": "oklch(0.64 0.223 299.3)",
+ "description": "Background of the primary brand colored control.",
+ "components": [
+ "button"
+ ]
+ },
+ {
+ "name": "--intergalactic-control-primary-brand-active",
+ "value": "oklch(0.58 0.254 297.1)",
+ "description": "Active state of the primary brand colored control.",
+ "components": [
+ "button"
+ ]
+ },
+ {
+ "name": "--intergalactic-control-primary-brand-hover",
+ "value": "oklch(0.6 0.244 297.8)",
+ "description": "Hover state of the primary brand colored control.",
+ "components": [
+ "button"
+ ]
+ },
+ {
+ "name": "--intergalactic-control-primary-critical",
+ "value": "oklch(0.64 0.226 24.5)",
+ "description": "Background of the primary control with danger theme.",
+ "components": [
+ "button",
+ "checkbox"
+ ]
+ },
+ {
+ "name": "--intergalactic-control-primary-critical-active",
+ "value": "oklch(0.58 0.215 26)",
+ "description": "Active (selected) state of the primary control with danger theme.",
+ "components": [
+ "button"
+ ]
+ },
+ {
+ "name": "--intergalactic-control-primary-critical-hover",
+ "value": "oklch(0.6 0.219 25.5)",
+ "description": "Hover state of the primary control with danger theme.",
+ "components": [
+ "button"
+ ]
+ },
+ {
+ "name": "--intergalactic-control-primary-info",
+ "value": "oklch(0.23 0.01 140)",
+ "description": "Background of the regular primary control.",
"components": [
- "base-trigger",
- "bulk-textarea",
"button",
"checkbox",
- "counter",
- "d3-chart",
- "date-picker",
- "divider",
"dropdown",
- "feedback-form",
- "fullscreen-modal",
- "inline-input",
- "input",
- "pills",
+ "feature-highlight",
"radio",
"select",
- "side-panel",
"slider",
- "spin",
- "tab-line",
- "tab-panel",
- "textarea",
- "time-picker"
+ "switch"
+ ]
+ },
+ {
+ "name": "--intergalactic-control-primary-info-active",
+ "value": "oklch(0 0 140)",
+ "description": "Active (selected) state of the regular primary control.",
+ "components": [
+ "button"
+ ]
+ },
+ {
+ "name": "--intergalactic-control-primary-info-hover",
+ "value": "oklch(0.32 0.007 140)",
+ "description": "Hover state of the regular primary control.",
+ "components": [
+ "button",
+ "slider"
+ ]
+ },
+ {
+ "name": "--intergalactic-control-primary-invert",
+ "value": "oklch(1 0 0)",
+ "description": "Inverted background of the primary control.",
+ "components": [
+ "button"
+ ]
+ },
+ {
+ "name": "--intergalactic-control-primary-invert-active",
+ "value": "oklch(0.94 0.002 180)",
+ "description": "Active (selected) state of the inverted primary control.",
+ "components": [
+ "button"
]
},
{
- "name": "--intergalactic-border-primary-invert",
- "value": "oklch(0.995 0.008 147.4 / 0.391)",
- "description": "Inverted version of the neutral primary border. Use it for borders on the dark or color background.",
+ "name": "--intergalactic-control-primary-invert-hover",
+ "value": "oklch(0.96 0.001 180)",
+ "description": "Hover state of the inverted primary control.",
"components": [
- "button",
- "divider",
- "spin"
+ "button"
]
},
{
- "name": "--intergalactic-border-secondary",
- "value": "oklch(0.176 0.033 175.7 / 0.07)",
- "description": "Secondary hairline stroke for grids, cards, and subtle dividers.",
+ "name": "--intergalactic-control-primary-success",
+ "value": "oklch(0.64 0.161 170)",
+ "description": "Background of the primary control with successful theme.",
"components": [
- "card",
- "color-picker",
- "d3-chart",
- "data-table",
- "date-picker",
- "dropdown",
- "notice",
- "slider",
- "tooltip"
+ "button",
+ "switch"
]
},
{
- "name": "--intergalactic-border-secondary-invert",
- "value": "oklch(0.995 0.008 145.9 / 0.369)",
- "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background.",
- "components": []
+ "name": "--intergalactic-control-primary-success-active",
+ "value": "oklch(0.58 0.151 170)",
+ "description": "Active (selected) state of the primary control with successful theme.",
+ "components": [
+ "button"
+ ]
},
{
- "name": "--intergalactic-border-info",
- "value": "oklch(0.51 0.274 263.6 / 0.222)",
- "description": "Subtle secondary border in the informational message.",
+ "name": "--intergalactic-control-primary-success-hover",
+ "value": "oklch(0.6 0.155 170)",
+ "description": "Hover state of the primary control with successful theme.",
"components": [
- "notice"
+ "button"
]
},
{
- "name": "--intergalactic-border-info-active",
- "value": "oklch(0.7 0.131 275.2)",
- "description": "Active border in focused input filed.",
+ "name": "--intergalactic-control-secondary-info",
+ "value": "oklch(0.527 0.264 262.9 / 0.039)",
+ "description": "Background of the accent secondary control.",
"components": [
"base-trigger",
- "bulk-textarea",
- "checkbox",
- "color-picker",
- "feedback-form",
- "inline-input",
- "input",
- "input-tags",
- "pills",
- "radio",
- "tab-line",
- "textarea"
+ "button",
+ "pills"
]
},
{
- "name": "--intergalactic-border-success",
- "value": "oklch(0.818 0.171 165.4 / 0.531)",
- "description": "Subtle secondary border in the successful message and input field.",
+ "name": "--intergalactic-control-secondary-info-active",
+ "value": "oklch(0.524 0.266 263.1 / 0.116)",
+ "description": "Active (selected) state of the accent secondary control.",
"components": [
- "notice"
+ "base-trigger",
+ "button"
]
},
{
- "name": "--intergalactic-border-success-active",
- "value": "oklch(0.7 0.166 170)",
- "description": "Active border in the focused input field with valid state.",
+ "name": "--intergalactic-control-secondary-info-hover",
+ "value": "oklch(0.525 0.265 263 / 0.077)",
+ "description": "Hover state of the accent secondary control.",
"components": [
"base-trigger",
- "bulk-textarea",
- "inline-input",
- "input",
- "textarea"
+ "button"
]
},
{
- "name": "--intergalactic-border-critical",
- "value": "oklch(0.628 0.257 28.1 / 0.243)",
- "description": "Subtle secondary border in the critical message and invalid input field.",
+ "name": "--intergalactic-control-secondary-invert",
+ "value": "oklch(0.969 0.057 140 / 0.118)",
+ "description": "Background of the inverted version of the secondary control.",
"components": [
- "notice"
+ "button"
]
},
{
- "name": "--intergalactic-border-critical-active",
- "value": "oklch(0.7 0.21 23)",
- "description": "Active border in the focused input field with invalid state, and active state of the other components with invalid state.",
+ "name": "--intergalactic-control-secondary-invert-active",
+ "value": "oklch(0.983 0.03 140 / 0.183)",
+ "description": "Active (selected) state of the inverted version of the secondary control.",
"components": [
- "base-trigger",
- "bulk-textarea",
- "checkbox",
- "inline-input",
- "input",
- "radio",
- "textarea",
- "tooltip"
+ "button"
]
},
{
- "name": "--intergalactic-border-critical-pattern",
- "value": "repeating-linear-gradient(315deg, oklch(0.7 0.21 23) 0, oklch(0.7 0.21 23) 1px, transparent 0, transparent 50%)",
- "description": "Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states.",
+ "name": "--intergalactic-control-secondary-invert-hover",
+ "value": "oklch(0.976 0.043 140 / 0.145)",
+ "description": "Hover state of the inverted version of the secondary control.",
"components": [
- "base-components",
- "bulk-textarea",
- "radio",
- "textarea"
+ "button"
]
},
{
- "name": "--intergalactic-border-warning",
- "value": "oklch(0.77 0.174 64.1 / 0.543)",
- "description": "Subtle secondary border in the warning message.",
+ "name": "--intergalactic-control-secondary-neutral",
+ "value": "oklch(0.177 0.033 175.6 / 0.028)",
+ "description": "Background of the regular secondary control.",
"components": [
- "notice"
+ "button"
]
},
{
- "name": "--intergalactic-border-warning-active",
- "value": "oklch(0.7 0.195 50.5)",
- "description": "Active border in components with warning intention.",
- "components": []
- },
- {
- "name": "--intergalactic-border-tooltip-invert",
- "value": "oklch(0.995 0.008 145.9 / 0.369)",
- "description": "Border of the Tooltip with dark theme.",
+ "name": "--intergalactic-control-secondary-neutral-active",
+ "value": "oklch(0.176 0.033 175.7 / 0.084)",
+ "description": "Active (selected) state of the regular secondary control.",
"components": [
- "base-components",
- "tooltip"
+ "button"
]
},
{
- "name": "--intergalactic-border-table-accent",
- "value": "oklch(0.137 0.026 175.7 / 0.161)",
- "description": "Accent borders in the Table: for the accordion in the table and for the header of the secondary table.",
+ "name": "--intergalactic-control-secondary-neutral-hover",
+ "value": "oklch(0.176 0.033 175.6 / 0.056)",
+ "description": "Hover state of the regular secondary control.",
"components": [
- "data-table"
+ "button"
]
},
{
- "name": "--intergalactic-border-date-picker-range-comparison",
- "value": "oklch(0.7 0.191 301.5)",
- "description": "Border color of the second period for the comparison mode in the DatePicker.",
+ "name": "--intergalactic-control-select-trigger-active",
+ "value": "oklch(1 0 0)",
+ "description": "Background of the Select trigger in its active state.",
"components": []
},
{
- "name": "--intergalactic-control-switch-bg",
+ "name": "--intergalactic-control-select-trigger-hover",
+ "value": "oklch(0.98 0.001 180)",
+ "description": "Background of the Select trigger in its hover state.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-select-trigger-normal",
+ "value": "oklch(1 0 0)",
+ "description": "Background of the Select trigger in its normal state.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-slider-bar-bg",
+ "value": "oklch(0.96 0.001 180)",
+ "description": "Background of the Slider bar.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-slider-bar-bg-hover",
"value": "oklch(0.88 0.002 175.6)",
- "description": "Subtle background of the Switch control.",
- "components": [
- "switch"
- ]
+ "description": "Hover state of the Slider bar.",
+ "components": []
},
{
- "name": "--intergalactic-control-primary-info",
+ "name": "--intergalactic-control-slider-bar-value-bg",
"value": "oklch(0.23 0.01 140)",
- "description": "Background of the regular primary control.",
- "components": [
- "button",
- "checkbox",
- "dropdown",
- "feature-highlight",
- "radio",
- "select",
- "slider",
- "switch"
- ]
+ "description": "Filled part of the Slider bar.",
+ "components": []
},
{
- "name": "--intergalactic-control-primary-info-hover",
+ "name": "--intergalactic-control-slider-knob-bg",
+ "value": "#ffffff",
+ "description": "Knob fill color of the Slider.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-slider-knob-border",
+ "value": "oklch(0.23 0.01 140)",
+ "description": "Knob border color of the Slider in its normal state.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-slider-knob-border-hover",
"value": "oklch(0.32 0.007 140)",
- "description": "Hover state of the regular primary control.",
- "components": [
- "button",
- "slider"
- ]
+ "description": "Knob border color of the Slider in its hover state.",
+ "components": []
},
{
- "name": "--intergalactic-control-primary-info-active",
- "value": "oklch(0 0 140)",
- "description": "Active (selected) state of the regular primary control.",
- "components": [
- "button"
- ]
+ "name": "--intergalactic-control-slider-rating-icon",
+ "value": "oklch(0.7 0.003 162.2)",
+ "description": "Icon color for the SliderRating component in its normal state.",
+ "components": []
},
{
- "name": "--intergalactic-control-primary-success",
- "value": "oklch(0.64 0.161 170)",
- "description": "Background of the primary control with successful theme.",
+ "name": "--intergalactic-control-slider-rating-icon-hover-active",
+ "value": "oklch(0.66 0.212 300.1)",
+ "description": "Icon color for the SliderRating component in its hovered and active states.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-switch-bg",
+ "value": "oklch(0.74 0.003 165.2)",
+ "description": "Subtle background of the Switch control.",
"components": [
- "button",
"switch"
]
},
{
- "name": "--intergalactic-control-primary-success-hover",
- "value": "oklch(0.6 0.155 170)",
- "description": "Hover state of the primary control with successful theme.",
- "components": [
- "button"
- ]
+ "name": "--intergalactic-control-switch-bg-info-active",
+ "value": "oklch(0.23 0.01 140)",
+ "description": "Active background of the Switch control.",
+ "components": []
},
{
- "name": "--intergalactic-control-primary-success-active",
- "value": "oklch(0.58 0.151 170)",
- "description": "Active (selected) state of the primary control with successful theme.",
- "components": [
- "button"
- ]
+ "name": "--intergalactic-control-switch-bg-success-active",
+ "value": "oklch(0.64 0.161 170)",
+ "description": "Active background of the Switch control.",
+ "components": []
},
{
- "name": "--intergalactic-control-primary-critical",
- "value": "oklch(0.64 0.226 24.5)",
- "description": "Background of the primary control with danger theme.",
+ "name": "--intergalactic-control-switch-handle",
+ "value": "#ffffff",
+ "description": "Handle color of the Switch control.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-tertiary-info",
+ "value": "transparent",
+ "description": "Background of the accent and link-lookalike tertiary control.",
"components": [
- "button",
- "checkbox"
+ "button"
]
},
{
- "name": "--intergalactic-control-primary-critical-hover",
- "value": "oklch(0.6 0.219 25.5)",
- "description": "Hover state of the primary control with danger theme.",
+ "name": "--intergalactic-control-tertiary-info-active",
+ "value": "oklch(0.524 0.266 263.1 / 0.116)",
+ "description": "Active (selected) state of the accent and link-lookalike tertiary control.",
"components": [
"button"
]
},
{
- "name": "--intergalactic-control-primary-critical-active",
- "value": "oklch(0.58 0.215 26)",
- "description": "Active (selected) state of the primary control with danger theme.",
+ "name": "--intergalactic-control-tertiary-info-hover",
+ "value": "oklch(0.525 0.265 263 / 0.077)",
+ "description": "Hover state of the accent and link-lookalike tertiary control.",
"components": [
"button"
]
},
{
- "name": "--intergalactic-control-primary-brand",
- "value": "oklch(0.64 0.223 299.3)",
- "description": "Background of the primary brand colored control.",
+ "name": "--intergalactic-control-tertiary-invert",
+ "value": "transparent",
+ "description": "Background of the inverted version of the tertiary control.",
"components": [
"button"
]
},
{
- "name": "--intergalactic-control-primary-brand-hover",
- "value": "oklch(0.6 0.244 297.8)",
- "description": "Hover state of the primary brand colored control.",
+ "name": "--intergalactic-control-tertiary-invert-active",
+ "value": "oklch(0.983 0.03 140 / 0.183)",
+ "description": "Active (selected) state of the inverted version of the tertiary control.",
"components": [
"button"
]
},
{
- "name": "--intergalactic-control-primary-brand-active",
- "value": "oklch(0.58 0.254 297.1)",
- "description": "Active state of the primary brand colored control.",
+ "name": "--intergalactic-control-tertiary-invert-hover",
+ "value": "oklch(0.976 0.043 140 / 0.145)",
+ "description": "Hover state of the inverted version of the tertiary control.",
"components": [
"button"
]
},
{
- "name": "--intergalactic-control-primary-advertising",
- "value": "oklch(0.23 0.01 140)",
- "description": "Background of the advertising primary control.",
+ "name": "--intergalactic-control-tertiary-neutral",
+ "value": "transparent",
+ "description": "Background of the regular tertiary control.",
"components": [
- "wizard"
+ "button"
]
},
{
- "name": "--intergalactic-control-primary-advertising-hover",
- "value": "oklch(0.36 0.005 140)",
- "description": "Hover state of the advertising primary control.",
+ "name": "--intergalactic-control-tertiary-neutral-active",
+ "value": "oklch(0.176 0.033 175.7 / 0.084)",
+ "description": "Active (selected) state of the regular tertiary control.",
"components": [
- "wizard"
+ "button",
+ "color-picker"
]
},
{
- "name": "--intergalactic-control-primary-advertising-active",
- "value": "oklch(0.4 0.004 140)",
- "description": "Active (selected) state of the advertising primary control.",
+ "name": "--intergalactic-control-tertiary-neutral-hover",
+ "value": "oklch(0.176 0.033 175.6 / 0.056)",
+ "description": "Hover state of the regular tertiary control.",
"components": [
- "wizard"
+ "button",
+ "color-picker"
]
},
{
- "name": "--intergalactic-control-primary-invert",
+ "name": "--intergalactic-control-text-primary",
+ "value": "oklch(0.1 0.03 137 / 0.899)",
+ "description": "Primary text color for form controls.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-text-primary-invert",
+ "value": "oklch(0.999 0.001 180 / 0.949)",
+ "description": "Inverted primary text color for form controls.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-text-secondary",
+ "value": "oklch(0.088 0.026 147.7 / 0.583)",
+ "description": "Secondary text color for form controls.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-control-text-tertiary",
+ "value": "oklch(0.088 0.026 147.7 / 0.583)",
+ "description": "Tertiary text color for form controls.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-date-picker-border-range-comparison",
+ "value": "oklch(0.7 0.191 301.5)",
+ "description": "Border color of the second period for the comparison mode in the DatePicker.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-date-picker-cell",
"value": "oklch(1 0 0)",
- "description": "Inverted background of the primary control.",
+ "description": "Default date-picker cell background.",
"components": [
- "button"
+ "date-picker"
]
},
{
- "name": "--intergalactic-control-primary-invert-hover",
- "value": "oklch(0.96 0.001 180)",
- "description": "Hover state of the inverted primary control.",
+ "name": "--intergalactic-date-picker-cell-active",
+ "value": "oklch(0.64 0.152 276.7)",
+ "description": "Active (selected) date-picker cell background.",
"components": [
- "button"
+ "date-picker"
]
},
{
- "name": "--intergalactic-control-primary-invert-active",
- "value": "oklch(0.94 0.002 180)",
- "description": "Active (selected) state of the inverted primary control.",
+ "name": "--intergalactic-date-picker-cell-active-hover",
+ "value": "oklch(0.6 0.166 277.7)",
+ "description": "Hover for the active (selected) date-picker cell background.",
"components": [
- "button"
+ "date-picker"
]
},
{
- "name": "--intergalactic-control-secondary-neutral",
- "value": "oklch(0.177 0.033 175.6 / 0.028)",
- "description": "Background of the regular secondary control.",
+ "name": "--intergalactic-date-picker-cell-comparison-active",
+ "value": "oklch(0.64 0.223 299.3)",
+ "description": "Active (selected) date-picker cell background for comparison periods.",
"components": [
- "button"
+ "date-picker"
]
},
{
- "name": "--intergalactic-control-secondary-neutral-hover",
- "value": "oklch(0.176 0.033 175.6 / 0.056)",
- "description": "Hover state of the regular secondary control.",
+ "name": "--intergalactic-date-picker-cell-comparison-active-hover",
+ "value": "oklch(0.6 0.244 297.8)",
+ "description": "Hover for the active (selected) date-picker cell background for comparison periods.",
"components": [
- "button"
+ "date-picker"
]
},
{
- "name": "--intergalactic-control-secondary-neutral-active",
- "value": "oklch(0.176 0.033 175.7 / 0.084)",
- "description": "Active (selected) state of the regular secondary control.",
+ "name": "--intergalactic-date-picker-cell-current",
+ "value": "oklch(0.104 0.023 162.3 / 0.385)",
+ "description": "Color for marking the cell with the current date, month or year in the date-picker.",
"components": [
- "button"
+ "date-picker"
]
},
{
- "name": "--intergalactic-control-secondary-info",
- "value": "oklch(0.527 0.264 262.9 / 0.039)",
- "description": "Background of the accent secondary control.",
+ "name": "--intergalactic-date-picker-cell-current-invert",
+ "value": "oklch(0.995 0.008 147.4 / 0.391)",
+ "description": "Color for marking the active cell with the current date, month or year in the date-picker.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-date-picker-cell-hover",
+ "value": "oklch(0.98 0.001 180)",
+ "description": "Hover state of the default date-picker cell background.",
"components": [
- "base-trigger",
- "button",
- "pills"
+ "date-picker"
]
},
{
- "name": "--intergalactic-control-secondary-info-hover",
- "value": "oklch(0.525 0.265 263 / 0.077)",
- "description": "Hover state of the accent secondary control.",
+ "name": "--intergalactic-date-picker-cell-range",
+ "value": "oklch(0.959 0.021 267.8)",
+ "description": "Background for the cell which is included in the date range in the date-picker.",
"components": [
- "base-trigger",
- "button"
+ "date-picker"
]
},
{
- "name": "--intergalactic-control-secondary-info-active",
- "value": "oklch(0.524 0.266 263.1 / 0.116)",
- "description": "Active (selected) state of the accent secondary control.",
+ "name": "--intergalactic-date-picker-cell-range-hover",
+ "value": "oklch(0.898 0.054 268.3)",
+ "description": "Hover state of the background for the cell which is included in the date range in the date-picker.",
"components": [
- "base-trigger",
- "button"
+ "date-picker"
]
},
{
- "name": "--intergalactic-control-secondary-invert",
- "value": "oklch(0.969 0.057 140 / 0.118)",
- "description": "Background of the inverted version of the secondary control.",
+ "name": "--intergalactic-dot-bg",
+ "value": "oklch(0.728 0.188 51.8)",
+ "description": "Background color of the Dot.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-dot-text",
+ "value": "oklch(0.999 0.001 180 / 0.949)",
+ "description": "Text color of the Dot.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-dropdown-menu-item",
+ "value": "oklch(1 0 0)",
+ "description": "Default background color for the list item in the dropdown-menu.",
"components": [
- "button"
+ "dropdown"
]
},
{
- "name": "--intergalactic-control-secondary-invert-hover",
- "value": "oklch(0.976 0.043 140 / 0.145)",
- "description": "Hover state of the inverted version of the secondary control.",
+ "name": "--intergalactic-dropdown-menu-item-hover",
+ "value": "oklch(0.177 0.033 175.6 / 0.028)",
+ "description": "Hover state of the default background color for the list item in the dropdown-menu.",
"components": [
- "button"
+ "dropdown"
]
},
{
- "name": "--intergalactic-control-secondary-invert-active",
- "value": "oklch(0.983 0.03 140 / 0.183)",
- "description": "Active (selected) state of the inverted version of the secondary control.",
+ "name": "--intergalactic-dropdown-menu-item-selected",
+ "value": "oklch(0.525 0.265 263 / 0.077)",
+ "description": "Active (selected) state of the default background color for the list item in the dropdown-menu.",
"components": [
- "button"
+ "dropdown",
+ "select"
]
},
{
- "name": "--intergalactic-control-tertiary-neutral",
- "value": "transparent",
- "description": "Background of the regular tertiary control.",
+ "name": "--intergalactic-dropdown-menu-item-selected-border",
+ "value": "oklch(0.23 0.01 140)",
+ "description": "Border color of the selected item in the DropdownMenu.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-dropdown-menu-item-selected-hover",
+ "value": "oklch(0.52 0.268 263.2 / 0.191)",
+ "description": "Hover state for the selected state of the default background color for the list item in the dropdown-menu.",
"components": [
- "button"
+ "dropdown",
+ "select"
]
},
{
- "name": "--intergalactic-control-tertiary-neutral-hover",
- "value": "oklch(0.176 0.033 175.6 / 0.056)",
- "description": "Hover state of the regular tertiary control.",
+ "name": "--intergalactic-feature-popover-bg-accent",
+ "value": "oklch(0.88 0.078 303)",
+ "description": "Background of the FeaturePopover with accent theme.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-feature-popover-bg-neutral",
+ "value": "oklch(0.23 0.01 140)",
+ "description": "Background of the FeaturePopover with neutral theme.",
"components": [
- "button",
- "color-picker"
+ "feature-popover"
]
},
{
- "name": "--intergalactic-control-tertiary-neutral-active",
- "value": "oklch(0.176 0.033 175.7 / 0.084)",
- "description": "Active (selected) state of the regular tertiary control.",
+ "name": "--intergalactic-feature-popover-dot-accent",
+ "value": "oklch(0.88 0.078 303)",
+ "description": "Fill color of the FeaturePopover.Spot with accent theme.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-feature-popover-dot-neutral",
+ "value": "oklch(0.88 0.078 303)",
+ "description": "Fill color of the FeaturePopover.Spot with neutral theme.",
"components": [
- "button",
- "color-picker"
+ "feature-popover"
]
},
{
- "name": "--intergalactic-control-tertiary-info",
- "value": "transparent",
- "description": "Background of the accent and link-lookalike tertiary control.",
+ "name": "--intergalactic-feature-popover-dot-outer-border-accent",
+ "value": "oklch(0.88 0.078 303)",
+ "description": "Outer border color of the FeaturePopover.Spot with accent theme.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-feature-popover-dot-outer-border-neutral",
+ "value": "oklch(0.88 0.078 303)",
+ "description": "Outer border color of the FeaturePopover.Spot with neutral theme.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-feature-popover-text",
+ "value": "oklch(0.1 0.03 137 / 0.899)",
+ "description": "Text color of the FeaturePopover.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-feature-popover-text-invert",
+ "value": "oklch(0.999 0.001 180 / 0.949)",
+ "description": "Inverted text color of the FeaturePopover.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-footer-bg",
+ "value": "oklch(0.97 0.001 180)",
+ "description": "Background fill for the product page footer.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-header-bg",
+ "value": "oklch(0.97 0.001 180)",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-header-border-primary",
+ "value": "oklch(0.137 0.026 175.7 / 0.161)",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-header-border-secondary",
+ "value": "oklch(0.137 0.026 175.7 / 0.161)",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-icon-non-interactive",
+ "value": "oklch(0.094 0.024 153.9 / 0.503)",
+ "description": "Color for the default non-interactive icon.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-icon-primary-critical",
+ "value": "oklch(0.552 0.226 28.7 / 0.848)",
+ "description": "Semantic error icon.",
"components": [
- "button"
+ "notice"
]
},
{
- "name": "--intergalactic-control-tertiary-info-hover",
- "value": "oklch(0.525 0.265 263 / 0.077)",
- "description": "Hover state of the accent and link-lookalike tertiary control.",
+ "name": "--intergalactic-icon-primary-critical-hover-active",
+ "value": "oklch(0.511 0.209 28.7 / 0.91)",
+ "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.",
"components": [
- "button"
+ "notice"
]
},
{
- "name": "--intergalactic-control-tertiary-info-active",
- "value": "oklch(0.524 0.266 263.1 / 0.116)",
- "description": "Active (selected) state of the accent and link-lookalike tertiary control.",
- "components": [
- "button"
- ]
+ "name": "--intergalactic-icon-primary-info",
+ "value": "oklch(0.372 0.253 264.1 / 0.598)",
+ "description": "Primary link-lookalike icon.",
+ "components": []
},
{
- "name": "--intergalactic-control-tertiary-invert",
- "value": "transparent",
- "description": "Background of the inverted version of the tertiary control.",
- "components": [
- "button"
- ]
+ "name": "--intergalactic-icon-primary-info-hover-active",
+ "value": "oklch(0.322 0.222 264.1 / 0.641)",
+ "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.",
+ "components": []
},
{
- "name": "--intergalactic-control-tertiary-invert-hover",
- "value": "oklch(0.976 0.043 140 / 0.145)",
- "description": "Hover state of the inverted version of the tertiary control.",
+ "name": "--intergalactic-icon-primary-invert",
+ "value": "oklch(0.998 0.003 173.3 / 0.808)",
+ "description": "Inverted version of the primary icon.",
"components": [
- "button"
+ "carousel"
]
},
{
- "name": "--intergalactic-control-tertiary-invert-active",
- "value": "oklch(0.983 0.03 140 / 0.183)",
- "description": "Active (selected) state of the inverted version of the tertiary control.",
- "components": [
- "button"
- ]
+ "name": "--intergalactic-icon-primary-invert-hover-active",
+ "value": "oklch(0.998 0.003 169.6 / 0.746)",
+ "description": "Hover and active (selected) states of the inverted version of the primary icon.",
+ "components": []
},
{
"name": "--intergalactic-icon-primary-neutral",
@@ -1052,18 +1620,6 @@
"notice"
]
},
- {
- "name": "--intergalactic-icon-primary-info",
- "value": "oklch(0.372 0.253 264.1 / 0.598)",
- "description": "Primary link-lookalike icon.",
- "components": []
- },
- {
- "name": "--intergalactic-icon-primary-info-hover-active",
- "value": "oklch(0.322 0.222 264.1 / 0.641)",
- "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.",
- "components": []
- },
{
"name": "--intergalactic-icon-primary-success",
"value": "oklch(0.595 0.124 165.4)",
@@ -1080,22 +1636,6 @@
"notice"
]
},
- {
- "name": "--intergalactic-icon-primary-critical",
- "value": "oklch(0.552 0.226 28.7 / 0.848)",
- "description": "Semantic error icon.",
- "components": [
- "notice"
- ]
- },
- {
- "name": "--intergalactic-icon-primary-critical-hover-active",
- "value": "oklch(0.511 0.209 28.7 / 0.91)",
- "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.",
- "components": [
- "notice"
- ]
- },
{
"name": "--intergalactic-icon-primary-warning",
"value": "oklch(0.728 0.188 51.8)",
@@ -1114,17 +1654,27 @@
]
},
{
- "name": "--intergalactic-icon-primary-invert",
- "value": "oklch(0.998 0.003 173.3 / 0.808)",
- "description": "Inverted version of the primary icon.",
- "components": [
- "carousel"
- ]
+ "name": "--intergalactic-icon-secondary-critical",
+ "value": "oklch(0.628 0.257 28.9 / 0.652)",
+ "description": "Softer error icon for dense UI or inline hints where the surface should stay calm.",
+ "components": []
},
{
- "name": "--intergalactic-icon-primary-invert-hover-active",
- "value": "oklch(0.998 0.003 169.6 / 0.746)",
- "description": "Hover and active (selected) states of the inverted version of the primary icon.",
+ "name": "--intergalactic-icon-secondary-critical-hover-active",
+ "value": "oklch(0.628 0.257 28.5 / 0.763)",
+ "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.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-icon-secondary-info",
+ "value": "oklch(0.424 0.269 264.2 / 0.469)",
+ "description": "Secondary link-lookalike icon.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-icon-secondary-info-hover-active",
+ "value": "oklch(0.66 0.145 276.2)",
+ "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.",
"components": []
},
{
@@ -1152,18 +1702,6 @@
"input-number"
]
},
- {
- "name": "--intergalactic-icon-secondary-info",
- "value": "oklch(0.424 0.269 264.2 / 0.469)",
- "description": "Secondary link-lookalike icon.",
- "components": []
- },
- {
- "name": "--intergalactic-icon-secondary-info-hover-active",
- "value": "oklch(0.66 0.145 276.2)",
- "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.",
- "components": []
- },
{
"name": "--intergalactic-icon-secondary-success",
"value": "oklch(0.711 0.146 166.9)",
@@ -1180,18 +1718,6 @@
"inline-input"
]
},
- {
- "name": "--intergalactic-icon-secondary-critical",
- "value": "oklch(0.628 0.257 28.9 / 0.652)",
- "description": "Softer error icon for dense UI or inline hints where the surface should stay calm.",
- "components": []
- },
- {
- "name": "--intergalactic-icon-secondary-critical-hover-active",
- "value": "oklch(0.628 0.257 28.5 / 0.763)",
- "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.",
- "components": []
- },
{
"name": "--intergalactic-icon-secondary-warning",
"value": "oklch(0.701 0.191 48.1)",
@@ -1205,33 +1731,21 @@
"components": []
},
{
- "name": "--intergalactic-icon-non-interactive",
- "value": "oklch(0.094 0.024 153.9 / 0.503)",
- "description": "Color for the default non-interactive icon.",
- "components": []
- },
- {
- "name": "--intergalactic-illustration-red",
- "value": "oklch(0.737 0.192 22.1)",
- "description": "⚠️ Use only for illustrations.",
- "components": []
- },
- {
- "name": "--intergalactic-illustration-orange",
- "value": "oklch(0.823 0.154 61.9)",
+ "name": "--intergalactic-illustration-blue",
+ "value": "oklch(0.84 0.081 271.5)",
"description": "⚠️ Use only for illustrations.",
"components": []
},
{
- "name": "--intergalactic-illustration-yellow",
- "value": "oklch(0.924 0.109 96.8)",
- "description": "⚠️ Use only for illustrations.",
+ "name": "--intergalactic-illustration-border",
+ "value": "oklch(0.53 0.004 149.6)",
+ "description": "Border color for illustrations.",
"components": []
},
{
- "name": "--intergalactic-illustration-salad",
- "value": "oklch(0.922 0.098 132.7)",
- "description": "⚠️ Use only for illustrations.",
+ "name": "--intergalactic-illustration-gray",
+ "value": "oklch(0.9 0.002 177)",
+ "description": "Gray fill color for illustrations.",
"components": []
},
{
@@ -1241,1201 +1755,1133 @@
"components": []
},
{
- "name": "--intergalactic-illustration-blue",
- "value": "oklch(0.84 0.081 271.5)",
- "description": "⚠️ Use only for illustrations.",
- "components": []
- },
- {
- "name": "--intergalactic-illustration-violet",
- "value": "oklch(0.709 0.186 301.9)",
- "description": "⚠️ Use only for illustrations.",
- "components": []
- },
- {
- "name": "--intergalactic-illustration-pink",
- "value": "oklch(0.76 0.214 330)",
- "description": "⚠️ Use only for illustrations.",
- "components": []
- },
- {
- "name": "--intergalactic-date-picker-cell",
- "value": "oklch(1 0 0)",
- "description": "Default date-picker cell background.",
- "components": [
- "date-picker"
- ]
- },
- {
- "name": "--intergalactic-date-picker-cell-current",
- "value": "oklch(0.104 0.023 162.3 / 0.385)",
- "description": "Color for marking the cell with the current date, month or year in the date-picker.",
- "components": [
- "date-picker"
- ]
- },
- {
- "name": "--intergalactic-date-picker-cell-current-invert",
- "value": "oklch(0.995 0.008 147.4 / 0.391)",
- "description": "Color for marking the active cell with the current date, month or year in the date-picker.",
- "components": []
- },
- {
- "name": "--intergalactic-date-picker-cell-hover",
- "value": "oklch(0.98 0.001 180)",
- "description": "Hover state of the default date-picker cell background.",
- "components": [
- "date-picker"
- ]
- },
- {
- "name": "--intergalactic-date-picker-cell-range",
- "value": "oklch(0.959 0.021 267.8)",
- "description": "Background for the cell which is included in the date range in the date-picker.",
- "components": [
- "date-picker"
- ]
- },
- {
- "name": "--intergalactic-date-picker-cell-range-hover",
- "value": "oklch(0.898 0.054 268.3)",
- "description": "Hover state of the background for the cell which is included in the date range in the date-picker.",
- "components": [
- "date-picker"
- ]
- },
- {
- "name": "--intergalactic-date-picker-cell-active",
- "value": "oklch(0.64 0.152 276.7)",
- "description": "Active (selected) date-picker cell background.",
- "components": [
- "date-picker"
- ]
- },
- {
- "name": "--intergalactic-date-picker-cell-active-hover",
- "value": "oklch(0.6 0.166 277.7)",
- "description": "Hover for the active (selected) date-picker cell background.",
- "components": [
- "date-picker"
- ]
- },
- {
- "name": "--intergalactic-date-picker-cell-comparison-active",
- "value": "oklch(0.64 0.223 299.3)",
- "description": "Active (selected) date-picker cell background for comparison periods.",
- "components": [
- "date-picker"
- ]
- },
- {
- "name": "--intergalactic-date-picker-cell-comparison-active-hover",
- "value": "oklch(0.6 0.244 297.8)",
- "description": "Hover for the active (selected) date-picker cell background for comparison periods.",
- "components": [
- "date-picker"
- ]
+ "name": "--intergalactic-illustration-orange",
+ "value": "oklch(0.823 0.154 61.9)",
+ "description": "⚠️ Use only for illustrations.",
+ "components": []
},
{
- "name": "--intergalactic-dropdown-menu-item",
- "value": "oklch(1 0 0)",
- "description": "Default background color for the list item in the dropdown-menu.",
- "components": [
- "dropdown"
- ]
+ "name": "--intergalactic-illustration-pink",
+ "value": "oklch(0.76 0.214 330)",
+ "description": "⚠️ Use only for illustrations.",
+ "components": []
},
{
- "name": "--intergalactic-dropdown-menu-item-hover",
- "value": "oklch(0.177 0.033 175.6 / 0.028)",
- "description": "Hover state of the default background color for the list item in the dropdown-menu.",
- "components": [
- "dropdown"
- ]
+ "name": "--intergalactic-illustration-red",
+ "value": "oklch(0.737 0.192 22.1)",
+ "description": "⚠️ Use only for illustrations.",
+ "components": []
},
{
- "name": "--intergalactic-dropdown-menu-item-selected",
- "value": "oklch(0.525 0.265 263 / 0.077)",
- "description": "Active (selected) state of the default background color for the list item in the dropdown-menu.",
- "components": [
- "dropdown",
- "select"
- ]
+ "name": "--intergalactic-illustration-salad",
+ "value": "oklch(0.922 0.098 132.7)",
+ "description": "⚠️ Use only for illustrations.",
+ "components": []
},
{
- "name": "--intergalactic-dropdown-menu-item-selected-hover",
- "value": "oklch(0.52 0.268 263.2 / 0.191)",
- "description": "Hover state for the selected state of the default background color for the list item in the dropdown-menu.",
- "components": [
- "dropdown",
- "select"
- ]
+ "name": "--intergalactic-illustration-violet",
+ "value": "oklch(0.709 0.186 301.9)",
+ "description": "⚠️ Use only for illustrations.",
+ "components": []
},
{
- "name": "--intergalactic-feature-popover-bg",
- "value": "oklch(0.88 0.078 303)",
- "description": "Color of the outer border of the FeaturePopover.Spot.",
- "components": [
- "feature-popover"
- ]
+ "name": "--intergalactic-illustration-yellow",
+ "value": "oklch(0.924 0.109 96.8)",
+ "description": "⚠️ Use only for illustrations.",
+ "components": []
},
{
- "name": "--intergalactic-feature-popover-bg-neutral",
- "value": "oklch(0.23 0.01 140)",
- "description": "Color of the outer border of the FeaturePopover.Spot.",
+ "name": "--intergalactic-keyboard-focus-invalid-outline",
+ "value": "oklch(0.628 0.257 28.9 / 0.652)",
+ "description": "Color for keyboard focus outline styles for elements with invalid state.",
"components": [
- "feature-popover"
+ "base-trigger",
+ "bulk-textarea",
+ "checkbox",
+ "inline-input",
+ "input",
+ "radio",
+ "textarea"
]
},
{
- "name": "--intergalactic-feature-popover-dot-outer-border",
- "value": "oklch(0.88 0.078 303)",
- "description": "Color of the outer border of the FeaturePopover.Spot.",
+ "name": "--intergalactic-keyboard-focus-invert-outline",
+ "value": "oklch(1 0 0 / 0.7)",
+ "description": "Color for keyboard focus outline styles to use on the dark and color background.",
"components": [
- "feature-popover"
+ "base-components",
+ "carousel",
+ "wizard"
]
},
{
- "name": "--intergalactic-feature-popover-dot-neutral",
- "value": "oklch(0.88 0.078 303)",
- "description": "Color of the outer border of the FeaturePopover.Spot.",
+ "name": "--intergalactic-keyboard-focus-outline",
+ "value": "oklch(0.424 0.269 264.2 / 0.469)",
+ "description": "Color for default keyboard focus outline styles.",
"components": [
- "feature-popover"
+ "base-components"
]
},
{
- "name": "--intergalactic-feature-popover-dot-neutral-outer-border",
- "value": "oklch(0.88 0.078 303)",
- "description": "Color of the outer border of the FeaturePopover.Spot.",
+ "name": "--intergalactic-keyboard-focus-valid-outline",
+ "value": "oklch(0.711 0.146 166.9)",
+ "description": "Color for keyboard focus outline styles for elements with valid state.",
"components": [
- "feature-popover"
+ "bulk-textarea",
+ "inline-input",
+ "input",
+ "textarea"
]
},
{
- "name": "--intergalactic-progress-bar-bg",
- "value": "oklch(0.96 0.001 180)",
- "description": "Background color of the ProgressBar.",
- "components": [
- "progress-bar"
- ]
+ "name": "--intergalactic-neighbor-location-invert",
+ "value": "oklch(0 0 0 / 0.5)",
+ "description": "Inverted border of the components that are combined with neighbor-location property.",
+ "components": []
},
{
- "name": "--intergalactic-progress-bar-bg-hover",
- "value": "oklch(0.88 0.002 175.6)",
- "description": "Hover state of the background color of the ProgressBar.",
+ "name": "--intergalactic-neighbor-location-neutral",
+ "value": "oklch(1 0 0 / 0.5)",
+ "description": "Neutral border of the components that are combined with neighbor-location property.",
"components": []
},
{
- "name": "--intergalactic-progress-bar-bg-invert",
- "value": "oklch(0.45 0.004 143.7)",
- "description": "Inverted version of the background color of the ProgressBar.",
- "components": [
- "progress-bar"
- ]
+ "name": "--intergalactic-notice-bubble-bg-critical",
+ "value": "oklch(0.64 0.226 24.5)",
+ "description": "Critical background of the NoticeBubble.",
+ "components": []
},
{
- "name": "--intergalactic-progress-bar-bg-invert-hover",
- "value": "oklch(0.56 0.003 151.9)",
- "description": "Hover state for the inverted version of the background color of the ProgressBar.",
+ "name": "--intergalactic-notice-bubble-bg-info",
+ "value": "oklch(0.23 0.01 140)",
+ "description": "Background of the NoticeBubble.",
"components": []
},
{
- "name": "--intergalactic-progress-bar-value-gradient",
- "value": "linear-gradient(-45deg, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 25%, oklch(0.74 0.17 303) 0%, oklch(0.74 0.17 303) 50%, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 0%, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 75%, oklch(0.74 0.17 303) 0%)",
- "description": "Value with gradient for the ProgressBar.",
- "components": [
- "progress-bar"
- ]
+ "name": "--intergalactic-overlay-limitation-primary",
+ "value": "oklch(from oklch(0.97 0.001 180) l c h / 0.7)",
+ "description": "Use as a primary cover of the content under the messages about limitations.",
+ "components": []
},
{
- "name": "--intergalactic-progress-bar-value-bg",
- "value": "oklch(1 0 0)",
- "description": "Base value background for the ProgressBar. It is used to create gradients for the values.",
+ "name": "--intergalactic-overlay-limitation-secondary",
+ "value": "oklch(1 0 0 / 0.85)",
+ "description": "Use as a secondary cover of the content under the messages about limitations.",
"components": [
- "progress-bar"
+ "data-table",
+ "spin-container"
]
},
{
- "name": "--intergalactic-progress-bar-pattern-gradient",
- "value": "linear-gradient(-45deg, oklch(0 0 0 / 0.1) 25%, oklch(0.96 0.001 180) 0%, oklch(0.96 0.001 180) 50%, oklch(0 0 0 / 0.1) 0%, oklch(0 0 0 / 0.1) 75%, oklch(0.96 0.001 180) 0%)",
- "description": "Null value gradient for the ProgressBar.",
+ "name": "--intergalactic-overlay-primary",
+ "value": "oklch(0.109 0.023 165.5 / 0.337)",
+ "description": "Use for cover the content under the modal dialogs.",
"components": [
- "progress-bar"
+ "modal",
+ "side-panel"
]
},
{
- "name": "--intergalactic-skeleton-bg",
- "value": "oklch(0.94 0.002 180)",
- "description": "Default color for the Skeleton.",
+ "name": "--intergalactic-overlay-secondary",
+ "value": "oklch(0.118 0.023 170.1 / 0.262)",
+ "description": "Use for the secondary modal dialogs that were opened upon the other modal dialogs.",
"components": [
- "skeleton"
+ "modal",
+ "spin-container"
]
},
{
- "name": "--intergalactic-skeleton-bg-invert",
- "value": "oklch(0.5 0.004 147.4)",
- "description": "Inverted version of the default color for the Skeleton.",
- "components": [
- "skeleton"
- ]
+ "name": "--intergalactic-page-bg",
+ "value": "oklch(0.97 0.001 180)",
+ "description": "Background fill for the whole product page.",
+ "components": []
},
{
- "name": "--intergalactic-table-th-primary-cell",
+ "name": "--intergalactic-control-pills-bg-hover",
"value": "oklch(0.98 0.001 180)",
- "description": "Background of the header cell in the primary Table.",
- "components": [
- "data-table"
- ]
- },
- {
- "name": "--intergalactic-table-th-primary-cell-hover",
- "value": "oklch(0.94 0.002 180)",
- "description": "Background of the hovered header cell in the primary Table.",
- "components": [
- "data-table"
- ]
+ "description": "Hover state of the Pills background.",
+ "components": []
},
{
- "name": "--intergalactic-table-th-primary-cell-active",
- "value": "oklch(0.94 0.002 180)",
- "description": "Background of the active header cell in the primary Table.",
+ "name": "--intergalactic-control-pills-bg-normal",
+ "value": "oklch(1 0 0)",
+ "description": "Background of the Pills in its normal state.",
"components": []
},
{
- "name": "--intergalactic-table-th-secondary-cell",
- "value": "oklch(1 0 0)",
- "description": "Background of the header cell in the secondary Table.",
- "components": [
- "data-table"
- ]
+ "name": "--intergalactic-control-pills-bg-selected",
+ "value": "oklch(0.959 0.021 267.8)",
+ "description": "Background of the selected Pill.",
+ "components": []
},
{
- "name": "--intergalactic-table-th-gradient",
- "value": "linear-gradient(to right, transparent 0%, oklch(0.9 0.002 177) 100%)",
- "description": "Background gradient for sorting icon that absolute positioned in the table head.",
+ "name": "--intergalactic-control-pills-border",
+ "value": "oklch(0.137 0.026 175.7 / 0.161)",
+ "description": "Border color of the Pills in its normal state.",
"components": []
},
{
- "name": "--intergalactic-table-td-cell",
- "value": "oklch(1 0 0)",
- "description": "Background of the default cell in the Table.",
+ "name": "--intergalactic-control-pills-border-selected",
+ "value": "oklch(0.7 0.131 275.2)",
+ "description": "Border color of the selected Pill.",
"components": []
},
{
- "name": "--intergalactic-table-td-cell-hover",
- "value": "oklch(0.98 0.001 180)",
- "description": "Background of the default hovered cell in the Table.",
+ "name": "--intergalactic-progress-bar-bg",
+ "value": "oklch(0.96 0.001 180)",
+ "description": "Background color of the ProgressBar.",
"components": [
- "data-table"
+ "progress-bar"
]
},
{
- "name": "--intergalactic-table-td-cell-active",
- "value": "oklch(0.97 0.001 180)",
- "description": "Background of the default active cell in the Table.",
- "components": [
- "data-table"
- ]
+ "name": "--intergalactic-progress-bar-bg-hover",
+ "value": "oklch(0.88 0.002 175.6)",
+ "description": "Hover state of the background color of the ProgressBar.",
+ "components": []
},
{
- "name": "--intergalactic-table-td-cell-unread",
- "value": "oklch(0.98 0.001 180)",
- "description": "Background of the unread cell in the Table.",
+ "name": "--intergalactic-progress-bar-bg-invert",
+ "value": "oklch(0.45 0.004 143.7)",
+ "description": "Inverted version of the background color of the ProgressBar.",
"components": [
- "data-table"
+ "progress-bar"
]
},
{
- "name": "--intergalactic-table-td-cell-accordion",
- "value": "oklch(1 0 0)",
- "description": "Background of the cell used for Accordion or actions row, in the Table.",
- "components": [
- "data-table"
- ]
+ "name": "--intergalactic-progress-bar-bg-invert-hover",
+ "value": "oklch(0.56 0.003 151.9)",
+ "description": "Hover state for the inverted version of the background color of the ProgressBar.",
+ "components": []
},
{
- "name": "--intergalactic-table-td-cell-selected",
- "value": "oklch(0.98 0.01 267.6)",
- "description": "Background of the selected cell in the Table.",
+ "name": "--intergalactic-progress-bar-pattern-gradient",
+ "value": "linear-gradient(-45deg, oklch(0 0 0 / 0.1) 25%, oklch(0.96 0.001 180) 0%, oklch(0.96 0.001 180) 50%, oklch(0 0 0 / 0.1) 0%, oklch(0 0 0 / 0.1) 75%, oklch(0.96 0.001 180) 0%)",
+ "description": "Null value gradient for the ProgressBar.",
"components": [
- "data-table"
+ "progress-bar"
]
},
{
- "name": "--intergalactic-table-td-cell-selected-hover",
- "value": "oklch(0.959 0.021 267.8)",
- "description": "Background of the hovered selected cell in the Table.",
+ "name": "--intergalactic-progress-bar-value-bg",
+ "value": "oklch(1 0 0)",
+ "description": "Base value background for the ProgressBar. It is used to create gradients for the values.",
"components": [
- "data-table"
+ "progress-bar"
]
},
{
- "name": "--intergalactic-table-td-cell-selected-active",
- "value": "oklch(0.939 0.032 268)",
- "description": "Background of the active selected cell in the Table.",
+ "name": "--intergalactic-progress-bar-value-gradient",
+ "value": "linear-gradient(-45deg, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 25%, oklch(0.74 0.17 303) 0%, oklch(0.74 0.17 303) 50%, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 0%, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 75%, oklch(0.74 0.17 303) 0%)",
+ "description": "Value with gradient for the ProgressBar.",
"components": [
- "data-table"
+ "progress-bar"
]
},
{
- "name": "--intergalactic-table-td-cell-new",
- "value": "oklch(0.977 0.036 184)",
- "description": "Background of the cell with new information in the Table.",
+ "name": "--intergalactic-scroll-area-dropdown-menu-bottom",
+ "value": "linear-gradient(to top, #fff 34.38%, transparent 100%)",
+ "description": "Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu.",
"components": [
- "data-table"
+ "base-components"
]
},
{
- "name": "--intergalactic-table-td-cell-new-hover",
- "value": "oklch(0.96 0.057 179.7)",
- "description": "Background of the hovered cell with new information in the Table.",
+ "name": "--intergalactic-scroll-area-dropdown-menu-left",
+ "value": "linear-gradient(to right, #fff 34.38%, transparent 100%)",
+ "description": "Left-to-right fade shadow for the ScrollArea inside the DropdownMenu.",
"components": [
- "data-table"
+ "base-components"
]
},
{
- "name": "--intergalactic-table-td-cell-new-active",
- "value": "oklch(0.94 0.074 178.1)",
- "description": "Background of the active cell with new information in the Table.",
+ "name": "--intergalactic-scroll-area-dropdown-menu-right",
+ "value": "linear-gradient(to left, #fff 34.38%, transparent 100%)",
+ "description": "Right-to-left fade shadow for the ScrollArea inside the DropdownMenu.",
"components": [
- "data-table"
+ "base-components"
]
},
{
- "name": "--intergalactic-table-td-cell-critical",
- "value": "oklch(0.977 0.016 1.8)",
- "description": "Background of the cell with critical information in the Table.",
+ "name": "--intergalactic-scroll-area-dropdown-menu-top",
+ "value": "linear-gradient(to bottom, #fff 34.38%, transparent 100%)",
+ "description": "Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu.",
"components": [
- "data-table"
+ "base-components"
]
},
{
- "name": "--intergalactic-table-td-cell-critical-hover",
- "value": "oklch(0.958 0.029 5.7)",
- "description": "Background of the hovered cell with critical information in the Table.",
+ "name": "--intergalactic-scroll-area-shadow-bottom",
+ "value": "linear-gradient(to top, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)",
+ "description": "Bottom-to-top fade shadow for the ScrollArea.",
"components": [
- "data-table"
+ "base-components"
]
},
{
- "name": "--intergalactic-table-td-cell-critical-active",
- "value": "oklch(0.938 0.042 8.4)",
- "description": "Background of the active cell with critical information in the Table.",
+ "name": "--intergalactic-scroll-area-shadow-left",
+ "value": "linear-gradient(to right, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)",
+ "description": "Left-to-right fade shadow for the ScrollArea.",
"components": [
+ "base-components",
"data-table"
]
},
{
- "name": "--intergalactic-table-td-cell-warning",
- "value": "oklch(0.979 0.03 88.1)",
- "description": "Background of the cell with warning information in the Table.",
+ "name": "--intergalactic-scroll-area-shadow-right",
+ "value": "linear-gradient(to left, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)",
+ "description": "Right-to-left fade shadow for the ScrollArea.",
"components": [
+ "base-components",
"data-table"
]
},
{
- "name": "--intergalactic-table-td-cell-warning-hover",
- "value": "oklch(0.96 0.05 83.1)",
- "description": "Background of the hovered cell with warning information in the Table.",
+ "name": "--intergalactic-scroll-area-shadow-top",
+ "value": "linear-gradient(to bottom, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)",
+ "description": "Top-to-bottom fade shadow for the ScrollArea.",
"components": [
- "data-table"
+ "base-components"
]
},
{
- "name": "--intergalactic-table-td-cell-warning-active",
- "value": "oklch(0.939 0.069 79.8)",
- "description": "Background of the active cell with warning information in the Table.",
+ "name": "--intergalactic-scroll-bar-background",
+ "value": "oklch(0.137 0.026 175.7 / 0.161)",
+ "description": "Background color for ScrollBar.",
"components": [
- "data-table"
+ "base-components"
]
},
{
- "name": "--intergalactic-brand-primary",
- "value": "oklch(0.74 0.17 303)",
- "description": "Primary brand accent for logos and branded surfaces.",
+ "name": "--intergalactic-sidebar-nav-bg",
+ "value": "oklch(0.97 0.001 180)",
+ "description": "Background fill for the product page sidebar.",
"components": []
},
{
- "name": "--intergalactic-brand-secondary",
- "value": "oklch(0.22 0.01 140)",
- "description": "Secondary brand accent for paired brand treatments (secondary marks, duo-tone lockups).",
+ "name": "--intergalactic-sidebar-nav-border",
+ "value": "oklch(0.137 0.026 175.7 / 0.161)",
+ "description": "Color for the border of the page sidebar.",
"components": []
},
{
- "name": "--intergalactic-brand-gradient",
- "value": "linear-gradient(180deg, #DCEEEB 0%, #EEE9FF 100%)",
- "description": "Brand light gradient for branded surfaces.",
+ "name": "--intergalactic-sidebar-nav-control-active",
+ "value": "oklch(0.176 0.033 175.7 / 0.084)",
+ "description": "Sidebar navigation row active background.",
"components": []
},
{
- "name": "--intergalactic-brand-pinterest",
- "value": "#bd081c",
- "description": "Official Pinterest brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.",
+ "name": "--intergalactic-sidebar-nav-control-hover",
+ "value": "oklch(0.176 0.033 175.6 / 0.056)",
+ "description": "Sidebar navigation row hover background.",
"components": []
},
{
- "name": "--intergalactic-brand-instagram",
- "value": "#e4405f",
- "description": "Official Instagram brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.",
+ "name": "--intergalactic-sidebar-nav-control-icon-active",
+ "value": "oklch(0.53 0.004 149.6)",
+ "description": "Sidebar navigation icon color for the active item.",
"components": []
},
{
- "name": "--intergalactic-brand-youtube",
- "value": "#ff0000",
- "description": "Official YouTube brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.",
+ "name": "--intergalactic-sidebar-nav-control-icon-normal",
+ "value": "oklch(0.58 0.003 153.3)",
+ "description": "Sidebar navigation icon color.",
"components": []
},
{
- "name": "--intergalactic-brand-facebook",
- "value": "#1877f2",
- "description": "Official Facebook brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.",
+ "name": "--intergalactic-sidebar-nav-control-text-active",
+ "value": "oklch(0.23 0.01 140)",
+ "description": "Sidebar navigation label color for the active item.",
"components": []
},
{
- "name": "--intergalactic-brand-linkedIn",
- "value": "#0a66c2",
- "description": "Official LinkedIn brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.",
+ "name": "--intergalactic-sidebar-nav-control-text-normal",
+ "value": "oklch(0.53 0.004 149.6)",
+ "description": "Sidebar navigation label color.",
"components": []
},
{
- "name": "--intergalactic-brand-twitter",
- "value": "#1d9bf0",
- "description": "Official Twitter brand fill for logos and icons in approved placements; follow the platform brand rules for size and clear space.",
- "components": []
+ "name": "--intergalactic-skeleton-bg",
+ "value": "oklch(0.94 0.002 180)",
+ "description": "Default color for the Skeleton.",
+ "components": [
+ "skeleton"
+ ]
},
{
- "name": "--intergalactic-brand-google-blue",
- "value": "#1a0dab",
- "description": "Google brand color for the link.",
- "components": []
+ "name": "--intergalactic-skeleton-bg-invert",
+ "value": "oklch(0.5 0.004 147.4)",
+ "description": "Inverted version of the default color for the Skeleton.",
+ "components": [
+ "skeleton"
+ ]
},
{
- "name": "--intergalactic-brand-google-green",
- "value": "#016723",
- "description": "Google green brand color for the link.",
+ "name": "--intergalactic-spin-bg",
+ "value": "oklch(0.137 0.026 175.7 / 0.161)",
+ "description": "Track color of the Spin loader.",
"components": []
},
{
- "name": "--intergalactic-brand-google-my-business",
- "value": "#1a73e8",
- "description": "Official Google My Business brand fill for logos and icons in approved placements; follow Google brand guidelines for size and clear space.",
+ "name": "--intergalactic-spin-bg-invert",
+ "value": "oklch(0.995 0.008 147.4 / 0.391)",
+ "description": "Inverted track color of the Spin loader.",
"components": []
},
{
- "name": "--intergalactic-keyboard-focus-outline",
- "value": "oklch(0.424 0.269 264.2 / 0.469)",
- "description": "Color for default keyboard focus outline styles.",
- "components": [
- "base-components"
- ]
+ "name": "--intergalactic-control-tab-line-border",
+ "value": "oklch(0.137 0.026 175.7 / 0.161)",
+ "description": "Border color of the TabLine in its normal state.",
+ "components": []
},
{
- "name": "--intergalactic-keyboard-focus-invalid-outline",
- "value": "oklch(0.628 0.257 28.9 / 0.652)",
- "description": "Color for keyboard focus outline styles for elements with invalid state.",
- "components": [
- "base-trigger",
- "bulk-textarea",
- "checkbox",
- "inline-input",
- "input",
- "radio",
- "textarea"
- ]
+ "name": "--intergalactic-control-tab-line-border-active",
+ "value": "oklch(0.7 0.131 275.2)",
+ "description": "Border color of the TabLine in its active state.",
+ "components": []
},
{
- "name": "--intergalactic-keyboard-focus-valid-outline",
- "value": "oklch(0.711 0.146 166.9)",
- "description": "Color for keyboard focus outline styles for elements with valid state.",
- "components": [
- "bulk-textarea",
- "inline-input",
- "input",
- "textarea"
- ]
+ "name": "--intergalactic-control-tab-line-border-hover",
+ "value": "oklch(0.137 0.026 175.7 / 0.161)",
+ "description": "Border color of the TabLine in its hover state.",
+ "components": []
},
{
- "name": "--intergalactic-keyboard-focus-invert-outline",
- "value": "oklch(1 0 0 / 0.7)",
- "description": "Color for keyboard focus outline styles to use on the dark and color background.",
- "components": [
- "base-components",
- "carousel",
- "wizard"
- ]
+ "name": "--intergalactic-table-border-accent",
+ "value": "oklch(0.137 0.026 175.7 / 0.161)",
+ "description": "Accent borders in the Table: for the accordion in the table and for the header of the secondary table.",
+ "components": []
},
{
- "name": "--intergalactic-overlay-primary",
- "value": "oklch(0.109 0.023 165.5 / 0.337)",
- "description": "Use for cover the content under the modal dialogs.",
- "components": [
- "modal",
- "side-panel"
- ]
+ "name": "--intergalactic-table-td-cell",
+ "value": "oklch(1 0 0)",
+ "description": "Background of the default cell in the Table.",
+ "components": []
},
{
- "name": "--intergalactic-overlay-secondary",
- "value": "oklch(0.118 0.023 170.1 / 0.262)",
- "description": "Use for the secondary modal dialogs that were opened upon the other modal dialogs.",
+ "name": "--intergalactic-table-td-cell-accordion",
+ "value": "oklch(1 0 0)",
+ "description": "Background of the cell used for Accordion or actions row, in the Table.",
"components": [
- "modal",
- "spin-container"
+ "data-table"
]
},
{
- "name": "--intergalactic-overlay-limitation-primary",
- "value": "oklch(from oklch(0.97 0.001 180) l c h / 0.7)",
- "description": "Use as a primary cover of the content under the messages about limitations.",
- "components": []
- },
- {
- "name": "--intergalactic-overlay-limitation-secondary",
- "value": "oklch(1 0 0 / 0.85)",
- "description": "Use as a secondary cover of the content under the messages about limitations.",
+ "name": "--intergalactic-table-td-cell-active",
+ "value": "oklch(0.97 0.001 180)",
+ "description": "Background of the default active cell in the Table.",
"components": [
- "data-table",
- "spin-container"
+ "data-table"
]
},
{
- "name": "--intergalactic-tooltip-default",
- "value": "oklch(1 0 0)",
- "description": "Default Tooltip background.",
+ "name": "--intergalactic-table-td-cell-critical",
+ "value": "oklch(0.977 0.016 1.8)",
+ "description": "Background of the cell with critical information in the Table.",
"components": [
- "tooltip"
+ "data-table"
]
},
{
- "name": "--intergalactic-tooltip-warning",
- "value": "oklch(0.958 0.029 5.7)",
- "description": "Warning Tooltip background.",
+ "name": "--intergalactic-table-td-cell-critical-active",
+ "value": "oklch(0.938 0.042 8.4)",
+ "description": "Background of the active cell with critical information in the Table.",
"components": [
- "tooltip"
+ "data-table"
]
},
{
- "name": "--intergalactic-tooltip-invert",
- "value": "oklch(0.23 0.01 140)",
- "description": "Inverted version of the default Tooltip background.",
+ "name": "--intergalactic-table-td-cell-critical-hover",
+ "value": "oklch(0.958 0.029 5.7)",
+ "description": "Background of the hovered cell with critical information in the Table.",
"components": [
- "base-components",
- "tooltip"
+ "data-table"
]
},
{
- "name": "--intergalactic-neighbor-location-neutral",
- "value": "oklch(1 0 0 / 0.5)",
- "description": "Neutral border of the components that are combined with neighbor-location property.",
- "components": []
+ "name": "--intergalactic-table-td-cell-hover",
+ "value": "oklch(0.98 0.001 180)",
+ "description": "Background of the default hovered cell in the Table.",
+ "components": [
+ "data-table"
+ ]
},
{
- "name": "--intergalactic-neighbor-location-invert",
- "value": "oklch(0 0 0 / 0.5)",
- "description": "Inverted border of the components that are combined with neighbor-location property.",
- "components": []
+ "name": "--intergalactic-table-td-cell-new",
+ "value": "oklch(0.977 0.036 184)",
+ "description": "Background of the cell with new information in the Table.",
+ "components": [
+ "data-table"
+ ]
},
{
- "name": "--intergalactic-scroll-area-shadow-left",
- "value": "linear-gradient(to right, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)",
- "description": "Left-to-right fade shadow for the ScrollArea.",
+ "name": "--intergalactic-table-td-cell-new-active",
+ "value": "oklch(0.94 0.074 178.1)",
+ "description": "Background of the active cell with new information in the Table.",
"components": [
- "base-components",
"data-table"
]
},
{
- "name": "--intergalactic-scroll-area-shadow-right",
- "value": "linear-gradient(to left, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)",
- "description": "Right-to-left fade shadow for the ScrollArea.",
+ "name": "--intergalactic-table-td-cell-new-hover",
+ "value": "oklch(0.96 0.057 179.7)",
+ "description": "Background of the hovered cell with new information in the Table.",
"components": [
- "base-components",
"data-table"
]
},
{
- "name": "--intergalactic-scroll-area-shadow-top",
- "value": "linear-gradient(to bottom, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)",
- "description": "Top-to-bottom fade shadow for the ScrollArea.",
+ "name": "--intergalactic-table-td-cell-selected",
+ "value": "oklch(0.98 0.01 267.6)",
+ "description": "Background of the selected cell in the Table.",
"components": [
- "base-components"
+ "data-table"
]
},
{
- "name": "--intergalactic-scroll-area-shadow-bottom",
- "value": "linear-gradient(to top, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)",
- "description": "Bottom-to-top fade shadow for the ScrollArea.",
+ "name": "--intergalactic-table-td-cell-selected-active",
+ "value": "oklch(0.939 0.032 268)",
+ "description": "Background of the active selected cell in the Table.",
"components": [
- "base-components"
+ "data-table"
]
},
{
- "name": "--intergalactic-scroll-area-dropdown-menu-left",
- "value": "linear-gradient(to right, #fff 34.38%, transparent 100%)",
- "description": "Left-to-right fade shadow for the ScrollArea inside the DropdownMenu.",
+ "name": "--intergalactic-table-td-cell-selected-hover",
+ "value": "oklch(0.959 0.021 267.8)",
+ "description": "Background of the hovered selected cell in the Table.",
"components": [
- "base-components"
+ "data-table"
]
},
{
- "name": "--intergalactic-scroll-area-dropdown-menu-right",
- "value": "linear-gradient(to left, #fff 34.38%, transparent 100%)",
- "description": "Right-to-left fade shadow for the ScrollArea inside the DropdownMenu.",
+ "name": "--intergalactic-table-td-cell-unread",
+ "value": "oklch(0.98 0.001 180)",
+ "description": "Background of the unread cell in the Table.",
"components": [
- "base-components"
+ "data-table"
]
},
{
- "name": "--intergalactic-scroll-area-dropdown-menu-bottom",
- "value": "linear-gradient(to top, #fff 34.38%, transparent 100%)",
- "description": "Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu.",
+ "name": "--intergalactic-table-td-cell-warning",
+ "value": "oklch(0.979 0.03 88.1)",
+ "description": "Background of the cell with warning information in the Table.",
"components": [
- "base-components"
+ "data-table"
]
},
{
- "name": "--intergalactic-scroll-area-dropdown-menu-top",
- "value": "linear-gradient(to bottom, #fff 34.38%, transparent 100%)",
- "description": "Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu.",
+ "name": "--intergalactic-table-td-cell-warning-active",
+ "value": "oklch(0.939 0.069 79.8)",
+ "description": "Background of the active cell with warning information in the Table.",
"components": [
- "base-components"
+ "data-table"
]
},
{
- "name": "--intergalactic-scroll-bar-background",
- "value": "oklch(0.137 0.026 175.7 / 0.161)",
- "description": "Background color for ScrollBar.",
+ "name": "--intergalactic-table-td-cell-warning-hover",
+ "value": "oklch(0.96 0.05 83.1)",
+ "description": "Background of the hovered cell with warning information in the Table.",
"components": [
- "base-components"
+ "data-table"
]
},
{
- "name": "--intergalactic-tag-primary-gray-normal",
- "value": "#ecedec",
- "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.",
+ "name": "--intergalactic-table-th-gradient",
+ "value": "linear-gradient(to right, transparent 0%, oklch(0.9 0.002 177) 100%)",
+ "description": "Background gradient for sorting icon that absolute positioned in the table head.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-gray-hover-active",
- "value": "#e2e3e2",
- "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.",
- "components": []
+ "name": "--intergalactic-table-th-primary-cell",
+ "value": "oklch(0.98 0.001 180)",
+ "description": "Background of the header cell in the primary Table.",
+ "components": [
+ "data-table"
+ ]
},
{
- "name": "--intergalactic-tag-primary-gray-text",
- "value": "#6a6c6a",
- "description": "Gray text for the primary gray tag.",
+ "name": "--intergalactic-table-th-primary-cell-active",
+ "value": "oklch(0.94 0.002 180)",
+ "description": "Background of the active header cell in the primary Table.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-blue-normal",
- "value": "#e7e5ff",
- "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.",
- "components": []
+ "name": "--intergalactic-table-th-primary-cell-hover",
+ "value": "oklch(0.94 0.002 180)",
+ "description": "Background of the hovered header cell in the primary Table.",
+ "components": [
+ "data-table"
+ ]
},
{
- "name": "--intergalactic-tag-primary-blue-hover-active",
- "value": "#dcd8ff",
- "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. ",
- "components": []
+ "name": "--intergalactic-table-th-secondary-cell",
+ "value": "oklch(1 0 0)",
+ "description": "Background of the header cell in the secondary Table.",
+ "components": [
+ "data-table"
+ ]
},
{
- "name": "--intergalactic-tag-primary-blue-text",
- "value": "#5c53d9",
- "description": "Blue text for the primary blue tag.",
+ "name": "--intergalactic-tag-additional-bg-hover-active",
+ "value": "oklch(0.98 0.001 180)",
+ "description": "Hover and active states of the additional Tag background.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-green-normal",
- "value": "#ccf4e8",
- "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.",
+ "name": "--intergalactic-tag-additional-bg-normal",
+ "value": "oklch(1 0 0)",
+ "description": "Background of the additional Tag in its normal state.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-green-hover-active",
- "value": "#b3eedd",
- "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.",
+ "name": "--intergalactic-tag-additional-border",
+ "value": "oklch(0.137 0.026 175.7 / 0.161)",
+ "description": "Border color of the additional Tag.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-green-text",
- "value": "#00845f",
- "description": "Green text for the primary green tag.",
+ "name": "--intergalactic-tag-primary-bg-hover",
+ "value": "oklch(0.98 0.001 180)",
+ "description": "Hover state of the primary Tag background.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-orange-normal",
- "value": "#ffdecc",
- "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.",
+ "name": "--intergalactic-tag-primary-bg-normal",
+ "value": "oklch(1 0 0)",
+ "description": "Background of the primary Tag in its normal state.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-orange-hover-active",
- "value": "#ffceb3",
- "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.",
+ "name": "--intergalactic-tag-primary-blue-hover-active",
+ "value": "#dcd8ff",
+ "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. ",
"components": []
},
{
- "name": "--intergalactic-tag-primary-orange-text",
- "value": "#b83c00",
- "description": "Orange text for the primary orange tag.",
+ "name": "--intergalactic-tag-primary-blue-normal",
+ "value": "#e7e5ff",
+ "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.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-red-normal",
- "value": "#ffd3d4",
- "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.",
+ "name": "--intergalactic-tag-primary-blue-text",
+ "value": "#5c53d9",
+ "description": "Blue text for the primary blue tag.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-red-hover-active",
- "value": "#ffbdbf",
- "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.",
+ "name": "--intergalactic-tag-primary-border",
+ "value": "oklch(1 0 0)",
+ "description": "Border color of the primary Tag.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-red-text",
- "value": "#c7161b",
- "description": "Red text for the primary red tag.",
+ "name": "--intergalactic-tag-primary-gray-hover-active",
+ "value": "#e2e3e2",
+ "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.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-violet-normal",
- "value": "#f2d8ff",
- "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.",
+ "name": "--intergalactic-tag-primary-gray-normal",
+ "value": "#ecedec",
+ "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.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-violet-hover-active",
- "value": "#ecc5ff",
- "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.",
+ "name": "--intergalactic-tag-primary-gray-text",
+ "value": "#6a6c6a",
+ "description": "Gray text for the primary gray tag.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-violet-text",
- "value": "#8029ec",
- "description": "Violet text for the primary violet tag.",
+ "name": "--intergalactic-tag-primary-green-hover-active",
+ "value": "#b3eedd",
+ "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.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-yellow-normal",
- "value": "#fde5cc",
- "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.",
+ "name": "--intergalactic-tag-primary-green-normal",
+ "value": "#ccf4e8",
+ "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.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-yellow-hover-active",
- "value": "#fcd8b3",
- "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.",
+ "name": "--intergalactic-tag-primary-green-text",
+ "value": "#00845f",
+ "description": "Green text for the primary green tag.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-yellow-text",
- "value": "#a35400",
- "description": "Yellow text for the primary yellow tag.",
+ "name": "--intergalactic-tag-primary-orange-hover-active",
+ "value": "#ffceb3",
+ "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.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-white-normal",
- "value": "rgba(255, 255, 255, 0.15)",
- "description": "Primary tag on bold or dark backgrounds—translucent fill for contrast in the normal state.",
- "components": [
- "tag"
- ]
+ "name": "--intergalactic-tag-primary-orange-normal",
+ "value": "#ffdecc",
+ "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.",
+ "components": []
},
{
- "name": "--intergalactic-tag-primary-white-hover-active",
- "value": "rgba(255, 255, 255, 0.3)",
- "description": "Hover and active (selected) state of the primary white tag.",
+ "name": "--intergalactic-tag-primary-orange-text",
+ "value": "#b83c00",
+ "description": "Orange text for the primary orange tag.",
"components": []
},
{
- "name": "--intergalactic-tag-primary-white-text",
- "value": "#ffffff",
- "description": "White text for the primary white tag.",
+ "name": "--intergalactic-tag-primary-red-hover-active",
+ "value": "#ffbdbf",
+ "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.",
"components": []
},
{
- "name": "--intergalactic-tag-secondary-normal",
- "value": "#ffffff",
- "description": "Background color for the default secondary tag.",
+ "name": "--intergalactic-tag-primary-red-normal",
+ "value": "#ffd3d4",
+ "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.",
"components": []
},
{
- "name": "--intergalactic-tag-secondary-hover-active",
- "value": "#f4f5f5",
- "description": "Hover and active (selected) states of the background color for the default secondary tag.",
+ "name": "--intergalactic-tag-primary-red-text",
+ "value": "#c7161b",
+ "description": "Red text for the primary red tag.",
"components": []
},
{
- "name": "--intergalactic-tag-secondary-white-normal",
- "value": "rgba(255, 255, 255, 0)",
- "description": "Secondary/outline tag on bold or dark backgrounds—minimal fill in the normal state.",
+ "name": "--intergalactic-tag-primary-violet-hover-active",
+ "value": "#ecc5ff",
+ "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.",
"components": []
},
{
- "name": "--intergalactic-tag-secondary-white-hover-active",
- "value": "rgba(255, 255, 255, 0.1)",
- "description": "Active state of the secondary white tag.",
+ "name": "--intergalactic-tag-primary-violet-normal",
+ "value": "#f2d8ff",
+ "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.",
"components": []
},
{
- "name": "--intergalactic-tag-secondary-white-text",
- "value": "#ffffff",
- "description": "White text for the secondary white tag.",
+ "name": "--intergalactic-tag-primary-violet-text",
+ "value": "#8029ec",
+ "description": "Violet text for the primary violet tag.",
"components": []
},
{
- "name": "--intergalactic-tag-secondary-gray-text",
- "value": "#6a6c6a",
- "description": "Gray text for the default secondary tag.",
+ "name": "--intergalactic-tag-primary-white-hover-active",
+ "value": "rgba(255, 255, 255, 0.3)",
+ "description": "Hover and active (selected) state of the primary white tag.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-1",
- "value": "oklch(0.58 0.168 278.2)",
- "description": "1 color in the default list of colors for charts.",
+ "name": "--intergalactic-tag-primary-white-normal",
+ "value": "rgba(255, 255, 255, 0.15)",
+ "description": "Primary tag on bold or dark backgrounds—translucent fill for contrast in the normal state.",
"components": [
- "d3-chart",
- "mini-chart"
+ "tag"
]
},
{
- "name": "--intergalactic-chart-palette-order-2",
- "value": "oklch(0.82 0.15 170)",
- "description": "2 color in the default list of colors for charts.",
- "components": [
- "d3-chart"
- ]
+ "name": "--intergalactic-tag-primary-white-text",
+ "value": "#ffffff",
+ "description": "White text for the primary white tag.",
+ "components": []
},
{
- "name": "--intergalactic-chart-palette-order-3",
- "value": "oklch(0.74 0.17 303)",
- "description": "3 color in the default list of colors for charts.",
+ "name": "--intergalactic-tag-primary-yellow-hover-active",
+ "value": "#fcd8b3",
+ "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.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-4",
- "value": "oklch(0.82 0.18 80)",
- "description": "4 color in the default list of colors for charts.",
+ "name": "--intergalactic-tag-primary-yellow-normal",
+ "value": "#fde5cc",
+ "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.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-5",
- "value": "oklch(0.74 0.19 22)",
- "description": "5 color in the default list of colors for charts.",
+ "name": "--intergalactic-tag-primary-yellow-text",
+ "value": "#a35400",
+ "description": "Yellow text for the primary yellow tag.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-6",
- "value": "oklch(0.82 0.088 272.1)",
- "description": "6 color in the default list of colors for charts.",
+ "name": "--intergalactic-tag-secondary-border",
+ "value": "oklch(0.137 0.026 175.7 / 0.161)",
+ "description": "Border color of the secondary Tag.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-7",
- "value": "oklch(0.74 0.225 330)",
- "description": "7 color in the default list of colors for charts.",
+ "name": "--intergalactic-tag-secondary-border-invert",
+ "value": "oklch(0.995 0.008 145.9 / 0.369)",
+ "description": "Inverted border color of the secondary Tag.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-8",
- "value": "oklch(0.82 0.19 143)",
- "description": "8 color in the default list of colors for charts.",
+ "name": "--intergalactic-tag-secondary-gray-text",
+ "value": "#6a6c6a",
+ "description": "Gray text for the default secondary tag.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-9",
- "value": "oklch(0.53 0.157 279.2)",
- "description": "9 color in the default list of colors for charts.",
- "components": [
- "d3-chart"
- ]
+ "name": "--intergalactic-tag-secondary-hover-active",
+ "value": "#f4f5f5",
+ "description": "Hover and active (selected) states of the background color for the default secondary tag.",
+ "components": []
},
{
- "name": "--intergalactic-chart-palette-order-10",
- "value": "oklch(0.74 0.17 170)",
- "description": "10 color in the default list of colors for charts.",
+ "name": "--intergalactic-tag-secondary-normal",
+ "value": "#ffffff",
+ "description": "Background color for the default secondary tag.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-11",
- "value": "oklch(0.74 0.17 72)",
- "description": "11 color in the default list of colors for charts.",
+ "name": "--intergalactic-tag-secondary-white-hover-active",
+ "value": "rgba(255, 255, 255, 0.1)",
+ "description": "Active state of the secondary white tag.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-12",
- "value": "oklch(0.82 0.18 330)",
- "description": "12 color in the default list of colors for charts.",
+ "name": "--intergalactic-tag-secondary-white-normal",
+ "value": "rgba(255, 255, 255, 0)",
+ "description": "Secondary/outline tag on bold or dark backgrounds—minimal fill in the normal state.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-13",
- "value": "oklch(0.64 0.22 147)",
- "description": "13 color in the default list of colors for charts.",
+ "name": "--intergalactic-tag-secondary-white-text",
+ "value": "#ffffff",
+ "description": "White text for the secondary white tag.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-14",
- "value": "oklch(0.82 0.118 303)",
- "description": "14 color in the default list of colors for charts.",
+ "name": "--intergalactic-text-advertising",
+ "value": "oklch(0.23 0.113 296)",
+ "description": "Promotional or sponsored emphasis (ads, marketing callouts)—use sparingly so it stays noticeable.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-15",
- "value": "oklch(0.64 0.226 24.5)",
- "description": "15 color in the default list of colors for charts.",
+ "name": "--intergalactic-text-critical",
+ "value": "oklch(0.53 0.206 27.3)",
+ "description": "Text associated with critical states and data.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-16",
- "value": "oklch(0.64 0.161 170)",
- "description": "16 color in the default list of colors for charts.",
+ "name": "--intergalactic-text-critical-hover-active",
+ "value": "oklch(0.51 0.202 27.8)",
+ "description": "Hover and active states for the text associated with critical states and data.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-17",
- "value": "oklch(0.82 0.088 272.1)",
- "description": "17 color in the default list of colors for charts.",
- "components": []
+ "name": "--intergalactic-text-hint",
+ "value": "oklch(0.088 0.026 147.7 / 0.583)",
+ "description": "Supplementary helper text near controls (short guidance), distinct from placeholder text inside inputs.",
+ "components": [
+ "button",
+ "d3-chart"
+ ]
},
{
- "name": "--intergalactic-chart-palette-order-18",
- "value": "oklch(0.74 0.23 146)",
- "description": "18 color in the default list of colors for charts.",
- "components": []
+ "name": "--intergalactic-text-hint-hover-active",
+ "value": "oklch(0.086 0.026 145.8 / 0.605)",
+ "description": "Hover and active states of the hint link text.",
+ "components": [
+ "button",
+ "typography"
+ ]
},
{
- "name": "--intergalactic-chart-palette-order-19",
- "value": "oklch(0.64 0.16 64)",
- "description": "19 color in the default list of colors for charts.",
+ "name": "--intergalactic-text-hint-invert",
+ "value": "oklch(0.75 0.003 165.9)",
+ "description": "Inverted version of the hint link text.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-20",
- "value": "oklch(0.82 0.13 20)",
- "description": "20 color in the default list of colors for charts.",
+ "name": "--intergalactic-text-hint-invert-hover-active",
+ "value": "oklch(0.85 0.002 173.3)",
+ "description": "Hover and active states of the inverted version of the hint link text.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-21",
- "value": "oklch(0.53 0.138 59.9)",
- "description": "21 color in the default list of colors for charts.",
+ "name": "--intergalactic-text-large-critical",
+ "value": "oklch(0.53 0.206 27.3)",
+ "description": "Text with font-size ≥20px associated with critical states and data.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-22",
- "value": "oklch(0.64 0.223 299.3)",
- "description": "22 color in the default list of colors for charts.",
+ "name": "--intergalactic-text-large-critical-hover-active",
+ "value": "oklch(0.51 0.202 27.8)",
+ "description": "Hover and active states of the text with font-size ≥20px associated with critical states and data.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-23",
- "value": "oklch(0.64 0.262 330)",
- "description": "23 color in the default list of colors for charts.",
- "components": []
+ "name": "--intergalactic-text-large-info",
+ "value": "oklch(0.53 0.157 279.2)",
+ "description": "Link text with font-size ≥20px.",
+ "components": [
+ "d3-chart"
+ ]
},
{
- "name": "--intergalactic-chart-palette-order-24",
- "value": "oklch(0.53 0.189 147)",
- "description": "24 color in the default list of colors for charts.",
+ "name": "--intergalactic-text-large-info-hover-active",
+ "value": "oklch(0.51 0.152 279.7)",
+ "description": "Hover and active states of the link text with font-size ≥20px.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-total-amount",
- "value": "oklch(0.64 0.003 157.8)",
- "description": "Use it to show total value on the chart.",
- "components": []
+ "name": "--intergalactic-text-large-secondary",
+ "value": "oklch(0.088 0.026 147.7 / 0.583)",
+ "description": "Secondary text. Use with font-size ≥20px.",
+ "components": [
+ "typography"
+ ]
},
{
- "name": "--intergalactic-chart-palette-order-other-data",
- "value": "oklch(0.82 0.002 171.1)",
- "description": "Use it to indicate voids, missing or some other data on the chart.",
+ "name": "--intergalactic-text-large-success",
+ "value": "oklch(0.53 0.142 170)",
+ "description": "Text with font-size ≥20px associated with success states and data.",
"components": []
},
{
- "name": "--intergalactic-chart-palette-order-null",
- "value": "oklch(0.9 0.002 177)",
- "description": "Use it to show null value on the chart.",
- "components": [
- "d3-chart"
- ]
+ "name": "--intergalactic-text-large-success-hover-active",
+ "value": "oklch(0.51 0.137 170)",
+ "description": "Hover and active states of the text with font-size ≥20px associated with success states and data.",
+ "components": []
},
{
- "name": "--intergalactic-chart-grid-line",
- "value": "oklch(0.95 0.002 180)",
- "description": "Grid and axis guide lines for charts.",
+ "name": "--intergalactic-text-link",
+ "value": "oklch(0.53 0.21 263)",
+ "description": "Default interactive link color for unfollowed links.",
"components": [
- "d3-chart"
+ "button",
+ "link",
+ "tab-panel",
+ "typography"
]
},
{
- "name": "--intergalactic-chart-grid-x-axis",
- "value": "oklch(0.88 0.002 175.6)",
- "description": "X-axis line on the chart grid.",
+ "name": "--intergalactic-text-link-hover-active",
+ "value": "oklch(0.51 0.202 263)",
+ "description": "Hover and active states for the link text.",
"components": [
- "d3-chart"
+ "button",
+ "link",
+ "tab-panel",
+ "typography"
]
},
{
- "name": "--intergalactic-chart-grid-y-accent-hover-line",
- "value": "oklch(0.88 0.002 175.6)",
- "description": "Accent line for the hover state on the chart grid.",
+ "name": "--intergalactic-text-link-invert",
+ "value": "oklch(0.75 0.125 265.3)",
+ "description": "Inverted version of the link text. Use on dark background only.",
"components": [
- "d3-chart"
+ "notice-bubble"
]
},
{
- "name": "--intergalactic-chart-grid-text-label",
- "value": "oklch(0.088 0.026 147.7 / 0.583)",
- "description": "Text label on the chart grid.",
- "components": [
- "d3-chart"
- ]
+ "name": "--intergalactic-text-link-invert-hover",
+ "value": "oklch(0.85 0.075 265.9)",
+ "description": "Hover and active states of the inverted version of the link text. Use on dark background only.",
+ "components": []
},
{
- "name": "--intergalactic-chart-grid-bar-chart-hover",
- "value": "oklch(0.177 0.033 175.6 / 0.028)",
- "description": "Background color for the hover state of a bar on the chart grid.",
+ "name": "--intergalactic-text-link-visited",
+ "value": "oklch(0.53 0.26 296)",
+ "description": "Visited link state so users can tell visited destinations apart from default links.",
"components": [
- "d3-chart"
+ "link"
]
- },
- {
- "name": "--intergalactic-chart-grid-bar-chart-base-bg",
- "value": "oklch(0.96 0.001 180)",
- "description": "Default background color of a bar in the BarChart.",
+ },
+ {
+ "name": "--intergalactic-text-placeholder",
+ "value": "oklch(0.098 0.023 157.4 / 0.457)",
+ "description": "Placeholder text color for inputs and fields.",
"components": [
- "d3-chart",
- "mini-chart"
+ "base-trigger",
+ "bulk-textarea",
+ "inline-input",
+ "input",
+ "input-mask",
+ "textarea"
]
},
{
- "name": "--intergalactic-chart-grid-period-bg",
- "value": "oklch(0.96 0.001 180)",
- "description": "Use for highlighting a period on the chart grid.",
+ "name": "--intergalactic-text-primary",
+ "value": "oklch(0.1 0.03 137 / 0.899)",
+ "description": "Default body and UI copy; strongest reading emphasis for primary content.",
"components": [
- "d3-chart"
+ "accordion",
+ "badge",
+ "base-components",
+ "base-trigger",
+ "breadcrumbs",
+ "bulk-textarea",
+ "button",
+ "card",
+ "checkbox",
+ "d3-chart",
+ "data-table",
+ "date-picker",
+ "dropdown",
+ "dropdown-menu",
+ "errors",
+ "feature-popover",
+ "fullscreen-modal",
+ "inline-input",
+ "input",
+ "input-mask",
+ "modal",
+ "notice",
+ "pagination",
+ "pills",
+ "product-head",
+ "radio",
+ "side-panel",
+ "switch",
+ "tab-line",
+ "tab-panel",
+ "textarea",
+ "time-picker",
+ "tooltip",
+ "typography"
]
},
{
- "name": "--intergalactic-chart-grid-period-pattern",
- "value": "oklch(0.95 0.002 180)",
- "description": "Stripe color for diagonal pattern background.",
+ "name": "--intergalactic-text-primary-invert",
+ "value": "oklch(0.999 0.001 180 / 0.949)",
+ "description": "Inverted version of the primary text.",
"components": [
- "d3-chart"
+ "badge",
+ "base-components",
+ "button",
+ "date-picker",
+ "dot",
+ "feature-highlight",
+ "feature-popover",
+ "notice-bubble",
+ "tag",
+ "tooltip",
+ "wizard"
]
},
{
- "name": "--intergalactic-chart-grid-border",
- "value": "#fff",
- "description": "Border for distinguishing data sets and chart dots on the chart grid.",
+ "name": "--intergalactic-text-secondary",
+ "value": "oklch(0.088 0.026 147.7 / 0.583)",
+ "description": "Supporting text: captions, metadata, hints in flowing copy—visually quieter than primary body text.",
"components": [
+ "breadcrumbs",
+ "bulk-textarea",
+ "button",
+ "card",
+ "counter",
"d3-chart",
- "mini-chart"
+ "date-picker",
+ "dropdown",
+ "dropdown-menu",
+ "flags",
+ "fullscreen-modal",
+ "pills",
+ "slider",
+ "switch",
+ "tab-panel",
+ "time-picker",
+ "typography",
+ "widget-empty"
]
},
{
- "name": "--intergalactic-chart-x-axis-accent-period-active",
- "value": "oklch(0.176 0.033 175.6 / 0.056)",
- "description": "Background color for the clickable date on the X-axis of the chart grid.",
+ "name": "--intergalactic-text-secondary-invert",
+ "value": "oklch(0.997 0.004 165.9 / 0.684)",
+ "description": "Inverted version of the secondary text.",
"components": []
},
{
- "name": "--intergalactic-chart-x-axis-accent-data-start-tracking",
- "value": "oklch(0.889 0.178 168.8 / 0.21)",
- "description": "Background color for the \"Start tracking\" date on the X-axis of the chart grid.",
+ "name": "--intergalactic-text-success",
+ "value": "oklch(0.53 0.142 170)",
+ "description": "Text associated with success states and data.",
"components": []
},
{
- "name": "--intergalactic-header-bg",
- "value": "oklch(0.97 0.001 180)",
+ "name": "--intergalactic-text-success-hover-active",
+ "value": "oklch(0.51 0.137 170)",
+ "description": "Hover and active states for the text associated with success states and data.",
"components": []
},
{
- "name": "--intergalactic-header-border-primary",
- "value": "oklch(0.137 0.026 175.7 / 0.161)",
+ "name": "--intergalactic-tooltip-bg-default",
+ "value": "oklch(1 0 0)",
+ "description": "Default Tooltip background.",
"components": []
},
{
- "name": "--intergalactic-header-border-secondary",
- "value": "oklch(0.137 0.026 175.7 / 0.161)",
+ "name": "--intergalactic-tooltip-bg-invert",
+ "value": "oklch(0.23 0.01 140)",
+ "description": "Inverted version of the default Tooltip background.",
"components": []
},
{
- "name": "--intergalactic-page-bg",
- "value": "oklch(0.97 0.001 180)",
- "description": "Background fill for the whole product page.",
+ "name": "--intergalactic-tooltip-bg-warning",
+ "value": "oklch(0.958 0.029 5.7)",
+ "description": "Warning Tooltip background.",
"components": []
},
{
- "name": "--intergalactic-footer-bg",
- "value": "oklch(0.97 0.001 180)",
- "description": "Background fill for the product page footer.",
+ "name": "--intergalactic-tooltip-border-invert",
+ "value": "oklch(0.995 0.008 145.9 / 0.369)",
+ "description": "Border of the Tooltip with dark theme.",
"components": []
},
{
- "name": "--intergalactic-sidebar-nav-bg",
- "value": "oklch(0.97 0.001 180)",
- "description": "Background fill for the product page sidebar.",
+ "name": "--intergalactic-tooltip-text",
+ "value": "oklch(0.1 0.03 137 / 0.899)",
+ "description": "Text color of the default Tooltip.",
"components": []
},
{
- "name": "--intergalactic-sidebar-nav-border",
- "value": "oklch(0.137 0.026 175.7 / 0.161)",
- "description": "Color for the border of the page sidebar.",
+ "name": "--intergalactic-tooltip-text-invert",
+ "value": "oklch(0.999 0.001 180 / 0.949)",
+ "description": "Text color of the inverted Tooltip.",
"components": []
},
{
- "name": "--intergalactic-sidebar-nav-control-hover",
- "value": "oklch(0.176 0.033 175.6 / 0.056)",
- "description": "Sidebar navigation row hover background.",
+ "name": "--intergalactic-wizard-bg",
+ "value": "oklch(1 0 0)",
+ "description": "Main background of the Wizard.",
"components": []
},
{
- "name": "--intergalactic-sidebar-nav-control-active",
- "value": "oklch(0.176 0.033 175.7 / 0.084)",
- "description": "Sidebar navigation row active background.",
+ "name": "--intergalactic-wizard-sidebar-bg",
+ "value": "oklch(0.64 0.223 299.3)",
+ "description": "Background of the Wizard sidebar.",
"components": []
},
{
- "name": "--intergalactic-sidebar-nav-control-text-normal",
- "value": "oklch(0.53 0.004 149.6)",
- "description": "Sidebar navigation label color.",
+ "name": "--intergalactic-wizard-sidebar-control",
+ "value": "oklch(0.64 0.223 299.3)",
+ "description": "Background of the control in the Wizard sidebar in its normal state.",
"components": []
},
{
- "name": "--intergalactic-sidebar-nav-control-text-active",
- "value": "oklch(0.23 0.01 140)",
- "description": "Sidebar navigation label color for the active item.",
+ "name": "--intergalactic-wizard-sidebar-control-active",
+ "value": "oklch(0.58 0.254 297.1)",
+ "description": "Active state of the control in the Wizard sidebar.",
"components": []
},
{
- "name": "--intergalactic-sidebar-nav-control-icon-normal",
- "value": "oklch(0.58 0.003 153.3)",
- "description": "Sidebar navigation icon color.",
+ "name": "--intergalactic-wizard-sidebar-control-hover",
+ "value": "oklch(0.6 0.244 297.8)",
+ "description": "Hover state of the control in the Wizard sidebar.",
"components": []
},
{
- "name": "--intergalactic-sidebar-nav-control-icon-active",
- "value": "oklch(0.53 0.004 149.6)",
- "description": "Sidebar navigation icon color for the active item.",
+ "name": "--intergalactic-wizard-sidebar-text-primary",
+ "value": "oklch(0.999 0.001 180 / 0.949)",
+ "description": "Primary text color in the Wizard sidebar.",
"components": []
},
{
- "name": "--intergalactic-slider-rating-normal",
- "value": "oklch(0.7 0.003 162.2)",
- "description": "Icon color for the SliderRating component in its normal state.",
- "components": [
- "feedback-form"
- ]
- },
- {
- "name": "--intergalactic-slider-rating-hover-active",
- "value": "oklch(0.66 0.212 300.1)",
- "description": "Icon color for the SliderRating component in its hovered and active states.",
- "components": [
- "feedback-form"
- ]
+ "name": "--intergalactic-wizard-sidebar-text-secondary",
+ "value": "oklch(0.997 0.004 165.9 / 0.684)",
+ "description": "Secondary text color in the Wizard sidebar.",
+ "components": []
},
{
"name": "--intergalactic-disabled-opacity",
@@ -2609,29 +3055,10 @@
]
},
{
- "name": "--intergalactic-counter-rounded",
- "value": "12px",
- "description": "Rounding for counter/numeric capsules used as small indicators.",
- "components": [
- "counter",
- "dot"
- ]
- },
- {
- "name": "--intergalactic-tag-rounded",
- "value": "24px",
- "description": "Corner radius for Tag (including removable tags) in dense UI.",
- "components": [
- "tag"
- ]
- },
- {
- "name": "--intergalactic-switch-rounded",
- "value": "24px",
- "description": "Pill-shaped rounding for Switch geometry (full rounded track/thumb pattern).",
- "components": [
- "switch"
- ]
+ "name": "--intergalactic-checkbox-rounded",
+ "value": "6px",
+ "description": "Use for rounding Checkbox.",
+ "components": []
},
{
"name": "--intergalactic-control-rounded",
@@ -2654,6 +3081,43 @@
"wizard"
]
},
+ {
+ "name": "--intergalactic-counter-rounded",
+ "value": "12px",
+ "description": "Rounding for counter/numeric capsules used as small indicators.",
+ "components": [
+ "counter",
+ "dot"
+ ]
+ },
+ {
+ "name": "--intergalactic-modal-rounded",
+ "value": "14px",
+ "description": "Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard).",
+ "components": [
+ "modal",
+ "wizard"
+ ]
+ },
+ {
+ "name": "--intergalactic-pills-rounded",
+ "value": "6px",
+ "description": "Use for rounding Pills.",
+ "components": []
+ },
+ {
+ "name": "--intergalactic-popper-rounded",
+ "value": "6px",
+ "description": "Use for rounding all kinds of poppers and dropdowns.",
+ "components": [
+ "base-components",
+ "d3-chart",
+ "dropdown",
+ "feature-popover",
+ "notice-bubble",
+ "tooltip"
+ ]
+ },
{
"name": "--intergalactic-progress-bar-rounded",
"value": "6px",
@@ -2678,25 +3142,19 @@
]
},
{
- "name": "--intergalactic-popper-rounded",
- "value": "6px",
- "description": "Use for rounding all kinds of poppers and dropdowns.",
+ "name": "--intergalactic-switch-rounded",
+ "value": "24px",
+ "description": "Pill-shaped rounding for Switch geometry (full rounded track/thumb pattern).",
"components": [
- "base-components",
- "d3-chart",
- "dropdown",
- "feature-popover",
- "notice-bubble",
- "tooltip"
+ "switch"
]
},
{
- "name": "--intergalactic-modal-rounded",
- "value": "14px",
- "description": "Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard).",
+ "name": "--intergalactic-tag-rounded",
+ "value": "24px",
+ "description": "Corner radius for Tag (including removable tags) in dense UI.",
"components": [
- "modal",
- "wizard"
+ "tag"
]
},
{