From a7089caac2e3407902bad1f79ac15728f18f642f Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Thu, 17 Sep 2026 18:07:58 +0200 Subject: [PATCH 1/4] [feature-highlight] update styles --- .../feature-highlight.browser-test.tsx | 4 +- .../src/components/badge/badge.shadow.css | 2 +- .../src/components/button/button.shadow.css | 69 ++++--------- .../components/checkbox/checkbox.shadow.css | 54 ++++++----- .../src/components/input/input.shadow.css | 17 ++-- .../src/components/notice/notice.shadow.css | 35 ++++++- .../src/components/pills/pills.shadow.css | 42 +------- .../src/components/radio/radio.shadow.css | 40 ++++---- .../src/components/switch/switch.shadow.css | 11 +-- .../components/tab-line/tabLine.shadow.css | 24 ++--- .../button-trigger/buttonTrigger.shadow.css | 31 ++---- .../sparkle/style/sparkle.shadow.css | 2 +- tools/theme/src/theme.ts | 47 +++++---- .../style/design-tokens/design-tokens.json | 96 ++++++++++--------- 14 files changed, 213 insertions(+), 261 deletions(-) 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..c16c285d54 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-badge-feature-highlight-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..1ca1ff2d2c 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-control-secondary-feature-highlight, 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-control-secondary-feature-highlight-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-control-secondary-feature-highlight-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-keyboard-focus-feature-highlight-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..189918b9aa 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-border-feature-highlight, 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-control-primary-feature-highlight, oklch(0.23 0.01 140)); + border-color: var(--intergalactic-control-primary-feature-highlight, 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-control-primary-feature-highlight-active, {semanticTokens.colors.control_primary_brand_info}); + border-color: var(--intergalactic-control-primary-feature-highlight-active, {semanticTokens.colors.control_primary_brand_info}); } - [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-keyboard-focus-feature-highlight-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.shadow.css b/semcore/feature-highlight/src/components/input/input.shadow.css index 7853c45600..951397642f 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-border-feature-highlight, 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-keyboard-focus-feature-highlight-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-border-feature-highlight-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-border-feature-highlight, 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..5f2a7f993b 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-bg-secondary-feature-highlight, 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-bg-secondary-feature-highlight, 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-icon-primary-feature-highlight, oklch(0.22 0.01 140)); } & SCloseIcon { diff --git a/semcore/feature-highlight/src/components/pills/pills.shadow.css b/semcore/feature-highlight/src/components/pills/pills.shadow.css index 271f87ac69..616a7e7680 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-keyboard-focus-feature-highlight-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..135de45b4f 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-border-feature-highlight, 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-control-primary-feature-highlight, oklch(0.23 0.01 140)); + border-color: var(--intergalactic-control-primary-feature-highlight, 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-control-primary-feature-highlight-active, {semanticTokens.colors.control_primary_brand_info}); + border-color: var(--intergalactic-control-primary-feature-highlight-active, {semanticTokens.colors.control_primary_brand_info}); } [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-keyboard-focus-feature-highlight-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-keyboard-focus-feature-highlight-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..285fd71a5a 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-keyboard-focus-feature-highlight-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-control-primary-feature-highlight, 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.shadow.css b/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css index f54465b645..e001eeeebc 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-keyboard-focus-feature-highlight-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-border-feature-highlight-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-border-feature-highlight-active, oklch(0.22 0.01 140)); } 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..9484e3b214 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-border-feature-highlight, 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-keyboard-focus-feature-highlight-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-border-feature-highlight-active, oklch(0.22 0.01 140)); } &:focus-visible { outline: none; - border-color: transparent; + border-color: var(--intergalactic-border-feature-highlight, 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..085ade0a82 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-icon-primary-feature-highlight, oklch(0.22 0.01 140)); } } diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 72da812a77..515a8097ad 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.', @@ -2261,68 +2265,71 @@ export const theme: Theme = { }, }, featureHighlight: { + 'badge_feature-highlight_accent': { + value: '{semanticTokens.colors.brand_secondary}', + description: 'Accent background for Badge.', + }, 'bg_primary_feature-highlight_DEFAULT': { - value: '{baseTokens.colors.gray.white}', + value: '{semanticTokens.colors.bg_primary_DEFAULT}', 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})', + value: '{semanticTokens.colors.bg_primary_hover}', 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})', + value: '{baseTokens.colors.violet.100}', 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})', + value: '{semanticTokens.colors.border_primary}', description: 'Primary border for highlighted controls.', }, 'border_feature-highlight_active': { - value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.300}, {baseTokens.colors.blue.300})', + value: '{semanticTokens.colors.brand_secondary}', 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})', + value: '{semanticTokens.colors.border_secondary}', 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})', + value: '{semanticTokens.colors.control_primary_info_DEFAULT}', 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})', + value: '{semanticTokens.colors.control_primary_info_hover}', 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})', + value: '{semanticTokens.colors.control_primary_brand_info}', 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})', + value: '{semanticTokens.colors.control_secondary_neutral_DEFAULT}', 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})', + value: '{semanticTokens.colors.control_secondary_neutral_hover}', 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})', + value: '{semanticTokens.colors.control_secondary_neutral_active}', 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})', + value: '{semanticTokens.colors.text_primary_DEFAULT}', description: 'Text for highlighted features.', }, 'text_feature-highlight_hover_active': { - value: 'linear-gradient(90deg in oklch, {baseTokens.colors.violet.500}, {baseTokens.colors.blue.500})', + value: '{semanticTokens.colors.text_primary_DEFAULT}', 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.', + value: '{semanticTokens.colors.brand_secondary}', }, 'icon_primary_feature-highlight_hover_active': { - value: highlight.at(L_ICON_PRIMARY_HOVER), + value: '{semanticTokens.colors.brand_secondary}', 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': { @@ -2330,7 +2337,7 @@ export const theme: Theme = { 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})', + value: 'linear-gradient(90deg in oklch, {baseTokens.colors.green.200}, {baseTokens.colors.green.200})', description: 'Color for keyboard focus outline styles for highlighted controls.', }, }, @@ -3124,6 +3131,7 @@ type SemanticColors = { brand: { primary: Value; secondary: Value; + tertiary: Value; gradient: Value; pinterest: Value; instagram: Value; @@ -3517,6 +3525,9 @@ type SemanticShadows = { }; export type FeatureHighlight = { + badge: { + 'feature-highlight': { accent: Value }; + }; bg: { primary: { 'feature-highlight': { DEFAULT: Value; hover: { active: Value } }; diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index df1e7d1053..7cb0e85bdb 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -626,7 +626,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", @@ -634,6 +636,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", @@ -1123,7 +1133,8 @@ "value": "oklch(0 0 140)", "description": "Active (selected) state of the regular primary control.", "components": [ - "button" + "button", + "feature-highlight" ] }, { @@ -1131,7 +1142,8 @@ "value": "oklch(0.32 0.007 140)", "description": "Hover state of the regular primary control.", "components": [ - "button" + "button", + "feature-highlight" ] }, { @@ -1455,7 +1467,8 @@ "value": "oklch(0.999 0.001 180 / 0.949)", "description": "Inverted primary text color for form controls.", "components": [ - "button" + "button", + "feature-highlight" ] }, { @@ -3059,7 +3072,6 @@ "description": "Inverted version of the primary text.", "components": [ "date-picker", - "feature-highlight", "notice-bubble" ] }, @@ -3625,7 +3637,6 @@ "components": [ "button", "dropdown", - "feature-highlight", "select" ] }, @@ -3675,7 +3686,8 @@ "value": "4px", "description": "Use for rounding Checkbox.", "components": [ - "checkbox" + "checkbox", + "feature-highlight" ] }, { @@ -3797,7 +3809,6 @@ "carousel", "checkbox", "dropdown", - "feature-highlight", "feedback-form", "radio", "slider", @@ -3864,23 +3875,29 @@ "value": "999", "components": [] }, + { + "name": "--intergalactic-badge-feature-highlight-accent", + "value": "oklch(0.22 0.01 140)", + "description": "Accent background for Badge.", + "components": [ + "feature-highlight" + ] + }, { "name": "--intergalactic-bg-primary-feature-highlight", - "value": "#ffffff", + "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))", + "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))", + "value": "oklch(0.9 0.065 303)", "description": "Secondary background for the highlighted message.", "components": [ "feature-highlight" @@ -3888,7 +3905,7 @@ }, { "name": "--intergalactic-border-feature-highlight", - "value": "linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))", + "value": "oklch(0.137 0.026 175.7 / 0.161)", "description": "Primary border for highlighted controls.", "components": [ "feature-highlight" @@ -3896,7 +3913,7 @@ }, { "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))", + "value": "oklch(0.22 0.01 140)", "description": "Primary border for the active state of highlighted controls.", "components": [ "feature-highlight" @@ -3904,15 +3921,13 @@ }, { "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))", + "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))", + "value": "oklch(0.23 0.01 140)", "description": "Background of the highlighted primary control.", "components": [ "feature-highlight" @@ -3920,15 +3935,13 @@ }, { "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))", + "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))", + "value": "{semanticTokens.colors.control_primary_brand_info}", "description": "Active (selected) state of the highlighted primary control.", "components": [ "feature-highlight" @@ -3936,7 +3949,7 @@ }, { "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))", + "value": "oklch(0.166 0.031 175.8 / 0.097)", "description": "Background of the highlighted secondary control.", "components": [ "feature-highlight" @@ -3944,7 +3957,7 @@ }, { "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))", + "value": "oklch(0.151 0.028 176.1 / 0.123)", "description": "Hover state of the highlighted secondary control.", "components": [ "feature-highlight" @@ -3952,7 +3965,7 @@ }, { "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))", + "value": "oklch(0.145 0.027 176.1 / 0.135)", "description": "Active (selected) state of the highlighted secondary control.", "components": [ "feature-highlight" @@ -3960,45 +3973,38 @@ }, { "name": "--intergalactic-text-feature-highlight", - "value": "linear-gradient(90deg in oklch, oklch(0.53 0.26 296), oklch(0.53 0.157 279.2))", + "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))", + "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.", + "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)", + "value": "oklch(0.22 0.01 140)", "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" - ] + "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))", + "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))", + "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" From 45cf620df277cc5c80ce0d34406d9ef0f6b108ed Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Thu, 17 Sep 2026 18:17:14 +0200 Subject: [PATCH 2/4] [theme] fix value for FH control variable --- .../src/components/checkbox/checkbox.shadow.css | 4 ++-- .../feature-highlight/src/components/radio/radio.shadow.css | 4 ++-- tools/theme/src/theme.ts | 2 +- website/docs/style/design-tokens/design-tokens.json | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css b/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css index 189918b9aa..b1b338abd2 100644 --- a/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css +++ b/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css @@ -13,8 +13,8 @@ SHighlightedCheckbox:not([state="invalid"]) { } &:active input[data-ui-name="CheckboxFH.Value"]:is(:checked, :indeterminate) + [data-ui-name="Value.CheckMark"] { - background-color: var(--intergalactic-control-primary-feature-highlight-active, {semanticTokens.colors.control_primary_brand_info}); - border-color: var(--intergalactic-control-primary-feature-highlight-active, {semanticTokens.colors.control_primary_brand_info}); + background-color: var(--intergalactic-control-primary-feature-highlight-active, oklch(0 0 140)); + border-color: var(--intergalactic-control-primary-feature-highlight-active, oklch(0 0 140)); } [data-ui-name="Value.CheckMark"]::before, diff --git a/semcore/feature-highlight/src/components/radio/radio.shadow.css b/semcore/feature-highlight/src/components/radio/radio.shadow.css index 135de45b4f..5546ffdfbe 100644 --- a/semcore/feature-highlight/src/components/radio/radio.shadow.css +++ b/semcore/feature-highlight/src/components/radio/radio.shadow.css @@ -17,8 +17,8 @@ SHighlightedRadio:not([state="invalid"]) { } &:active input[data-ui-name="RadioFH.Value"]:checked + [data-ui-name="Value.RadioMark"] { - background-color: var(--intergalactic-control-primary-feature-highlight-active, {semanticTokens.colors.control_primary_brand_info}); - border-color: var(--intergalactic-control-primary-feature-highlight-active, {semanticTokens.colors.control_primary_brand_info}); + background-color: var(--intergalactic-control-primary-feature-highlight-active, oklch(0 0 140)); + border-color: var(--intergalactic-control-primary-feature-highlight-active, oklch(0 0 140)); } [data-ui-name="Value.RadioMark"]::before { diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 515a8097ad..ecf658fa60 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -2302,7 +2302,7 @@ export const theme: Theme = { description: 'Hover state of the highlighted primary control.', }, 'control_primary_feature-highlight_active': { - value: '{semanticTokens.colors.control_primary_brand_info}', + value: '{semanticTokens.colors.control_primary_info_active}', description: 'Active (selected) state of the highlighted primary control.', }, 'control_secondary_feature-highlight_DEFAULT': { diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 7cb0e85bdb..0bcdf07214 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -3941,7 +3941,7 @@ }, { "name": "--intergalactic-control-primary-feature-highlight-active", - "value": "{semanticTokens.colors.control_primary_brand_info}", + "value": "oklch(0 0 140)", "description": "Active (selected) state of the highlighted primary control.", "components": [ "feature-highlight" From e9265422c562b782c634a80bb2be1ae4dbfa72e3 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Thu, 17 Sep 2026 19:04:37 +0200 Subject: [PATCH 3/4] [theme] group FH variables --- .../core/src/theme/themes/highlights-dark.css | 34 ++-- .../core/src/theme/themes/highlights-dark.ts | 34 ++-- .../src/theme/themes/highlights-light.css | 34 ++-- .../core/src/theme/themes/highlights-light.ts | 34 ++-- .../src/components/badge/badge.shadow.css | 2 +- .../src/components/button/button.shadow.css | 8 +- .../components/checkbox/checkbox.shadow.css | 12 +- .../src/components/input/Input.tsx | 2 +- .../src/components/input/input.shadow.css | 8 +- .../src/components/notice/notice.shadow.css | 6 +- .../src/components/pills/Pills.tsx | 2 +- .../src/components/pills/pills.shadow.css | 2 +- .../src/components/radio/radio.shadow.css | 14 +- .../src/components/switch/switch.shadow.css | 4 +- .../src/components/tab-line/TabLine.tsx | 2 +- .../components/tab-line/tabLine.shadow.css | 6 +- .../button-trigger/ButtonTrigger.tsx | 2 +- .../button-trigger/buttonTrigger.shadow.css | 8 +- .../sparkle/style/sparkle.shadow.css | 2 +- .../advanced/examples/all-controls.tsx | 10 +- .../docs/examples/checkbox.tsx | 2 +- .../docs/examples/data-table.tsx | 4 +- .../feature-highlight/docs/examples/radio.tsx | 2 +- .../docs/examples/switch.tsx | 4 +- .../tests/examples/checkbox.tsx | 2 +- .../tests/examples/radio.tsx | 2 +- .../tests/examples/switch-fh.tsx | 2 +- tools/theme/src/theme.ts | 172 +++++++++++++----- .../feature-highlight/feature-highlight.md | 8 +- .../docs/style/design-tokens/base-tokens.json | 76 ++++++++ .../style/design-tokens/design-tokens.json | 38 ++-- 31 files changed, 343 insertions(+), 195 deletions(-) diff --git a/semcore/core/src/theme/themes/highlights-dark.css b/semcore/core/src/theme/themes/highlights-dark.css index 8e5b62a6f8..41fdcf54df 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: 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-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..42b97873bf 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': 'linear-gradient(90deg, #c695ff, #2bb3ff)', + '--intergalactic-feature-highlight-border-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..00f5348cea 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: 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-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..590625041b 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': 'linear-gradient(90deg, #c695ff, #2bb3ff)', + '--intergalactic-feature-highlight-border-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/src/components/badge/badge.shadow.css b/semcore/feature-highlight/src/components/badge/badge.shadow.css index c16c285d54..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-color: var(--intergalactic-badge-feature-highlight-accent, oklch(0.22 0.01 140)); + 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 1ca1ff2d2c..c89ebcc80a 100644 --- a/semcore/feature-highlight/src/components/button/button.shadow.css +++ b/semcore/feature-highlight/src/components/button/button.shadow.css @@ -25,15 +25,15 @@ SHighlightedButton[theme='primary-highlighted'] { SHighlightedButton[theme='secondary-highlighted'] { color: var(--intergalactic-text-primary-feature-highlight, undefined); - background-color: var(--intergalactic-control-secondary-feature-highlight, oklch(0.166 0.031 175.8 / 0.097)); + background-color: var(--intergalactic-feature-highlight-control-secondary, oklch(0.166 0.031 175.8 / 0.097)); &:hover { - background-color: var(--intergalactic-control-secondary-feature-highlight-hover, oklch(0.151 0.028 176.1 / 0.123)); + background-color: var(--intergalactic-feature-highlight-control-secondary-hover, oklch(0.151 0.028 176.1 / 0.123)); } &:active, &[active] { - background-color: var(--intergalactic-control-secondary-feature-highlight-active, oklch(0.145 0.027 176.1 / 0.135)); + background-color: var(--intergalactic-feature-highlight-control-secondary-active, oklch(0.145 0.027 176.1 / 0.135)); } &:focus-visible { @@ -54,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.82 0.15 170), oklch(0.82 0.15 170))); + 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; diff --git a/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css b/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css index b1b338abd2..f4cd75f0c2 100644 --- a/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css +++ b/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css @@ -2,19 +2,19 @@ SHighlightedCheckbox:not([state="invalid"]) { [data-ui-name="Value.CheckMark"] { position: relative; transform: translate(0); - border: 1px solid var(--intergalactic-border-feature-highlight, oklch(0.137 0.026 175.7 / 0.161)); + border: 1px solid var(--intergalactic-feature-highlight-border, 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)); } input[data-ui-name="CheckboxFH.Value"]:is(:checked, :indeterminate) + [data-ui-name="Value.CheckMark"] { - background-color: var(--intergalactic-control-primary-feature-highlight, oklch(0.23 0.01 140)); - border-color: var(--intergalactic-control-primary-feature-highlight, oklch(0.23 0.01 140)); + 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)); } &:active input[data-ui-name="CheckboxFH.Value"]:is(:checked, :indeterminate) + [data-ui-name="Value.CheckMark"] { - background-color: var(--intergalactic-control-primary-feature-highlight-active, oklch(0 0 140)); - border-color: var(--intergalactic-control-primary-feature-highlight-active, oklch(0 0 140)); + 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, @@ -29,7 +29,7 @@ SHighlightedCheckbox:not([state="invalid"]) { border-radius: calc(var(--intergalactic-checkbox-rounded, 4px) + 3px); pointer-events: none; background-color: transparent; - background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))); + 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; 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 951397642f..9f3ae17a68 100644 --- a/semcore/feature-highlight/src/components/input/input.shadow.css +++ b/semcore/feature-highlight/src/components/input/input.shadow.css @@ -1,6 +1,6 @@ SHighlightedInput[state='normal'] { SOutline { - border-color: var(--intergalactic-border-feature-highlight, oklch(0.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-feature-highlight-border, oklch(0.137 0.026 175.7 / 0.161)); &::before { content: ""; @@ -11,7 +11,7 @@ SHighlightedInput[state='normal'] { 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.82 0.15 170), oklch(0.82 0.15 170))); + 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; @@ -23,7 +23,7 @@ SHighlightedInput[state='normal'] { &:has(SValue:focus-visible) SOutline { outline: none; - border-color: var(--intergalactic-border-feature-highlight-active, oklch(0.22 0.01 140)); + border-color: var(--intergalactic-feature-highlight-border-active, oklch(0.22 0.01 140)); &::before { opacity: 1; @@ -49,7 +49,7 @@ SHighlightedInput[state='normal'] { @supports not (-webkit-mask-composite: xor) { SHighlightedInput[state='normal']:has(SValue:focus-visible) SOutline { outline: none; - border-color: var(--intergalactic-border-feature-highlight, oklch(0.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-feature-highlight-border, oklch(0.137 0.026 175.7 / 0.161)); box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #59ddaa; diff --git a/semcore/feature-highlight/src/components/notice/notice.shadow.css b/semcore/feature-highlight/src/components/notice/notice.shadow.css index 5f2a7f993b..6de973bddb 100644 --- a/semcore/feature-highlight/src/components/notice/notice.shadow.css +++ b/semcore/feature-highlight/src/components/notice/notice.shadow.css @@ -1,5 +1,5 @@ SHighlightedNotice[beforeVisibility] { - background-color: var(--intergalactic-bg-secondary-feature-highlight, oklch(0.9 0.065 303)); + background-color: var(--intergalactic-feature-highlight-bg-secondary, oklch(0.9 0.065 303)); border-color: transparent; background-clip: padding-box; position: relative; @@ -14,7 +14,7 @@ SHighlightedNotice[beforeVisibility] { border-radius: inherit; visibility: var(--beforeVisibility); - border-color: var(--intergalactic-bg-secondary-feature-highlight, oklch(0.9 0.065 303)); + border-color: var(--intergalactic-feature-highlight-bg-secondary, oklch(0.9 0.065 303)); } &:after { @@ -46,7 +46,7 @@ SHighlightedNotice[beforeVisibility] { } & SLabel { - color: var(--intergalactic-icon-primary-feature-highlight, oklch(0.22 0.01 140)); + 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 616a7e7680..c832699301 100644 --- a/semcore/feature-highlight/src/components/pills/pills.shadow.css +++ b/semcore/feature-highlight/src/components/pills/pills.shadow.css @@ -12,7 +12,7 @@ SHighlightedPill { border-radius: calc(var(--intergalactic-rounded-small, 4px) + 3px); pointer-events: none; background-color: transparent; - background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))); + 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; diff --git a/semcore/feature-highlight/src/components/radio/radio.shadow.css b/semcore/feature-highlight/src/components/radio/radio.shadow.css index 5546ffdfbe..bdca9ca026 100644 --- a/semcore/feature-highlight/src/components/radio/radio.shadow.css +++ b/semcore/feature-highlight/src/components/radio/radio.shadow.css @@ -4,21 +4,21 @@ SHighlightedRadio { SHighlightedRadio:not([state="invalid"]) { [data-ui-name="Value.RadioMark"] { - border: 1px solid var(--intergalactic-border-feature-highlight, oklch(0.137 0.026 175.7 / 0.161)); + border: 1px solid var(--intergalactic-feature-highlight-border, oklch(0.137 0.026 175.7 / 0.161)); border-radius: 50%; 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-control-primary-feature-highlight, oklch(0.23 0.01 140)); - border-color: var(--intergalactic-control-primary-feature-highlight, oklch(0.23 0.01 140)); + 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-control-primary-feature-highlight-active, oklch(0 0 140)); - border-color: var(--intergalactic-control-primary-feature-highlight-active, oklch(0 0 140)); + 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 { @@ -32,7 +32,7 @@ SHighlightedRadio:not([state="invalid"]) { border-width: 0; pointer-events: none; background-color: transparent; - background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))); + 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; @@ -48,7 +48,7 @@ SHighlightedRadio:not([state="invalid"]) { input[data-ui-name="RadioFH.Value"]:checked + [data-ui-name="Value.RadioMark"]::before { background-color: transparent; - background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))); + 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 { diff --git a/semcore/feature-highlight/src/components/switch/switch.shadow.css b/semcore/feature-highlight/src/components/switch/switch.shadow.css index 285fd71a5a..0deeec2df7 100644 --- a/semcore/feature-highlight/src/components/switch/switch.shadow.css +++ b/semcore/feature-highlight/src/components/switch/switch.shadow.css @@ -8,7 +8,7 @@ SToggle { inset: 0; padding: 2px; border-radius: inherit; - background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))); + 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; @@ -22,7 +22,7 @@ SToggle { SToggle[checked] { color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); - background-color: var(--intergalactic-control-primary-feature-highlight, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-feature-highlight-control-primary, oklch(0.23 0.01 140)); } SToggle:has(SInput:focus-visible) { 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 e001eeeebc..a82d5d7ad1 100644 --- a/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css +++ b/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css @@ -19,7 +19,7 @@ SHighlightedItem { padding: 2px; box-sizing: content-box; pointer-events: none; - background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))); + 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; @@ -31,10 +31,10 @@ SHighlightedItem { &[selected]::after, &:hover:not(:focus-visible)::after { - background-color: var(--intergalactic-border-feature-highlight-active, oklch(0.22 0.01 140)); + background-color: var(--intergalactic-feature-highlight-border-active, oklch(0.22 0.01 140)); } } SCaret { - background: var(--intergalactic-border-feature-highlight-active, oklch(0.22 0.01 140)); + background: var(--intergalactic-feature-highlight-border-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 9484e3b214..6c0c3feaf4 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,5 +1,5 @@ SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]) { - border-color: var(--intergalactic-border-feature-highlight, oklch(0.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-feature-highlight-border, oklch(0.137 0.026 175.7 / 0.161)); z-index: 1; &::before { @@ -11,7 +11,7 @@ SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]) { padding: 2px; border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px); background-color: transparent; - background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.82 0.15 170), oklch(0.82 0.15 170))); + 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; @@ -24,12 +24,12 @@ SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]) { &:active, &[active] { - border-color: var(--intergalactic-border-feature-highlight-active, oklch(0.22 0.01 140)); + border-color: var(--intergalactic-feature-highlight-border-active, oklch(0.22 0.01 140)); } &:focus-visible { outline: none; - border-color: var(--intergalactic-border-feature-highlight, oklch(0.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-feature-highlight-border, oklch(0.137 0.026 175.7 / 0.161)); &::before { opacity: 1; 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 085ade0a82..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.22 0.01 140)); + 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 c31582e9d0..254fe821ee 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -2269,78 +2269,78 @@ export const theme: Theme = { }, }, featureHighlight: { - 'badge_feature-highlight_accent': { + 'feature-highlight_badge_accent': { value: '{semanticTokens.colors.brand_secondary}', description: 'Accent background for Badge.', }, - 'bg_primary_feature-highlight_DEFAULT': { + 'feature-highlight_bg_primary_DEFAULT': { value: '{semanticTokens.colors.bg_primary_DEFAULT}', description: 'Primary background for highlighted controls.', }, - 'bg_primary_feature-highlight_hover_active': { + 'feature-highlight_bg_primary_hover_active': { value: '{semanticTokens.colors.bg_primary_hover}', description: 'Primary background for hover and active (selected) state of highlighted controls.', }, - 'bg_secondary_feature-highlight': { + 'feature-highlight_bg_secondary': { value: '{baseTokens.colors.violet.100}', description: 'Secondary background for the highlighted message.', }, - 'border_feature-highlight_DEFAULT': { + 'feature-highlight_border_DEFAULT': { value: '{semanticTokens.colors.border_primary}', description: 'Primary border for highlighted controls.', }, - 'border_feature-highlight_active': { + 'feature-highlight_border_active': { value: '{semanticTokens.colors.brand_secondary}', description: 'Primary border for the active state of highlighted controls.', }, - 'border_feature-highlight_secondary': { + 'feature-highlight_border_secondary': { value: '{semanticTokens.colors.border_secondary}', description: 'Secondary border for highlighted controls.', }, - 'control_primary_feature-highlight_DEFAULT': { + 'feature-highlight_control_primary_DEFAULT': { value: '{semanticTokens.colors.control_primary_info_DEFAULT}', description: 'Background of the highlighted primary control.', }, - 'control_primary_feature-highlight_hover': { + 'feature-highlight_control_primary_hover': { value: '{semanticTokens.colors.control_primary_info_hover}', description: 'Hover state of the highlighted primary control.', }, - 'control_primary_feature-highlight_active': { + 'feature-highlight_control_primary_active': { value: '{semanticTokens.colors.control_primary_info_active}', description: 'Active (selected) state of the highlighted primary control.', }, - 'control_secondary_feature-highlight_DEFAULT': { + 'feature-highlight_control_secondary_DEFAULT': { value: '{semanticTokens.colors.control_secondary_neutral_DEFAULT}', description: 'Background of the highlighted secondary control.', }, - 'control_secondary_feature-highlight_hover': { + 'feature-highlight_control_secondary_hover': { value: '{semanticTokens.colors.control_secondary_neutral_hover}', description: 'Hover state of the highlighted secondary control.', }, - 'control_secondary_feature-highlight_active': { + 'feature-highlight_control_secondary_active': { value: '{semanticTokens.colors.control_secondary_neutral_active}', description: 'Active (selected) state of the highlighted secondary control.', }, - 'text_feature-highlight_DEFAULT': { + 'feature-highlight_text_DEFAULT': { value: '{semanticTokens.colors.text_primary_DEFAULT}', description: 'Text for highlighted features.', }, - 'text_feature-highlight_hover_active': { + 'feature-highlight_text_hover_active': { value: '{semanticTokens.colors.text_primary_DEFAULT}', description: 'Text for hover and active states of highlighted features.', }, - 'icon_primary_feature-highlight_DEFAULT': { + 'feature-highlight_icon_primary_DEFAULT': { value: '{semanticTokens.colors.brand_secondary}', }, - 'icon_primary_feature-highlight_hover_active': { + 'feature-highlight_icon_primary_hover_active': { value: '{semanticTokens.colors.brand_secondary}', 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}', + 'feature-highlight_keyboard_focus_DEFAULT': { + value: '3px solid {featureHighlight.feature-highlight.keyboard.focus.outline}', description: 'Keyboard focus styles for highlighted controls.', }, - 'keyboard_focus_feature-highlight_outline': { + 'feature-highlight_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.', }, @@ -2361,11 +2361,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.DEFAULT}' }, + active: { value: '{featureHighlight.feature-highlight.border.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}' }, @@ -2408,7 +2461,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: { @@ -2416,6 +2469,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}' } }, + }, }, }, }; @@ -3532,6 +3589,41 @@ type SemanticShadows = { }; export type FeatureHighlight = { + 'feature-highlight': { + badge: { accent: Value }; + bg: { + primary: { DEFAULT: Value; hover: { active: Value } }; + secondary: Value; + }; + border: { 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 }; }; @@ -3544,6 +3636,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: { @@ -3554,35 +3649,11 @@ 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; @@ -3620,7 +3691,7 @@ type Deprecates = { }; }; text: { - link: { + 'link': { DEFAULT: Value; hover: { active: Value }; invert: { @@ -3628,6 +3699,7 @@ type Deprecates = { hover: Value; }; }; + 'feature-highlight': { DEFAULT: Value; hover: { active: Value } }; }; }; 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..1b4e4623fb 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)" @@ -966,5 +1034,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 b3b29de83a..bca3a2d815 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -3907,7 +3907,7 @@ "components": [] }, { - "name": "--intergalactic-badge-feature-highlight-accent", + "name": "--intergalactic-feature-highlight-badge-accent", "value": "oklch(0.22 0.01 140)", "description": "Accent background for Badge.", "components": [ @@ -3915,19 +3915,19 @@ ] }, { - "name": "--intergalactic-bg-primary-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", + "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": [] }, { - "name": "--intergalactic-bg-secondary-feature-highlight", + "name": "--intergalactic-feature-highlight-bg-secondary", "value": "oklch(0.9 0.065 303)", "description": "Secondary background for the highlighted message.", "components": [ @@ -3935,7 +3935,7 @@ ] }, { - "name": "--intergalactic-border-feature-highlight", + "name": "--intergalactic-feature-highlight-border", "value": "oklch(0.137 0.026 175.7 / 0.161)", "description": "Primary border for highlighted controls.", "components": [ @@ -3943,7 +3943,7 @@ ] }, { - "name": "--intergalactic-border-feature-highlight-active", + "name": "--intergalactic-feature-highlight-border-active", "value": "oklch(0.22 0.01 140)", "description": "Primary border for the active state of highlighted controls.", "components": [ @@ -3951,13 +3951,13 @@ ] }, { - "name": "--intergalactic-border-feature-highlight-secondary", + "name": "--intergalactic-feature-highlight-border-secondary", "value": "oklch(0.176 0.033 175.7 / 0.07)", "description": "Secondary border for highlighted controls.", "components": [] }, { - "name": "--intergalactic-control-primary-feature-highlight", + "name": "--intergalactic-feature-highlight-control-primary", "value": "oklch(0.23 0.01 140)", "description": "Background of the highlighted primary control.", "components": [ @@ -3965,13 +3965,13 @@ ] }, { - "name": "--intergalactic-control-primary-feature-highlight-hover", + "name": "--intergalactic-feature-highlight-control-primary-hover", "value": "oklch(0.32 0.007 140)", "description": "Hover state of the highlighted primary control.", "components": [] }, { - "name": "--intergalactic-control-primary-feature-highlight-active", + "name": "--intergalactic-feature-highlight-control-primary-active", "value": "oklch(0 0 140)", "description": "Active (selected) state of the highlighted primary control.", "components": [ @@ -3979,7 +3979,7 @@ ] }, { - "name": "--intergalactic-control-secondary-feature-highlight", + "name": "--intergalactic-feature-highlight-control-secondary", "value": "oklch(0.166 0.031 175.8 / 0.097)", "description": "Background of the highlighted secondary control.", "components": [ @@ -3987,7 +3987,7 @@ ] }, { - "name": "--intergalactic-control-secondary-feature-highlight-hover", + "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": [ @@ -3995,7 +3995,7 @@ ] }, { - "name": "--intergalactic-control-secondary-feature-highlight-active", + "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": [ @@ -4003,38 +4003,38 @@ ] }, { - "name": "--intergalactic-text-feature-highlight", + "name": "--intergalactic-feature-highlight-text", "value": "oklch(0.1 0.03 137 / 0.899)", "description": "Text for highlighted features.", "components": [] }, { - "name": "--intergalactic-text-feature-highlight-hover-active", + "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": [] }, { - "name": "--intergalactic-icon-primary-feature-highlight", + "name": "--intergalactic-feature-highlight-icon-primary", "value": "oklch(0.22 0.01 140)", "components": [ "feature-highlight" ] }, { - "name": "--intergalactic-icon-primary-feature-highlight-hover-active", + "name": "--intergalactic-feature-highlight-icon-primary-hover-active", "value": "oklch(0.22 0.01 140)", "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": [] }, { - "name": "--intergalactic-keyboard-focus-feature-highlight", + "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", + "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": [ From d17613b7ecfdc5b53af329b85de81ec63f616a2b Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Thu, 17 Sep 2026 19:31:54 +0200 Subject: [PATCH 4/4] [theme] reorganize FH variables a bit --- .../core/src/theme/themes/highlights-dark.css | 4 +- .../core/src/theme/themes/highlights-dark.ts | 4 +- .../src/theme/themes/highlights-light.css | 4 +- .../core/src/theme/themes/highlights-light.ts | 4 +- .../components/checkbox/checkbox.shadow.css | 2 +- .../src/components/input/input.shadow.css | 6 +- .../src/components/radio/radio.shadow.css | 2 +- .../components/tab-line/tabLine.shadow.css | 4 +- .../button-trigger/buttonTrigger.shadow.css | 6 +- tools/theme/src/theme.ts | 207 ++++++++++-------- tools/theme/src/utils.ts | 4 +- .../docs/style/design-tokens/base-tokens.json | 8 + .../style/design-tokens/design-tokens.json | 5 +- 13 files changed, 139 insertions(+), 121 deletions(-) diff --git a/semcore/core/src/theme/themes/highlights-dark.css b/semcore/core/src/theme/themes/highlights-dark.css index 41fdcf54df..72d9294e01 100644 --- a/semcore/core/src/theme/themes/highlights-dark.css +++ b/semcore/core/src/theme/themes/highlights-dark.css @@ -6,9 +6,9 @@ /* Secondary background for the highlighted message. */ --intergalactic-feature-highlight-bg-secondary: linear-gradient(90deg, #f9f2ff, #e9f7ff); /* Primary border for highlighted controls. */ - --intergalactic-feature-highlight-border: 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-feature-highlight-border-active: linear-gradient(90deg, #ab6cfe, #008ff8); + --intergalactic-feature-highlight-border-primary-active: linear-gradient(90deg, #ab6cfe, #008ff8); /* Secondary border for highlighted controls. */ --intergalactic-feature-highlight-border-secondary: linear-gradient(90deg, #dcb8ff, #8ecdff); /* Background of the highlighted primary control. */ diff --git a/semcore/core/src/theme/themes/highlights-dark.ts b/semcore/core/src/theme/themes/highlights-dark.ts index 42b97873bf..6524367205 100644 --- a/semcore/core/src/theme/themes/highlights-dark.ts +++ b/semcore/core/src/theme/themes/highlights-dark.ts @@ -2,8 +2,8 @@ export default { '--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': 'linear-gradient(90deg, #c695ff, #2bb3ff)', - '--intergalactic-feature-highlight-border-active': 'linear-gradient(90deg, #ab6cfe, #008ff8)', + '--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)', diff --git a/semcore/core/src/theme/themes/highlights-light.css b/semcore/core/src/theme/themes/highlights-light.css index 00f5348cea..f738593fae 100644 --- a/semcore/core/src/theme/themes/highlights-light.css +++ b/semcore/core/src/theme/themes/highlights-light.css @@ -6,9 +6,9 @@ /* Secondary background for the highlighted message. */ --intergalactic-feature-highlight-bg-secondary: linear-gradient(90deg, #f9f2ff, #e9f7ff); /* Primary border for highlighted controls. */ - --intergalactic-feature-highlight-border: 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-feature-highlight-border-active: linear-gradient(90deg, #ab6cfe, #008ff8); + --intergalactic-feature-highlight-border-primary-active: linear-gradient(90deg, #ab6cfe, #008ff8); /* Secondary border for highlighted controls. */ --intergalactic-feature-highlight-border-secondary: linear-gradient(90deg, #dcb8ff, #8ecdff); /* Background of the highlighted primary control. */ diff --git a/semcore/core/src/theme/themes/highlights-light.ts b/semcore/core/src/theme/themes/highlights-light.ts index 590625041b..5a84f01076 100644 --- a/semcore/core/src/theme/themes/highlights-light.ts +++ b/semcore/core/src/theme/themes/highlights-light.ts @@ -2,8 +2,8 @@ export default { '--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': 'linear-gradient(90deg, #c695ff, #2bb3ff)', - '--intergalactic-feature-highlight-border-active': 'linear-gradient(90deg, #ab6cfe, #008ff8)', + '--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)', diff --git a/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css b/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css index f4cd75f0c2..0c89282da3 100644 --- a/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css +++ b/semcore/feature-highlight/src/components/checkbox/checkbox.shadow.css @@ -2,7 +2,7 @@ SHighlightedCheckbox:not([state="invalid"]) { [data-ui-name="Value.CheckMark"] { position: relative; transform: translate(0); - border: 1px solid var(--intergalactic-feature-highlight-border, oklch(0.137 0.026 175.7 / 0.161)); + 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)); } diff --git a/semcore/feature-highlight/src/components/input/input.shadow.css b/semcore/feature-highlight/src/components/input/input.shadow.css index 9f3ae17a68..14bb998a8b 100644 --- a/semcore/feature-highlight/src/components/input/input.shadow.css +++ b/semcore/feature-highlight/src/components/input/input.shadow.css @@ -1,6 +1,6 @@ SHighlightedInput[state='normal'] { SOutline { - border-color: var(--intergalactic-feature-highlight-border, oklch(0.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-feature-highlight-border-primary, oklch(0.137 0.026 175.7 / 0.161)); &::before { content: ""; @@ -23,7 +23,7 @@ SHighlightedInput[state='normal'] { &:has(SValue:focus-visible) SOutline { outline: none; - border-color: var(--intergalactic-feature-highlight-border-active, oklch(0.22 0.01 140)); + border-color: var(--intergalactic-feature-highlight-border-primary-active, oklch(0.22 0.01 140)); &::before { opacity: 1; @@ -49,7 +49,7 @@ SHighlightedInput[state='normal'] { @supports not (-webkit-mask-composite: xor) { SHighlightedInput[state='normal']:has(SValue:focus-visible) SOutline { outline: none; - border-color: var(--intergalactic-feature-highlight-border, oklch(0.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-feature-highlight-border-primary, oklch(0.137 0.026 175.7 / 0.161)); box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #59ddaa; diff --git a/semcore/feature-highlight/src/components/radio/radio.shadow.css b/semcore/feature-highlight/src/components/radio/radio.shadow.css index bdca9ca026..836880253f 100644 --- a/semcore/feature-highlight/src/components/radio/radio.shadow.css +++ b/semcore/feature-highlight/src/components/radio/radio.shadow.css @@ -4,7 +4,7 @@ SHighlightedRadio { SHighlightedRadio:not([state="invalid"]) { [data-ui-name="Value.RadioMark"] { - border: 1px solid var(--intergalactic-feature-highlight-border, oklch(0.137 0.026 175.7 / 0.161)); + border: 1px solid var(--intergalactic-feature-highlight-border-primary, oklch(0.137 0.026 175.7 / 0.161)); border-radius: 50%; background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); background-image: none; 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 a82d5d7ad1..6a1ffe7579 100644 --- a/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css +++ b/semcore/feature-highlight/src/components/tab-line/tabLine.shadow.css @@ -31,10 +31,10 @@ SHighlightedItem { &[selected]::after, &:hover:not(:focus-visible)::after { - background-color: var(--intergalactic-feature-highlight-border-active, oklch(0.22 0.01 140)); + background-color: var(--intergalactic-feature-highlight-border-primary-active, oklch(0.22 0.01 140)); } } SCaret { - background: var(--intergalactic-feature-highlight-border-active, oklch(0.22 0.01 140)); + 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.shadow.css b/semcore/feature-highlight/src/inner-components/button-trigger/buttonTrigger.shadow.css index 6c0c3feaf4..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,5 +1,5 @@ SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]) { - border-color: var(--intergalactic-feature-highlight-border, oklch(0.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-feature-highlight-border-primary, oklch(0.137 0.026 175.7 / 0.161)); z-index: 1; &::before { @@ -24,12 +24,12 @@ SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]) { &:active, &[active] { - border-color: var(--intergalactic-feature-highlight-border-active, oklch(0.22 0.01 140)); + border-color: var(--intergalactic-feature-highlight-border-primary-active, oklch(0.22 0.01 140)); } &:focus-visible { outline: none; - border-color: var(--intergalactic-feature-highlight-border, oklch(0.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-feature-highlight-border-primary, oklch(0.137 0.026 175.7 / 0.161)); &::before { opacity: 1; diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 254fe821ee..50ae37289e 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -2269,80 +2269,81 @@ export const theme: Theme = { }, }, featureHighlight: { - 'feature-highlight_badge_accent': { - value: '{semanticTokens.colors.brand_secondary}', - description: 'Accent background for Badge.', - }, - 'feature-highlight_bg_primary_DEFAULT': { - value: '{semanticTokens.colors.bg_primary_DEFAULT}', - description: 'Primary background for highlighted controls.', - }, - 'feature-highlight_bg_primary_hover_active': { - value: '{semanticTokens.colors.bg_primary_hover}', - description: 'Primary background for hover and active (selected) state of highlighted controls.', - }, - 'feature-highlight_bg_secondary': { - value: '{baseTokens.colors.violet.100}', - description: 'Secondary background for the highlighted message.', - }, - 'feature-highlight_border_DEFAULT': { - value: '{semanticTokens.colors.border_primary}', - description: 'Primary border for highlighted controls.', - }, - 'feature-highlight_border_active': { - value: '{semanticTokens.colors.brand_secondary}', - description: 'Primary border for the active state of highlighted controls.', - }, - 'feature-highlight_border_secondary': { - value: '{semanticTokens.colors.border_secondary}', - description: 'Secondary border for highlighted controls.', - }, - 'feature-highlight_control_primary_DEFAULT': { - value: '{semanticTokens.colors.control_primary_info_DEFAULT}', - description: 'Background of the highlighted primary control.', - }, - 'feature-highlight_control_primary_hover': { - value: '{semanticTokens.colors.control_primary_info_hover}', - description: 'Hover state of the highlighted primary control.', - }, - 'feature-highlight_control_primary_active': { - value: '{semanticTokens.colors.control_primary_info_active}', - description: 'Active (selected) state of the highlighted primary control.', - }, - 'feature-highlight_control_secondary_DEFAULT': { - value: '{semanticTokens.colors.control_secondary_neutral_DEFAULT}', - description: 'Background of the highlighted secondary control.', - }, - 'feature-highlight_control_secondary_hover': { - value: '{semanticTokens.colors.control_secondary_neutral_hover}', - description: 'Hover state of the highlighted secondary control.', - }, - 'feature-highlight_control_secondary_active': { - value: '{semanticTokens.colors.control_secondary_neutral_active}', - description: 'Active (selected) state of the highlighted secondary control.', - }, - 'feature-highlight_text_DEFAULT': { - value: '{semanticTokens.colors.text_primary_DEFAULT}', - description: 'Text for highlighted features.', - }, - 'feature-highlight_text_hover_active': { - value: '{semanticTokens.colors.text_primary_DEFAULT}', - description: 'Text for hover and active states of highlighted features.', - }, - 'feature-highlight_icon_primary_DEFAULT': { - value: '{semanticTokens.colors.brand_secondary}', - }, - 'feature-highlight_icon_primary_hover_active': { - value: '{semanticTokens.colors.brand_secondary}', - 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.', - }, - 'feature-highlight_keyboard_focus_DEFAULT': { - value: '3px solid {featureHighlight.feature-highlight.keyboard.focus.outline}', - description: 'Keyboard focus styles for highlighted controls.', - }, - 'feature-highlight_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.', + '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: { @@ -2391,8 +2392,8 @@ export const theme: Theme = { '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.DEFAULT}' }, - active: { value: '{featureHighlight.feature-highlight.border.active}' }, + DEFAULT: { value: '{featureHighlight.feature-highlight.border.primary.DEFAULT}' }, + active: { value: '{featureHighlight.feature-highlight.border.primary.active}' }, secondary: { value: '{featureHighlight.feature-highlight.border.secondary}' }, }, }, @@ -2426,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}' }, @@ -2587,7 +2594,9 @@ export type SemanticTokens = { export type Theme = { baseTokens: BaseTokens; semanticTokens: SemanticTokens; - featureHighlight: Record, Value>; + featureHighlight: { + 'feature-highlight': Record, Value>; + }; deprecates: Deprecates; }; @@ -3589,26 +3598,27 @@ type SemanticShadows = { }; export type FeatureHighlight = { - 'feature-highlight': { - badge: { accent: Value }; - bg: { - primary: { DEFAULT: Value; hover: { active: Value } }; - secondary: Value; - }; - border: { 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; - }; + 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; }; }; }; @@ -3660,6 +3670,9 @@ type Deprecates = { warning: Value; }; feature: { + highlight: { + border: { DEFAULT: Value; active: Value }; + }; popover: { bg: { DEFAULT: Value }; dot: { 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/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json index 1b4e4623fb..0c620eb95f 100644 --- a/website/docs/style/design-tokens/base-tokens.json +++ b/website/docs/style/design-tokens/base-tokens.json @@ -967,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)" diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index bca3a2d815..a03a7d2073 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -3935,7 +3935,7 @@ ] }, { - "name": "--intergalactic-feature-highlight-border", + "name": "--intergalactic-feature-highlight-border-primary", "value": "oklch(0.137 0.026 175.7 / 0.161)", "description": "Primary border for highlighted controls.", "components": [ @@ -3943,7 +3943,7 @@ ] }, { - "name": "--intergalactic-feature-highlight-border-active", + "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": [ @@ -4024,7 +4024,6 @@ { "name": "--intergalactic-feature-highlight-icon-primary-hover-active", "value": "oklch(0.22 0.01 140)", - "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": [] }, {