diff --git a/semcore/core/src/theme/themes/highlights-dark.css b/semcore/core/src/theme/themes/highlights-dark.css index 8e5b62a6f8..72d9294e01 100644 --- a/semcore/core/src/theme/themes/highlights-dark.css +++ b/semcore/core/src/theme/themes/highlights-dark.css @@ -1,36 +1,36 @@ :root { /* Primary background for highlighted controls. */ - --intergalactic-bg-primary-feature-highlight: rgba(30, 34, 49, 1); + --intergalactic-feature-highlight-bg-primary: rgba(30, 34, 49, 1); /* Primary background for hover and active (selected) state of highlighted controls. */ - --intergalactic-bg-primary-feature-highlight-hover-active: linear-gradient(90deg, #f9f2ff, #e9f7ff); + --intergalactic-feature-highlight-bg-primary-hover-active: linear-gradient(90deg, #f9f2ff, #e9f7ff); /* Secondary background for the highlighted message. */ - --intergalactic-bg-secondary-feature-highlight: linear-gradient(90deg, #f9f2ff, #e9f7ff); + --intergalactic-feature-highlight-bg-secondary: linear-gradient(90deg, #f9f2ff, #e9f7ff); /* Primary border for highlighted controls. */ - --intergalactic-border-feature-highlight: linear-gradient(90deg, #c695ff, #2bb3ff); + --intergalactic-feature-highlight-border-primary: linear-gradient(90deg, #c695ff, #2bb3ff); /* Primary border for the active state of highlighted controls. */ - --intergalactic-border-feature-highlight-active: linear-gradient(90deg, #ab6cfe, #008ff8); + --intergalactic-feature-highlight-border-primary-active: linear-gradient(90deg, #ab6cfe, #008ff8); /* Secondary border for highlighted controls. */ - --intergalactic-border-feature-highlight-secondary: linear-gradient(90deg, #dcb8ff, #8ecdff); + --intergalactic-feature-highlight-border-secondary: linear-gradient(90deg, #dcb8ff, #8ecdff); /* Background of the highlighted primary control. */ - --intergalactic-control-primary-feature-highlight: linear-gradient(90deg, #ab6cfe, #008ff8); + --intergalactic-feature-highlight-control-primary: linear-gradient(90deg, #ab6cfe, #008ff8); /* Hover state of the highlighted primary control. */ - --intergalactic-control-primary-feature-highlight-hover: linear-gradient(90deg, #8649e1, #006dca); + --intergalactic-feature-highlight-control-primary-hover: linear-gradient(90deg, #8649e1, #006dca); /* Active (selected) state of the highlighted primary control. */ - --intergalactic-control-primary-feature-highlight-active: linear-gradient(90deg, #5925ab, #044792); + --intergalactic-feature-highlight-control-primary-active: linear-gradient(90deg, #5925ab, #044792); /* Background of the highlighted secondary control. */ - --intergalactic-control-secondary-feature-highlight: linear-gradient(90deg, #f9f2ff, #e9f7ff); + --intergalactic-feature-highlight-control-secondary: linear-gradient(90deg, #f9f2ff, #e9f7ff); /* Hover state of the highlighted secondary control. */ - --intergalactic-control-secondary-feature-highlight-hover: linear-gradient(90deg, #f2e4ff, #d6edfe); + --intergalactic-feature-highlight-control-secondary-hover: linear-gradient(90deg, #f2e4ff, #d6edfe); /* Active (selected) state of the highlighted secondary control. */ - --intergalactic-control-secondary-feature-highlight-active: linear-gradient(90deg, #edd9ff, #c4e5fe); + --intergalactic-feature-highlight-control-secondary-active: linear-gradient(90deg, #edd9ff, #c4e5fe); /* Text for highlighted features. */ - --intergalactic-text-feature-highlight: linear-gradient(90deg, #8649e1, #006dca); + --intergalactic-feature-highlight-text: linear-gradient(90deg, #8649e1, #006dca); /* Text for hover and active states of highlighted features. */ - --intergalactic-text-feature-highlight-hover-active: linear-gradient(90deg, #421983, #002b5f); + --intergalactic-feature-highlight-text-hover-active: linear-gradient(90deg, #421983, #002b5f); /* Primary highlighted icon. */ - --intergalactic-icon-primary-feature-highlight: #8649e1; + --intergalactic-feature-highlight-icon-primary: #8649e1; /* Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color. */ - --intergalactic-icon-primary-feature-highlight-hover-active: #6B3AB4; + --intergalactic-feature-highlight-icon-primary-hover-active: #6B3AB4; /* Color for keyboard focus outline styles for highlighted controls. */ - --intergalactic-keyboard-focus-feature-highlight-outline: linear-gradient(90deg, #ab6cfe, #008ff8); + --intergalactic-feature-highlight-keyboard-focus-outline: linear-gradient(90deg, #ab6cfe, #008ff8); } \ No newline at end of file diff --git a/semcore/core/src/theme/themes/highlights-dark.ts b/semcore/core/src/theme/themes/highlights-dark.ts index b7c812a6fe..6524367205 100644 --- a/semcore/core/src/theme/themes/highlights-dark.ts +++ b/semcore/core/src/theme/themes/highlights-dark.ts @@ -1,19 +1,19 @@ export default { - '--intergalactic-bg-primary-feature-highlight': 'rgba(30, 34, 49, 1)', - '--intergalactic-bg-primary-feature-highlight-hover-active': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)', - '--intergalactic-bg-secondary-feature-highlight': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)', - '--intergalactic-border-feature-highlight': 'linear-gradient(90deg, #c695ff, #2bb3ff)', - '--intergalactic-border-feature-highlight-active': 'linear-gradient(90deg, #ab6cfe, #008ff8)', - '--intergalactic-border-feature-highlight-secondary': 'linear-gradient(90deg, #dcb8ff, #8ecdff)', - '--intergalactic-control-primary-feature-highlight': 'linear-gradient(90deg, #ab6cfe, #008ff8)', - '--intergalactic-control-primary-feature-highlight-hover': 'linear-gradient(90deg, #8649e1, #006dca)', - '--intergalactic-control-primary-feature-highlight-active': 'linear-gradient(90deg, #5925ab, #044792)', - '--intergalactic-control-secondary-feature-highlight': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)', - '--intergalactic-control-secondary-feature-highlight-hover': 'linear-gradient(90deg, #f2e4ff, #d6edfe)', - '--intergalactic-control-secondary-feature-highlight-active': 'linear-gradient(90deg, #edd9ff, #c4e5fe)', - '--intergalactic-text-feature-highlight': 'linear-gradient(90deg, #8649e1, #006dca)', - '--intergalactic-text-feature-highlight-hover-active': 'linear-gradient(90deg, #421983, #002b5f)', - '--intergalactic-icon-primary-feature-highlight': '#8649e1', - '--intergalactic-icon-primary-feature-highlight-hover-active': '#6B3AB4', - '--intergalactic-keyboard-focus-feature-highlight-outline': 'linear-gradient(90deg, #ab6cfe, #008ff8)', + '--intergalactic-feature-highlight-bg-primary': 'rgba(30, 34, 49, 1)', + '--intergalactic-feature-highlight-bg-primary-hover-active': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)', + '--intergalactic-feature-highlight-bg-secondary': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)', + '--intergalactic-feature-highlight-border-primary': 'linear-gradient(90deg, #c695ff, #2bb3ff)', + '--intergalactic-feature-highlight-border-primary-active': 'linear-gradient(90deg, #ab6cfe, #008ff8)', + '--intergalactic-feature-highlight-border-secondary': 'linear-gradient(90deg, #dcb8ff, #8ecdff)', + '--intergalactic-feature-highlight-control-primary': 'linear-gradient(90deg, #ab6cfe, #008ff8)', + '--intergalactic-feature-highlight-control-primary-hover': 'linear-gradient(90deg, #8649e1, #006dca)', + '--intergalactic-feature-highlight-control-primary-active': 'linear-gradient(90deg, #5925ab, #044792)', + '--intergalactic-feature-highlight-control-secondary': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)', + '--intergalactic-feature-highlight-control-secondary-hover': 'linear-gradient(90deg, #f2e4ff, #d6edfe)', + '--intergalactic-feature-highlight-control-secondary-active': 'linear-gradient(90deg, #edd9ff, #c4e5fe)', + '--intergalactic-feature-highlight-text': 'linear-gradient(90deg, #8649e1, #006dca)', + '--intergalactic-feature-highlight-text-hover-active': 'linear-gradient(90deg, #421983, #002b5f)', + '--intergalactic-feature-highlight-icon-primary': '#8649e1', + '--intergalactic-feature-highlight-icon-primary-hover-active': '#6B3AB4', + '--intergalactic-feature-highlight-keyboard-focus-outline': 'linear-gradient(90deg, #ab6cfe, #008ff8)', }; diff --git a/semcore/core/src/theme/themes/highlights-light.css b/semcore/core/src/theme/themes/highlights-light.css index fd991976f0..f738593fae 100644 --- a/semcore/core/src/theme/themes/highlights-light.css +++ b/semcore/core/src/theme/themes/highlights-light.css @@ -1,36 +1,36 @@ :root { /* Primary background for highlighted controls. */ - --intergalactic-bg-primary-feature-highlight: #ffffff; + --intergalactic-feature-highlight-bg-primary: #ffffff; /* Primary background for hover and active (selected) state of highlighted controls. */ - --intergalactic-bg-primary-feature-highlight-hover-active: linear-gradient(90deg, #f9f2ff, #e9f7ff); + --intergalactic-feature-highlight-bg-primary-hover-active: linear-gradient(90deg, #f9f2ff, #e9f7ff); /* Secondary background for the highlighted message. */ - --intergalactic-bg-secondary-feature-highlight: linear-gradient(90deg, #f9f2ff, #e9f7ff); + --intergalactic-feature-highlight-bg-secondary: linear-gradient(90deg, #f9f2ff, #e9f7ff); /* Primary border for highlighted controls. */ - --intergalactic-border-feature-highlight: linear-gradient(90deg, #c695ff, #2bb3ff); + --intergalactic-feature-highlight-border-primary: linear-gradient(90deg, #c695ff, #2bb3ff); /* Primary border for the active state of highlighted controls. */ - --intergalactic-border-feature-highlight-active: linear-gradient(90deg, #ab6cfe, #008ff8); + --intergalactic-feature-highlight-border-primary-active: linear-gradient(90deg, #ab6cfe, #008ff8); /* Secondary border for highlighted controls. */ - --intergalactic-border-feature-highlight-secondary: linear-gradient(90deg, #dcb8ff, #8ecdff); + --intergalactic-feature-highlight-border-secondary: linear-gradient(90deg, #dcb8ff, #8ecdff); /* Background of the highlighted primary control. */ - --intergalactic-control-primary-feature-highlight: linear-gradient(90deg, #ab6cfe, #008ff8); + --intergalactic-feature-highlight-control-primary: linear-gradient(90deg, #ab6cfe, #008ff8); /* Hover state of the highlighted primary control. */ - --intergalactic-control-primary-feature-highlight-hover: linear-gradient(90deg, #8649e1, #006dca); + --intergalactic-feature-highlight-control-primary-hover: linear-gradient(90deg, #8649e1, #006dca); /* Active (selected) state of the highlighted primary control. */ - --intergalactic-control-primary-feature-highlight-active: linear-gradient(90deg, #5925ab, #044792); + --intergalactic-feature-highlight-control-primary-active: linear-gradient(90deg, #5925ab, #044792); /* Background of the highlighted secondary control. */ - --intergalactic-control-secondary-feature-highlight: linear-gradient(90deg, #f9f2ff, #e9f7ff); + --intergalactic-feature-highlight-control-secondary: linear-gradient(90deg, #f9f2ff, #e9f7ff); /* Hover state of the highlighted secondary control. */ - --intergalactic-control-secondary-feature-highlight-hover: linear-gradient(90deg, #f2e4ff, #d6edfe); + --intergalactic-feature-highlight-control-secondary-hover: linear-gradient(90deg, #f2e4ff, #d6edfe); /* Active (selected) state of the highlighted secondary control. */ - --intergalactic-control-secondary-feature-highlight-active: linear-gradient(90deg, #edd9ff, #c4e5fe); + --intergalactic-feature-highlight-control-secondary-active: linear-gradient(90deg, #edd9ff, #c4e5fe); /* Text for highlighted features. */ - --intergalactic-text-feature-highlight: linear-gradient(90deg, #8649e1, #006dca); + --intergalactic-feature-highlight-text: linear-gradient(90deg, #8649e1, #006dca); /* Text for hover and active states of highlighted features. */ - --intergalactic-text-feature-highlight-hover-active: linear-gradient(90deg, #421983, #002b5f); + --intergalactic-feature-highlight-text-hover-active: linear-gradient(90deg, #421983, #002b5f); /* Primary highlighted icon. */ - --intergalactic-icon-primary-feature-highlight: #8649e1; + --intergalactic-feature-highlight-icon-primary: #8649e1; /* Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color. */ - --intergalactic-icon-primary-feature-highlight-hover-active: #6B3AB4; + --intergalactic-feature-highlight-icon-primary-hover-active: #6B3AB4; /* Color for keyboard focus outline styles for highlighted controls. */ - --intergalactic-keyboard-focus-feature-highlight-outline: linear-gradient(90deg, #ab6cfe, #008ff8); + --intergalactic-feature-highlight-keyboard-focus-outline: linear-gradient(90deg, #ab6cfe, #008ff8); } \ No newline at end of file diff --git a/semcore/core/src/theme/themes/highlights-light.ts b/semcore/core/src/theme/themes/highlights-light.ts index 3afa212be7..5a84f01076 100644 --- a/semcore/core/src/theme/themes/highlights-light.ts +++ b/semcore/core/src/theme/themes/highlights-light.ts @@ -1,19 +1,19 @@ export default { - '--intergalactic-bg-primary-feature-highlight': '#ffffff', - '--intergalactic-bg-primary-feature-highlight-hover-active': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)', - '--intergalactic-bg-secondary-feature-highlight': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)', - '--intergalactic-border-feature-highlight': 'linear-gradient(90deg, #c695ff, #2bb3ff)', - '--intergalactic-border-feature-highlight-active': 'linear-gradient(90deg, #ab6cfe, #008ff8)', - '--intergalactic-border-feature-highlight-secondary': 'linear-gradient(90deg, #dcb8ff, #8ecdff)', - '--intergalactic-control-primary-feature-highlight': 'linear-gradient(90deg, #ab6cfe, #008ff8)', - '--intergalactic-control-primary-feature-highlight-hover': 'linear-gradient(90deg, #8649e1, #006dca)', - '--intergalactic-control-primary-feature-highlight-active': 'linear-gradient(90deg, #5925ab, #044792)', - '--intergalactic-control-secondary-feature-highlight': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)', - '--intergalactic-control-secondary-feature-highlight-hover': 'linear-gradient(90deg, #f2e4ff, #d6edfe)', - '--intergalactic-control-secondary-feature-highlight-active': 'linear-gradient(90deg, #edd9ff, #c4e5fe)', - '--intergalactic-text-feature-highlight': 'linear-gradient(90deg, #8649e1, #006dca)', - '--intergalactic-text-feature-highlight-hover-active': 'linear-gradient(90deg, #421983, #002b5f)', - '--intergalactic-icon-primary-feature-highlight': '#8649e1', - '--intergalactic-icon-primary-feature-highlight-hover-active': '#6B3AB4', - '--intergalactic-keyboard-focus-feature-highlight-outline': 'linear-gradient(90deg, #ab6cfe, #008ff8)', + '--intergalactic-feature-highlight-bg-primary': '#ffffff', + '--intergalactic-feature-highlight-bg-primary-hover-active': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)', + '--intergalactic-feature-highlight-bg-secondary': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)', + '--intergalactic-feature-highlight-border-primary': 'linear-gradient(90deg, #c695ff, #2bb3ff)', + '--intergalactic-feature-highlight-border-primary-active': 'linear-gradient(90deg, #ab6cfe, #008ff8)', + '--intergalactic-feature-highlight-border-secondary': 'linear-gradient(90deg, #dcb8ff, #8ecdff)', + '--intergalactic-feature-highlight-control-primary': 'linear-gradient(90deg, #ab6cfe, #008ff8)', + '--intergalactic-feature-highlight-control-primary-hover': 'linear-gradient(90deg, #8649e1, #006dca)', + '--intergalactic-feature-highlight-control-primary-active': 'linear-gradient(90deg, #5925ab, #044792)', + '--intergalactic-feature-highlight-control-secondary': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)', + '--intergalactic-feature-highlight-control-secondary-hover': 'linear-gradient(90deg, #f2e4ff, #d6edfe)', + '--intergalactic-feature-highlight-control-secondary-active': 'linear-gradient(90deg, #edd9ff, #c4e5fe)', + '--intergalactic-feature-highlight-text': 'linear-gradient(90deg, #8649e1, #006dca)', + '--intergalactic-feature-highlight-text-hover-active': 'linear-gradient(90deg, #421983, #002b5f)', + '--intergalactic-feature-highlight-icon-primary': '#8649e1', + '--intergalactic-feature-highlight-icon-primary-hover-active': '#6B3AB4', + '--intergalactic-feature-highlight-keyboard-focus-outline': 'linear-gradient(90deg, #ab6cfe, #008ff8)', }; diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx index f2a3757335..c1565a214e 100644 --- a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx +++ b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx @@ -407,7 +407,7 @@ test.describe(`${TAG.VISUAL} `, () => { await expectBackgroundImageToContainToken( page, styles.backgroundImage, - featureHighlightTokens.border, + featureHighlightTokens.focusOutline, ); await expect(page).toHaveScreenshot(); @@ -416,7 +416,7 @@ test.describe(`${TAG.VISUAL} `, () => { await expectBackgroundImageToContainToken( page, stylesSelected.backgroundImage, - featureHighlightTokens.border, + featureHighlightTokens.focusOutline, ); await expect(page).toHaveScreenshot(); diff --git a/semcore/feature-highlight/src/components/badge/badge.shadow.css b/semcore/feature-highlight/src/components/badge/badge.shadow.css index 4a1a2b2165..c6ba747f24 100644 --- a/semcore/feature-highlight/src/components/badge/badge.shadow.css +++ b/semcore/feature-highlight/src/components/badge/badge.shadow.css @@ -17,7 +17,7 @@ SHighlightedBadge { } SHighlightedBadge[use='accent'] { - background-image: var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1))); + background-color: var(--intergalactic-feature-highlight-badge-accent, oklch(0.22 0.01 140)); } SHighlightedBadge[bg] { diff --git a/semcore/feature-highlight/src/components/button/button.shadow.css b/semcore/feature-highlight/src/components/button/button.shadow.css index 0b1d8bf3df..c89ebcc80a 100644 --- a/semcore/feature-highlight/src/components/button/button.shadow.css +++ b/semcore/feature-highlight/src/components/button/button.shadow.css @@ -1,24 +1,20 @@ SHighlightedButton[theme='primary-highlighted'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); - background-image: linear-gradient(90deg, - var(--intergalactic-violet-500, oklch(0.53 0.26 296)), - var(--intergalactic-blue-500, oklch(0.53 0.157 279.2)), - var(--intergalactic-violet-400, oklch(0.64 0.223 299.3)), - var(--intergalactic-blue-400, oklch(0.58 0.168 278.2))); - background-position-x: 99%; - background-size: 300%; - transition: background-position-x 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); + color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); + + [data-ui-name='SummaryAI'] { + color: var(--intergalactic-brand-tertiary, oklch(0.82 0.15 170)); + } &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); - background-position-x: 1%; + color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + 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)); - background-image: var(--intergalactic-control-primary-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.58 0.168 278.2))); - background-size: 100%; + color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + background-color: var(--intergalactic-control-primary-info-active, oklch(0 0 140)); } &:focus-visible { @@ -27,46 +23,17 @@ SHighlightedButton[theme='primary-highlighted'] { } SHighlightedButton[theme='secondary-highlighted'] { - color: var(--intergalactic-icon-primary-feature-highlight, oklch(0.58 0.254 297.1)); - - background: - var(--intergalactic-control-secondary-feature-highlight, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.969 0.016 267.7))) padding-box, - var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box; - background-origin: border-box; - background-clip: padding-box, border-box; - - & SText { - background-color: var(--intergalactic-icon-primary-feature-highlight, oklch(0.58 0.254 297.1)); - background-image: var(--intergalactic-text-feature-highlight, linear-gradient(90deg in oklch, oklch(0.53 0.26 296), oklch(0.53 0.157 279.2))); - background-clip: text; - -webkit-text-fill-color: transparent; - } - - &:hover { - background: - var(--intergalactic-control-secondary-feature-highlight-hover, linear-gradient(90deg in oklch, oklch(0.9 0.065 303), oklch(0.898 0.054 268.3))) padding-box, - var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box; + color: var(--intergalactic-text-primary-feature-highlight, undefined); - color: var(--intergalactic-icon-primary-feature-highlight-hover-active, oklch(0.53 0.26 296)); + background-color: var(--intergalactic-feature-highlight-control-secondary, oklch(0.166 0.031 175.8 / 0.097)); - & SText { - background-color: var(--intergalactic-icon-primary-feature-highlight-hover-active, oklch(0.53 0.26 296)); - background-image: var(--intergalactic-text-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.53 0.26 296), oklch(0.53 0.157 279.2))); - } + &:hover { + background-color: var(--intergalactic-feature-highlight-control-secondary-hover, oklch(0.151 0.028 176.1 / 0.123)); } &:active, &[active] { - background: - var(--intergalactic-control-secondary-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.9 0.065 303), oklch(0.898 0.054 268.3))) padding-box, - var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box; - - color: var(--intergalactic-icon-primary-feature-highlight-hover-active, oklch(0.53 0.26 296)); - - & SText { - background-color: var(--intergalactic-icon-primary-feature-highlight-hover-active, oklch(0.53 0.26 296)); - background-image: var(--intergalactic-text-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.53 0.26 296), oklch(0.53 0.157 279.2))); - } + background-color: var(--intergalactic-feature-highlight-control-secondary-active, oklch(0.145 0.027 176.1 / 0.135)); } &:focus-visible { @@ -87,7 +54,7 @@ SHighlightedButton { padding: 2px; border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px); - background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2))); + background-image: var(--intergalactic-feature-highlight-keyboard-focus-outline, linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))); mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff); mask-composite: exclude; @@ -126,10 +93,10 @@ SHighlightedButton:focus-visible::before { outline: none; box-shadow: 0 0 0 2px #ffffff, - 0 0 0 4px #7078FC; + 0 0 0 4px #59ddaa; } SHighlightedButton:focus-visible::before { display: none; } -} +} \ No newline at end of file diff --git a/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css b/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css index 823a6b2d00..0c89282da3 100644 --- a/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css +++ b/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css @@ -2,55 +2,59 @@ SHighlightedCheckbox:not([state="invalid"]) { [data-ui-name="Value.CheckMark"] { position: relative; transform: translate(0); + border: 1px solid var(--intergalactic-feature-highlight-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border-radius: var(--intergalactic-checkbox-rounded, 4px); + background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); + } - border: 1px solid transparent; - border-radius: var(--intergalactic-addon-rounded, 4px); - 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; - background-origin: border-box; - background-clip: padding-box, border-box; + input[data-ui-name="CheckboxFH.Value"]:is(:checked, :indeterminate) + [data-ui-name="Value.CheckMark"] { + background-color: var(--intergalactic-feature-highlight-control-primary, oklch(0.23 0.01 140)); + border-color: var(--intergalactic-feature-highlight-control-primary, oklch(0.23 0.01 140)); } - 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; + &:active input[data-ui-name="CheckboxFH.Value"]:is(:checked, :indeterminate) + [data-ui-name="Value.CheckMark"] { + background-color: var(--intergalactic-feature-highlight-control-primary-active, oklch(0 0 140)); + border-color: var(--intergalactic-feature-highlight-control-primary-active, oklch(0 0 140)); } - [data-ui-name="Value.CheckMark"]::before { + [data-ui-name="Value.CheckMark"]::before, + input[data-ui-name="CheckboxFH.Value"]:is(:checked, :indeterminate) + [data-ui-name="Value.CheckMark"]::before { content: ""; position: absolute; z-index: -1; inset: 0; margin: -5px; padding: 1px; - border-width: 2px; - border-radius: calc(var(--intergalactic-addon-rounded, 4px) + 3px); - border-color: transparent; + border: none; + border-radius: calc(var(--intergalactic-checkbox-rounded, 4px) + 3px); pointer-events: none; - 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; + background-color: transparent; + background-image: var(--intergalactic-feature-highlight-keyboard-focus-outline, linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))); mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff); mask-composite: exclude; - opacity: 0; transform: scale(0.9); - transition: opacity calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out, transform calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out; } - input[data-ui-name="CheckboxFH.Value"]:checked:not(:focus-visible)+[data-ui-name="Value.CheckMark"]::before { - opacity: 0; - transform: scale(0.9); - } - - input[data-ui-name="CheckboxFH.Value"]:focus-visible+[data-ui-name="Value.CheckMark"]::before { + input[data-ui-name="CheckboxFH.Value"]:focus-visible + [data-ui-name="Value.CheckMark"]::before { opacity: 1; transform: scale(1); } +} + +/* Firefox fallback */ +@supports not (-webkit-mask-composite: xor) { + SHighlightedCheckbox:not([state="invalid"]) input[data-ui-name="CheckboxFH.Value"]:focus-visible + [data-ui-name="Value.CheckMark"] { + outline: none; + box-shadow: + 0 0 0 2px #ffffff, + 0 0 0 4px #59ddaa; + } - input[data-ui-name="CheckboxFH.Value"]:checked:focus-visible+[data-ui-name="Value.CheckMark"]::before { - border-color: transparent; - background: linear-gradient(white, white) 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; + SHighlightedCheckbox:not([state="invalid"]) input[data-ui-name="CheckboxFH.Value"]:focus-visible + [data-ui-name="Value.CheckMark"]::before { + display: none; } } diff --git a/semcore/feature-highlight/src/components/input/Input.tsx b/semcore/feature-highlight/src/components/input/Input.tsx index 9e6e46a5f4..f4dbd2cfb2 100644 --- a/semcore/feature-highlight/src/components/input/Input.tsx +++ b/semcore/feature-highlight/src/components/input/Input.tsx @@ -23,7 +23,7 @@ function HighlightAddon(props: Intergalactic.InternalTypings.InferComponentProps const { Children, children: hasChildren } = props; return ( - {hasChildren ? () : ()} + {hasChildren ? () : ()} ); } diff --git a/semcore/feature-highlight/src/components/input/input.shadow.css b/semcore/feature-highlight/src/components/input/input.shadow.css index 7853c45600..14bb998a8b 100644 --- a/semcore/feature-highlight/src/components/input/input.shadow.css +++ b/semcore/feature-highlight/src/components/input/input.shadow.css @@ -1,21 +1,17 @@ SHighlightedInput[state='normal'] { SOutline { - 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; - background-origin: border-box; - background-clip: padding-box, border-box; - border-color: transparent; + border-color: var(--intergalactic-feature-highlight-border-primary, oklch(0.137 0.026 175.7 / 0.161)); &::before { content: ""; position: absolute; z-index: -1; inset: 0; - margin: -3px; + margin: -4px; padding: 3px; border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px); - background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2))); + background-image: var(--intergalactic-feature-highlight-keyboard-focus-outline, linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))); mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff); mask-composite: exclude; @@ -27,6 +23,7 @@ SHighlightedInput[state='normal'] { &:has(SValue:focus-visible) SOutline { outline: none; + border-color: var(--intergalactic-feature-highlight-border-primary-active, oklch(0.22 0.01 140)); &::before { opacity: 1; @@ -52,10 +49,10 @@ SHighlightedInput[state='normal'] { @supports not (-webkit-mask-composite: xor) { SHighlightedInput[state='normal']:has(SValue:focus-visible) SOutline { outline: none; - border-color: #7078FC; + border-color: var(--intergalactic-feature-highlight-border-primary, oklch(0.137 0.026 175.7 / 0.161)); box-shadow: - 0 0 0 0 #ffffff, - 0 0 0 2px #7078FC; + 0 0 0 2px #ffffff, + 0 0 0 4px #59ddaa; } SHighlightedInput[state='normal']:has(SValue:focus-visible) SOutline::before { diff --git a/semcore/feature-highlight/src/components/notice/notice.shadow.css b/semcore/feature-highlight/src/components/notice/notice.shadow.css index e07271d38b..6de973bddb 100644 --- a/semcore/feature-highlight/src/components/notice/notice.shadow.css +++ b/semcore/feature-highlight/src/components/notice/notice.shadow.css @@ -1,8 +1,9 @@ SHighlightedNotice[beforeVisibility] { - background-image: var(--intergalactic-bg-secondary-feature-highlight, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))); + background-color: var(--intergalactic-feature-highlight-bg-secondary, oklch(0.9 0.065 303)); border-color: transparent; background-clip: padding-box; position: relative; + isolation: isolate; &:before { content: ''; @@ -13,11 +14,39 @@ SHighlightedNotice[beforeVisibility] { border-radius: inherit; visibility: var(--beforeVisibility); - background: 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, 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; + border-color: var(--intergalactic-feature-highlight-bg-secondary, oklch(0.9 0.065 303)); + } + + &:after { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 112px; + z-index: 0; + border-top-right-radius: inherit; + border-bottom-right-radius: inherit; + pointer-events: none; + visibility: var(--beforeVisibility); + background-color: var(--intergalactic-brand-primary, oklch(0.74 0.17 303)); + mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20width%3D%22106.654%22%20height%3D%2272%22%20viewBox%3D%220%200%20106.654%2072%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M106.654%20-6.99427e-08C106.654%202.66667%20106.654%205.33333%20106.654%208C104.877%207.93333%20103.099%207.86667%20101.322%207.8C69.3267%206.6%2037.3316%205.39999%205.33643%204.19999C3.55891%204.13332%201.78141%204.06666%200.00390625%203.99999C1.78141%203.93332%203.55891%203.86666%205.33643%203.79999C37.3316%202.59999%2069.3267%201.4%20101.322%200.2C103.099%200.133333%20104.877%200.0666664%20106.654%20-6.99427e-08Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M106.654%208C106.654%2010.6667%20106.654%2013.3333%20106.654%2016C104.877%2015.9333%20103.099%2015.8667%20101.322%2015.8C69.3267%2014.6%2037.3316%2013.4%205.33643%2012.2C3.55891%2012.1333%201.78141%2012.0667%200.00390625%2012C1.78141%2011.9333%203.55891%2011.8667%205.33643%2011.8C37.3316%2010.6%2069.3267%209.4%20101.322%208.2C103.099%208.13333%20104.877%208.06667%20106.654%208Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M106.65%2016C106.65%2018.6667%20106.65%2021.3333%20106.65%2024C104.873%2023.9333%20103.095%2023.8667%20101.318%2023.8C69.3228%2022.6%2037.3277%2021.4%205.33253%2020.2C3.55501%2020.1333%201.77751%2020.0667%200%2020C1.77751%2019.9333%203.55501%2019.8667%205.33253%2019.8C37.3277%2018.6%2069.3228%2017.4%20101.318%2016.2C103.095%2016.1333%20104.873%2016.0667%20106.65%2016Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M106.65%2024C106.65%2026.6667%20106.65%2029.3333%20106.65%2032C104.873%2031.9333%20103.095%2031.8667%20101.318%2031.8C69.3228%2030.6%2037.3277%2029.4%205.33253%2028.2C3.55501%2028.1333%201.77751%2028.0667%200%2028C1.77751%2027.9333%203.55501%2027.8667%205.33253%2027.8C37.3277%2026.6%2069.3228%2025.4%20101.318%2024.2C103.095%2024.1333%20104.873%2024.0667%20106.65%2024Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M106.65%2032C106.65%2034.6667%20106.65%2037.3333%20106.65%2040C104.873%2039.9333%20103.095%2039.8667%20101.318%2039.8C69.3228%2038.6%2037.3277%2037.4%205.33253%2036.2C3.55501%2036.1333%201.77751%2036.0667%200%2036C1.77751%2035.9333%203.55501%2035.8667%205.33253%2035.8C37.3277%2034.6%2069.3228%2033.4%20101.318%2032.2C103.095%2032.1333%20104.873%2032.0667%20106.65%2032Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M106.65%2040C106.65%2042.6667%20106.65%2045.3333%20106.65%2048C104.873%2047.9333%20103.095%2047.8667%20101.318%2047.8C69.3228%2046.6%2037.3277%2045.4%205.33253%2044.2C3.55501%2044.1333%201.77751%2044.0667%200%2044C1.77751%2043.9333%203.55501%2043.8667%205.33253%2043.8C37.3277%2042.6%2069.3228%2041.4%20101.318%2040.2C103.095%2040.1333%20104.873%2040.0667%20106.65%2040Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M106.65%2048C106.65%2050.6667%20106.65%2053.3333%20106.65%2056C104.873%2055.9333%20103.095%2055.8667%20101.318%2055.8C69.3228%2054.6%2037.3277%2053.4%205.33253%2052.2C3.55501%2052.1333%201.77751%2052.0667%200%2052C1.77751%2051.9333%203.55501%2051.8667%205.33253%2051.8C37.3277%2050.6%2069.3228%2049.4%20101.318%2048.2C103.095%2048.1333%20104.873%2048.0667%20106.65%2048Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M106.654%2056C106.654%2058.6667%20106.654%2061.3333%20106.654%2064C104.877%2063.9333%20103.099%2063.8667%20101.322%2063.8C69.3267%2062.6%2037.3316%2061.4%205.33643%2060.2C3.55891%2060.1333%201.78141%2060.0667%200.00390625%2060C1.78141%2059.9333%203.55891%2059.8667%205.33643%2059.8C37.3316%2058.6%2069.3267%2057.4%20101.322%2056.2C103.099%2056.1333%20104.877%2056.0667%20106.654%2056Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M106.65%2064C106.65%2066.6667%20106.65%2069.3333%20106.65%2072C104.873%2071.9333%20103.095%2071.8667%20101.318%2071.8C69.3228%2070.6%2037.3277%2069.4%205.33253%2068.2C3.55501%2068.1333%201.77751%2068.0667%200%2068C1.77751%2067.9333%203.55501%2067.8667%205.33253%2067.8C37.3277%2066.6%2069.3228%2065.4%20101.318%2064.2C103.095%2064.1333%20104.873%2064.0667%20106.65%2064Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); + mask-size: 100% 100%; + mask-repeat: no-repeat; + -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20width%3D%22106.654%22%20height%3D%2272%22%20viewBox%3D%220%200%20106.654%2072%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M106.654%20-6.99427e-08C106.654%202.66667%20106.654%205.33333%20106.654%208C104.877%207.93333%20103.099%207.86667%20101.322%207.8C69.3267%206.6%2037.3316%205.39999%205.33643%204.19999C3.55891%204.13332%201.78141%204.06666%200.00390625%203.99999C1.78141%203.93332%203.55891%203.86666%205.33643%203.79999C37.3316%202.59999%2069.3267%201.4%20101.322%200.2C103.099%200.133333%20104.877%200.0666664%20106.654%20-6.99427e-08Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M106.654%208C106.654%2010.6667%20106.654%2013.3333%20106.654%2016C104.877%2015.9333%20103.099%2015.8667%20101.322%2015.8C69.3267%2014.6%2037.3316%2013.4%205.33643%2012.2C3.55891%2012.1333%201.78141%2012.0667%200.00390625%2012C1.78141%2011.9333%203.55891%2011.8667%205.33643%2011.8C37.3316%2010.6%2069.3267%209.4%20101.322%208.2C103.099%208.13333%20104.877%208.06667%20106.654%208Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M106.65%2016C106.65%2018.6667%20106.65%2021.3333%20106.65%2024C104.873%2023.9333%20103.095%2023.8667%20101.318%2023.8C69.3228%2022.6%2037.3277%2021.4%205.33253%2020.2C3.55501%2020.1333%201.77751%2020.0667%200%2020C1.77751%2019.9333%203.55501%2019.8667%205.33253%2019.8C37.3277%2018.6%2069.3228%2017.4%20101.318%2016.2C103.095%2016.1333%20104.873%2016.0667%20106.65%2016Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M106.65%2024C106.65%2026.6667%20106.65%2029.3333%20106.65%2032C104.873%2031.9333%20103.095%2031.8667%20101.318%2031.8C69.3228%2030.6%2037.3277%2029.4%205.33253%2028.2C3.55501%2028.1333%201.77751%2028.0667%200%2028C1.77751%2027.9333%203.55501%2027.8667%205.33253%2027.8C37.3277%2026.6%2069.3228%2025.4%20101.318%2024.2C103.095%2024.1333%20104.873%2024.0667%20106.65%2024Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M106.65%2032C106.65%2034.6667%20106.65%2037.3333%20106.65%2040C104.873%2039.9333%20103.095%2039.8667%20101.318%2039.8C69.3228%2038.6%2037.3277%2037.4%205.33253%2036.2C3.55501%2036.1333%201.77751%2036.0667%200%2036C1.77751%2035.9333%203.55501%2035.8667%205.33253%2035.8C37.3277%2034.6%2069.3228%2033.4%20101.318%2032.2C103.095%2032.1333%20104.873%2032.0667%20106.65%2032Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M106.65%2040C106.65%2042.6667%20106.65%2045.3333%20106.65%2048C104.873%2047.9333%20103.095%2047.8667%20101.318%2047.8C69.3228%2046.6%2037.3277%2045.4%205.33253%2044.2C3.55501%2044.1333%201.77751%2044.0667%200%2044C1.77751%2043.9333%203.55501%2043.8667%205.33253%2043.8C37.3277%2042.6%2069.3228%2041.4%20101.318%2040.2C103.095%2040.1333%20104.873%2040.0667%20106.65%2040Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M106.65%2048C106.65%2050.6667%20106.65%2053.3333%20106.65%2056C104.873%2055.9333%20103.095%2055.8667%20101.318%2055.8C69.3228%2054.6%2037.3277%2053.4%205.33253%2052.2C3.55501%2052.1333%201.77751%2052.0667%200%2052C1.77751%2051.9333%203.55501%2051.8667%205.33253%2051.8C37.3277%2050.6%2069.3228%2049.4%20101.318%2048.2C103.095%2048.1333%20104.873%2048.0667%20106.65%2048Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M106.654%2056C106.654%2058.6667%20106.654%2061.3333%20106.654%2064C104.877%2063.9333%20103.099%2063.8667%20101.322%2063.8C69.3267%2062.6%2037.3316%2061.4%205.33643%2060.2C3.55891%2060.1333%201.78141%2060.0667%200.00390625%2060C1.78141%2059.9333%203.55891%2059.8667%205.33643%2059.8C37.3316%2058.6%2069.3267%2057.4%20101.322%2056.2C103.099%2056.1333%20104.877%2056.0667%20106.654%2056Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M106.65%2064C106.65%2066.6667%20106.65%2069.3333%20106.65%2072C104.873%2071.9333%20103.095%2071.8667%20101.318%2071.8C69.3228%2070.6%2037.3277%2069.4%205.33253%2068.2C3.55501%2068.1333%201.77751%2068.0667%200%2068C1.77751%2067.9333%203.55501%2067.8667%205.33253%2067.8C37.3277%2066.6%2069.3228%2065.4%20101.318%2064.2C103.095%2064.1333%20104.873%2064.0667%20106.65%2064Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); + -webkit-mask-size: 100% 100%; + -webkit-mask-repeat: no-repeat; + } + + & SLabel, + & SContent, + & SCloseIcon { + position: relative; + z-index: 1; } & SLabel { - color: var(--intergalactic-icon-primary-feature-highlight, oklch(0.58 0.254 297.1)); + color: var(--intergalactic-feature-highlight-icon-primary, oklch(0.22 0.01 140)); } & SCloseIcon { diff --git a/semcore/feature-highlight/src/components/pills/Pills.tsx b/semcore/feature-highlight/src/components/pills/Pills.tsx index 343f62ffd6..9ca439de49 100644 --- a/semcore/feature-highlight/src/components/pills/Pills.tsx +++ b/semcore/feature-highlight/src/components/pills/Pills.tsx @@ -64,7 +64,7 @@ function HighlightedItemAddon( ? () : ( <> - + )} diff --git a/semcore/feature-highlight/src/components/pills/pills.shadow.css b/semcore/feature-highlight/src/components/pills/pills.shadow.css index 271f87ac69..c832699301 100644 --- a/semcore/feature-highlight/src/components/pills/pills.shadow.css +++ b/semcore/feature-highlight/src/components/pills/pills.shadow.css @@ -1,9 +1,4 @@ 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; - background-origin: border-box; - background-clip: padding-box, border-box; z-index: 1; position: relative; @@ -14,47 +9,20 @@ SHighlightedPill { inset: 0; margin: -5px; padding: 2px; - border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px); - - background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2))); + border-radius: calc(var(--intergalactic-rounded-small, 4px) + 3px); + pointer-events: none; + background-color: transparent; + background-image: var(--intergalactic-feature-highlight-keyboard-focus-outline, linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))); mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff); mask-composite: exclude; opacity: 0; transform: scale(0.96); - will-change: opacity, transform; - transition: opacity calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out, transform calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out; } - - &[neighborLocation='left']::before { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - &[neighborLocation='right']::before { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - &[neighborLocation='both']::before { - border-radius: 0; - } - - &: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; - } - - &[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; - background-origin: border-box; - background-clip: padding-box, border-box; - border-color: transparent; - } } SPills { @@ -74,7 +42,7 @@ SPills { outline: none; box-shadow: 0 0 0 2px #ffffff, - 0 0 0 4px #7078FC; + 0 0 0 4px #59ddaa; } SHighlightedPill:focus-visible::before { diff --git a/semcore/feature-highlight/src/components/radio/radio.shadow.css b/semcore/feature-highlight/src/components/radio/radio.shadow.css index 5386c68d3f..836880253f 100644 --- a/semcore/feature-highlight/src/components/radio/radio.shadow.css +++ b/semcore/feature-highlight/src/components/radio/radio.shadow.css @@ -4,8 +4,21 @@ SHighlightedRadio { SHighlightedRadio:not([state="invalid"]) { [data-ui-name="Value.RadioMark"] { + border: 1px solid var(--intergalactic-feature-highlight-border-primary, oklch(0.137 0.026 175.7 / 0.161)); border-radius: 50%; - background: var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))); + background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); + background-image: none; + } + + input[data-ui-name="RadioFH.Value"]:checked + [data-ui-name="Value.RadioMark"] { + background-color: var(--intergalactic-feature-highlight-control-primary, oklch(0.23 0.01 140)); + border-color: var(--intergalactic-feature-highlight-control-primary, oklch(0.23 0.01 140)); + background-image: none; + } + + &:active input[data-ui-name="RadioFH.Value"]:checked + [data-ui-name="Value.RadioMark"] { + background-color: var(--intergalactic-feature-highlight-control-primary-active, oklch(0 0 140)); + border-color: var(--intergalactic-feature-highlight-control-primary-active, oklch(0 0 140)); } [data-ui-name="Value.RadioMark"]::before { @@ -18,7 +31,8 @@ SHighlightedRadio:not([state="invalid"]) { border-radius: 50%; border-width: 0; pointer-events: none; - background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2))); + background-color: transparent; + background-image: var(--intergalactic-feature-highlight-keyboard-focus-outline, linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))); mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff); mask-composite: exclude; @@ -32,21 +46,9 @@ SHighlightedRadio:not([state="invalid"]) { transform calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out; } - [data-ui-name="Value.RadioMark"]::after { - content: ""; - position: absolute; - right: 0; - bottom: 0; - border-radius: 50%; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); - top: 50%; - left: 50%; - width: calc(100% - 2px); - height: calc(100% - 2px); - - transition: - width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out, - height calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out; + input[data-ui-name="RadioFH.Value"]:checked + [data-ui-name="Value.RadioMark"]::before { + background-color: transparent; + background-image: var(--intergalactic-feature-highlight-keyboard-focus-outline, linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))); } input[data-ui-name="RadioFH.Value"]:focus-visible + [data-ui-name="Value.RadioMark"]::before { @@ -57,14 +59,12 @@ SHighlightedRadio:not([state="invalid"]) { } } - - /* Firefox fallback */ @supports not (-webkit-mask-composite: xor) { SHighlightedRadio:not([state="invalid"]) input[data-ui-name="RadioFH.Value"]:focus-visible + [data-ui-name="Value.RadioMark"] { outline: none; box-shadow: 0 0 0 2px #ffffff, - 0 0 0 4px #7078FC; + 0 0 0 4px #59ddaa; } SHighlightedRadio:not([state="invalid"]) input[data-ui-name="RadioFH.Value"]:focus-visible + [data-ui-name="Value.RadioMark"]::before { diff --git a/semcore/feature-highlight/src/components/switch/switch.shadow.css b/semcore/feature-highlight/src/components/switch/switch.shadow.css index 4db8d1c773..0deeec2df7 100644 --- a/semcore/feature-highlight/src/components/switch/switch.shadow.css +++ b/semcore/feature-highlight/src/components/switch/switch.shadow.css @@ -1,5 +1,4 @@ SToggle { - position: relative; transform: translate(0); &::before { @@ -7,18 +6,14 @@ SToggle { position: absolute; z-index: -1; inset: 0; - margin: 0; padding: 2px; border-radius: inherit; - - background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2))); + background-image: var(--intergalactic-feature-highlight-keyboard-focus-outline, linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))); mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff); mask-composite: exclude; - opacity: 0; transform: scale(0.96); pointer-events: none; - transition: opacity calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out, transform calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out; @@ -27,7 +22,7 @@ SToggle { SToggle[checked] { color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); - background-image: var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1))); + background-color: var(--intergalactic-feature-highlight-control-primary, oklch(0.23 0.01 140)); } SToggle:has(SInput:focus-visible) { @@ -47,7 +42,7 @@ SToggle:has(SInput:focus-visible) { outline: none; box-shadow: 0 0 0 2px #ffffff, - 0 0 0 4px #7078FC; + 0 0 0 4px #59ddaa; } SToggle:has(SInput:focus-visible)::before { diff --git a/semcore/feature-highlight/src/components/tab-line/TabLine.tsx b/semcore/feature-highlight/src/components/tab-line/TabLine.tsx index 61e7e6b145..89ba2653cb 100644 --- a/semcore/feature-highlight/src/components/tab-line/TabLine.tsx +++ b/semcore/feature-highlight/src/components/tab-line/TabLine.tsx @@ -67,7 +67,7 @@ function HighlightedAddon( ? () : ( <> - + )} diff --git a/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css b/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css index f54465b645..6a1ffe7579 100644 --- a/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css +++ b/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css @@ -8,15 +8,6 @@ SHighlightedItem { } } - &::after { - opacity: 0; - transition: opacity calc(var(--intergalactic-duration-control, 200) * 1ms) ease-in-out; - } - &[selected]::after, &:hover:not(:focus-visible)::after { - opacity: 1; - 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))); - } - &::before { content: ""; position: absolute; @@ -27,20 +18,23 @@ SHighlightedItem { margin: -4px; padding: 2px; box-sizing: content-box; - background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2))); - + pointer-events: none; + background-image: var(--intergalactic-feature-highlight-keyboard-focus-outline, linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))); mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff); mask-composite: exclude; - opacity: 0; transform: scale(0.96); - transition: opacity calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out, transform calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out; } + + &[selected]::after, + &:hover:not(:focus-visible)::after { + background-color: var(--intergalactic-feature-highlight-border-primary-active, oklch(0.22 0.01 140)); + } } -SHighlightedCaret { - 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))); +SCaret { + background: var(--intergalactic-feature-highlight-border-primary-active, oklch(0.22 0.01 140)); } diff --git a/semcore/feature-highlight/src/inner-components/button-trigger/ButtonTrigger.tsx b/semcore/feature-highlight/src/inner-components/button-trigger/ButtonTrigger.tsx index 51042dd6f6..9c1ea78913 100644 --- a/semcore/feature-highlight/src/inner-components/button-trigger/ButtonTrigger.tsx +++ b/semcore/feature-highlight/src/inner-components/button-trigger/ButtonTrigger.tsx @@ -32,7 +32,7 @@ function Addon( {hasChildren ? () : ( - + )} , ); diff --git a/semcore/feature-highlight/src/inner-components/button-trigger/buttonTrigger.shadow.css b/semcore/feature-highlight/src/inner-components/button-trigger/buttonTrigger.shadow.css index 5db4558991..9c9ddfd007 100644 --- a/semcore/feature-highlight/src/inner-components/button-trigger/buttonTrigger.shadow.css +++ b/semcore/feature-highlight/src/inner-components/button-trigger/buttonTrigger.shadow.css @@ -1,11 +1,5 @@ SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]) { - 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; - background-origin: border-box; - background-clip: padding-box, border-box; - position: relative; + border-color: var(--intergalactic-feature-highlight-border-primary, oklch(0.137 0.026 175.7 / 0.161)); z-index: 1; &::before { @@ -16,38 +10,26 @@ SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]) { margin: -5px; padding: 2px; border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px); - background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2))); - + background-color: transparent; + background-image: var(--intergalactic-feature-highlight-keyboard-focus-outline, linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))); mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff); mask-composite: exclude; - opacity: 0; transform: scale(0.96); pointer-events: none; - transition: opacity calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out, transform calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out; } - &: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; - } - &:active, &[active] { - background: - linear-gradient(white, white) 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; + border-color: var(--intergalactic-feature-highlight-border-primary-active, oklch(0.22 0.01 140)); } &:focus-visible { outline: none; - border-color: transparent; + border-color: var(--intergalactic-feature-highlight-border-primary, oklch(0.137 0.026 175.7 / 0.161)); &::before { opacity: 1; @@ -72,12 +54,11 @@ SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]) { /* Firefox fallback */ @supports not (-webkit-mask-composite: xor) { - SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]):focus-visible { outline: none; box-shadow: 0 0 0 2px #ffffff, - 0 0 0 4px #7078FC; + 0 0 0 4px #59ddaa; } SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]):focus-visible::before { diff --git a/semcore/feature-highlight/src/inner-components/sparkle/style/sparkle.shadow.css b/semcore/feature-highlight/src/inner-components/sparkle/style/sparkle.shadow.css index 2a2858b015..8b4d6749c3 100644 --- a/semcore/feature-highlight/src/inner-components/sparkle/style/sparkle.shadow.css +++ b/semcore/feature-highlight/src/inner-components/sparkle/style/sparkle.shadow.css @@ -2,7 +2,7 @@ SSparkle { position: absolute; & path { - fill: var(--intergalactic-icon-primary-feature-highlight, oklch(0.58 0.254 297.1)); + fill: var(--intergalactic-feature-highlight-icon-primary, oklch(0.22 0.01 140)); } } diff --git a/stories/components/feature-highlight/advanced/examples/all-controls.tsx b/stories/components/feature-highlight/advanced/examples/all-controls.tsx index 9dc5f1ca72..0618461907 100644 --- a/stories/components/feature-highlight/advanced/examples/all-controls.tsx +++ b/stories/components/feature-highlight/advanced/examples/all-controls.tsx @@ -87,7 +87,7 @@ const Demo = (props: ExampleButtonHihlightProps) => { First option - + @@ -99,7 +99,7 @@ const Demo = (props: ExampleButtonHihlightProps) => { First option - + @@ -116,7 +116,7 @@ const Demo = (props: ExampleButtonHihlightProps) => { First option @@ -186,7 +186,7 @@ const columnsPrimary = [ name: 'kd', children: ( <> - + KD % ), @@ -211,7 +211,7 @@ const columnsSecondary = [ name: 'kd', children: ( <> - + KD % ), diff --git a/stories/components/feature-highlight/docs/examples/checkbox.tsx b/stories/components/feature-highlight/docs/examples/checkbox.tsx index 52bfa57b46..dda86539af 100644 --- a/stories/components/feature-highlight/docs/examples/checkbox.tsx +++ b/stories/components/feature-highlight/docs/examples/checkbox.tsx @@ -21,7 +21,7 @@ const Demo = () => ( First option diff --git a/stories/components/feature-highlight/docs/examples/data-table.tsx b/stories/components/feature-highlight/docs/examples/data-table.tsx index 7294504c76..04a4a383d7 100644 --- a/stories/components/feature-highlight/docs/examples/data-table.tsx +++ b/stories/components/feature-highlight/docs/examples/data-table.tsx @@ -29,7 +29,7 @@ const Demo = () => { name: 'kd', children: ( <> - + KD % Powered by AI @@ -61,7 +61,7 @@ const Demo = () => { name: 'kd', children: ( <> - + KD % Powered by AI diff --git a/stories/components/feature-highlight/docs/examples/radio.tsx b/stories/components/feature-highlight/docs/examples/radio.tsx index 8e25d49036..e803e7ae0c 100644 --- a/stories/components/feature-highlight/docs/examples/radio.tsx +++ b/stories/components/feature-highlight/docs/examples/radio.tsx @@ -27,7 +27,7 @@ const Demo = () => ( First option diff --git a/stories/components/feature-highlight/docs/examples/switch.tsx b/stories/components/feature-highlight/docs/examples/switch.tsx index 3edd5b1f5a..d27758c389 100644 --- a/stories/components/feature-highlight/docs/examples/switch.tsx +++ b/stories/components/feature-highlight/docs/examples/switch.tsx @@ -13,7 +13,7 @@ const Demo = () => ( Medium switch @@ -34,7 +34,7 @@ const Demo = () => ( Large switch diff --git a/stories/components/feature-highlight/tests/examples/checkbox.tsx b/stories/components/feature-highlight/tests/examples/checkbox.tsx index 718f749263..61feec133a 100644 --- a/stories/components/feature-highlight/tests/examples/checkbox.tsx +++ b/stories/components/feature-highlight/tests/examples/checkbox.tsx @@ -59,7 +59,7 @@ const Demo = (props: CheckboxFHAdvancedProps) => { {showIcon && ( diff --git a/stories/components/feature-highlight/tests/examples/radio.tsx b/stories/components/feature-highlight/tests/examples/radio.tsx index 8c54239e6f..6b2f26b41b 100644 --- a/stories/components/feature-highlight/tests/examples/radio.tsx +++ b/stories/components/feature-highlight/tests/examples/radio.tsx @@ -61,7 +61,7 @@ const Demo = (props: RadioFHAdvancedProps) => { {showIcon && ( diff --git a/stories/components/feature-highlight/tests/examples/switch-fh.tsx b/stories/components/feature-highlight/tests/examples/switch-fh.tsx index 419ffd7e01..5ef6d26cb8 100644 --- a/stories/components/feature-highlight/tests/examples/switch-fh.tsx +++ b/stories/components/feature-highlight/tests/examples/switch-fh.tsx @@ -41,7 +41,7 @@ const Demo = (props: SwitchFHAdvancedProps) => { {showIcon && ( diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 60ebf85654..50ae37289e 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -644,6 +644,10 @@ export const theme: Theme = { value: gray.at(0.22), description: 'Secondary brand accent for paired brand treatments (secondary marks, duo-tone lockups).', }, + brand_tertiary: { + value: green.at(0.82), + description: 'Tertiary brand accent for logos and branded surfaces.', + }, 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.', @@ -2265,77 +2269,81 @@ export const theme: Theme = { }, }, featureHighlight: { - 'bg_primary_feature-highlight_DEFAULT': { - value: '{baseTokens.colors.gray.white}', - description: 'Primary background for highlighted controls.', - }, - 'bg_primary_feature-highlight_hover_active': { - value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.50}, {baseTokens.colors.blue.75})', - description: 'Primary background for hover and active (selected) state of highlighted controls.', - }, - 'bg_secondary_feature-highlight': { - value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.50}, {baseTokens.colors.blue.75})', - description: 'Secondary background for the highlighted message.', - }, - 'border_feature-highlight_DEFAULT': { - value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.200}, {baseTokens.colors.blue.200})', - description: 'Primary border for highlighted controls.', - }, - 'border_feature-highlight_active': { - value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.300}, {baseTokens.colors.blue.300})', - description: 'Primary border for the active state of highlighted controls.', - }, - 'border_feature-highlight_secondary': { - value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.300}, {baseTokens.colors.blue.300})', - description: 'Secondary border for highlighted controls.', - }, - 'control_primary_feature-highlight_DEFAULT': { - value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.400}, {baseTokens.colors.blue.300})', - description: 'Background of the highlighted primary control.', - }, - 'control_primary_feature-highlight_hover': { - value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.400}, {baseTokens.colors.blue.300})', - description: 'Hover state of the highlighted primary control.', - }, - 'control_primary_feature-highlight_active': { - value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.400}, {baseTokens.colors.blue.400})', - description: 'Active (selected) state of the highlighted primary control.', - }, - 'control_secondary_feature-highlight_DEFAULT': { - value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.50}, {baseTokens.colors.blue.50})', - description: 'Background of the highlighted secondary control.', - }, - 'control_secondary_feature-highlight_hover': { - value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.100}, {baseTokens.colors.blue.100})', - description: 'Hover state of the highlighted secondary control.', - }, - 'control_secondary_feature-highlight_active': { - value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.100}, {baseTokens.colors.blue.100})', - description: 'Active (selected) state of the highlighted secondary control.', - }, - 'text_feature-highlight_DEFAULT': { - value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.500}, {baseTokens.colors.blue.500})', - description: 'Text for highlighted features.', - }, - 'text_feature-highlight_hover_active': { - value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.500}, {baseTokens.colors.blue.500})', - description: 'Text for hover and active states of highlighted features.', - }, - 'icon_primary_feature-highlight_DEFAULT': { - value: highlight.at(L_ICON_PRIMARY), - description: 'Primary highlighted icon.', - }, - 'icon_primary_feature-highlight_hover_active': { - value: highlight.at(L_ICON_PRIMARY_HOVER), - description: 'Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color.', - }, - 'keyboard_focus_feature-highlight_DEFAULT': { - value: '3px solid {featureHighlight.keyboard.focus.feature-highlight.outline}', - description: 'Keyboard focus styles for highlighted controls.', - }, - 'keyboard_focus_feature-highlight_outline': { - value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.300}, {baseTokens.colors.blue.400})', - description: 'Color for keyboard focus outline styles for highlighted controls.', + 'feature-highlight': { + badge_accent: { + value: '{semanticTokens.colors.brand_secondary}', + description: 'Accent background for Badge.', + }, + bg_primary_DEFAULT: { + value: '{semanticTokens.colors.bg_primary_DEFAULT}', + description: 'Primary background for highlighted controls.', + }, + bg_primary_hover_active: { + value: '{semanticTokens.colors.bg_primary_hover}', + description: 'Primary background for hover and active (selected) state of highlighted controls.', + }, + bg_secondary: { + value: '{baseTokens.colors.violet.100}', + description: 'Secondary background for the highlighted message.', + }, + border_primary_DEFAULT: { + value: '{semanticTokens.colors.border_primary}', + description: 'Primary border for highlighted controls.', + }, + border_primary_active: { + value: '{semanticTokens.colors.brand_secondary}', + description: 'Primary border for the active state of highlighted controls.', + }, + border_secondary: { + value: '{semanticTokens.colors.border_secondary}', + description: 'Secondary border for highlighted controls.', + }, + control_primary_DEFAULT: { + value: '{semanticTokens.colors.control_primary_info_DEFAULT}', + description: 'Background of the highlighted primary control.', + }, + control_primary_hover: { + value: '{semanticTokens.colors.control_primary_info_hover}', + description: 'Hover state of the highlighted primary control.', + }, + control_primary_active: { + value: '{semanticTokens.colors.control_primary_info_active}', + description: 'Active (selected) state of the highlighted primary control.', + }, + control_secondary_DEFAULT: { + value: '{semanticTokens.colors.control_secondary_neutral_DEFAULT}', + description: 'Background of the highlighted secondary control.', + }, + control_secondary_hover: { + value: '{semanticTokens.colors.control_secondary_neutral_hover}', + description: 'Hover state of the highlighted secondary control.', + }, + control_secondary_active: { + value: '{semanticTokens.colors.control_secondary_neutral_active}', + description: 'Active (selected) state of the highlighted secondary control.', + }, + text_DEFAULT: { + value: '{semanticTokens.colors.text_primary_DEFAULT}', + description: 'Text for highlighted features.', + }, + text_hover_active: { + value: '{semanticTokens.colors.text_primary_DEFAULT}', + description: 'Text for hover and active states of highlighted features.', + }, + icon_primary_DEFAULT: { + value: '{semanticTokens.colors.brand_secondary}', + }, + icon_primary_hover_active: { + value: '{semanticTokens.colors.brand_secondary}', + }, + keyboard_focus_DEFAULT: { + value: '3px solid {featureHighlight.feature-highlight.keyboard.focus.outline}', + description: 'Keyboard focus styles for highlighted controls.', + }, + keyboard_focus_outline: { + value: 'linear-gradient(90deg in oklch, {baseTokens.colors.green.200}, {baseTokens.colors.green.200})', + description: 'Color for keyboard focus outline styles for highlighted controls.', + }, }, }, deprecates: { @@ -2354,11 +2362,64 @@ export const theme: Theme = { 500: colors.blue['500'], }, table: { td: { cell: { actions: { accordion: { value: '{semanticTokens.colors.table_td_cell_accordion}' } } } } }, - keyboard: { focus: { outline: { invert: { value: '{semanticTokens.colors.keyboard_focus_invert_outline}' } } } }, + keyboard: { + focus: { + 'outline': { invert: { value: '{semanticTokens.colors.keyboard_focus_invert_outline}' } }, + 'feature-highlight': { + DEFAULT: { value: '{featureHighlight.feature-highlight.keyboard.focus.DEFAULT}' }, + outline: { value: '{featureHighlight.feature-highlight.keyboard.focus.outline}' }, + }, + }, + }, + badge: { + 'feature-highlight': { + accent: { value: '{featureHighlight.feature-highlight.badge.accent}' }, + }, + }, + bg: { + primary: { + 'feature-highlight': { + DEFAULT: { value: '{featureHighlight.feature-highlight.bg.primary.DEFAULT}' }, + hover: { active: { value: '{featureHighlight.feature-highlight.bg.primary.hover.active}' } }, + }, + }, + secondary: { + 'feature-highlight': { value: '{featureHighlight.feature-highlight.bg.secondary}' }, + }, + }, 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': { 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}' } } } }, + 'feature-highlight': { + DEFAULT: { value: '{featureHighlight.feature-highlight.border.primary.DEFAULT}' }, + active: { value: '{featureHighlight.feature-highlight.border.primary.active}' }, + secondary: { value: '{featureHighlight.feature-highlight.border.secondary}' }, + }, + }, + control: { + primary: { + 'feature-highlight': { + DEFAULT: { value: '{featureHighlight.feature-highlight.control.primary.DEFAULT}' }, + hover: { value: '{featureHighlight.feature-highlight.control.primary.hover}' }, + active: { value: '{featureHighlight.feature-highlight.control.primary.active}' }, + }, + }, + secondary: { + 'feature-highlight': { + DEFAULT: { value: '{featureHighlight.feature-highlight.control.secondary.DEFAULT}' }, + hover: { value: '{featureHighlight.feature-highlight.control.secondary.hover}' }, + active: { value: '{featureHighlight.feature-highlight.control.secondary.active}' }, + }, + }, + }, + icon: { + primary: { + 'feature-highlight': { + DEFAULT: { value: '{featureHighlight.feature-highlight.icon.primary.DEFAULT}' }, + hover: { active: { value: '{featureHighlight.feature-highlight.icon.primary.hover.active}' } }, + }, + }, }, tooltip: { default: { value: '{semanticTokens.colors.tooltip_bg_default}' }, @@ -2366,6 +2427,12 @@ export const theme: Theme = { warning: { value: '{semanticTokens.colors.tooltip_bg_warning}' }, }, feature: { + highlight: { + border: { + DEFAULT: { value: '{featureHighlight.feature-highlight.border.primary.DEFAULT}' }, + active: { value: '{featureHighlight.feature-highlight.border.primary.active}' }, + }, + }, popover: { bg: { DEFAULT: { value: '{semanticTokens.colors.feature_popover_bg_accent}' }, @@ -2401,7 +2468,7 @@ export const theme: Theme = { }, }, text: { - link: { + 'link': { DEFAULT: { value: '{semanticTokens.colors.text_link_primary_DEFAULT}' }, hover: { active: { value: '{semanticTokens.colors.text_link_primary_hover_active}' } }, invert: { @@ -2409,6 +2476,10 @@ export const theme: Theme = { hover: { value: '{semanticTokens.colors.text_link_primary_invert_hover_active}' }, }, }, + 'feature-highlight': { + DEFAULT: { value: '{featureHighlight.feature-highlight.text.DEFAULT}' }, + hover: { active: { value: '{featureHighlight.feature-highlight.text.hover.active}' } }, + }, }, }, }; @@ -2523,7 +2594,9 @@ export type SemanticTokens = { export type Theme = { baseTokens: BaseTokens; semanticTokens: SemanticTokens; - featureHighlight: Record, Value>; + featureHighlight: { + 'feature-highlight': Record, Value>; + }; deprecates: Deprecates; }; @@ -3131,6 +3204,7 @@ type SemanticColors = { brand: { primary: Value; secondary: Value; + tertiary: Value; gradient: Value; pinterest: Value; instagram: Value; @@ -3524,6 +3598,45 @@ type SemanticShadows = { }; export type FeatureHighlight = { + badge: { accent: Value }; + bg: { + primary: { DEFAULT: Value; hover: { active: Value } }; + secondary: Value; + }; + border: { + primary: { DEFAULT: Value; active: Value }; + secondary: Value; + }; + control: { + primary: { DEFAULT: Value; active: Value; hover: Value }; + secondary: { DEFAULT: Value; active: Value; hover: Value }; + }; + text: { DEFAULT: Value; hover: { active: Value } }; + icon: { + primary: { DEFAULT: Value; hover: { active: Value } }; + }; + keyboard: { + focus: { + DEFAULT: Value; + outline: Value; + }; + }; +}; + +type Deprecates = { + fs: { 50: Value }; + violet: { 400: Value; 500: Value }; + blue: { 400: Value; 500: Value }; + table: { td: { cell: { actions: { accordion: Value } } } }; + keyboard: { + focus: { + 'outline': { invert: Value }; + 'feature-highlight': { DEFAULT: Value; outline: Value }; + }; + }; + badge: { + 'feature-highlight': { accent: Value }; + }; bg: { primary: { 'feature-highlight': { DEFAULT: Value; hover: { active: Value } }; @@ -3533,6 +3646,9 @@ export type FeatureHighlight = { }; }; border: { + 'tooltip': { invert: Value }; + 'table': { accent: Value }; + 'date': { picker: { range: { comparison: Value } } }; 'feature-highlight': { DEFAULT: Value; active: Value; secondary: Value }; }; control: { @@ -3543,41 +3659,20 @@ export type FeatureHighlight = { 'feature-highlight': { DEFAULT: Value; active: Value; hover: Value }; }; }; - text: { - 'feature-highlight': { DEFAULT: Value; hover: { active: Value } }; - }; icon: { primary: { 'feature-highlight': { DEFAULT: Value; hover: { active: Value } }; }; }; - keyboard: { - focus: { - 'feature-highlight': { - DEFAULT: Value; - outline: Value; - }; - }; - }; -}; - -type Deprecates = { - fs: { 50: Value }; - violet: { 400: Value; 500: Value }; - 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: { + highlight: { + border: { DEFAULT: Value; active: Value }; + }; popover: { bg: { DEFAULT: Value }; dot: { @@ -3609,7 +3704,7 @@ type Deprecates = { }; }; text: { - link: { + 'link': { DEFAULT: Value; hover: { active: Value }; invert: { @@ -3617,6 +3712,7 @@ type Deprecates = { hover: Value; }; }; + 'feature-highlight': { DEFAULT: Value; hover: { active: Value } }; }; }; diff --git a/tools/theme/src/utils.ts b/tools/theme/src/utils.ts index e35fd3b330..85f28062e5 100644 --- a/tools/theme/src/utils.ts +++ b/tools/theme/src/utils.ts @@ -45,9 +45,7 @@ export function getConfigValue(path: string[], config: Theme): string { const [group, subGroup, ...key] = path; pathToSearch = path[0] === 'baseTokens' ? path - : path[0] === 'featureHighlight' - ? [group, `${subGroup}_${key.join('_')}`] - : [group, subGroup, key.join('_')]; + : [group, subGroup, key.join('_')]; const valueObj = getByPath(config, pathToSearch); if ('value' in valueObj) { diff --git a/website/docs/patterns/feature-highlight/feature-highlight.md b/website/docs/patterns/feature-highlight/feature-highlight.md index 10f0acd9f3..5876834b7f 100644 --- a/website/docs/patterns/feature-highlight/feature-highlight.md +++ b/website/docs/patterns/feature-highlight/feature-highlight.md @@ -54,7 +54,7 @@ To highlight a [Checkbox](../../components/checkbox/checkbox), use the `Checkbox You can enable animation on click (`AnimatedSparkles` component). It's possible to change the number of animated sparkles (`count` prop). -You can add more accent by displaying the `SummaryAI` icon with the `--intergalactic-icon-primary-feature-highlight` color after the text label. +You can add more accent by displaying the `SummaryAI` icon with the `--intergalactic-feature-highlight-icon-primary` color after the text label. If the control's label doesn't mention the promotion, add an accessible description with `aria-describedby` and `ScreenReaderOnly`. @@ -72,7 +72,7 @@ When using the `feature-highlight` tokens in the `color` property of icons and o ## DataTable -To highlight a [table column](../../table-group/data-table/data-table), display the `SummaryAI` icon with the `--intergalactic-icon-primary-feature-highlight` color in the column header. +To highlight a [table column](../../table-group/data-table/data-table), display the `SummaryAI` icon with the `--intergalactic-feature-highlight-icon-primary` color in the column header. If the column title doesn't mention the promotion, add a `ScreenReaderOnly` text to the column header. @@ -140,7 +140,7 @@ To highlight a [Radio button](../../components/radio/radio), use the `RadioFH` c You can enable animation on click (`AnimatedSparkles` component). It's possible to change the number of animated sparkles (`count` prop). -You can add more accent by displaying the `SummaryAI` icon with the `--intergalactic-icon-primary-feature-highlight` color after the text label. +You can add more accent by displaying the `SummaryAI` icon with the `--intergalactic-feature-highlight-icon-primary` color after the text label. If the control's label doesn't mention the promotion, add an accessible description with `aria-describedby` and `ScreenReaderOnly`. @@ -178,7 +178,7 @@ To highlight a [Switch](../../components/switch/switch), use the `SwitchFH` comp You can enable animation on click (`AnimatedSparkles` component). It's possible to change the number of animated sparkles (`count` prop). -You can add more accent by displaying the `SummaryAI` icon with the `--intergalactic-icon-primary-feature-highlight` color after the text label. +You can add more accent by displaying the `SummaryAI` icon with the `--intergalactic-feature-highlight-icon-primary` color after the text label. If the control's label doesn't mention the promotion, add an accessible description with `aria-describedby` and `ScreenReaderOnly`. diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json index f692273b78..0c620eb95f 100644 --- a/website/docs/style/design-tokens/base-tokens.json +++ b/website/docs/style/design-tokens/base-tokens.json @@ -875,6 +875,30 @@ "name": "--intergalactic-keyboard-focus-outline-invert", "value": "oklch(1 0 0 / 0.7)" }, + { + "name": "--intergalactic-keyboard-focus-feature-highlight", + "value": "3px solid linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))" + }, + { + "name": "--intergalactic-keyboard-focus-feature-highlight-outline", + "value": "linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))" + }, + { + "name": "--intergalactic-badge-feature-highlight-accent", + "value": "oklch(0.22 0.01 140)" + }, + { + "name": "--intergalactic-bg-primary-feature-highlight", + "value": "{semanticTokens.colors.bg_primary_DEFAULT}" + }, + { + "name": "--intergalactic-bg-primary-feature-highlight-hover-active", + "value": "{semanticTokens.colors.bg_primary_hover}" + }, + { + "name": "--intergalactic-bg-secondary-feature-highlight", + "value": "oklch(0.9 0.065 303)" + }, { "name": "--intergalactic-border-tooltip-invert", "value": "oklch(0.35 0.006 140)" @@ -887,6 +911,50 @@ "name": "--intergalactic-border-date-picker-range-comparison", "value": "oklch(0.74 0.117 274.1)" }, + { + "name": "--intergalactic-border-feature-highlight", + "value": "oklch(0.137 0.026 175.7 / 0.161)" + }, + { + "name": "--intergalactic-border-feature-highlight-active", + "value": "oklch(0.22 0.01 140)" + }, + { + "name": "--intergalactic-border-feature-highlight-secondary", + "value": "oklch(0.176 0.033 175.7 / 0.07)" + }, + { + "name": "--intergalactic-control-primary-feature-highlight", + "value": "oklch(0.23 0.01 140)" + }, + { + "name": "--intergalactic-control-primary-feature-highlight-hover", + "value": "oklch(0.32 0.007 140)" + }, + { + "name": "--intergalactic-control-primary-feature-highlight-active", + "value": "oklch(0 0 140)" + }, + { + "name": "--intergalactic-control-secondary-feature-highlight", + "value": "oklch(0.166 0.031 175.8 / 0.097)" + }, + { + "name": "--intergalactic-control-secondary-feature-highlight-hover", + "value": "oklch(0.151 0.028 176.1 / 0.123)" + }, + { + "name": "--intergalactic-control-secondary-feature-highlight-active", + "value": "oklch(0.145 0.027 176.1 / 0.135)" + }, + { + "name": "--intergalactic-icon-primary-feature-highlight", + "value": "oklch(0.22 0.01 140)" + }, + { + "name": "--intergalactic-icon-primary-feature-highlight-hover-active", + "value": "oklch(0.22 0.01 140)" + }, { "name": "--intergalactic-tooltip-default", "value": "oklch(1 0 0)" @@ -899,6 +967,14 @@ "name": "--intergalactic-tooltip-warning", "value": "oklch(0.958 0.029 5.7)" }, + { + "name": "--intergalactic-feature-highlight-border", + "value": "oklch(0.137 0.026 175.7 / 0.161)" + }, + { + "name": "--intergalactic-feature-highlight-border-active", + "value": "oklch(0.22 0.01 140)" + }, { "name": "--intergalactic-feature-popover-bg", "value": "oklch(0.92 0.052 303.1)" @@ -966,5 +1042,13 @@ { "name": "--intergalactic-text-link-invert-hover", "value": "oklch(0.999 0.001 180 / 0.949)" + }, + { + "name": "--intergalactic-text-feature-highlight", + "value": "oklch(0.1 0.03 137 / 0.899)" + }, + { + "name": "--intergalactic-text-feature-highlight-hover-active", + "value": "oklch(0.1 0.03 137 / 0.899)" } ] diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index a389ab77a2..a03a7d2073 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -628,7 +628,9 @@ "name": "--intergalactic-brand-primary", "value": "oklch(0.74 0.17 303)", "description": "Primary brand accent for logos and branded surfaces.", - "components": [] + "components": [ + "feature-highlight" + ] }, { "name": "--intergalactic-brand-secondary", @@ -636,6 +638,14 @@ "description": "Secondary brand accent for paired brand treatments (secondary marks, duo-tone lockups).", "components": [] }, + { + "name": "--intergalactic-brand-tertiary", + "value": "oklch(0.82 0.15 170)", + "description": "Tertiary brand accent for logos and branded surfaces.", + "components": [ + "feature-highlight" + ] + }, { "name": "--intergalactic-brand-twitter", "value": "#1d9bf0", @@ -1125,7 +1135,8 @@ "value": "oklch(0 0 140)", "description": "Active (selected) state of the regular primary control.", "components": [ - "button" + "button", + "feature-highlight" ] }, { @@ -1133,7 +1144,8 @@ "value": "oklch(0.32 0.007 140)", "description": "Hover state of the regular primary control.", "components": [ - "button" + "button", + "feature-highlight" ] }, { @@ -1457,7 +1469,8 @@ "value": "oklch(0.999 0.001 180 / 0.949)", "description": "Inverted primary text color for form controls.", "components": [ - "button" + "button", + "feature-highlight" ] }, { @@ -3071,7 +3084,6 @@ "description": "Inverted version of the primary text.", "components": [ "date-picker", - "feature-highlight", "notice-bubble" ] }, @@ -3656,7 +3668,6 @@ "components": [ "button", "dropdown", - "feature-highlight", "select" ] }, @@ -3706,7 +3717,8 @@ "value": "4px", "description": "Use for rounding Checkbox.", "components": [ - "checkbox" + "checkbox", + "feature-highlight" ] }, { @@ -3829,7 +3841,6 @@ "carousel", "checkbox", "dropdown", - "feature-highlight", "feedback-form", "radio", "slider", @@ -3896,140 +3907,134 @@ "components": [] }, { - "name": "--intergalactic-bg-primary-feature-highlight", - "value": "#ffffff", + "name": "--intergalactic-feature-highlight-badge-accent", + "value": "oklch(0.22 0.01 140)", + "description": "Accent background for Badge.", + "components": [ + "feature-highlight" + ] + }, + { + "name": "--intergalactic-feature-highlight-bg-primary", + "value": "{semanticTokens.colors.bg_primary_DEFAULT}", "description": "Primary background for highlighted controls.", "components": [] }, { - "name": "--intergalactic-bg-primary-feature-highlight-hover-active", - "value": "linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))", + "name": "--intergalactic-feature-highlight-bg-primary-hover-active", + "value": "{semanticTokens.colors.bg_primary_hover}", "description": "Primary background for hover and active (selected) state of highlighted controls.", - "components": [ - "feature-highlight" - ] + "components": [] }, { - "name": "--intergalactic-bg-secondary-feature-highlight", - "value": "linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))", + "name": "--intergalactic-feature-highlight-bg-secondary", + "value": "oklch(0.9 0.065 303)", "description": "Secondary background for the highlighted message.", "components": [ "feature-highlight" ] }, { - "name": "--intergalactic-border-feature-highlight", - "value": "linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))", + "name": "--intergalactic-feature-highlight-border-primary", + "value": "oklch(0.137 0.026 175.7 / 0.161)", "description": "Primary border for highlighted controls.", "components": [ "feature-highlight" ] }, { - "name": "--intergalactic-border-feature-highlight-active", - "value": "linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))", + "name": "--intergalactic-feature-highlight-border-primary-active", + "value": "oklch(0.22 0.01 140)", "description": "Primary border for the active state of highlighted controls.", "components": [ "feature-highlight" ] }, { - "name": "--intergalactic-border-feature-highlight-secondary", - "value": "linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))", + "name": "--intergalactic-feature-highlight-border-secondary", + "value": "oklch(0.176 0.033 175.7 / 0.07)", "description": "Secondary border for highlighted controls.", - "components": [ - "feature-highlight" - ] + "components": [] }, { - "name": "--intergalactic-control-primary-feature-highlight", - "value": "linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1))", + "name": "--intergalactic-feature-highlight-control-primary", + "value": "oklch(0.23 0.01 140)", "description": "Background of the highlighted primary control.", "components": [ "feature-highlight" ] }, { - "name": "--intergalactic-control-primary-feature-highlight-hover", - "value": "linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1))", + "name": "--intergalactic-feature-highlight-control-primary-hover", + "value": "oklch(0.32 0.007 140)", "description": "Hover state of the highlighted primary control.", - "components": [ - "feature-highlight" - ] + "components": [] }, { - "name": "--intergalactic-control-primary-feature-highlight-active", - "value": "linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.58 0.168 278.2))", + "name": "--intergalactic-feature-highlight-control-primary-active", + "value": "oklch(0 0 140)", "description": "Active (selected) state of the highlighted primary control.", "components": [ "feature-highlight" ] }, { - "name": "--intergalactic-control-secondary-feature-highlight", - "value": "linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.969 0.016 267.7))", + "name": "--intergalactic-feature-highlight-control-secondary", + "value": "oklch(0.166 0.031 175.8 / 0.097)", "description": "Background of the highlighted secondary control.", "components": [ "feature-highlight" ] }, { - "name": "--intergalactic-control-secondary-feature-highlight-hover", - "value": "linear-gradient(90deg in oklch, oklch(0.9 0.065 303), oklch(0.898 0.054 268.3))", + "name": "--intergalactic-feature-highlight-control-secondary-hover", + "value": "oklch(0.151 0.028 176.1 / 0.123)", "description": "Hover state of the highlighted secondary control.", "components": [ "feature-highlight" ] }, { - "name": "--intergalactic-control-secondary-feature-highlight-active", - "value": "linear-gradient(90deg in oklch, oklch(0.9 0.065 303), oklch(0.898 0.054 268.3))", + "name": "--intergalactic-feature-highlight-control-secondary-active", + "value": "oklch(0.145 0.027 176.1 / 0.135)", "description": "Active (selected) state of the highlighted secondary control.", "components": [ "feature-highlight" ] }, { - "name": "--intergalactic-text-feature-highlight", - "value": "linear-gradient(90deg in oklch, oklch(0.53 0.26 296), oklch(0.53 0.157 279.2))", + "name": "--intergalactic-feature-highlight-text", + "value": "oklch(0.1 0.03 137 / 0.899)", "description": "Text for highlighted features.", - "components": [ - "feature-highlight" - ] + "components": [] }, { - "name": "--intergalactic-text-feature-highlight-hover-active", - "value": "linear-gradient(90deg in oklch, oklch(0.53 0.26 296), oklch(0.53 0.157 279.2))", + "name": "--intergalactic-feature-highlight-text-hover-active", + "value": "oklch(0.1 0.03 137 / 0.899)", "description": "Text for hover and active states of highlighted features.", - "components": [ - "feature-highlight" - ] + "components": [] }, { - "name": "--intergalactic-icon-primary-feature-highlight", - "value": "oklch(0.58 0.254 297.1)", - "description": "Primary highlighted icon.", + "name": "--intergalactic-feature-highlight-icon-primary", + "value": "oklch(0.22 0.01 140)", "components": [ "feature-highlight" ] }, { - "name": "--intergalactic-icon-primary-feature-highlight-hover-active", - "value": "oklch(0.53 0.26 296)", - "description": "Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color.", - "components": [ - "feature-highlight" - ] + "name": "--intergalactic-feature-highlight-icon-primary-hover-active", + "value": "oklch(0.22 0.01 140)", + "components": [] }, { - "name": "--intergalactic-keyboard-focus-feature-highlight", - "value": "3px solid linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2))", + "name": "--intergalactic-feature-highlight-keyboard-focus", + "value": "3px solid linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))", "description": "Keyboard focus styles for highlighted controls.", "components": [] }, { - "name": "--intergalactic-keyboard-focus-feature-highlight-outline", - "value": "linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2))", + "name": "--intergalactic-feature-highlight-keyboard-focus-outline", + "value": "linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))", "description": "Color for keyboard focus outline styles for highlighted controls.", "components": [ "feature-highlight"