From 547566d667074fa185a3db1a911ebd77e858c964 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Mon, 14 Sep 2026 19:44:27 +0200 Subject: [PATCH 1/7] [theme] remove opacity from text primary var --- .../accordion/src/style/accordion.shadow.css | 4 +- .../components/popper/style/popper.shadow.css | 2 +- .../src/style/base-trigger.shadow.css | 2 +- .../src/style/breadcrumbs.shadow.css | 6 +- .../InputField/inputField.shadow.css | 2 +- .../src/component/Button/button.shadow.css | 28 ++-- .../ButtonLink/buttonLink.shadow.css | 6 +- semcore/card/src/style/card.shadow.css | 2 +- .../carousel/src/style/carousel.shadow.css | 2 +- .../checkbox/src/style/checkbox.shadow.css | 2 +- .../src/style/color-picker.shadow.css | 2 +- semcore/d3-chart/src/style/axis.shadow.css | 2 +- semcore/d3-chart/src/style/bar.shadow.css | 4 +- .../src/style/plotA11yView.shadow.css | 2 +- .../src/components/Body/style.shadow.css | 2 +- .../src/components/Head/style.shadow.css | 4 +- .../date-picker/src/style/calendar.shadow.css | 8 +- .../src/style/date-picker.shadow.css | 6 +- semcore/dot/src/style/dot.shadow.css | 2 +- .../src/style/drag-and-drop.shadow.css | 2 +- .../src/style/dropdown-menu.shadow.css | 2 +- .../dropdown/src/style/dropdown.shadow.css | 12 +- semcore/errors/src/style/errors.shadow.css | 4 +- .../src/components/notice/notice.shadow.css | 4 +- .../src/style/feature-popover.shadow.css | 2 +- .../component/submit-button/SubmitButton.tsx | 2 +- .../src/style/checkbox-button.shadow.css | 20 +-- .../src/style/slider-rating.shadow.css | 6 +- .../src/style/fullscreen-modal.shadow.css | 2 +- .../src/style/inline-input.shadow.css | 16 +-- .../src/style/input-mask.shadow.css | 2 +- .../src/style/input-number.shadow.css | 4 +- semcore/input/src/style/input.shadow.css | 6 +- semcore/link/src/style/link.shadow.css | 4 +- semcore/modal/src/style/modal.shadow.css | 4 +- semcore/notice/src/style/notice.shadow.css | 32 ++--- .../src/style/pagination.shadow.css | 6 +- semcore/pills/src/style/pills.shadow.css | 6 +- .../product-head/src/style/title.shadow.css | 2 +- semcore/radio/src/style/radio.shadow.css | 2 +- semcore/select/src/style/select.shadow.css | 4 +- .../src/style/side-panel.shadow.css | 2 +- semcore/spin/src/style/spin.shadow.css | 4 +- semcore/switch/src/style/switch.shadow.css | 12 +- .../tab-line/src/style/tab-line.shadow.css | 2 +- .../tab-panel/src/style/tab-panel.shadow.css | 4 +- .../textarea/src/style/textarea.shadow.css | 2 +- .../TimePicker/time-picker.shadow.css | 2 +- semcore/tooltip/src/style/tooltip.shadow.css | 2 +- semcore/typography/src/style/list.shadow.css | 2 +- semcore/typography/src/style/text.shadow.css | 12 +- .../reference-background-chart-grid-bg.tsx | 82 +++++++++++ .../patterns/core/advanced/all-components.tsx | 5 + .../advanced/components/Palette/index.tsx | 50 +++++++ tools/theme/src/colors/index.ts | 7 +- tools/theme/src/theme.ts | 68 +++++----- .../docs/style/design-tokens/base-tokens.json | 8 +- .../style/design-tokens/design-tokens.json | 127 ++++++++++-------- 58 files changed, 389 insertions(+), 234 deletions(-) create mode 100644 stories/components/d3-chart/tests/examples/d3-chart/reference-background-chart-grid-bg.tsx create mode 100644 stories/patterns/core/advanced/components/Palette/index.tsx diff --git a/semcore/accordion/src/style/accordion.shadow.css b/semcore/accordion/src/style/accordion.shadow.css index 15576cca46..5b6d45f468 100644 --- a/semcore/accordion/src/style/accordion.shadow.css +++ b/semcore/accordion/src/style/accordion.shadow.css @@ -6,7 +6,7 @@ SItemToggle { } SItemToggle[use][use] { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); font-weight: var(--intergalactic-regular, 400); } SItemToggle[use][use='primary'] { @@ -27,7 +27,7 @@ SItemChevron { margin-right: var(--intergalactic-spacing-2x, 8px); transform: rotate(0deg); transition: transform calc(var(--intergalactic-duration-accordion, 200) * 1ms) ease-out; - fill: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526)); + fill: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.003 153.3)); &[selected] { transform: rotate(90deg); diff --git a/semcore/base-components/src/components/popper/style/popper.shadow.css b/semcore/base-components/src/components/popper/style/popper.shadow.css index 30ee4ee8b4..193e7899b3 100644 --- a/semcore/base-components/src/components/popper/style/popper.shadow.css +++ b/semcore/base-components/src/components/popper/style/popper.shadow.css @@ -1,5 +1,5 @@ SPopper { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } SPopper:focus-visible { diff --git a/semcore/base-trigger/src/style/base-trigger.shadow.css b/semcore/base-trigger/src/style/base-trigger.shadow.css index ee906ed751..ca51b377d4 100644 --- a/semcore/base-trigger/src/style/base-trigger.shadow.css +++ b/semcore/base-trigger/src/style/base-trigger.shadow.css @@ -22,7 +22,7 @@ SBaseTrigger { font-weight: var(--intergalactic-regular, 400); border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); border-radius: var(--intergalactic-control-rounded, 6px); padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px); diff --git a/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css b/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css index fe86f45b0c..3b295c1a6d 100644 --- a/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css +++ b/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css @@ -10,7 +10,7 @@ SBreadcrumbs { list-style: none; SSeparator { - color: var(--intergalactic-icon-secondary-neutral, oklch(0.118 0.023 170.1 / 0.262)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.003 169.6)); display: flex; &:last-child { @@ -37,12 +37,12 @@ SBreadcrumbs { &:hover { text-decoration: underline; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } } SBreadcrumbsItem[active] { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); cursor: default; &:hover { text-decoration: none; diff --git a/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css b/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css index 431a4beca2..4e2483b5a1 100644 --- a/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css +++ b/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css @@ -9,7 +9,7 @@ SInputField>ol { position: relative; background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); word-wrap: break-word; word-break: break-word; font-family: inherit; diff --git a/semcore/button/src/component/Button/button.shadow.css b/semcore/button/src/component/Button/button.shadow.css index f02975043b..20acabda3b 100644 --- a/semcore/button/src/component/Button/button.shadow.css +++ b/semcore/button/src/component/Button/button.shadow.css @@ -103,17 +103,17 @@ SButton[theme='primary-success'] { } SButton[theme='primary-brand'] { - color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); background-color: var(--intergalactic-control-primary-brand, oklch(0.74 0.17 303)); &:hover { - color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.72 0.181 302.3)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); background-color: var(--intergalactic-control-primary-brand-active, oklch(0.7 0.191 301.5)); } } @@ -151,36 +151,36 @@ SButton[theme='primary-danger'] { } SButton[theme='primary-invert'] { - color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); background-color: var(--intergalactic-control-primary-invert, oklch(1 0 0)); &:hover { - color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); background-color: var(--intergalactic-control-primary-invert-hover, oklch(0.96 0.001 180)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); background-color: var(--intergalactic-control-primary-invert-active, oklch(0.94 0.002 180)); } } SButton[theme='secondary-muted'] { - color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899)); - background-color: var(--intergalactic-control-secondary-neutral, oklch(0.166 0.031 175.8 / 0.097)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-secondary-neutral, oklch(0.176 0.033 175.6 / 0.056)); &:hover { background-color: var(--intergalactic-control-secondary-neutral-hover, - oklch(0.151 0.028 176.1 / 0.123)); - color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899)); + oklch(0.176 0.033 175.7 / 0.084)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); } &:active, &[active] { background-color: var(--intergalactic-control-secondary-neutral-active, - oklch(0.145 0.027 176.1 / 0.135)); - color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899)); + oklch(0.157 0.029 176 / 0.11)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); } } @@ -223,14 +223,14 @@ SButton[theme='tertiary-muted'] { &:hover { background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.177 0.033 175.6 / 0.042)); - color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); } &:active, &[active] { background-color: var(--intergalactic-control-tertiary-neutral-active, oklch(0.176 0.033 175.6 / 0.056)); - color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); } } diff --git a/semcore/button/src/component/ButtonLink/buttonLink.shadow.css b/semcore/button/src/component/ButtonLink/buttonLink.shadow.css index bc09952fb2..7a85b3a04b 100644 --- a/semcore/button/src/component/ButtonLink/buttonLink.shadow.css +++ b/semcore/button/src/component/ButtonLink/buttonLink.shadow.css @@ -5,7 +5,7 @@ SButtonLink { SButtonLink[use='primary'] { &:not([color]) { - color: var(--intergalactic-text-link-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-link-primary, oklch(0.23 0.01 140)); } SText { @@ -16,7 +16,7 @@ SButtonLink[use='primary'] { &:active, &:hover { &:not([color]) { - color: var(--intergalactic-text-link-primary-hover-active, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.01 140)); } SText { @@ -31,7 +31,7 @@ SButtonLink[use='secondary']:not([color]) { &[active], &:active, &:hover { - color: var(--intergalactic-text-link-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-link-primary, oklch(0.23 0.01 140)); } } diff --git a/semcore/card/src/style/card.shadow.css b/semcore/card/src/style/card.shadow.css index 3651a93096..c32aba443f 100644 --- a/semcore/card/src/style/card.shadow.css +++ b/semcore/card/src/style/card.shadow.css @@ -31,7 +31,7 @@ SCard { } SBody { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); padding: var(--intergalactic-spacing-content-padding-xlarge, 20px); } } diff --git a/semcore/carousel/src/style/carousel.shadow.css b/semcore/carousel/src/style/carousel.shadow.css index 230372536b..4619a834a5 100644 --- a/semcore/carousel/src/style/carousel.shadow.css +++ b/semcore/carousel/src/style/carousel.shadow.css @@ -138,7 +138,7 @@ SNext { align-items: center; justify-content: center; cursor: pointer; - color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.003 153.3)); SPrevButton span:has(> svg:only-child), SNextButton span:has(> svg:only-child) { diff --git a/semcore/checkbox/src/style/checkbox.shadow.css b/semcore/checkbox/src/style/checkbox.shadow.css index be89f82cb9..0a472c002f 100644 --- a/semcore/checkbox/src/style/checkbox.shadow.css +++ b/semcore/checkbox/src/style/checkbox.shadow.css @@ -10,7 +10,7 @@ SLabel { SText { margin-left: var(--intergalactic-spacing-content-gap-medium, 6px); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); &[disabled] { opacity: var(--intergalactic-disabled-opacity, 0.4); diff --git a/semcore/color-picker/src/style/color-picker.shadow.css b/semcore/color-picker/src/style/color-picker.shadow.css index f981d0e96e..58c6bcb540 100644 --- a/semcore/color-picker/src/style/color-picker.shadow.css +++ b/semcore/color-picker/src/style/color-picker.shadow.css @@ -140,7 +140,7 @@ STriggerCircle:not([data-value]) { } SChevronDownM { - fill: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)) + fill: var(--intergalactic-text-primary, oklch(0.23 0.01 140)) } SCloseIcon { diff --git a/semcore/d3-chart/src/style/axis.shadow.css b/semcore/d3-chart/src/style/axis.shadow.css index 44ba9bc553..43efa6bb6b 100644 --- a/semcore/d3-chart/src/style/axis.shadow.css +++ b/semcore/d3-chart/src/style/axis.shadow.css @@ -11,7 +11,7 @@ STick { fill: var(--intergalactic-chart-grid-text-label, oklch(0.097 0.023 156.5 / 0.468)); } STick[primaryText] { - fill: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + fill: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } STick[hide] { diff --git a/semcore/d3-chart/src/style/bar.shadow.css b/semcore/d3-chart/src/style/bar.shadow.css index c0606e07d0..48e70ce077 100644 --- a/semcore/d3-chart/src/style/bar.shadow.css +++ b/semcore/d3-chart/src/style/bar.shadow.css @@ -42,7 +42,7 @@ SBarAnnotation { justify-content: space-between; } SBarLabel { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); margin-right: auto; font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); @@ -57,7 +57,7 @@ SBarValue { min-width: 52px; display: flex; justify-content: flex-end; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); text-align: right; diff --git a/semcore/d3-chart/src/style/plotA11yView.shadow.css b/semcore/d3-chart/src/style/plotA11yView.shadow.css index b47a600c42..1e1573106b 100644 --- a/semcore/d3-chart/src/style/plotA11yView.shadow.css +++ b/semcore/d3-chart/src/style/plotA11yView.shadow.css @@ -2,7 +2,7 @@ SPlotA11yView { position: relative; display: block; background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); border: 3px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); font-size: var(--intergalactic-fs-50, 10px); z-index: var(--intergalactic-z-index-overlay, 500); diff --git a/semcore/data-table/src/components/Body/style.shadow.css b/semcore/data-table/src/components/Body/style.shadow.css index 4fa45781ff..2eedf56c7b 100644 --- a/semcore/data-table/src/components/Body/style.shadow.css +++ b/semcore/data-table/src/components/Body/style.shadow.css @@ -152,7 +152,7 @@ SCell { height: 100%; font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); box-sizing: border-box; border-bottom: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); white-space: pre-wrap; diff --git a/semcore/data-table/src/components/Head/style.shadow.css b/semcore/data-table/src/components/Head/style.shadow.css index 145653f236..c78cd959e0 100644 --- a/semcore/data-table/src/components/Head/style.shadow.css +++ b/semcore/data-table/src/components/Head/style.shadow.css @@ -49,7 +49,7 @@ SGroup, SColumn { display: flex; align-items: flex-start; font-size: var(--intergalactic-fs-100, 12px); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); box-sizing: border-box; height: 100%; position: relative; @@ -210,7 +210,7 @@ SSortWrapper:before { SSortButton { display: none; - fill: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.1 0.023 159.1 / 0.433)); + fill: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.003 159.3)); position: absolute; right: 0; margin-left: var(--intergalactic-spacing-1x, 4px); diff --git a/semcore/date-picker/src/style/calendar.shadow.css b/semcore/date-picker/src/style/calendar.shadow.css index be5a8f9c30..b0bc09400a 100644 --- a/semcore/date-picker/src/style/calendar.shadow.css +++ b/semcore/date-picker/src/style/calendar.shadow.css @@ -48,7 +48,7 @@ SCalendarUnit { text-align: center; vertical-align: middle; border: 1px solid transparent; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); box-shadow: none; overflow: visible; user-select: none; @@ -71,7 +71,7 @@ SCalendarUnit { margin: 0; &:hover { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); background-color: var(--intergalactic-date-picker-cell-hover, oklch(0.97 0.001 180)); } } @@ -102,7 +102,7 @@ SCalendarUnit[selected] { background-color: var(--intergalactic-date-picker-cell-range, oklch(0.96 0.001 180)); border-radius: 0; transition: border-radius 0s 0s; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); &:hover { background-color: var(--intergalactic-date-picker-cell-range-hover, oklch(0.9 0.002 177)); @@ -113,7 +113,7 @@ SCalendarUnit[highlighted] { background-color: var(--intergalactic-date-picker-cell-range, oklch(0.96 0.001 180)); border-radius: 0; transition: border-radius 0s 0s; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); &:hover { background-color: var(--intergalactic-date-picker-cell-range-hover, oklch(0.9 0.002 177)); diff --git a/semcore/date-picker/src/style/date-picker.shadow.css b/semcore/date-picker/src/style/date-picker.shadow.css index b6fa2d35d9..47ed0face5 100644 --- a/semcore/date-picker/src/style/date-picker.shadow.css +++ b/semcore/date-picker/src/style/date-picker.shadow.css @@ -20,7 +20,7 @@ SHeader { STitle { font-size: var(--intergalactic-fs-200, 14px); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); height: 32px; width: 100%; display: flex; @@ -45,7 +45,7 @@ SButton SInner { } SInputMask { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); line-height: normal; padding-right: var(--intergalactic-spacing-2x, 8px); transition: width calc(var(--intergalactic-duration-medium, 300) * 1ms) ease, min-width calc(var(--intergalactic-duration-medium, 300) * 1ms) ease; @@ -141,7 +141,7 @@ SDateRange SInputMask:focus-within SMask { SRangeSep[fulfilled], SDateRange:focus-within SRangeSep { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } SRangeComparatorHeader { diff --git a/semcore/dot/src/style/dot.shadow.css b/semcore/dot/src/style/dot.shadow.css index a3aae4a090..e323717801 100644 --- a/semcore/dot/src/style/dot.shadow.css +++ b/semcore/dot/src/style/dot.shadow.css @@ -5,7 +5,7 @@ SDot { font-size: var(--intergalactic-fs-50, 10px); line-height: normal; background-color: var(--intergalactic-dot-bg, oklch(0.74 0.17 303)); - color: var(--intergalactic-dot-text, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-dot-text, oklch(0.23 0.01 140)); box-sizing: border-box; z-index: 1; border-radius: 100%; diff --git a/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css b/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css index 0df8563eed..25f267adc1 100644 --- a/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css +++ b/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css @@ -19,7 +19,7 @@ SDraggable[draggable] { display: none; pointer-events: none; background-image: radial-gradient(circle at center, - var(--intergalactic-icon-secondary-neutral, oklch(0.118 0.023 170.1 / 0.262)) 1px, + var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.003 169.6)) 1px, transparent 0); background-size: 6px 6px; background-position: 2px 2px; diff --git a/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css b/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css index 1bb3ecfc0e..35e9a6ed51 100644 --- a/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css +++ b/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css @@ -6,7 +6,7 @@ SDropdownMenuList { min-width: 32px; box-sizing: content-box; z-index: 0; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); SBar { z-index: 3; diff --git a/semcore/dropdown/src/style/dropdown.shadow.css b/semcore/dropdown/src/style/dropdown.shadow.css index 08fde0121b..41fae237d8 100644 --- a/semcore/dropdown/src/style/dropdown.shadow.css +++ b/semcore/dropdown/src/style/dropdown.shadow.css @@ -6,7 +6,7 @@ SDropdownPopper { border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); white-space: normal; box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07)); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); SDropdownItem { @@ -21,7 +21,7 @@ SDropdownPopper { SDropdownItem:not(button) { width: 100%; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); &:hover { background-color: var(--intergalactic-dropdown-menu-item-hover, oklch(0.177 0.033 175.6 / 0.042)); @@ -68,11 +68,11 @@ SDropdownPopper { } SDropdownItem[selected]:not(SDropdownItem[isMenuItemCheckbox]) { - background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.525 0.265 263 / 0.077)); + background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.176 0.033 175.6 / 0.056)); box-shadow: 2px 0px 0px 0px var(--intergalactic-dropdown-menu-item-selected-box-shadow, oklch(0.23 0.01 140)) inset; &:hover { - background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.52 0.268 263.2 / 0.191)); + background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.176 0.033 175.7 / 0.084)); } } @@ -177,11 +177,11 @@ SDropdownPopper { SDropdownItemContainer[sticky] { position: sticky; top: 0; - background-color: var(--intergalactic-dropdown-menu-item, oklch(1 0 0)); + background-color: var(--intergalactic-dropdown-menu-item, transparent); z-index: 2; &:hover { - background-color: var(--intergalactic-dropdown-menu-item, oklch(1 0 0)); + background-color: var(--intergalactic-dropdown-menu-item, transparent); } } } diff --git a/semcore/errors/src/style/errors.shadow.css b/semcore/errors/src/style/errors.shadow.css index 65ce5e8705..c7b117e956 100644 --- a/semcore/errors/src/style/errors.shadow.css +++ b/semcore/errors/src/style/errors.shadow.css @@ -49,7 +49,7 @@ SError { STitle[data-errors-title] { font-size: var(--intergalactic-fs-700, 36px); line-height: var(--intergalactic-lh-700, 1.1112); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); font-weight: var(--intergalactic-semi-bold, 600); margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0; } @@ -58,7 +58,7 @@ SError { display: block; font-size: var(--intergalactic-fs-300, 16px); line-height: var(--intergalactic-lh-300, 1.5); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0; } } diff --git a/semcore/feature-highlight/src/components/notice/notice.shadow.css b/semcore/feature-highlight/src/components/notice/notice.shadow.css index e07271d38b..75b77df0b4 100644 --- a/semcore/feature-highlight/src/components/notice/notice.shadow.css +++ b/semcore/feature-highlight/src/components/notice/notice.shadow.css @@ -21,10 +21,10 @@ SHighlightedNotice[beforeVisibility] { } & SCloseIcon { - color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.003 153.3)); &:hover { - color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.088 0.026 147.7 / 0.583)); + color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.53 0.004 149.6)); } } } diff --git a/semcore/feature-popover/src/style/feature-popover.shadow.css b/semcore/feature-popover/src/style/feature-popover.shadow.css index dec6a4200f..2b0f56c230 100644 --- a/semcore/feature-popover/src/style/feature-popover.shadow.css +++ b/semcore/feature-popover/src/style/feature-popover.shadow.css @@ -10,7 +10,7 @@ SFeaturePopover { &[theme='accent'] { background-color: var(--intergalactic-feature-popover-bg-accent, oklch(0.92 0.052 303.1)); - color: var(--intergalactic-feature-popover-text, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-feature-popover-text, oklch(0.23 0.01 140)); } &[theme='neutral'] { background-color: var(--intergalactic-feature-popover-bg-neutral, oklch(0.23 0.01 140)); diff --git a/semcore/feedback-form/src/component/submit-button/SubmitButton.tsx b/semcore/feedback-form/src/component/submit-button/SubmitButton.tsx index f90f7b84a1..89ddd6fb3a 100644 --- a/semcore/feedback-form/src/component/submit-button/SubmitButton.tsx +++ b/semcore/feedback-form/src/component/submit-button/SubmitButton.tsx @@ -8,5 +8,5 @@ import type { NSSubmitButton } from './SubmitButton.type'; export function SubmitButton(props: Intergalactic.InternalTypings.InferComponentProps) { const { styles } = props; const SSubmit = Root; - return sstyled(styles)(); + return sstyled(styles)(); } diff --git a/semcore/feedback-form/src/style/checkbox-button.shadow.css b/semcore/feedback-form/src/style/checkbox-button.shadow.css index 85e31f1d07..17e6ac88bd 100644 --- a/semcore/feedback-form/src/style/checkbox-button.shadow.css +++ b/semcore/feedback-form/src/style/checkbox-button.shadow.css @@ -1,22 +1,26 @@ SCheckboxButton { - margin-top: var(--intergalactic-spacing-2x, 8px); - /* add background-color: var(--intergalactic-control-checkbox-button-bg-normal); */ - border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-checkbox-button-border */ - border-radius: var(--intergalactic-rounded-medium, 6px); + margin-top: var(--intergalactic-spacing-content-gap-large, 8px); + background-color: var(--intergalactic-control-checkbox-button-bg-normal, transparent); + border: 1px solid var(--intergalactic-control-checkbox-button-border, oklch(0.137 0.026 175.7 / 0.161)); + border-radius: var(--intergalactic-control-rounded, 6px); label { width: 100%; - padding: var(--intergalactic-spacing-3x, 12px); + padding: var(--intergalactic-spacing-content-padding-medium, 12px); box-sizing: border-box; } } SCheckboxButton:hover, SCheckboxButton[checked] { cursor: pointer; - border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-control-checkbox-button-border-selected */ - background-color: rgba(0, 143, 248, 0.10); /* TODO: --intergalactic-control-checkbox-button-bg-hover on :hover:not([checked]), --intergalactic-control-checkbox-button-bg-selected on [checked] */ + background-color: var(--intergalactic-control-checkbox-button-bg-hover, oklch(0.177 0.033 175.6 / 0.042)); +} + +SCheckboxButton[checked] { + border-color: var(--intergalactic-control-checkbox-button-border-selected, oklch(0.137 0.026 175.7 / 0.161)); + } SCheckboxButton[checked]:hover { - background-color: rgba(0, 143, 248, 0.20); /* TODO: --intergalactic-control-checkbox-button-bg-selected-hover */ + background-color: var(--intergalactic-control-checkbox-button-bg-selected-hover, oklch(0.176 0.033 175.6 / 0.056)); } diff --git a/semcore/feedback-form/src/style/slider-rating.shadow.css b/semcore/feedback-form/src/style/slider-rating.shadow.css index 530efc85a7..7bf4720a7d 100644 --- a/semcore/feedback-form/src/style/slider-rating.shadow.css +++ b/semcore/feedback-form/src/style/slider-rating.shadow.css @@ -19,10 +19,10 @@ SStar[filled]:active { } SStar path { - fill: var(--intergalactic-slider-rating-normal, oklch(0.8 0.003 169.6)); -} /* TODO: --intergalactic-control-slider-rating-icon */ + fill: var(--intergalactic-control-slider-rating-icon, oklch(0.092 0.024 152.2 / 0.526)); +} SStar[filled] path { stroke-width: 0; - fill: var(--intergalactic-slider-rating-hover-active, oklch(0.66 0.212 300.1)); /* TODO: --intergalactic-control-slider-rating-icon-hover-active */ + fill: var(--intergalactic-control-slider-rating-icon-hover-active, oklch(0.22 0.01 140)); } diff --git a/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css b/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css index 1c04137af1..b2c04bcda1 100644 --- a/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css +++ b/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css @@ -38,7 +38,7 @@ SFullscreenOverlay { font-size: var(--intergalactic-fs-500, 24px); line-height: var(--intergalactic-lh-500, 1.1667); font-weight: var(--intergalactic-semi-bold, 600); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } SHeader { diff --git a/semcore/inline-input/src/style/inline-input.shadow.css b/semcore/inline-input/src/style/inline-input.shadow.css index 9b0ad6ac4d..c43321a6f2 100644 --- a/semcore/inline-input/src/style/inline-input.shadow.css +++ b/semcore/inline-input/src/style/inline-input.shadow.css @@ -11,19 +11,19 @@ SInlineInput { box-sizing: border-box; SConfirmIcon:not([color]) { - color: var(--intergalactic-icon-secondary-success, oklch(0.787 0.16 167.8 / 0.898)); + color: var(--intergalactic-icon-secondary-success, oklch(0.8 0.155 170)); } SConfirmIcon:not([color]):hover { - color: var(--intergalactic-icon-secondary-success-hover-active, oklch(0.673 0.139 166.3)); + color: var(--intergalactic-icon-secondary-success-hover-active, oklch(0.66 0.163 170)); } SCancelIcon:not([color]) { - color: var(--intergalactic-icon-secondary-neutral, oklch(0.118 0.023 170.1 / 0.262)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.003 169.6)); } SCancelIcon:not([color]):hover { - color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.1 0.023 159.1 / 0.433)); + color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.003 159.3)); } SValue { @@ -36,7 +36,7 @@ SInlineInput { padding: var(--intergalactic-spacing-1x, 4px); border: none; box-sizing: border-box; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); font-size: inherit; line-height: 1.2; text-overflow: ellipsis; @@ -46,7 +46,7 @@ SInlineInput { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; - text-decoration-color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + text-decoration-color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); text-underline-offset: 17%; &:focus, &:focus-visible { @@ -95,7 +95,7 @@ SUnderline { } SInlineInput:hover:not(:focus-within):not([disabled]) SUnderline { - background-color: var(--intergalactic-control-secondary-neutral, oklch(0.166 0.031 175.8 / 0.097)); + background-color: var(--intergalactic-control-secondary-neutral, oklch(0.176 0.033 175.6 / 0.056)); } SInlineInput:hover:not(:focus-within):not([disabled]) SAddon, @@ -109,7 +109,7 @@ SAddon { align-items: center; flex: 0 0 auto; height: 100%; - color: var(--intergalactic-icon-secondary-neutral, oklch(0.118 0.023 170.1 / 0.262)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.003 169.6)); padding: 0 var(--intergalactic-spacing-content-gap-small, 4px); } diff --git a/semcore/input-mask/src/style/input-mask.shadow.css b/semcore/input-mask/src/style/input-mask.shadow.css index 4852ab920f..7b3e16f1a1 100644 --- a/semcore/input-mask/src/style/input-mask.shadow.css +++ b/semcore/input-mask/src/style/input-mask.shadow.css @@ -11,7 +11,7 @@ SMask { letter-spacing: 0.1em; text-overflow: inherit; white-space: nowrap; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } SMask[data-neighbor-location='left'], diff --git a/semcore/input-number/src/style/input-number.shadow.css b/semcore/input-number/src/style/input-number.shadow.css index 3e6314818c..4352460477 100644 --- a/semcore/input-number/src/style/input-number.shadow.css +++ b/semcore/input-number/src/style/input-number.shadow.css @@ -18,7 +18,7 @@ SUp, SDown { padding: 0; width: 16px; - color: var(--intergalactic-icon-secondary-neutral, oklch(0.118 0.023 170.1 / 0.262)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.003 169.6)); box-sizing: border-box; display: inline-flex; justify-content: center; @@ -31,7 +31,7 @@ SDown { } &:hover { - color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.1 0.023 159.1 / 0.433)); + color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.003 159.3)); } } diff --git a/semcore/input/src/style/input.shadow.css b/semcore/input/src/style/input.shadow.css index a80528b7ff..38f34c80dc 100644 --- a/semcore/input/src/style/input.shadow.css +++ b/semcore/input/src/style/input.shadow.css @@ -37,7 +37,7 @@ SValue { padding: 0; border: none; box-sizing: border-box; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); font-size: inherit; text-overflow: ellipsis; font-family: inherit; @@ -85,14 +85,14 @@ SAddon { flex: 0 0 auto; padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px); height: 100%; - color: var(--intergalactic-icon-secondary-neutral, oklch(0.118 0.023 170.1 / 0.262)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.003 169.6)); } SAddon[interactive] { cursor: pointer; &:hover { - color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.1 0.023 159.1 / 0.433)); + color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.003 159.3)); } } diff --git a/semcore/link/src/style/link.shadow.css b/semcore/link/src/style/link.shadow.css index 24b3669296..5bbca32e0a 100644 --- a/semcore/link/src/style/link.shadow.css +++ b/semcore/link/src/style/link.shadow.css @@ -20,7 +20,7 @@ SLink { } &[theme='default'] { - color: var(--intergalactic-text-link-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-link-primary, oklch(0.23 0.01 140)); & SText { text-decoration-color: var(--intergalactic-text-link-primary-underline, oklch(0.86 0.002 174.1)); @@ -29,7 +29,7 @@ SLink { &[active], &:hover, &:active { - color: var(--intergalactic-text-link-primary-hover-active, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.01 140)); & SText { text-decoration-color: currentColor; diff --git a/semcore/modal/src/style/modal.shadow.css b/semcore/modal/src/style/modal.shadow.css index 229be86af6..3ad8867806 100644 --- a/semcore/modal/src/style/modal.shadow.css +++ b/semcore/modal/src/style/modal.shadow.css @@ -6,14 +6,14 @@ SWindow { margin: auto; padding: var(--intergalactic-spacing-content-padding-xxlarge, 40px); box-shadow: var(--intergalactic-box-shadow-modal, 0px 1px 5px 0px oklch(0.176 0.033 175.7 / 0.07)); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); &:focus { outline: none; } STitle { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); font-size: var(--intergalactic-fs-500, 24px); line-height: var(--intergalactic-lh-500, 1.1667); font-weight: var(--intergalactic-semi-bold, 600); diff --git a/semcore/notice/src/style/notice.shadow.css b/semcore/notice/src/style/notice.shadow.css index f7b66143ff..7bd5fe1e54 100644 --- a/semcore/notice/src/style/notice.shadow.css +++ b/semcore/notice/src/style/notice.shadow.css @@ -7,7 +7,7 @@ SNotice { border-style: solid; border-width: 1px; border-radius: var(--intergalactic-surface-rounded, 8px); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); gap: var(--intergalactic-spacing-content-gap-large, 8px); } @@ -16,10 +16,10 @@ SNotice[theme='info'] { border-color: var(--intergalactic-border-info, oklch(0.524 0.265 263 / 0.096)); & SCloseIcon { - color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.003 153.3)); &:hover { - color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.088 0.026 147.7 / 0.583)); + color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.53 0.004 149.6)); } } } @@ -29,10 +29,10 @@ SNotice[theme='danger'] { border-color: var(--intergalactic-border-critical, oklch(0.63 0.255 24.3 / 0.104)); & SCloseIcon { - color: var(--intergalactic-icon-primary-critical, oklch(0.552 0.226 28.7 / 0.848)); + color: var(--intergalactic-icon-primary-critical, oklch(0.58 0.215 26)); &:hover { - color: var(--intergalactic-icon-primary-critical-hover-active, oklch(0.511 0.209 28.7 / 0.91)); + color: var(--intergalactic-icon-primary-critical-hover-active, oklch(0.53 0.206 27.3)); } } } @@ -42,10 +42,10 @@ SNotice[theme='warning'] { border-color: var(--intergalactic-border-warning, oklch(0.806 0.17 74.5 / 0.241)); & SCloseIcon { - color: var(--intergalactic-icon-primary-warning, oklch(0.728 0.188 51.8)); + color: var(--intergalactic-icon-primary-warning, oklch(0.73 0.191 52.4)); &:hover { - color: var(--intergalactic-icon-primary-warning-hover-active, oklch(0.531 0.169 39.3)); + color: var(--intergalactic-icon-primary-warning-hover-active, oklch(0.53 0.174 43.6)); } } } @@ -55,10 +55,10 @@ SNotice[theme='success'] { border-color: var(--intergalactic-border-success, oklch(0.874 0.177 168.2 / 0.25)); & SCloseIcon { - color: var(--intergalactic-icon-primary-success, oklch(0.595 0.124 165.4)); + color: var(--intergalactic-icon-primary-success, oklch(0.58 0.151 170)); &:hover { - color: var(--intergalactic-icon-primary-success-hover-active, oklch(0.545 0.115 164.9)); + color: var(--intergalactic-icon-primary-success-hover-active, oklch(0.53 0.142 170)); } } } @@ -68,10 +68,10 @@ SNotice[theme='muted'] { border-color: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); & SCloseIcon { - color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.003 153.3)); &:hover { - color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.088 0.026 147.7 / 0.583)); + color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.53 0.004 149.6)); } } } @@ -111,23 +111,23 @@ SIllustration { } SLabel[theme='info'], SIcon[theme='info'] { - color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.003 153.3)); } SLabel[theme='danger'], SIcon[theme='danger'] { - color: var(--intergalactic-icon-primary-critical, oklch(0.552 0.226 28.7 / 0.848)); + color: var(--intergalactic-icon-primary-critical, oklch(0.58 0.215 26)); } SLabel[theme='warning'], SIcon[theme='warning'] { - color: var(--intergalactic-icon-primary-warning, oklch(0.728 0.188 51.8)); + color: var(--intergalactic-icon-primary-warning, oklch(0.73 0.191 52.4)); } SLabel[theme='success'], SIcon[theme='success'] { - color: var(--intergalactic-icon-primary-success, oklch(0.595 0.124 165.4)); + color: var(--intergalactic-icon-primary-success, oklch(0.58 0.151 170)); } SLabel[theme='muted'], SIcon[theme='muted'] { - color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.003 153.3)); } SCloseIcon { diff --git a/semcore/pagination/src/style/pagination.shadow.css b/semcore/pagination/src/style/pagination.shadow.css index c487f39407..1b003d0d09 100644 --- a/semcore/pagination/src/style/pagination.shadow.css +++ b/semcore/pagination/src/style/pagination.shadow.css @@ -22,7 +22,7 @@ SPrevPage { } SLabel { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } SLabel:not(:first-child) { @@ -40,13 +40,13 @@ STotalPages { STotalPagesLabel { margin-left: var(--intergalactic-spacing-content-gap-large, 8px); margin-right: var(--intergalactic-spacing-content-gap-small, 4px); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } STotalLastPages { font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); &[size='l'] { font-size: var(--intergalactic-fs-300, 16px); diff --git a/semcore/pills/src/style/pills.shadow.css b/semcore/pills/src/style/pills.shadow.css index e2ae3e7e80..311286a7c7 100644 --- a/semcore/pills/src/style/pills.shadow.css +++ b/semcore/pills/src/style/pills.shadow.css @@ -4,7 +4,7 @@ SPills { padding: var(--intergalactic-spacing-content-padding-xxsmall, 2px); min-height: var(--intergalactic-form-control-m, 32px); border-radius: var(--intergalactic-pills-rounded, 6px); - background: var(--intergalactic-control-pills-bg-normal, oklch(0.166 0.031 175.8 / 0.097)); + background: var(--intergalactic-control-pills-bg-normal, oklch(0.176 0.033 175.6 / 0.056)); box-sizing: border-box; &[size='l'] { @@ -71,7 +71,7 @@ SPill { width: 100%; height: 100%; border-radius: var(--intergalactic-rounded-small, 4px); - background: var(--intergalactic-control-pills-bg-hover, oklch(0.151 0.028 176.1 / 0.123)); + background: var(--intergalactic-control-pills-bg-hover, oklch(0.176 0.033 175.7 / 0.084)); } } } @@ -146,7 +146,7 @@ SSegmentIndicator { } SText { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); min-width: 0.8em; } diff --git a/semcore/product-head/src/style/title.shadow.css b/semcore/product-head/src/style/title.shadow.css index 8b3df5c40a..facf6b8f95 100644 --- a/semcore/product-head/src/style/title.shadow.css +++ b/semcore/product-head/src/style/title.shadow.css @@ -8,7 +8,7 @@ STitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); margin: 0; } diff --git a/semcore/radio/src/style/radio.shadow.css b/semcore/radio/src/style/radio.shadow.css index d2fa5fe989..100543ffde 100644 --- a/semcore/radio/src/style/radio.shadow.css +++ b/semcore/radio/src/style/radio.shadow.css @@ -5,7 +5,7 @@ SRadio { SText { margin-left: var(--intergalactic-spacing-content-gap-medium, 6px); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } &[size='l'] { diff --git a/semcore/select/src/style/select.shadow.css b/semcore/select/src/style/select.shadow.css index 60ba9b7dfb..9a76fa6398 100644 --- a/semcore/select/src/style/select.shadow.css +++ b/semcore/select/src/style/select.shadow.css @@ -68,10 +68,10 @@ SOptionCheckbox[theme][indeterminate]:before { } SOptionCheckbox[selected] { - background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.525 0.265 263 / 0.077)); + background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.176 0.033 175.6 / 0.056)); &:hover { - background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.52 0.268 263.2 / 0.191)); + background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.176 0.033 175.7 / 0.084)); } } diff --git a/semcore/side-panel/src/style/side-panel.shadow.css b/semcore/side-panel/src/style/side-panel.shadow.css index 72365331d1..50edbf1449 100644 --- a/semcore/side-panel/src/style/side-panel.shadow.css +++ b/semcore/side-panel/src/style/side-panel.shadow.css @@ -9,7 +9,7 @@ SOverlay { overflow: hidden; background: var(--intergalactic-overlay-primary, oklch(0.109 0.023 165.5 / 0.337)); -webkit-overflow-scrolling: touch; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } SPanel { diff --git a/semcore/spin/src/style/spin.shadow.css b/semcore/spin/src/style/spin.shadow.css index ad5226d968..1cd9484e55 100644 --- a/semcore/spin/src/style/spin.shadow.css +++ b/semcore/spin/src/style/spin.shadow.css @@ -44,11 +44,11 @@ SSpin[theme] SCircle { } SSpin[theme='default'] SCircle, SSpin[theme='dark'] SCircle { - stroke: var(--intergalactic-spin-bg, oklch(0.118 0.023 170.1 / 0.262)); + stroke: var(--intergalactic-spin-bg, oklch(0.8 0.003 169.6)); } SSpin[theme='invert'] { - stroke: var(--intergalactic-spin-bg-invert, oklch(0.998 0.003 173.3 / 0.808)); + stroke: var(--intergalactic-spin-bg-invert, oklch(0.85 0.002 173.3)); } SSpin[centered] { diff --git a/semcore/switch/src/style/switch.shadow.css b/semcore/switch/src/style/switch.shadow.css index d8c467cda4..dd6fec2bb0 100644 --- a/semcore/switch/src/style/switch.shadow.css +++ b/semcore/switch/src/style/switch.shadow.css @@ -76,9 +76,9 @@ SSwitch[disabled] { } SToggle { - background: var(--intergalactic-control-switch-bg, oklch(0.166 0.031 175.8 / 0.097)); + background: var(--intergalactic-control-switch-bg, oklch(0.176 0.033 175.6 / 0.056)); position: relative; - color: var(--intergalactic-icon-secondary-neutral, oklch(0.118 0.023 170.1 / 0.262)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.003 169.6)); cursor: pointer; display: flex; align-items: center; @@ -167,7 +167,7 @@ SAddon { } SAddon[neighborLocation='right'] { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } SAddon[neighborLocation='left'] { @@ -175,7 +175,7 @@ SAddon[neighborLocation='left'] { } SAddon[neighborLocation='left']:nth-child(2) { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } SSwitch[checked] { @@ -184,11 +184,11 @@ SSwitch[checked] { } & SAddon[neighborLocation='right']:nth-last-child(2) { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } & SAddon[neighborLocation='left'] { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } } diff --git a/semcore/tab-line/src/style/tab-line.shadow.css b/semcore/tab-line/src/style/tab-line.shadow.css index cc6913e642..b3ca38e3b8 100644 --- a/semcore/tab-line/src/style/tab-line.shadow.css +++ b/semcore/tab-line/src/style/tab-line.shadow.css @@ -37,7 +37,7 @@ STabLineItem { cursor: pointer; border: none; background: transparent; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); gap: var(--intergalactic-spacing-content-gap-medium, 6px); font-weight: var(--intergalactic-medium, 500); diff --git a/semcore/tab-panel/src/style/tab-panel.shadow.css b/semcore/tab-panel/src/style/tab-panel.shadow.css index 9b3af9b641..184b62587e 100644 --- a/semcore/tab-panel/src/style/tab-panel.shadow.css +++ b/semcore/tab-panel/src/style/tab-panel.shadow.css @@ -52,7 +52,7 @@ STabPanelItem { } &:hover { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } &::after { @@ -77,7 +77,7 @@ STabPanelItem[disabled] { } STabPanelItem[selected] { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); flex-shrink: 0; background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); diff --git a/semcore/textarea/src/style/textarea.shadow.css b/semcore/textarea/src/style/textarea.shadow.css index 5c54212207..d83c85f7ba 100644 --- a/semcore/textarea/src/style/textarea.shadow.css +++ b/semcore/textarea/src/style/textarea.shadow.css @@ -1,6 +1,6 @@ STextarea { height: auto; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); border-radius: var(--intergalactic-control-rounded, 6px); width: 100%; diff --git a/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css b/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css index 1e333dadf4..3f57955d9b 100644 --- a/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css +++ b/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css @@ -30,7 +30,7 @@ STimePickerWrapper { } STimePickerSeparator { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } STimePickerSeparator[disabled] { diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css index fdb0beb37f..18eb37448e 100644 --- a/semcore/tooltip/src/style/tooltip.shadow.css +++ b/semcore/tooltip/src/style/tooltip.shadow.css @@ -3,7 +3,7 @@ STooltip { padding: var(--intergalactic-spacing-content-padding-medium, 12px); border-radius: var(--intergalactic-popper-rounded, 6px); box-sizing: border-box; - color: var(--intergalactic-tooltip-text, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-tooltip-text, oklch(0.23 0.01 140)); font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); word-wrap: break-word; diff --git a/semcore/typography/src/style/list.shadow.css b/semcore/typography/src/style/list.shadow.css index b173904a20..ac1c1fc735 100644 --- a/semcore/typography/src/style/list.shadow.css +++ b/semcore/typography/src/style/list.shadow.css @@ -23,6 +23,6 @@ SItem + SItem { SMarker { margin-right: var(--intergalactic-spacing-content-gap-large, 8px); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); line-height: normal; } diff --git a/semcore/typography/src/style/text.shadow.css b/semcore/typography/src/style/text.shadow.css index 66ae811bd8..a5c6539d09 100644 --- a/semcore/typography/src/style/text.shadow.css +++ b/semcore/typography/src/style/text.shadow.css @@ -22,7 +22,7 @@ SText { background: none; outline: none; text-decoration: none; - color: var(--intergalactic-text-link-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-link-primary, oklch(0.23 0.01 140)); border-bottom-width: 1px; border-bottom-style: solid; border-color: transparent; @@ -31,8 +31,8 @@ SText { &:hover { outline: none; text-decoration: none; - color: var(--intergalactic-text-link-primary-hover-active, oklch(0.1 0.03 137 / 0.899)); - border-color: var(--intergalactic-text-link-primary-hover-active, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.01 140)); + border-color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.01 140)); } &:focus { @@ -58,7 +58,7 @@ SText { display: inline-block; position: absolute; left: 0; - color: var(--intergalactic-icon-secondary-neutral, oklch(0.118 0.023 170.1 / 0.262)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.003 169.6)); font-family: Georgia, Times, 'Times New Roman', serif; } @@ -103,7 +103,7 @@ SText { & ul:not(ul[start], ul[reversed], ul[type]) li:not(SText):before { content: ''; - background-color: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526)); + background-color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.003 153.3)); } & ol:not(ol[start], ol[reversed], ol[type]):has(+ p), @@ -469,7 +469,7 @@ SText[textAlign] { } SText[use='primary'] { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); } SText[use='secondary'] { diff --git a/stories/components/d3-chart/tests/examples/d3-chart/reference-background-chart-grid-bg.tsx b/stories/components/d3-chart/tests/examples/d3-chart/reference-background-chart-grid-bg.tsx new file mode 100644 index 0000000000..97fd9ba1b8 --- /dev/null +++ b/stories/components/d3-chart/tests/examples/d3-chart/reference-background-chart-grid-bg.tsx @@ -0,0 +1,82 @@ +import { Plot, ReferenceBackground, XAxis, YAxis } from '@semcore/ui/d3-chart'; +import { scaleBand, scaleLinear } from 'd3-scale'; +import React from 'react'; + +import BarMockData from '../../../__mocks__/bar'; + +const backgroundTokens = [ + 'chart-grid-bg-bad', + 'chart-grid-bg-good', + 'chart-grid-bg-highlight', + 'chart-grid-bg-insight', + 'chart-grid-bg-pattern', + 'chart-grid-bg-potential', +] as const; + +const Demo = () => { + const MARGIN = 40; + const width = 360; + const height = 220; + + const xScale = scaleBand() + .range([MARGIN, width - MARGIN]) + .domain(dataBar.map((d) => d.category)) + .paddingInner(0.4) + .paddingOuter(0.2); + + const yScale = scaleLinear() + .range([height - MARGIN, MARGIN]) + .domain([0, 10]); + + const startValue = dataBar[1].category; + const endValue = dataBar[3].category; + const xStart = (xScale(startValue) ?? 0) + xScale.bandwidth() / 2; + const xEnd = (xScale(endValue) ?? 0) + xScale.bandwidth() / 2; + const yTop = yScale.range()[1]; + const bgWidth = xEnd - xStart; + const bgHeight = yScale.range()[0] - yScale.range()[1]; + + return ( +
+ {backgroundTokens.map((token) => ( +
+
+
+ + + + + + + + + +
+
+ ))} +
+ ); +}; + +const dataBar = BarMockData.Default; + +export default Demo; diff --git a/stories/patterns/core/advanced/all-components.tsx b/stories/patterns/core/advanced/all-components.tsx index a55cafe3f5..ff2988d712 100644 --- a/stories/patterns/core/advanced/all-components.tsx +++ b/stories/patterns/core/advanced/all-components.tsx @@ -5,6 +5,7 @@ import React from 'react'; import { Components } from './components/Components'; import { Graphics } from './components/Graphics'; +import { Palette } from './components/Palette'; import { PopupsDialogs } from './components/PopupsDialogs'; import PageHeader from '../../../components/product-head/docs/examples/extended_example'; import { Dashboard } from '../tests/all-components/components/Dashboard'; @@ -34,12 +35,16 @@ function Demo({ defaultTab = 1 }: { defaultTab?: number }) { Graphics + + Palette + {tab === 1 && } {tab === 2 && } {tab === 3 && } {tab === 4 && } + {tab === 5 && } ); } diff --git a/stories/patterns/core/advanced/components/Palette/index.tsx b/stories/patterns/core/advanced/components/Palette/index.tsx new file mode 100644 index 0000000000..1e44fa6a9b --- /dev/null +++ b/stories/patterns/core/advanced/components/Palette/index.tsx @@ -0,0 +1,50 @@ +import { Box, Flex } from '@semcore/ui/base-components'; +import { Text } from '@semcore/ui/typography'; +import React from 'react'; + +const COLOR_NAMES = [ + 'gray', + 'mint', + 'violet', + 'green', + 'salad', + 'blue', + 'red', + 'pink', + 'yellow', + 'orange', +] as const; + +const LIGHTNESS = [50, 75, 100, 200, 300, 400, 450, 500, 600, 700, 800] as const; + +export function Palette() { + return ( + + + + {LIGHTNESS.map((step) => ( + + {step} + + ))} + + + {COLOR_NAMES.map((name) => ( + + + {name} + + {LIGHTNESS.map((step) => ( + + ))} + + ))} + + ); +} diff --git a/tools/theme/src/colors/index.ts b/tools/theme/src/colors/index.ts index bfd88696fb..5c353aa7e6 100644 --- a/tools/theme/src/colors/index.ts +++ b/tools/theme/src/colors/index.ts @@ -103,7 +103,6 @@ export const baseColors: Record = { // ============================================================================= // Semantic color scales -// Maybe other name instead of 'link'? export const semanticColors = { neutral: baseColors.gray, success: baseColors.green, @@ -203,9 +202,9 @@ export const L_BG_BUTTON_STRONG_HOVER = 0.32; export const L_BG_BUTTON_STRONG_ACTIVE = 0; /** Button secondary bg | ⚠️ APCA 60+ under white */ -export const L_BG_BUTTON_SECONDARY = 0.93; -export const L_BG_BUTTON_SECONDARY_HOVER = 0.91; -export const L_BG_BUTTON_SECONDARY_ACTIVE = 0.9; +export const L_BG_BUTTON_SECONDARY = 0.96; +export const L_BG_BUTTON_SECONDARY_HOVER = 0.94; +export const L_BG_BUTTON_SECONDARY_ACTIVE = 0.92; /** Text primary | ⚠️ APCA 90+ on secondary bg */ export const L_TEXT_PRIMARY = 0.23; diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 72da812a77..27fa903542 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -845,19 +845,19 @@ export const theme: Theme = { description: 'Color of the checkmark.', }, control_checkbox_button_bg_hover: { - value: '{semanticTokens.colors.control_secondary_info_DEFAULT}', + value: '{semanticTokens.colors.control_tertiary_neutral_hover}', description: 'Hover state of the Checkbox button background.', }, control_checkbox_button_bg_normal: { - value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + value: '{semanticTokens.colors.control_tertiary_neutral_DEFAULT}', description: 'Normal state of the Checkbox button background.', }, control_checkbox_button_bg_selected_DEFAULT: { - value: '{semanticTokens.colors.control_secondary_info_active}', + value: '{semanticTokens.colors.control_tertiary_neutral_active}', description: 'Selected state of the Checkbox button background.', }, control_checkbox_button_bg_selected_hover: { - value: '{semanticTokens.colors.control_secondary_info_active}', + value: '{semanticTokens.colors.control_tertiary_neutral_active}', description: 'Hover for a selected state of the Checkbox button background.', }, control_checkbox_button_border_DEFAULT: { @@ -865,7 +865,7 @@ export const theme: Theme = { description: 'Border color of the Checkbox button in its normal state.', }, control_checkbox_button_border_selected: { - value: '{semanticTokens.colors.border_info_active}', + value: '{semanticTokens.colors.border_primary_DEFAULT}', description: 'Border color of the Checkbox button in its active state.', }, control_radio_bg_normal: { @@ -1025,11 +1025,11 @@ export const theme: Theme = { description: 'Knob border color of the Slider in its hover state.', }, control_slider_rating_icon_DEFAULT: { - value: neutral.at(L_ICON_SECONDARY), + value: neutral.opaqueAt(L_ICON_PRIMARY), description: 'Icon color for the SliderRating component in its normal state.', }, control_slider_rating_icon_hover_active: { - value: highlight.at(L_ICON_SECONDARY_HOVER), + value: '{semanticTokens.colors.brand_secondary}', description: 'Icon color for the SliderRating component in its hovered and active states.', }, control_switch_bg_DEFAULT: { @@ -1157,15 +1157,15 @@ export const theme: Theme = { description: 'Text color of the Dot.', }, dropdown_menu_item_DEFAULT: { - value: neutral.at(L_BG_PRIMARY), + value: '{semanticTokens.colors.control_tertiary_neutral_DEFAULT}', description: 'Default background color for the list item in the dropdown-menu.', }, dropdown_menu_item_hover: { - value: neutral.opaqueAt(L_BG_PRIMARY_HOVER), + value: '{semanticTokens.colors.control_tertiary_neutral_hover}', description: 'Hover state of the default background color for the list item in the dropdown-menu.', }, dropdown_menu_item_selected_DEFAULT: { - value: focus.opaqueAt(L_BG_SELECTED), + value: '{semanticTokens.colors.control_tertiary_neutral_active}', description: 'Active (selected) state of the default background color for the list item in the dropdown-menu.', }, dropdown_menu_item_selected_box_shadow: { @@ -1173,7 +1173,7 @@ export const theme: Theme = { description: 'Border color of the selected item in the DropdownMenu.', }, dropdown_menu_item_selected_hover: { - value: focus.opaqueAt(L_BG_SELECTED_HOVER), + value: neutral.opaqueAt(L_BG_BUTTON_SECONDARY_HOVER), description: 'Hover state for the selected state of the default background color for the list item in the dropdown-menu.', }, feature_popover_bg_accent: { @@ -1221,63 +1221,63 @@ export const theme: Theme = { description: 'Color for the default non-interactive icon.', }, icon_primary_critical_DEFAULT: { - value: error.opaqueAt(L_ICON_PRIMARY), + value: error.at(L_ICON_PRIMARY), description: 'Semantic error icon.', }, icon_primary_critical_hover_active: { - value: error.opaqueAt(L_ICON_PRIMARY_HOVER), + value: error.at(L_ICON_PRIMARY_HOVER), description: 'Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color.', }, icon_primary_info_DEFAULT: { - value: info.opaqueAt(L_ICON_PRIMARY), + value: info.at(L_ICON_PRIMARY), description: 'Primary link-lookalike icon.', }, icon_primary_info_hover_active: { - value: info.opaqueAt(L_ICON_PRIMARY_HOVER), + value: info.at(L_ICON_PRIMARY_HOVER), description: 'Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color.', }, icon_primary_invert_DEFAULT: { - value: neutral.opaqueInvAt(L_INV_ICON_PRIMARY), + value: neutral.at(L_INV_ICON_PRIMARY), description: 'Inverted version of the primary icon.', }, icon_primary_invert_hover_active: { - value: neutral.opaqueInvAt(L_INV_ICON_PRIMARY_HOVER), + value: neutral.at(L_INV_ICON_PRIMARY_HOVER), description: 'Hover and active (selected) states of the inverted version of the primary icon.', }, icon_primary_neutral_DEFAULT: { - value: neutral.opaqueAt(L_ICON_PRIMARY), + value: neutral.at(L_ICON_PRIMARY), description: 'Default icon weight on normal backgrounds—stronger emphasis than secondary icons.', }, icon_primary_neutral_hover_active: { - value: neutral.opaqueAt(L_ICON_PRIMARY_HOVER), + value: neutral.at(L_ICON_PRIMARY_HOVER), description: 'Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color.', }, icon_primary_success_DEFAULT: { - value: success.opaqueAt(L_ICON_PRIMARY), + value: success.at(L_ICON_PRIMARY), description: 'Semantic success icon.', }, icon_primary_success_hover_active: { - value: success.opaqueAt(L_ICON_PRIMARY_HOVER), + value: success.at(L_ICON_PRIMARY_HOVER), description: 'Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color.', }, icon_primary_warning_DEFAULT: { - value: warning.opaqueAt(L_ICON_PRIMARY + 0.15), + value: warning.at(L_ICON_PRIMARY + 0.15), description: 'Semantic warning icon.', }, icon_primary_warning_hover_active: { - value: warning.opaqueAt(L_ICON_PRIMARY_HOVER), + value: warning.at(L_ICON_PRIMARY_HOVER), description: 'Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color.', }, icon_secondary_critical_DEFAULT: { - value: error.opaqueAt(L_ICON_SECONDARY), + value: error.at(L_ICON_SECONDARY), description: 'Softer error icon for dense UI or inline hints where the surface should stay calm.', }, icon_secondary_critical_hover_active: { - value: error.opaqueAt(L_ICON_SECONDARY_HOVER), + value: error.at(L_ICON_SECONDARY_HOVER), description: 'Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color.', }, icon_secondary_info_DEFAULT: { - value: info.opaqueAt(L_ICON_SECONDARY), + value: info.at(L_ICON_SECONDARY), description: 'Secondary link-lookalike icon.', }, icon_secondary_info_hover_active: { @@ -1285,31 +1285,31 @@ export const theme: Theme = { description: 'Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color.', }, icon_secondary_neutral_DEFAULT: { - value: neutral.opaqueAt(L_ICON_SECONDARY), + value: neutral.at(L_ICON_SECONDARY), description: 'De-emphasized icons for dense layouts (tables, tertiary actions).', }, icon_secondary_neutral_hover_active: { - value: neutral.opaqueAt(L_ICON_SECONDARY_HOVER), + value: neutral.at(L_ICON_SECONDARY_HOVER), description: 'Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color.', }, icon_secondary_success_DEFAULT: { - value: success.opaqueAt(L_ICON_SECONDARY), + value: success.at(L_ICON_SECONDARY), description: 'Softer success icon for dense UI or inline hints where the surface should stay calm.', }, icon_secondary_success_hover_active: { - value: success.opaqueAt(L_ICON_SECONDARY_HOVER), + value: success.at(L_ICON_SECONDARY_HOVER), description: 'Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color.', }, icon_secondary_warning_DEFAULT: { - value: warning.opaqueAt(L_ICON_SECONDARY), + value: warning.at(L_ICON_SECONDARY), description: 'Softer warning icon for dense UI or inline hints where the surface should stay calm.', }, icon_secondary_warning_hover_active: { - value: warning.opaqueAt(L_ICON_SECONDARY_HOVER), + value: warning.at(L_ICON_SECONDARY_HOVER), description: 'Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color.', }, icon_secondary_invert_DEFAULT: { - value: neutral.opaqueInvAt(L_INV_ICON_SECONDARY), + value: neutral.at(L_INV_ICON_SECONDARY), description: 'Softer inverted icon for dense UI or inline hints where the surface should stay calm.', }, illustration_blue: { @@ -1926,7 +1926,7 @@ export const theme: Theme = { description: 'Placeholder text color for inputs and fields.', }, text_primary_DEFAULT: { - value: neutral.opaqueAt(L_TEXT_PRIMARY), + value: neutral.at(L_TEXT_PRIMARY), description: 'Default body and UI copy; strongest reading emphasis for primary content.', }, text_primary_invert: { diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json index f692273b78..aab4116bd4 100644 --- a/website/docs/style/design-tokens/base-tokens.json +++ b/website/docs/style/design-tokens/base-tokens.json @@ -933,11 +933,11 @@ }, { "name": "--intergalactic-slider-rating-normal", - "value": "oklch(0.8 0.003 169.6)" + "value": "oklch(0.092 0.024 152.2 / 0.526)" }, { "name": "--intergalactic-slider-rating-hover-active", - "value": "oklch(0.66 0.212 300.1)" + "value": "oklch(0.22 0.01 140)" }, { "name": "--intergalactic-radio-border", @@ -953,11 +953,11 @@ }, { "name": "--intergalactic-text-link", - "value": "oklch(0.1 0.03 137 / 0.899)" + "value": "oklch(0.23 0.01 140)" }, { "name": "--intergalactic-text-link-hover-active", - "value": "oklch(0.1 0.03 137 / 0.899)" + "value": "oklch(0.23 0.01 140)" }, { "name": "--intergalactic-text-link-invert", diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index df1e7d1053..48d0bb0387 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -475,7 +475,6 @@ "base-trigger", "bulk-textarea", "color-picker", - "feedback-form", "input", "input-tags", "textarea" @@ -495,7 +494,6 @@ "date-picker", "divider", "dropdown", - "feedback-form", "fullscreen-modal", "input", "side-panel", @@ -983,39 +981,49 @@ }, { "name": "--intergalactic-control-checkbox-button-bg-hover", - "value": "oklch(0.527 0.264 262.9 / 0.039)", + "value": "oklch(0.177 0.033 175.6 / 0.042)", "description": "Hover state of the Checkbox button background.", - "components": [] + "components": [ + "feedback-form" + ] }, { "name": "--intergalactic-control-checkbox-button-bg-normal", - "value": "oklch(1 0 0)", + "value": "transparent", "description": "Normal state of the Checkbox button background.", - "components": [] + "components": [ + "feedback-form" + ] }, { "name": "--intergalactic-control-checkbox-button-bg-selected", - "value": "oklch(0.525 0.265 263 / 0.077)", + "value": "oklch(0.176 0.033 175.6 / 0.056)", "description": "Selected state of the Checkbox button background.", "components": [] }, { "name": "--intergalactic-control-checkbox-button-bg-selected-hover", - "value": "oklch(0.525 0.265 263 / 0.077)", + "value": "oklch(0.176 0.033 175.6 / 0.056)", "description": "Hover for a selected state of the Checkbox button background.", - "components": [] + "components": [ + "feedback-form" + ] }, { "name": "--intergalactic-control-checkbox-button-border", "value": "oklch(0.137 0.026 175.7 / 0.161)", "description": "Border color of the Checkbox button in its normal state.", - "components": [] + "components": [ + "feedback-form" + ] }, { "name": "--intergalactic-control-checkbox-button-border-selected", - "value": "oklch(0.7 0.131 275.2)", + "value": "oklch(0.137 0.026 175.7 / 0.161)", "description": "Border color of the Checkbox button in its active state.", - "components": [] + "components": [ + "feedback-form" + ] }, { "name": "--intergalactic-control-radio-bg-normal", @@ -1226,7 +1234,7 @@ }, { "name": "--intergalactic-control-secondary-neutral", - "value": "oklch(0.166 0.031 175.8 / 0.097)", + "value": "oklch(0.176 0.033 175.6 / 0.056)", "description": "Background of the regular secondary control.", "components": [ "button", @@ -1235,7 +1243,7 @@ }, { "name": "--intergalactic-control-secondary-neutral-active", - "value": "oklch(0.145 0.027 176.1 / 0.135)", + "value": "oklch(0.157 0.029 176 / 0.11)", "description": "Active (selected) state of the regular secondary control.", "components": [ "button" @@ -1243,7 +1251,7 @@ }, { "name": "--intergalactic-control-secondary-neutral-hover", - "value": "oklch(0.151 0.028 176.1 / 0.123)", + "value": "oklch(0.176 0.033 175.7 / 0.084)", "description": "Hover state of the regular secondary control.", "components": [ "button" @@ -1323,19 +1331,23 @@ }, { "name": "--intergalactic-control-slider-rating-icon", - "value": "oklch(0.8 0.003 169.6)", + "value": "oklch(0.092 0.024 152.2 / 0.526)", "description": "Icon color for the SliderRating component in its normal state.", - "components": [] + "components": [ + "feedback-form" + ] }, { "name": "--intergalactic-control-slider-rating-icon-hover-active", - "value": "oklch(0.66 0.212 300.1)", + "value": "oklch(0.22 0.01 140)", "description": "Icon color for the SliderRating component in its hovered and active states.", - "components": [] + "components": [ + "feedback-form" + ] }, { "name": "--intergalactic-control-switch-bg", - "value": "oklch(0.166 0.031 175.8 / 0.097)", + "value": "oklch(0.176 0.033 175.6 / 0.056)", "description": "Subtle background of the Switch control.", "components": [ "switch" @@ -1444,7 +1456,7 @@ }, { "name": "--intergalactic-control-text-primary", - "value": "oklch(0.1 0.03 137 / 0.899)", + "value": "oklch(0.23 0.01 140)", "description": "Primary text color for form controls.", "components": [ "button" @@ -1572,7 +1584,7 @@ }, { "name": "--intergalactic-dot-text", - "value": "oklch(0.1 0.03 137 / 0.899)", + "value": "oklch(0.23 0.01 140)", "description": "Text color of the Dot.", "components": [ "dot" @@ -1580,7 +1592,7 @@ }, { "name": "--intergalactic-dropdown-menu-item", - "value": "oklch(1 0 0)", + "value": "transparent", "description": "Default background color for the list item in the dropdown-menu.", "components": [ "dropdown" @@ -1596,7 +1608,7 @@ }, { "name": "--intergalactic-dropdown-menu-item-selected", - "value": "oklch(0.525 0.265 263 / 0.077)", + "value": "oklch(0.176 0.033 175.6 / 0.056)", "description": "Active (selected) state of the default background color for the list item in the dropdown-menu.", "components": [ "dropdown", @@ -1613,7 +1625,7 @@ }, { "name": "--intergalactic-dropdown-menu-item-selected-hover", - "value": "oklch(0.52 0.268 263.2 / 0.191)", + "value": "oklch(0.176 0.033 175.7 / 0.084)", "description": "Hover state for the selected state of the default background color for the list item in the dropdown-menu.", "components": [ "dropdown", @@ -1670,7 +1682,7 @@ }, { "name": "--intergalactic-feature-popover-text", - "value": "oklch(0.1 0.03 137 / 0.899)", + "value": "oklch(0.23 0.01 140)", "description": "Text color of the FeaturePopover.", "components": [ "feature-popover" @@ -1715,7 +1727,7 @@ }, { "name": "--intergalactic-icon-primary-critical", - "value": "oklch(0.552 0.226 28.7 / 0.848)", + "value": "oklch(0.58 0.215 26)", "description": "Semantic error icon.", "components": [ "notice" @@ -1723,7 +1735,7 @@ }, { "name": "--intergalactic-icon-primary-critical-hover-active", - "value": "oklch(0.511 0.209 28.7 / 0.91)", + "value": "oklch(0.53 0.206 27.3)", "description": "Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color.", "components": [ "notice" @@ -1731,31 +1743,31 @@ }, { "name": "--intergalactic-icon-primary-info", - "value": "oklch(0.372 0.253 264.1 / 0.598)", + "value": "oklch(0.58 0.168 278.2)", "description": "Primary link-lookalike icon.", "components": [] }, { "name": "--intergalactic-icon-primary-info-hover-active", - "value": "oklch(0.322 0.222 264.1 / 0.641)", + "value": "oklch(0.53 0.157 279.2)", "description": "Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color.", "components": [] }, { "name": "--intergalactic-icon-primary-invert", - "value": "oklch(0.998 0.003 173.3 / 0.808)", + "value": "oklch(0.85 0.002 173.3)", "description": "Inverted version of the primary icon.", "components": [] }, { "name": "--intergalactic-icon-primary-invert-hover-active", - "value": "oklch(0.998 0.003 169.6 / 0.746)", + "value": "oklch(0.8 0.003 169.6)", "description": "Hover and active (selected) states of the inverted version of the primary icon.", "components": [] }, { "name": "--intergalactic-icon-primary-neutral", - "value": "oklch(0.092 0.024 152.2 / 0.526)", + "value": "oklch(0.58 0.003 153.3)", "description": "Default icon weight on normal backgrounds—stronger emphasis than secondary icons.", "components": [ "accordion", @@ -1767,7 +1779,7 @@ }, { "name": "--intergalactic-icon-primary-neutral-hover-active", - "value": "oklch(0.088 0.026 147.7 / 0.583)", + "value": "oklch(0.53 0.004 149.6)", "description": "Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color.", "components": [ "feature-highlight", @@ -1776,7 +1788,7 @@ }, { "name": "--intergalactic-icon-primary-success", - "value": "oklch(0.595 0.124 165.4)", + "value": "oklch(0.58 0.151 170)", "description": "Semantic success icon.", "components": [ "notice" @@ -1784,7 +1796,7 @@ }, { "name": "--intergalactic-icon-primary-success-hover-active", - "value": "oklch(0.545 0.115 164.9)", + "value": "oklch(0.53 0.142 170)", "description": "Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color.", "components": [ "notice" @@ -1792,7 +1804,7 @@ }, { "name": "--intergalactic-icon-primary-warning", - "value": "oklch(0.728 0.188 51.8)", + "value": "oklch(0.73 0.191 52.4)", "description": "Semantic warning icon.", "components": [ "notice" @@ -1800,7 +1812,7 @@ }, { "name": "--intergalactic-icon-primary-warning-hover-active", - "value": "oklch(0.531 0.169 39.3)", + "value": "oklch(0.53 0.174 43.6)", "description": "Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color.", "components": [ "notice" @@ -1808,19 +1820,19 @@ }, { "name": "--intergalactic-icon-secondary-critical", - "value": "oklch(0.628 0.258 29.2 / 0.415)", + "value": "oklch(0.8 0.145 20.5)", "description": "Softer error icon for dense UI or inline hints where the surface should stay calm.", "components": [] }, { "name": "--intergalactic-icon-secondary-critical-hover-active", - "value": "oklch(0.628 0.257 28.5 / 0.763)", + "value": "oklch(0.66 0.23 24)", "description": "Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color.", "components": [] }, { "name": "--intergalactic-icon-secondary-info", - "value": "oklch(0.475 0.281 264.1 / 0.339)", + "value": "oklch(0.8 0.095 272.6)", "description": "Secondary link-lookalike icon.", "components": [] }, @@ -1832,7 +1844,7 @@ }, { "name": "--intergalactic-icon-secondary-neutral", - "value": "oklch(0.118 0.023 170.1 / 0.262)", + "value": "oklch(0.8 0.003 169.6)", "description": "De-emphasized icons for dense layouts (tables, tertiary actions).", "components": [ "breadcrumbs", @@ -1846,7 +1858,7 @@ }, { "name": "--intergalactic-icon-secondary-neutral-hover-active", - "value": "oklch(0.1 0.023 159.1 / 0.433)", + "value": "oklch(0.66 0.003 159.3)", "description": "Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color.", "components": [ "data-table", @@ -1857,7 +1869,7 @@ }, { "name": "--intergalactic-icon-secondary-success", - "value": "oklch(0.787 0.16 167.8 / 0.898)", + "value": "oklch(0.8 0.155 170)", "description": "Softer success icon for dense UI or inline hints where the surface should stay calm.", "components": [ "inline-input" @@ -1865,7 +1877,7 @@ }, { "name": "--intergalactic-icon-secondary-success-hover-active", - "value": "oklch(0.673 0.139 166.3)", + "value": "oklch(0.66 0.163 170)", "description": "Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color.", "components": [ "inline-input" @@ -1873,19 +1885,19 @@ }, { "name": "--intergalactic-icon-secondary-warning", - "value": "oklch(0.735 0.184 53.9 / 0.757)", + "value": "oklch(0.8 0.164 59.4)", "description": "Softer warning icon for dense UI or inline hints where the surface should stay calm.", "components": [] }, { "name": "--intergalactic-icon-secondary-warning-hover-active", - "value": "oklch(0.662 0.193 43.7)", + "value": "oklch(0.66 0.2 48)", "description": "Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color.", "components": [] }, { "name": "--intergalactic-icon-secondary-invert", - "value": "oklch(0.994 0.009 143.7 / 0.336)", + "value": "oklch(0.45 0.004 143.7)", "description": "Softer inverted icon for dense UI or inline hints where the surface should stay calm.", "components": [] }, @@ -2061,7 +2073,7 @@ }, { "name": "--intergalactic-control-pills-bg-hover", - "value": "oklch(0.151 0.028 176.1 / 0.123)", + "value": "oklch(0.176 0.033 175.7 / 0.084)", "description": "Hover state of the Pills background.", "components": [ "pills" @@ -2069,7 +2081,7 @@ }, { "name": "--intergalactic-control-pills-bg-normal", - "value": "oklch(0.166 0.031 175.8 / 0.097)", + "value": "oklch(0.176 0.033 175.6 / 0.056)", "description": "Background of the Pills in its normal state.", "components": [ "pills" @@ -2309,7 +2321,7 @@ }, { "name": "--intergalactic-spin-bg", - "value": "oklch(0.118 0.023 170.1 / 0.262)", + "value": "oklch(0.8 0.003 169.6)", "description": "Track color of the Spin loader.", "components": [ "spin" @@ -2317,7 +2329,7 @@ }, { "name": "--intergalactic-spin-bg-invert", - "value": "oklch(0.998 0.003 173.3 / 0.808)", + "value": "oklch(0.85 0.002 173.3)", "description": "Inverted track color of the Spin loader.", "components": [ "spin" @@ -2919,7 +2931,7 @@ }, { "name": "--intergalactic-text-link-primary", - "value": "oklch(0.1 0.03 137 / 0.899)", + "value": "oklch(0.23 0.01 140)", "description": "Default primary link color.", "components": [ "button", @@ -2929,7 +2941,7 @@ }, { "name": "--intergalactic-text-link-primary-hover-active", - "value": "oklch(0.1 0.03 137 / 0.899)", + "value": "oklch(0.23 0.01 140)", "description": "Hover and active states for the primary link.", "components": [ "button", @@ -3017,7 +3029,7 @@ }, { "name": "--intergalactic-text-primary", - "value": "oklch(0.1 0.03 137 / 0.899)", + "value": "oklch(0.23 0.01 140)", "description": "Default body and UI copy; strongest reading emphasis for primary content.", "components": [ "accordion", @@ -3140,7 +3152,7 @@ }, { "name": "--intergalactic-tooltip-text", - "value": "oklch(0.1 0.03 137 / 0.899)", + "value": "oklch(0.23 0.01 140)", "description": "Text color of the default Tooltip.", "components": [ "tooltip" @@ -3432,6 +3444,7 @@ "button", "card", "dropdown", + "feedback-form", "fullscreen-modal", "input", "input-tags", @@ -3552,6 +3565,7 @@ "checkbox", "date-picker", "dropdown", + "feedback-form", "fullscreen-modal", "notice", "notice-bubble", @@ -3689,6 +3703,7 @@ "button", "dropdown-menu", "feature-highlight", + "feedback-form", "inline-edit", "inline-input", "input", From 147c58eba73ec5fb434b2c92d6537a8e5f2d9e06 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 15 Sep 2026 12:40:31 +0200 Subject: [PATCH 2/7] [theme] update focus and gray shades --- .../accordion/src/style/accordion.shadow.css | 8 +- semcore/badge/src/style/badge.shadow.css | 20 +- .../flex-box/style/focus-outline-mixin.css | 2 +- .../src/components/hint/style/hint.shadow.css | 8 +- .../components/popper/style/popper.shadow.css | 2 +- .../scroll-area/style/scroll-area.shadow.css | 8 +- .../scroll-area/style/scroll-bar.shadow.css | 2 +- .../src/style/base-trigger.shadow.css | 12 +- .../src/style/button-trigger.shadow.css | 4 +- .../src/style/filter-trigger.shadow.css | 10 +- .../src/style/breadcrumbs.shadow.css | 8 +- .../InputField/inputField.shadow.css | 12 +- .../src/component/Button/button.shadow.css | 96 ++-- .../ButtonLink/buttonLink.shadow.css | 8 +- semcore/card/src/style/card.shadow.css | 6 +- .../carousel/src/style/carousel.shadow.css | 8 +- .../checkbox/src/style/checkbox.shadow.css | 12 +- .../src/style/color-picker.shadow.css | 20 +- semcore/counter/src/style/counter.shadow.css | 4 +- .../LegendItem/legend-item.shadow.css | 2 +- semcore/d3-chart/src/style/area.shadow.css | 6 +- semcore/d3-chart/src/style/axis.shadow.css | 10 +- semcore/d3-chart/src/style/bar.shadow.css | 12 +- semcore/d3-chart/src/style/bubble.shadow.css | 6 +- semcore/d3-chart/src/style/donut.shadow.css | 4 +- semcore/d3-chart/src/style/dot.shadow.css | 2 +- semcore/d3-chart/src/style/hover.shadow.css | 4 +- semcore/d3-chart/src/style/line.shadow.css | 6 +- .../src/style/plotA11yView.shadow.css | 6 +- semcore/d3-chart/src/style/radar.shadow.css | 14 +- .../d3-chart/src/style/reference.shadow.css | 8 +- .../d3-chart/src/style/scatterplot.shadow.css | 2 +- semcore/d3-chart/src/style/tooltip.shadow.css | 8 +- .../src/components/Body/style.shadow.css | 24 +- .../src/components/Head/style.shadow.css | 26 +- .../date-picker/src/style/calendar.shadow.css | 44 +- .../src/style/date-picker.shadow.css | 16 +- semcore/divider/src/style/divider.shadow.css | 12 +- semcore/dot/src/style/dot.shadow.css | 2 +- .../src/style/drag-and-drop.shadow.css | 8 +- .../src/style/dropdown-menu.shadow.css | 4 +- .../dropdown/src/style/dropdown.shadow.css | 26 +- semcore/errors/src/style/errors.shadow.css | 4 +- .../src/components/badge/badge.shadow.css | 2 +- .../src/components/button/button.shadow.css | 6 +- .../src/components/notice/notice.shadow.css | 4 +- .../src/components/switch/switch.shadow.css | 2 +- .../src/style/feature-popover.shadow.css | 8 +- .../src/style/checkbox-button.shadow.css | 8 +- .../src/style/slider-rating.shadow.css | 4 +- semcore/flags/src/style/flags.shadow.css | 6 +- .../src/style/fullscreen-modal.shadow.css | 6 +- .../src/style/inline-input.shadow.css | 14 +- .../src/style/input-mask.shadow.css | 4 +- .../src/style/input-number.shadow.css | 4 +- .../input-tags/src/style/input-tag.shadow.css | 4 +- semcore/input/src/style/input.shadow.css | 14 +- semcore/link/src/style/link.shadow.css | 16 +- .../src/component/score/line.shadow.css | 6 +- semcore/mini-chart/src/styles/line.shadow.css | 6 +- semcore/modal/src/style/modal.shadow.css | 10 +- .../src/style/notice-bubble.shadow.css | 6 +- semcore/notice/src/style/notice.shadow.css | 18 +- .../src/style/pagination.shadow.css | 6 +- semcore/pills/src/style/pills.shadow.css | 12 +- .../product-head/src/style/title.shadow.css | 2 +- .../src/style/progress-bar.shadow.css | 10 +- semcore/radio/src/style/radio.shadow.css | 8 +- semcore/select/src/style/select.shadow.css | 14 +- .../src/style/side-panel.shadow.css | 16 +- semcore/skeleton/src/style/chart.shadow.css | 4 +- .../skeleton/src/style/skeleton.shadow.css | 4 +- semcore/slider/src/style/slider.shadow.css | 12 +- .../src/style/spin-container.shadow.css | 2 +- semcore/spin/src/style/spin.shadow.css | 4 +- semcore/switch/src/style/switch.shadow.css | 22 +- .../tab-line/src/style/tab-line.shadow.css | 10 +- .../tab-panel/src/style/tab-panel.shadow.css | 12 +- semcore/tag/src/style/tag.shadow.css | 24 +- .../textarea/src/style/textarea.shadow.css | 10 +- .../PickerFormat/picker-format.shadow.css | 12 +- .../TimePicker/time-picker.shadow.css | 6 +- semcore/tooltip/src/style/tooltip.shadow.css | 18 +- .../src/style/blockquote.shadow.css | 6 +- semcore/typography/src/style/list.shadow.css | 2 +- semcore/typography/src/style/text.shadow.css | 28 +- .../src/style/widget-empty.shadow.css | 4 +- semcore/wizard/src/style/wizard.shadow.css | 10 +- .../notice/docs/examples/basic_notice.tsx | 4 +- tools/theme/src/colors/index.ts | 13 +- tools/theme/src/theme.ts | 14 +- .../docs/style/design-tokens/base-tokens.json | 46 +- .../style/design-tokens/design-tokens.json | 410 +++++++++--------- 93 files changed, 701 insertions(+), 698 deletions(-) diff --git a/semcore/accordion/src/style/accordion.shadow.css b/semcore/accordion/src/style/accordion.shadow.css index 5b6d45f468..2e96ff6e8c 100644 --- a/semcore/accordion/src/style/accordion.shadow.css +++ b/semcore/accordion/src/style/accordion.shadow.css @@ -6,16 +6,16 @@ SItemToggle { } SItemToggle[use][use] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); font-weight: var(--intergalactic-regular, 400); } SItemToggle[use][use='primary'] { - background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180)); + background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.003 215)); padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px); margin-bottom: var(--intergalactic-spacing-05x, 2px); } SItemToggle[use][use='primary']:hover { - background-color: var(--intergalactic-bg-secondary-neutral-hover, oklch(0.97 0.001 180)); + background-color: var(--intergalactic-bg-secondary-neutral-hover, oklch(0.97 0.004 215.3)); } SItemToggle[disabled] { @@ -27,7 +27,7 @@ SItemChevron { margin-right: var(--intergalactic-spacing-2x, 8px); transform: rotate(0deg); transition: transform calc(var(--intergalactic-duration-accordion, 200) * 1ms) ease-out; - fill: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.003 153.3)); + fill: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.025 225)); &[selected] { transform: rotate(90deg); diff --git a/semcore/badge/src/style/badge.shadow.css b/semcore/badge/src/style/badge.shadow.css index 5adf57f835..5c039e40d3 100644 --- a/semcore/badge/src/style/badge.shadow.css +++ b/semcore/badge/src/style/badge.shadow.css @@ -12,7 +12,7 @@ SBadge { letter-spacing: 0.3px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - color: var(--intergalactic-badge-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-badge-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); } SBadge[theme='default'] { @@ -33,18 +33,18 @@ SBadge[theme='default'] { } &[type='soon'] { - background-color: var(--intergalactic-badge-accent-soon, oklch(0.64 0.003 157.8)); + background-color: var(--intergalactic-badge-accent-soon, oklch(0.64 0.025 224.1)); } &[type='unavailable'] { - color: var(--intergalactic-badge-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); - background-color: var(--intergalactic-badge-bg-unavailable, oklch(0.97 0.001 180)); + color: var(--intergalactic-badge-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + background-color: var(--intergalactic-badge-bg-unavailable, oklch(0.97 0.004 215.3)); } } SBadge[theme='invert'] { - color: var(--intergalactic-badge-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); - background-color: var(--intergalactic-badge-bg-invert, oklch(0.969 0.057 140 / 0.118)); + color: var(--intergalactic-badge-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + background-color: var(--intergalactic-badge-bg-invert, oklch(0.916 0.055 225.3 / 0.127)); } SBadge[theme='light'] { @@ -65,11 +65,11 @@ SBadge[theme='light'] { background-color: var(--intergalactic-badge-light-new, oklch(0.9 0.11 175)); } &[type='soon'] { - color: var(--intergalactic-badge-light-soon-text, oklch(0.46 0.004 144.4)); - background-color: var(--intergalactic-badge-light-soon, oklch(0.9 0.002 177)); + color: var(--intergalactic-badge-light-soon-text, oklch(0.46 0.02 225)); + background-color: var(--intergalactic-badge-light-soon, oklch(0.9 0.011 217.3)); } &[type='unavailable'] { - color: var(--intergalactic-badge-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); - background-color: var(--intergalactic-badge-bg-unavailable, oklch(0.97 0.001 180)); + color: var(--intergalactic-badge-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + background-color: var(--intergalactic-badge-bg-unavailable, oklch(0.97 0.004 215.3)); } } diff --git a/semcore/base-components/src/components/flex-box/style/focus-outline-mixin.css b/semcore/base-components/src/components/flex-box/style/focus-outline-mixin.css index b581952c73..b1845a03ef 100644 --- a/semcore/base-components/src/components/flex-box/style/focus-outline-mixin.css +++ b/semcore/base-components/src/components/flex-box/style/focus-outline-mixin.css @@ -1,5 +1,5 @@ @define-mixin focus-outline-mixin $offset: 2px { - outline-color: var(--intergalactic-keyboard-focus-outline, oklch(0.424 0.269 264.2 / 0.469)); + outline-color: var(--intergalactic-keyboard-focus-outline, oklch(0.23 0.01 225)); outline-style: solid; outline-width: 2px; outline-offset: $offset; diff --git a/semcore/base-components/src/components/hint/style/hint.shadow.css b/semcore/base-components/src/components/hint/style/hint.shadow.css index d79dcbc21a..c0864bcb8b 100644 --- a/semcore/base-components/src/components/hint/style/hint.shadow.css +++ b/semcore/base-components/src/components/hint/style/hint.shadow.css @@ -8,14 +8,14 @@ SHintPopper { opacity: 0; pointer-events: none; - background: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); - border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140)); - color: var(--intergalactic-tooltip-text-invert, oklch(0.999 0.001 180 / 0.949)); + background: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 225)); + border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.015 225)); + color: var(--intergalactic-tooltip-text-invert, oklch(0.993 0.005 215.6 / 0.956)); padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-small, 8px); border-radius: var(--intergalactic-rounded-small, 4px); font-size: var(--intergalactic-fs-100, 12px); line-height: var(--intergalactic-lh-100, 1.3334); - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); animation-fill-mode: both; animation-timing-function: var(--timingFunction); diff --git a/semcore/base-components/src/components/popper/style/popper.shadow.css b/semcore/base-components/src/components/popper/style/popper.shadow.css index 193e7899b3..4776e5a55b 100644 --- a/semcore/base-components/src/components/popper/style/popper.shadow.css +++ b/semcore/base-components/src/components/popper/style/popper.shadow.css @@ -1,5 +1,5 @@ SPopper { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } SPopper:focus-visible { diff --git a/semcore/base-components/src/components/scroll-area/style/scroll-area.shadow.css b/semcore/base-components/src/components/scroll-area/style/scroll-area.shadow.css index 85cf4ad5bc..19b893eeb8 100644 --- a/semcore/base-components/src/components/scroll-area/style/scroll-area.shadow.css +++ b/semcore/base-components/src/components/scroll-area/style/scroll-area.shadow.css @@ -32,14 +32,14 @@ SShadowHorizontal[size] { &[themeLeft='dark'] { &:before { background: var(--intergalactic-scroll-area-shadow-left, - linear-gradient(to right, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)); + linear-gradient(to right, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)); } } &[themeRight='dark'] { &:after { background: var(--intergalactic-scroll-area-shadow-right, - linear-gradient(to left, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)); + linear-gradient(to left, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)); } } @@ -112,14 +112,14 @@ SShadowVertical[size] { &[themeTop='dark'] { &:before { background: var(--intergalactic-scroll-area-shadow-top, - linear-gradient(to bottom, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)); + linear-gradient(to bottom, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)); } } &[themeBottom='dark'] { &:after { background: var(--intergalactic-scroll-area-shadow-bottom, - linear-gradient(to top, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)); + linear-gradient(to top, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)); } } diff --git a/semcore/base-components/src/components/scroll-area/style/scroll-bar.shadow.css b/semcore/base-components/src/components/scroll-area/style/scroll-bar.shadow.css index 910fb777b5..dd45c834c6 100644 --- a/semcore/base-components/src/components/scroll-area/style/scroll-bar.shadow.css +++ b/semcore/base-components/src/components/scroll-area/style/scroll-bar.shadow.css @@ -27,5 +27,5 @@ SSlider { height: 6px; /* disable-tokens-validator */ border-radius: var(--intergalactic-rounded-small, 6px); - background-color: var(--intergalactic-scroll-bar-background, oklch(0.137 0.026 175.7 / 0.161)); + background-color: var(--intergalactic-scroll-bar-background, oklch(0.324 0.062 225.5 / 0.189)); } diff --git a/semcore/base-trigger/src/style/base-trigger.shadow.css b/semcore/base-trigger/src/style/base-trigger.shadow.css index ca51b377d4..4f828a21e0 100644 --- a/semcore/base-trigger/src/style/base-trigger.shadow.css +++ b/semcore/base-trigger/src/style/base-trigger.shadow.css @@ -21,8 +21,8 @@ SBaseTrigger { background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0)); font-weight: var(--intergalactic-regular, 400); - border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + border: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); border-radius: var(--intergalactic-control-rounded, 6px); padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px); @@ -38,16 +38,16 @@ SBaseTrigger { } &:focus-visible { - border: 1px solid var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); + border: 1px solid var(--intergalactic-border-info-active, oklch(0.23 0.01 225)); } &:hover { - background-color: var(--intergalactic-control-select-trigger-hover, oklch(0.97 0.001 180)); + background-color: var(--intergalactic-control-select-trigger-hover, oklch(0.97 0.004 215.3)); } &:active, &[active] { - border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); + border-color: var(--intergalactic-border-info-active, oklch(0.23 0.01 225)); &:hover { background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0)); @@ -133,7 +133,7 @@ SBaseTrigger[neighborLocation='left'] { } SText[display-placeholder] { - color: var(--intergalactic-text-placeholder, oklch(0.109 0.023 165.5 / 0.337)); + color: var(--intergalactic-text-placeholder, oklch(0.282 0.055 228.7 / 0.386)); } SBaseTrigger[state='valid'] { diff --git a/semcore/base-trigger/src/style/button-trigger.shadow.css b/semcore/base-trigger/src/style/button-trigger.shadow.css index f31559c95a..dfca237b1d 100644 --- a/semcore/base-trigger/src/style/button-trigger.shadow.css +++ b/semcore/base-trigger/src/style/button-trigger.shadow.css @@ -1,11 +1,11 @@ SButtonAddon { width: var(--intergalactic-spacing-3x, 12px); height: var(--intergalactic-spacing-3x, 12px); - color: var(--intergalactic-icon-non-interactive, oklch(0.094 0.024 153.9 / 0.503)); + color: var(--intergalactic-icon-non-interactive, oklch(0.6 0.026 225)); position: relative; left: var(--intergalactic-spacing-05x, 2px); } SButtonTriggerSpin { - fill: var(--intergalactic-icon-non-interactive, oklch(0.094 0.024 153.9 / 0.503)); + fill: var(--intergalactic-icon-non-interactive, oklch(0.6 0.026 225)); } diff --git a/semcore/base-trigger/src/style/filter-trigger.shadow.css b/semcore/base-trigger/src/style/filter-trigger.shadow.css index cde8e2197b..bcbe2e036a 100644 --- a/semcore/base-trigger/src/style/filter-trigger.shadow.css +++ b/semcore/base-trigger/src/style/filter-trigger.shadow.css @@ -13,7 +13,7 @@ STrigger { top: 50%; transform: translateY(-50%); width: 1px; - background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + background-color: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); transition: height calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-out; } @@ -60,7 +60,7 @@ SWrapper { &::after { content: ''; position: absolute; - border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); border-radius: var(--intergalactic-control-rounded, 6px); inset: 0; z-index: 1; @@ -70,14 +70,14 @@ SWrapper { &[empty]:active, &[empty][active], &[empty]:has(STrigger:focus-visible) { - background-color: var(--intergalactic-control-select-trigger-active, oklch(0.96 0.001 180)); + background-color: var(--intergalactic-control-select-trigger-active, oklch(0.96 0.005 215.6)); STrigger { background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0)); } &::after { - border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); + border-color: var(--intergalactic-border-info-active, oklch(0.23 0.01 225)); } } @@ -94,7 +94,7 @@ SWrapper { border: none; &[active], &:active { - background-color: var(--intergalactic-control-select-trigger-active, oklch(0.96 0.001 180)); + background-color: var(--intergalactic-control-select-trigger-active, oklch(0.96 0.005 215.6)); } } } diff --git a/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css b/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css index 3b295c1a6d..385628ecca 100644 --- a/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css +++ b/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css @@ -10,7 +10,7 @@ SBreadcrumbs { list-style: none; SSeparator { - color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.003 169.6)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.02 220.2)); display: flex; &:last-child { @@ -31,18 +31,18 @@ SBreadcrumbs { position: relative; font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); text-decoration: none; cursor: pointer; &:hover { text-decoration: underline; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } } SBreadcrumbsItem[active] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); cursor: default; &:hover { text-decoration: none; diff --git a/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css b/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css index 4e2483b5a1..ee88cc853f 100644 --- a/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css +++ b/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css @@ -2,14 +2,14 @@ SInputField>ol { box-sizing: content-box; outline-color: transparent; border-radius: var(--intergalactic-control-rounded, 6px); - border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); border-style: solid; border-width: 1px; overflow: auto; position: relative; background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); word-wrap: break-word; word-break: break-word; font-family: inherit; @@ -20,7 +20,7 @@ SInputField>ol { &:empty::before { content: '1. ' attr(data-placeholder); - color: var(--intergalactic-text-placeholder, oklch(0.109 0.023 165.5 / 0.337)); + color: var(--intergalactic-text-placeholder, oklch(0.282 0.055 228.7 / 0.386)); position: absolute; white-space: pre-wrap; padding-left: var(--intergalactic-spacing-content-padding-medium, 12px); @@ -48,7 +48,7 @@ SInputField>ol { display: inline-block; text-align: right; - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); margin-right: var(--intergalactic-spacing-content-gap-small, 4px); font-variant-numeric: normal; font-weight: 300; @@ -151,7 +151,7 @@ SInputField[size='l']>ol { SInputField[state='normal']:not([disabled])>ol { &:focus { - border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); + border-color: var(--intergalactic-border-info-active, oklch(0.23 0.01 225)); @mixin focus-outline-mixin { outline-offset: 0; transition-property: outline-color, outline-width; @@ -193,7 +193,7 @@ SInputField[state='invalid']>ol { } SInputField[readonly]>ol { - background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180)); + background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.003 215)); } SInputField[disabled]>ol { diff --git a/semcore/button/src/component/Button/button.shadow.css b/semcore/button/src/component/Button/button.shadow.css index 20acabda3b..61de01d72d 100644 --- a/semcore/button/src/component/Button/button.shadow.css +++ b/semcore/button/src/component/Button/button.shadow.css @@ -20,7 +20,7 @@ SButton { touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-weight: var(--intergalactic-medium, 500); - color: var(--intergalactic-control-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-control-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); min-width: fit-content; &::-moz-focus-inner { @@ -71,133 +71,133 @@ SButton[size='l']:has(SAddon:only-child) { } SButton[theme='primary-info'] { - 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)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 225)); &:hover { - 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)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + background-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.014 225)); } &:active, &[active] { - 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)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + background-color: var(--intergalactic-control-primary-info-active, oklch(0 0 225)); } } SButton[theme='primary-success'] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); background-color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170)); &:hover { - color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); background-color: var(--intergalactic-control-primary-success-hover, oklch(0.6 0.155 170)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); background-color: var(--intergalactic-control-primary-success-active, oklch(0.58 0.151 170)); } } SButton[theme='primary-brand'] { - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); background-color: var(--intergalactic-control-primary-brand, oklch(0.74 0.17 303)); &:hover { - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.72 0.181 302.3)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); background-color: var(--intergalactic-control-primary-brand-active, oklch(0.7 0.191 301.5)); } } SButton[theme='primary-warning'] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); background-color: var(--intergalactic-control-primary-brand, oklch(0.74 0.17 303)); &:hover { - color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.72 0.181 302.3)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); background-color: var(--intergalactic-control-primary-brand-active, oklch(0.7 0.191 301.5)); } } SButton[theme='primary-danger'] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); &:hover { - color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); background-color: var(--intergalactic-control-primary-critical-hover, oklch(0.6 0.219 25.5)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); background-color: var(--intergalactic-control-primary-critical-active, oklch(0.58 0.215 26)); } } SButton[theme='primary-invert'] { - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); background-color: var(--intergalactic-control-primary-invert, oklch(1 0 0)); &:hover { - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); - background-color: var(--intergalactic-control-primary-invert-hover, oklch(0.96 0.001 180)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-control-primary-invert-hover, oklch(0.96 0.005 215.6)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); - background-color: var(--intergalactic-control-primary-invert-active, oklch(0.94 0.002 180)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-control-primary-invert-active, oklch(0.94 0.007 216.1)); } } SButton[theme='secondary-muted'] { - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); - background-color: var(--intergalactic-control-secondary-neutral, oklch(0.176 0.033 175.6 / 0.056)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-control-secondary-neutral, oklch(0.351 0.065 223 / 0.066)); &:hover { background-color: var(--intergalactic-control-secondary-neutral-hover, - oklch(0.176 0.033 175.7 / 0.084)); - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); + oklch(0.339 0.063 223.5 / 0.097)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); } &:active, &[active] { background-color: var(--intergalactic-control-secondary-neutral-active, - oklch(0.157 0.029 176 / 0.11)); - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); + oklch(0.332 0.062 224.2 / 0.128)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); } } SButton[theme='secondary-invert'] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); - background-color: var(--intergalactic-control-secondary-invert, oklch(0.969 0.057 140 / 0.118)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + background-color: var(--intergalactic-control-secondary-invert, oklch(0.916 0.055 225.3 / 0.127)); &:hover { - color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); - background-color: var(--intergalactic-control-secondary-invert-hover, oklch(0.98 0.036 140 / 0.164)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + background-color: var(--intergalactic-control-secondary-invert-hover, oklch(0.923 0.05 225.2 / 0.178)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); background-color: var(--intergalactic-control-secondary-invert-active, - oklch(0.986 0.025 140 / 0.203)); + oklch(0.926 0.048 225.1 / 0.22)); } } @@ -218,35 +218,35 @@ SButton[theme='tertiary-info'] { } SButton[theme='tertiary-muted'] { - color: var(--intergalactic-control-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-control-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); background-color: var(--intergalactic-control-tertiary-neutral, transparent); &:hover { - background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.177 0.033 175.6 / 0.042)); - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.363 0.068 222.8 / 0.05)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); } &:active, &[active] { background-color: var(--intergalactic-control-tertiary-neutral-active, - oklch(0.176 0.033 175.6 / 0.056)); - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 140)); + oklch(0.351 0.065 223 / 0.066)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); } } SButton[theme='tertiary-invert'] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); background-color: var(--intergalactic-control-tertiary-invert, transparent); &:hover { - color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); - background-color: var(--intergalactic-control-tertiary-invert-hover, oklch(0.98 0.036 140 / 0.164)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + background-color: var(--intergalactic-control-tertiary-invert-hover, oklch(0.923 0.05 225.2 / 0.178)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); - background-color: var(--intergalactic-control-tertiary-invert-active, oklch(0.986 0.025 140 / 0.203)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + background-color: var(--intergalactic-control-tertiary-invert-active, oklch(0.926 0.048 225.1 / 0.22)); } } @@ -269,12 +269,12 @@ SButton[neighborLocation='left'] { position: relative; &:after { - background-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.009 144.4 / 0.347)); + background-color: var(--intergalactic-border-primary-invert, oklch(0.932 0.044 225.1 / 0.378)); } /* TODO: need to add a new variables for neighbor location borders based on the final UI */ &[theme='secondary-muted'] { &:after { - background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: need to add a new variables for neighbor location borders based on the final UI */ + background-color: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); /* TODO: need to add a new variables for neighbor location borders based on the final UI */ } } } diff --git a/semcore/button/src/component/ButtonLink/buttonLink.shadow.css b/semcore/button/src/component/ButtonLink/buttonLink.shadow.css index 7a85b3a04b..9171a7ab1a 100644 --- a/semcore/button/src/component/ButtonLink/buttonLink.shadow.css +++ b/semcore/button/src/component/ButtonLink/buttonLink.shadow.css @@ -5,7 +5,7 @@ SButtonLink { SButtonLink[use='primary'] { &:not([color]) { - color: var(--intergalactic-text-link-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-link-primary, oklch(0.23 0.01 225)); } SText { @@ -16,7 +16,7 @@ SButtonLink[use='primary'] { &:active, &:hover { &:not([color]) { - color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.01 225)); } SText { @@ -26,12 +26,12 @@ SButtonLink[use='primary'] { } SButtonLink[use='secondary']:not([color]) { - color: var(--intergalactic-text-hint, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-hint, oklch(0.247 0.049 230.2 / 0.524)); &[active], &:active, &:hover { - color: var(--intergalactic-text-link-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-link-primary, oklch(0.23 0.01 225)); } } diff --git a/semcore/card/src/style/card.shadow.css b/semcore/card/src/style/card.shadow.css index c32aba443f..5f719077ce 100644 --- a/semcore/card/src/style/card.shadow.css +++ b/semcore/card/src/style/card.shadow.css @@ -3,7 +3,7 @@ SCard { background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); padding: 0; border-radius: var(--intergalactic-surface-rounded, 8px); - border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + border: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); STitle { margin: 0 var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-1x, 4px) 0; @@ -20,7 +20,7 @@ SCard { margin: 0 0 var(--intergalactic-spacing-1x, 4px) 0; font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); } SHeader { @@ -31,7 +31,7 @@ SCard { } SBody { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); padding: var(--intergalactic-spacing-content-padding-xlarge, 20px); } } diff --git a/semcore/carousel/src/style/carousel.shadow.css b/semcore/carousel/src/style/carousel.shadow.css index 4619a834a5..d7690c3599 100644 --- a/semcore/carousel/src/style/carousel.shadow.css +++ b/semcore/carousel/src/style/carousel.shadow.css @@ -89,7 +89,7 @@ SIndicator { flex-shrink: 0; width: 12px; height: 12px; - background-color: var(--intergalactic-control-carousel-indicator, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-carousel-indicator, oklch(0.23 0.01 225)); border-radius: var(--intergalactic-carousel-indicator-rounded, 8px); opacity: 0.25; object-fit: cover; @@ -104,7 +104,7 @@ SIndicator { &[active] { width: 24px; - background-color: var(--intergalactic-control-carousel-indicator-active, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-carousel-indicator-active, oklch(0.23 0.01 225)); opacity: 1; } } @@ -127,7 +127,7 @@ SIndicator[inverted] { } &[active] { - background-color: var(--intergalactic-control-carousel-indicator-active, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-carousel-indicator-active, oklch(0.23 0.01 225)); opacity: 1; } } @@ -138,7 +138,7 @@ SNext { align-items: center; justify-content: center; cursor: pointer; - color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.003 153.3)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.025 225)); SPrevButton span:has(> svg:only-child), SNextButton span:has(> svg:only-child) { diff --git a/semcore/checkbox/src/style/checkbox.shadow.css b/semcore/checkbox/src/style/checkbox.shadow.css index 0a472c002f..2a48cbd5b3 100644 --- a/semcore/checkbox/src/style/checkbox.shadow.css +++ b/semcore/checkbox/src/style/checkbox.shadow.css @@ -10,7 +10,7 @@ SLabel { SText { margin-left: var(--intergalactic-spacing-content-gap-medium, 6px); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); &[disabled] { opacity: var(--intergalactic-disabled-opacity, 0.4); @@ -68,7 +68,7 @@ SCheckbox { } &[state='normal']:before { - border-color: var(--intergalactic-control-checkbox-border, oklch(0.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-control-checkbox-border, oklch(0.324 0.062 225.5 / 0.189)); } } @@ -105,13 +105,13 @@ SText[size='m'] { SControl[checked]~SCheckbox[state='normal']:before, SControl[checked]~SCheckbox[state='invalid']:before { - background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140)); - border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 225)); + border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 225)); } SControl[indeterminate]~SCheckbox[state='normal']:before { - background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140)); - border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 225)); + border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 225)); } SCheckbox[state='invalid'], diff --git a/semcore/color-picker/src/style/color-picker.shadow.css b/semcore/color-picker/src/style/color-picker.shadow.css index 58c6bcb540..8dadd4e7b1 100644 --- a/semcore/color-picker/src/style/color-picker.shadow.css +++ b/semcore/color-picker/src/style/color-picker.shadow.css @@ -21,7 +21,7 @@ SItemContainer { box-sizing: border-box; &:hover { - border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); } &::after { @@ -39,7 +39,7 @@ SItemContainer:hover>SCloseIcon { } SItemContainer[selected] { - border: 1px solid var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); + border: 1px solid var(--intergalactic-border-info-active, oklch(0.23 0.01 225)); } SItemContainer[displayLabel] { @@ -51,7 +51,7 @@ SItemContainer[displayLabel] { SItemContainer:not([value]) { &::after { - border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); opacity: 1; } @@ -63,7 +63,7 @@ SItemContainer:not([value]) { transform: translate(-50%, -50%) rotate(45deg); width: 1px; height: 22px; - background: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + background: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); z-index: 0; } } @@ -95,11 +95,11 @@ SPlusButton { cursor: pointer; &:hover { - background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.177 0.033 175.6 / 0.042)); + background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.363 0.068 222.8 / 0.05)); } &:active { - background-color: var(--intergalactic-control-tertiary-neutral-active, oklch(0.176 0.033 175.6 / 0.056)); + background-color: var(--intergalactic-control-tertiary-neutral-active, oklch(0.351 0.065 223 / 0.066)); } } @@ -125,7 +125,7 @@ STriggerCircle { } STriggerCircle:not([data-value]) { - border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); &::before { content: ''; @@ -135,12 +135,12 @@ STriggerCircle:not([data-value]) { transform: translate(-50%, -50%) rotate(45deg); width: 1px; height: 20px; - background: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + background: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); } } SChevronDownM { - fill: var(--intergalactic-text-primary, oklch(0.23 0.01 140)) + fill: var(--intergalactic-text-primary, oklch(0.23 0.01 225)) } SCloseIcon { @@ -170,7 +170,7 @@ SItemColor { width: 22px; height: 22px; border-radius: 50%; - border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + border: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); background: var(--data-value); box-sizing: border-box; margin: 5px; diff --git a/semcore/counter/src/style/counter.shadow.css b/semcore/counter/src/style/counter.shadow.css index c3f45b544e..bac5328d8e 100644 --- a/semcore/counter/src/style/counter.shadow.css +++ b/semcore/counter/src/style/counter.shadow.css @@ -9,9 +9,9 @@ SCounter { border-radius: var(--intergalactic-counter-rounded, 12px); font-weight: var(--intergalactic-medium, 500); - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); - border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); } SCounter[size='s'] { diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css index df45417639..4a424d9311 100644 --- a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css +++ b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css @@ -109,7 +109,7 @@ SAdditionalLabel { SAdditionalLabel::before { content: ''; display: inline-block; - background-color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + background-color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); height: 4px; width: 4px; border-radius: 2px; diff --git a/semcore/d3-chart/src/style/area.shadow.css b/semcore/d3-chart/src/style/area.shadow.css index 1673ec6ac1..4d848a1c58 100644 --- a/semcore/d3-chart/src/style/area.shadow.css +++ b/semcore/d3-chart/src/style/area.shadow.css @@ -1,7 +1,7 @@ @import './var.css'; SArea { - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); fill-opacity: 0.2; } @@ -19,7 +19,7 @@ SArea[transparent] { } SAreaLine { - stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); + stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); stroke-width: 3; fill: transparent; } @@ -41,7 +41,7 @@ SAreaLine { SNull { fill: transparent; - stroke: var(--intergalactic-chart-grid-x-axis, oklch(0.88 0.002 175.6)); + stroke: var(--intergalactic-chart-grid-x-axis, oklch(0.88 0.013 217.9)); stroke-dasharray: 4; } diff --git a/semcore/d3-chart/src/style/axis.shadow.css b/semcore/d3-chart/src/style/axis.shadow.css index 43efa6bb6b..f1e79b93cc 100644 --- a/semcore/d3-chart/src/style/axis.shadow.css +++ b/semcore/d3-chart/src/style/axis.shadow.css @@ -1,5 +1,5 @@ SAxis { - stroke: var(--intergalactic-chart-grid-x-axis, oklch(0.88 0.002 175.6)); + stroke: var(--intergalactic-chart-grid-x-axis, oklch(0.88 0.013 217.9)); } SAxis[hide] { @@ -8,10 +8,10 @@ SAxis[hide] { STick { font-size: var(--intergalactic-fs-100, 12px); - fill: var(--intergalactic-chart-grid-text-label, oklch(0.097 0.023 156.5 / 0.468)); + fill: var(--intergalactic-chart-grid-text-label, oklch(0.247 0.049 230.2 / 0.524)); } STick[primaryText] { - fill: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + fill: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } STick[hide] { @@ -20,12 +20,12 @@ STick[hide] { SGrid { fill: transparent; - stroke: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + stroke: var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); } STitle { font-size: var(--intergalactic-fs-100, 12px); - fill: var(--intergalactic-text-hint, oklch(0.097 0.023 156.5 / 0.468)); + fill: var(--intergalactic-text-hint, oklch(0.247 0.049 230.2 / 0.524)); transform-origin: var(--transform-origin); } diff --git a/semcore/d3-chart/src/style/bar.shadow.css b/semcore/d3-chart/src/style/bar.shadow.css index 48e70ce077..57612c0cf9 100644 --- a/semcore/d3-chart/src/style/bar.shadow.css +++ b/semcore/d3-chart/src/style/bar.shadow.css @@ -1,7 +1,7 @@ @import './var.css'; SBar { - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); transition-property: height, width, y; transition-duration: var(--duration); transition-timing-function: ease-in-out; @@ -30,7 +30,7 @@ SBar[onClick] { } SBackground { - fill: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.001 180)); + fill: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 215.6)); opacity: 0.4; } SBackground[onClick] { @@ -42,13 +42,13 @@ SBarAnnotation { justify-content: space-between; } SBarLabel { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); margin-right: auto; font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); } SBarPercent { - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); margin-right: var(--intergalactic-spacing-2x, 8px); font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); @@ -57,11 +57,11 @@ SBarValue { min-width: 52px; display: flex; justify-content: flex-end; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); text-align: right; } SCompactHorizontalBarHoverRect { - fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.177 0.033 175.6 / 0.042)); + fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.363 0.068 222.8 / 0.05)); } \ No newline at end of file diff --git a/semcore/d3-chart/src/style/bubble.shadow.css b/semcore/d3-chart/src/style/bubble.shadow.css index ff79d85854..8b7322e8bc 100644 --- a/semcore/d3-chart/src/style/bubble.shadow.css +++ b/semcore/d3-chart/src/style/bubble.shadow.css @@ -1,7 +1,7 @@ @import './var.css'; SBubble { - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); stroke: var(--intergalactic-chart-grid-border, #ffffff); stroke-width: 2px; transition-property: cx, cy; @@ -40,7 +40,7 @@ SCenter { text-anchor: middle; /* disable-tokens-validator */ font-size: calc(var(--intergalactic-fs-100, 12px) - 1px); - stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); + stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); } SCenter[color] { @@ -52,7 +52,7 @@ SCenter[transparent] { } SLabel { - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); } SLabel[position='right'] { diff --git a/semcore/d3-chart/src/style/donut.shadow.css b/semcore/d3-chart/src/style/donut.shadow.css index d006aeaff5..10762fe979 100644 --- a/semcore/d3-chart/src/style/donut.shadow.css +++ b/semcore/d3-chart/src/style/donut.shadow.css @@ -2,7 +2,7 @@ SPie { stroke: var(--intergalactic-chart-grid-border, #ffffff); - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); } SPie[color] { @@ -20,7 +20,7 @@ SPie[transparent] { } SEmptyData { - fill: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.002 177)); + fill: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.011 217.3)); } SEmptyData[color] { diff --git a/semcore/d3-chart/src/style/dot.shadow.css b/semcore/d3-chart/src/style/dot.shadow.css index b18b4d76f2..a9817fd65d 100644 --- a/semcore/d3-chart/src/style/dot.shadow.css +++ b/semcore/d3-chart/src/style/dot.shadow.css @@ -9,7 +9,7 @@ SDots { SDot { stroke-width: 1px; stroke: var(--intergalactic-chart-grid-border, #ffffff); - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); transition-property: cx, cy, x, y; transition-timing-function: ease-in-out; } diff --git a/semcore/d3-chart/src/style/hover.shadow.css b/semcore/d3-chart/src/style/hover.shadow.css index ce98501081..7aa853a742 100644 --- a/semcore/d3-chart/src/style/hover.shadow.css +++ b/semcore/d3-chart/src/style/hover.shadow.css @@ -1,9 +1,9 @@ SHoverLine, SHoverLine:focus-visible { outline: none; - stroke: var(--intergalactic-chart-grid-x-axis, oklch(0.88 0.002 175.6)); + stroke: var(--intergalactic-chart-grid-x-axis, oklch(0.88 0.013 217.9)); } SHoverRect, SHoverRect:focus-visible { outline: none; - fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.177 0.033 175.6 / 0.042)); + fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.363 0.068 222.8 / 0.05)); } diff --git a/semcore/d3-chart/src/style/line.shadow.css b/semcore/d3-chart/src/style/line.shadow.css index cc291b4b45..8772bb107a 100644 --- a/semcore/d3-chart/src/style/line.shadow.css +++ b/semcore/d3-chart/src/style/line.shadow.css @@ -3,7 +3,7 @@ SLine { fill: transparent; stroke-width: 3; - stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); + stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); transition-property: d; transition-duration: var(--duration); transition-timing-function: ease-in-out; @@ -23,7 +23,7 @@ SLine[transparent] { SNull { fill: transparent; - stroke: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + stroke: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); stroke-dasharray: 4; } @@ -36,7 +36,7 @@ SLineArea { transition-duration: var(--duration); transition-timing-function: ease-in-out; opacity: 0.3; - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); } SLineArea[color] { fill: var(--color); diff --git a/semcore/d3-chart/src/style/plotA11yView.shadow.css b/semcore/d3-chart/src/style/plotA11yView.shadow.css index 1e1573106b..8cd9ac902a 100644 --- a/semcore/d3-chart/src/style/plotA11yView.shadow.css +++ b/semcore/d3-chart/src/style/plotA11yView.shadow.css @@ -2,8 +2,8 @@ SPlotA11yView { position: relative; display: block; background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); - border: 3px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + border: 3px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); font-size: var(--intergalactic-fs-50, 10px); z-index: var(--intergalactic-z-index-overlay, 500); padding: 2px; @@ -21,6 +21,6 @@ SPlotA11yView { } table, td, th { - border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); } } diff --git a/semcore/d3-chart/src/style/radar.shadow.css b/semcore/d3-chart/src/style/radar.shadow.css index 0f9c593b09..c1f55b0be0 100644 --- a/semcore/d3-chart/src/style/radar.shadow.css +++ b/semcore/d3-chart/src/style/radar.shadow.css @@ -1,19 +1,19 @@ SAxis { - stroke: var(--intergalactic-chart-grid-line, oklch(0.95 0.002 180)); + stroke: var(--intergalactic-chart-grid-line, oklch(0.95 0.006 215.8)); stroke-width: 1; fill: transparent; } SAxisLine, SAxisTick { - stroke: var(--intergalactic-chart-grid-line, oklch(0.95 0.002 180)); + stroke: var(--intergalactic-chart-grid-line, oklch(0.95 0.006 215.8)); stroke-width: 1; stroke-dasharray: 2; fill: transparent; } SAxisLine[active] { - stroke: var(--intergalactic-chart-grid-y-accent-hover-line, oklch(0.88 0.002 175.6)); + stroke: var(--intergalactic-chart-grid-y-accent-hover-line, oklch(0.88 0.013 217.9)); } SAxisLabel { @@ -31,7 +31,7 @@ SAxisLabel[yDirection] { } SPolygon { - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); opacity: 0.2; } @@ -49,7 +49,7 @@ SPolygonDot { stroke-width: 2px; stroke: var(--intergalactic-chart-grid-border, #ffffff); r: 6px; - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); } SPolygonDot[transparent] { @@ -61,7 +61,7 @@ SPolygonDot[color] { } SPolygonLine { - stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); + stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); stroke-width: 3; fill: transparent; } @@ -76,5 +76,5 @@ SPolygonLine[color] { SPieRect { outline: none; - fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.177 0.033 175.6 / 0.042)); + fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.363 0.068 222.8 / 0.05)); } diff --git a/semcore/d3-chart/src/style/reference.shadow.css b/semcore/d3-chart/src/style/reference.shadow.css index cddafcdecf..c92873696f 100644 --- a/semcore/d3-chart/src/style/reference.shadow.css +++ b/semcore/d3-chart/src/style/reference.shadow.css @@ -1,11 +1,11 @@ SReferenceLine { fill: none; - stroke: var(--intergalactic-chart-grid-y-accent-hover-line, oklch(0.88 0.002 175.6)); + stroke: var(--intergalactic-chart-grid-y-accent-hover-line, oklch(0.88 0.013 217.9)); } STitle { font-size: var(--intergalactic-fs-100, 12px); - fill: var(--intergalactic-chart-grid-text-label, oklch(0.097 0.023 156.5 / 0.468)); + fill: var(--intergalactic-chart-grid-text-label, oklch(0.247 0.049 230.2 / 0.524)); transform-origin: var(--transform-origin); } @@ -31,13 +31,13 @@ STitle[position='left'] { } SBackground { - fill: var(--intergalactic-chart-grid-period-bg, oklch(0.96 0.001 180)); + fill: var(--intergalactic-chart-grid-period-bg, oklch(0.96 0.005 215.6)); } SStripes { fill: var(--fill); } SStripesPatternPath { - stroke: var(--intergalactic-chart-grid-period-pattern, oklch(0.95 0.002 180)); + stroke: var(--intergalactic-chart-grid-period-pattern, oklch(0.95 0.006 215.8)); stroke-width: 1px; } \ No newline at end of file diff --git a/semcore/d3-chart/src/style/scatterplot.shadow.css b/semcore/d3-chart/src/style/scatterplot.shadow.css index 77157433e3..a3f63eb641 100644 --- a/semcore/d3-chart/src/style/scatterplot.shadow.css +++ b/semcore/d3-chart/src/style/scatterplot.shadow.css @@ -1,7 +1,7 @@ @import './var.css'; SScatterPlot { - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); transition-property: cx, cy; transition-duration: var(--duration); transition-timing-function: ease-in-out; diff --git a/semcore/d3-chart/src/style/tooltip.shadow.css b/semcore/d3-chart/src/style/tooltip.shadow.css index 53ebfb40c2..aabe855936 100644 --- a/semcore/d3-chart/src/style/tooltip.shadow.css +++ b/semcore/d3-chart/src/style/tooltip.shadow.css @@ -6,14 +6,14 @@ STooltip { position: relative; background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); border-radius: var(--intergalactic-popper-rounded, 6px); - border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + border: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); box-sizing: border-box; - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); padding: var(--intergalactic-spacing-3x, 12px); } STitle { - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); margin-bottom: var(--intergalactic-spacing-2x, 8px); } @@ -35,7 +35,7 @@ SDotCircle[color] { SFooter { - background: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180)); + background: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.003 215)); padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-3x, 12px); border-radius: 0 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px); margin: var(--intergalactic-spacing-3x, 12px) calc(-1 * var(--intergalactic-spacing-3x, 12px)) calc(-1 * var(--intergalactic-spacing-3x, 12px)); diff --git a/semcore/data-table/src/components/Body/style.shadow.css b/semcore/data-table/src/components/Body/style.shadow.css index 2eedf56c7b..e5eb5d59fb 100644 --- a/semcore/data-table/src/components/Body/style.shadow.css +++ b/semcore/data-table/src/components/Body/style.shadow.css @@ -59,7 +59,7 @@ SCollapseRow[gridArea] > SCellWrapper, SRow[isAccordionRow] > SCellWrapper { SCollapseRow[gridArea] > SCellWrapper > SCell:not([withoutBorder]), SAccordionRows > SRow[isAccordionRow]:last-child > SCellWrapper > SCell:not([withoutBorder]) { - border-bottom: 1px solid var(--intergalactic-border-table-accent, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-table-border-accent */ + border-bottom: 1px solid var(--intergalactic-border-table-accent, oklch(0.324 0.062 225.5 / 0.189)); /* TODO: --intergalactic-table-border-accent */ } SCollapseRow > SCellWrapper > SCell { @@ -68,7 +68,7 @@ SCollapseRow > SCellWrapper > SCell { SRow[accordionType='row'][expanded] > SCellWrapper > SCell:not([theme]), SCell:not([theme])[expanded][withAccordion] { - background-color: var(--intergalactic-table-td-cell-active, oklch(0.96 0.001 180)); + background-color: var(--intergalactic-table-td-cell-active, oklch(0.96 0.005 215.6)); } SCollapseRow > SCellWrapper > SCell:not([theme]), SRow[isAccordionRow] > SCellWrapper > SCell:not([theme]) { @@ -80,7 +80,7 @@ SCollapseRow > SCellWrapper > SCell:not([theme]), SRow[isAccordionRow] > SCellWr :not(SRowGroup:has([data-row-selector="true"] input:checked)) > SRow:not([accordionType='row'][expanded]):hover:not([isNonInteractive]):not(:has([data-row-selector="true"] input:checked)):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]), SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover):not(:has([data-row-selector="true"] input:checked)) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]), SRowGroup:has(SCell:hover):not(:has([data-row-selector="true"] input:checked)) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([expanded][withAccordion]):not([aria-hidden]) { - background-color: var(--intergalactic-table-td-cell-hover, oklch(0.97 0.001 180)); + background-color: var(--intergalactic-table-td-cell-hover, oklch(0.97 0.004 215.3)); } /* MUTED THEME */ @@ -90,7 +90,7 @@ SCollapseRow > SCellWrapper > SCell:not([theme]), SRow[isAccordionRow] > SCellWr SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([accordionType='row'][expanded])[theme='muted']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([aria-hidden]), SRowGroup:has(SCell:hover) > SRow:not([accordionType='row'][expanded]):not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='muted']:not([aria-hidden]), SRowGroup:has(SCell:hover) > SRow:not([accordionType='row'][expanded])[theme='muted']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([aria-hidden]) { - background-color: var(--intergalactic-table-td-cell-active, oklch(0.96 0.001 180)); + background-color: var(--intergalactic-table-td-cell-active, oklch(0.96 0.005 215.6)); } /* INFO THEME */ @@ -152,9 +152,9 @@ SCell { height: 100%; font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); box-sizing: border-box; - border-bottom: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + border-bottom: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); white-space: pre-wrap; word-break: break-word; font-variant-numeric: tabular-nums; @@ -201,10 +201,10 @@ SCell { } &[theme='muted'] { - background-color: var(--intergalactic-table-td-cell-unread, oklch(0.98 0.001 180)); + background-color: var(--intergalactic-table-td-cell-unread, oklch(0.98 0.003 215)); &[expanded][withAccordion] { - background-color: var(--intergalactic-table-td-cell-active, oklch(0.96 0.001 180)); + background-color: var(--intergalactic-table-td-cell-active, oklch(0.96 0.005 215.6)); } } @@ -242,12 +242,12 @@ SCell { &[borders='both'], &[borders='left'] { - border-left: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + border-left: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); } &[borders='both'], &[borders='right'] { - border-right: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + border-right: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); } &[innerOutline]:focus-visible { @@ -349,7 +349,7 @@ SCellWrapper[fixed='left'][shadowVertical='start'] { display: block; right: 0; background: var(--intergalactic-scroll-area-shadow-left, - linear-gradient(to right, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)); + linear-gradient(to right, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)); } SCell { margin-right: 5px; @@ -362,7 +362,7 @@ SCellWrapper[fixed='right'][shadowVertical='end'] { display: block; left: 0; background: var(--intergalactic-scroll-area-shadow-right, - linear-gradient(to left, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)); + linear-gradient(to left, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)); } SCell { diff --git a/semcore/data-table/src/components/Head/style.shadow.css b/semcore/data-table/src/components/Head/style.shadow.css index c78cd959e0..a8fd481c54 100644 --- a/semcore/data-table/src/components/Head/style.shadow.css +++ b/semcore/data-table/src/components/Head/style.shadow.css @@ -49,7 +49,7 @@ SGroup, SColumn { display: flex; align-items: flex-start; font-size: var(--intergalactic-fs-100, 12px); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); box-sizing: border-box; height: 100%; position: relative; @@ -61,14 +61,14 @@ SGroup, SColumn { SGroup { justify-content: center; text-align: center; - background-color: var(--intergalactic-table-th-primary-cell, oklch(0.98 0.001 180)); + background-color: var(--intergalactic-table-th-primary-cell, oklch(0.98 0.003 215)); } SGroup[use='primary'] { padding: var(--intergalactic-spacing-3x, 12px); &:has(~ SColumn[visibleSort]) { - background-color: var(--intergalactic-table-th-primary-cell-hover, oklch(0.96 0.001 180)); + background-color: var(--intergalactic-table-th-primary-cell-hover, oklch(0.96 0.005 215.6)); } } SGroup[use='secondary'] { @@ -76,28 +76,28 @@ SGroup[use='secondary'] { } SGroup[borders='both'], SColumn[borders='both'], SGroup[borders='left'], SColumn[borders='left'] { - border-left: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + border-left: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); } SGroup[borders='both'], SColumn[borders='both'], SGroup[borders='right'], SColumn[borders='right'] { - border-right: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + border-right: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); } SColumn[use='primary'] { padding: var(--intergalactic-spacing-3x, 12px); - border-bottom: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); - background-color: var(--intergalactic-table-th-primary-cell, oklch(0.98 0.001 180)); + border-bottom: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); + background-color: var(--intergalactic-table-th-primary-cell, oklch(0.98 0.003 215)); SSortWrapper::before { background: linear-gradient( 270deg, - var(--intergalactic-table-th-primary-cell-hover, oklch(0.96 0.001 180)) 67.5%, + var(--intergalactic-table-th-primary-cell-hover, oklch(0.96 0.005 215.6)) 67.5%, rgba(224, 225, 233, 0) 105% ); } &[visibleSort] { - background-color: var(--intergalactic-table-th-primary-cell-hover, oklch(0.96 0.001 180)); + background-color: var(--intergalactic-table-th-primary-cell-hover, oklch(0.96 0.005 215.6)); SSortWrapper { flex-basis: calc(var(--intergalactic-spacing-1x, 4px) + 16px); @@ -130,7 +130,7 @@ SColumn[use='primary'] { SColumn[use='secondary'] { padding: var(--intergalactic-spacing-2x, 8px); - border-bottom: 1px solid var(--intergalactic-border-table-accent, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-table-border-accent */ + border-bottom: 1px solid var(--intergalactic-border-table-accent, oklch(0.324 0.062 225.5 / 0.189)); /* TODO: --intergalactic-table-border-accent */ background-color: var(--intergalactic-table-th-secondary-cell, oklch(1 0 0)); SSortWrapper::before { @@ -210,7 +210,7 @@ SSortWrapper:before { SSortButton { display: none; - fill: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.003 159.3)); + fill: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.024 223.6)); position: absolute; right: 0; margin-left: var(--intergalactic-spacing-1x, 4px); @@ -270,7 +270,7 @@ SGroup[fixed='left'][shadowVertical='start'] { display: block; right: 0; background: var(--intergalactic-scroll-area-shadow-left, - linear-gradient(to right, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)); + linear-gradient(to right, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)); } } SColumn[fixed='right'][shadowVertical='median'], @@ -291,6 +291,6 @@ SGroup[fixed='right'][shadowVertical='end'] { display: block; left: 0; background: var(--intergalactic-scroll-area-shadow-right, - linear-gradient(to left, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)); + linear-gradient(to left, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)); } } diff --git a/semcore/date-picker/src/style/calendar.shadow.css b/semcore/date-picker/src/style/calendar.shadow.css index b0bc09400a..ff9fa699f9 100644 --- a/semcore/date-picker/src/style/calendar.shadow.css +++ b/semcore/date-picker/src/style/calendar.shadow.css @@ -34,7 +34,7 @@ SWeekDay { display: flex; align-items: center; justify-content: center; - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); font-size: var(--intergalactic-fs-200, 14px); font-weight: var(--intergalactic-regular, 400); overflow: hidden; @@ -48,7 +48,7 @@ SCalendarUnit { text-align: center; vertical-align: middle; border: 1px solid transparent; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); box-shadow: none; overflow: visible; user-select: none; @@ -71,8 +71,8 @@ SCalendarUnit { margin: 0; &:hover { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); - background-color: var(--intergalactic-date-picker-cell-hover, oklch(0.97 0.001 180)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-date-picker-cell-hover, oklch(0.97 0.004 215.3)); } } @@ -87,42 +87,42 @@ SCalendarUnit[today] { width: calc(100% - 2px); height: calc(100% - 2px); box-sizing: border-box; - border: 1px solid var(--intergalactic-date-picker-cell-current, oklch(0.104 0.023 162.3 / 0.385)); + border: 1px solid var(--intergalactic-date-picker-cell-current, oklch(0.267 0.053 229.2 / 0.437)); } } SCalendarUnit[today]SCalendarUnit[startSelected], SCalendarUnit[today]SCalendarUnit[endSelected] { &:before { - border-color: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + border-color: var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); } } SCalendarUnit[selected] { - background-color: var(--intergalactic-date-picker-cell-range, oklch(0.96 0.001 180)); + background-color: var(--intergalactic-date-picker-cell-range, oklch(0.96 0.005 215.6)); border-radius: 0; transition: border-radius 0s 0s; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); &:hover { - background-color: var(--intergalactic-date-picker-cell-range-hover, oklch(0.9 0.002 177)); + background-color: var(--intergalactic-date-picker-cell-range-hover, oklch(0.9 0.011 217.3)); } } SCalendarUnit[highlighted] { - background-color: var(--intergalactic-date-picker-cell-range, oklch(0.96 0.001 180)); + background-color: var(--intergalactic-date-picker-cell-range, oklch(0.96 0.005 215.6)); border-radius: 0; transition: border-radius 0s 0s; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); &:hover { - background-color: var(--intergalactic-date-picker-cell-range-hover, oklch(0.9 0.002 177)); + background-color: var(--intergalactic-date-picker-cell-range-hover, oklch(0.9 0.011 217.3)); } } SCalendarUnit[startSelected] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); - background-color: var(--intergalactic-date-picker-cell-active, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + background-color: var(--intergalactic-date-picker-cell-active, oklch(0.23 0.01 225)); &:not([highlighted]) { border-bottom-left-radius: var(--intergalactic-rounded-small, 4px); @@ -132,14 +132,14 @@ SCalendarUnit[startSelected] { } &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); - background-color: var(--intergalactic-date-picker-cell-active-hover, oklch(0.32 0.007 140)); + color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + background-color: var(--intergalactic-date-picker-cell-active-hover, oklch(0.32 0.014 225)); } } SCalendarUnit[endSelected] { - background-color: var(--intergalactic-date-picker-cell-active, oklch(0.23 0.01 140)); - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + background-color: var(--intergalactic-date-picker-cell-active, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); &:not([highlighted]) { border-bottom-left-radius: 0; @@ -149,8 +149,8 @@ SCalendarUnit[endSelected] { } &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); - background-color: var(--intergalactic-date-picker-cell-active-hover, oklch(0.32 0.007 140)); + color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + background-color: var(--intergalactic-date-picker-cell-active-hover, oklch(0.32 0.014 225)); } } @@ -221,10 +221,10 @@ SCalendarUnit[compareStart], SCalendarUnit[compareEnd] { border-radius: 0; background-color: var(--intergalactic-date-picker-cell-comparison-active, oklch(0.74 0.117 274.1)); - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); background-color: var(--intergalactic-date-picker-cell-comparison-active-hover, oklch(0.58 0.168 278.2)); } } diff --git a/semcore/date-picker/src/style/date-picker.shadow.css b/semcore/date-picker/src/style/date-picker.shadow.css index 47ed0face5..54fcfed9ca 100644 --- a/semcore/date-picker/src/style/date-picker.shadow.css +++ b/semcore/date-picker/src/style/date-picker.shadow.css @@ -20,7 +20,7 @@ SHeader { STitle { font-size: var(--intergalactic-fs-200, 14px); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); height: 32px; width: 100%; display: flex; @@ -45,7 +45,7 @@ SButton SInner { } SInputMask { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); line-height: normal; padding-right: var(--intergalactic-spacing-2x, 8px); transition: width calc(var(--intergalactic-duration-medium, 300) * 1ms) ease, min-width calc(var(--intergalactic-duration-medium, 300) * 1ms) ease; @@ -64,7 +64,7 @@ SInputMask SValue { } SIndicator { - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); } SRangeIndicator { @@ -73,7 +73,7 @@ SRangeIndicator { } SRangeIndicator[range='value'] { - background-color: var(--intergalactic-date-picker-cell-active, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-date-picker-cell-active, oklch(0.23 0.01 225)); } SRangeIndicator[range='compare'] { @@ -136,16 +136,16 @@ SInputMask[noHumanizedDate] SMask { } SDateRange SInputMask:focus-within SMask { - background-color: var(--intergalactic-bg-highlight-focus, oklch(0.525 0.265 263 / 0.077)); + background-color: var(--intergalactic-bg-highlight-focus, oklch(0.508 0.293 286.9 / 0.067)); } SRangeSep[fulfilled], SDateRange:focus-within SRangeSep { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } SRangeComparatorHeader { - border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); padding: var(--intergalactic-spacing-4x, 16px); } @@ -154,7 +154,7 @@ SRangeCalendar { } SFooter { - border-top: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border-top: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); padding: var(--intergalactic-spacing-4x, 16px); } diff --git a/semcore/divider/src/style/divider.shadow.css b/semcore/divider/src/style/divider.shadow.css index c0c43598d7..b09a67e6fa 100644 --- a/semcore/divider/src/style/divider.shadow.css +++ b/semcore/divider/src/style/divider.shadow.css @@ -15,31 +15,31 @@ SDivider { } &[use='primary'] { - background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + background-color: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); &[theme='invert'] { - background-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.009 144.4 / 0.347)); + background-color: var(--intergalactic-border-primary-invert, oklch(0.932 0.044 225.1 / 0.378)); } } &[use='secondary'] { &[orientation='horizontal'] { - background-image: radial-gradient(circle, var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)) 0.5px, transparent 0.5px); + background-image: radial-gradient(circle, var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)) 0.5px, transparent 0.5px); background-size: 3px 1px; background-position: -1px 50%; &[theme='invert'] { - background-image: radial-gradient(circle, var(--intergalactic-border-primary-invert, oklch(0.995 0.009 144.4 / 0.347)) 0.5px, transparent 0.5px); + background-image: radial-gradient(circle, var(--intergalactic-border-primary-invert, oklch(0.932 0.044 225.1 / 0.378)) 0.5px, transparent 0.5px); } } &[orientation='vertical'] { - background-image: radial-gradient(circle, var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)) 0.5px, transparent 0.5px); + background-image: radial-gradient(circle, var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)) 0.5px, transparent 0.5px); background-size: 1px 3px; background-position: 50% -1px; &[theme='invert'] { - background-image: radial-gradient(circle, var(--intergalactic-border-primary-invert, oklch(0.995 0.009 144.4 / 0.347)) 0.5px, transparent 0.5px); + background-image: radial-gradient(circle, var(--intergalactic-border-primary-invert, oklch(0.932 0.044 225.1 / 0.378)) 0.5px, transparent 0.5px); } } } diff --git a/semcore/dot/src/style/dot.shadow.css b/semcore/dot/src/style/dot.shadow.css index e323717801..3e2227e519 100644 --- a/semcore/dot/src/style/dot.shadow.css +++ b/semcore/dot/src/style/dot.shadow.css @@ -5,7 +5,7 @@ SDot { font-size: var(--intergalactic-fs-50, 10px); line-height: normal; background-color: var(--intergalactic-dot-bg, oklch(0.74 0.17 303)); - color: var(--intergalactic-dot-text, oklch(0.23 0.01 140)); + color: var(--intergalactic-dot-text, oklch(0.23 0.01 225)); box-sizing: border-box; z-index: 1; border-radius: 100%; diff --git a/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css b/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css index 25f267adc1..84a285b59c 100644 --- a/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css +++ b/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css @@ -19,7 +19,7 @@ SDraggable[draggable] { display: none; pointer-events: none; background-image: radial-gradient(circle at center, - var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.003 169.6)) 1px, + var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.02 220.2)) 1px, transparent 0); background-size: 6px 6px; background-position: 2px 2px; @@ -93,19 +93,19 @@ SDropZone { } SDropZone[dropPreview] { - background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180)); + background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.003 215)); } SDropZone[dark][dropPreview] { - background-color: var(--intergalactic-bg-primary-invert-active, oklch(0.4 0.004 140)); + background-color: var(--intergalactic-bg-primary-invert-active, oklch(0.4 0.017 225)); } SDraggable[keyboardDragging] { scale: 1.1; background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); - box-shadow: var(--intergalactic-box-shadow-dnd, 3px 3px 30px 0px oklch(0.176 0.033 175.7 / 0.07)) !important; + box-shadow: var(--intergalactic-box-shadow-dnd, 3px 3px 30px 0px oklch(0.344 0.064 223.3 / 0.081)) !important; &::before { diff --git a/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css b/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css index 35e9a6ed51..b0ce5ceaf1 100644 --- a/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css +++ b/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css @@ -6,7 +6,7 @@ SDropdownMenuList { min-width: 32px; box-sizing: content-box; z-index: 0; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); SBar { z-index: 3; @@ -85,7 +85,7 @@ SDropdownNestingItem SDropdownMenuItemContainer { } SItemHint { - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); } SScrollContainer { diff --git a/semcore/dropdown/src/style/dropdown.shadow.css b/semcore/dropdown/src/style/dropdown.shadow.css index 41fae237d8..8853ae1f33 100644 --- a/semcore/dropdown/src/style/dropdown.shadow.css +++ b/semcore/dropdown/src/style/dropdown.shadow.css @@ -3,10 +3,10 @@ SDropdownPopper { background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); border-radius: var(--intergalactic-popper-rounded, 6px); box-sizing: border-box; - border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + border: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); white-space: normal; - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07)); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); SDropdownItem { @@ -21,10 +21,10 @@ SDropdownPopper { SDropdownItem:not(button) { width: 100%; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); &:hover { - background-color: var(--intergalactic-dropdown-menu-item-hover, oklch(0.177 0.033 175.6 / 0.042)); + background-color: var(--intergalactic-dropdown-menu-item-hover, oklch(0.363 0.068 222.8 / 0.05)); } } @@ -48,14 +48,14 @@ SDropdownPopper { display: inline-block; background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out; - border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); } &[selected]::after { background-repeat: no-repeat; background-position: center center; - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); - border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 225)); + border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 225)); } &[selected][size='m']::after { @@ -68,11 +68,11 @@ SDropdownPopper { } SDropdownItem[selected]:not(SDropdownItem[isMenuItemCheckbox]) { - background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.176 0.033 175.6 / 0.056)); - box-shadow: 2px 0px 0px 0px var(--intergalactic-dropdown-menu-item-selected-box-shadow, oklch(0.23 0.01 140)) inset; + background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.351 0.065 223 / 0.066)); + box-shadow: 2px 0px 0px 0px var(--intergalactic-dropdown-menu-item-selected-box-shadow, oklch(0.23 0.01 225)) inset; &:hover { - background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.176 0.033 175.7 / 0.084)); + background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.339 0.063 223.5 / 0.097)); } } @@ -145,7 +145,7 @@ SDropdownPopper { } SDropdownItem[variant='hint'] { - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); cursor: default; &:hover { @@ -171,7 +171,7 @@ SDropdownPopper { } SGroupHint { - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); } SDropdownItemContainer[sticky] { diff --git a/semcore/errors/src/style/errors.shadow.css b/semcore/errors/src/style/errors.shadow.css index c7b117e956..6a41ec2ec5 100644 --- a/semcore/errors/src/style/errors.shadow.css +++ b/semcore/errors/src/style/errors.shadow.css @@ -49,7 +49,7 @@ SError { STitle[data-errors-title] { font-size: var(--intergalactic-fs-700, 36px); line-height: var(--intergalactic-lh-700, 1.1112); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); font-weight: var(--intergalactic-semi-bold, 600); margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0; } @@ -58,7 +58,7 @@ SError { display: block; font-size: var(--intergalactic-fs-300, 16px); line-height: var(--intergalactic-lh-300, 1.5); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0; } } diff --git a/semcore/feature-highlight/src/components/badge/badge.shadow.css b/semcore/feature-highlight/src/components/badge/badge.shadow.css index 4a1a2b2165..8f4bc9f37a 100644 --- a/semcore/feature-highlight/src/components/badge/badge.shadow.css +++ b/semcore/feature-highlight/src/components/badge/badge.shadow.css @@ -13,7 +13,7 @@ SHighlightedBadge { letter-spacing: 0.3px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - color: var(--intergalactic-badge-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-badge-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); } SHighlightedBadge[use='accent'] { diff --git a/semcore/feature-highlight/src/components/button/button.shadow.css b/semcore/feature-highlight/src/components/button/button.shadow.css index 0b1d8bf3df..fd4eeab383 100644 --- a/semcore/feature-highlight/src/components/button/button.shadow.css +++ b/semcore/feature-highlight/src/components/button/button.shadow.css @@ -1,5 +1,5 @@ SHighlightedButton[theme='primary-highlighted'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); 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)), @@ -10,13 +10,13 @@ SHighlightedButton[theme='primary-highlighted'] { transition: background-position-x 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); background-position-x: 1%; } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); 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%; } diff --git a/semcore/feature-highlight/src/components/notice/notice.shadow.css b/semcore/feature-highlight/src/components/notice/notice.shadow.css index 75b77df0b4..fb5b815e74 100644 --- a/semcore/feature-highlight/src/components/notice/notice.shadow.css +++ b/semcore/feature-highlight/src/components/notice/notice.shadow.css @@ -21,10 +21,10 @@ SHighlightedNotice[beforeVisibility] { } & SCloseIcon { - color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.003 153.3)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.025 225)); &:hover { - color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.53 0.004 149.6)); + color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.53 0.023 225)); } } } diff --git a/semcore/feature-highlight/src/components/switch/switch.shadow.css b/semcore/feature-highlight/src/components/switch/switch.shadow.css index 4db8d1c773..0381512764 100644 --- a/semcore/feature-highlight/src/components/switch/switch.shadow.css +++ b/semcore/feature-highlight/src/components/switch/switch.shadow.css @@ -26,7 +26,7 @@ SToggle { } SToggle[checked] { - color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); + color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 225)); 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))); } diff --git a/semcore/feature-popover/src/style/feature-popover.shadow.css b/semcore/feature-popover/src/style/feature-popover.shadow.css index 2b0f56c230..7231ef72d0 100644 --- a/semcore/feature-popover/src/style/feature-popover.shadow.css +++ b/semcore/feature-popover/src/style/feature-popover.shadow.css @@ -5,16 +5,16 @@ SFeaturePopover { padding-left: var(--intergalactic-spacing-content-padding-large, 16px); border-radius: var(--intergalactic-popper-rounded, 6px); box-sizing: border-box; - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); position: relative; &[theme='accent'] { background-color: var(--intergalactic-feature-popover-bg-accent, oklch(0.92 0.052 303.1)); - color: var(--intergalactic-feature-popover-text, oklch(0.23 0.01 140)); + color: var(--intergalactic-feature-popover-text, oklch(0.23 0.01 225)); } &[theme='neutral'] { - background-color: var(--intergalactic-feature-popover-bg-neutral, oklch(0.23 0.01 140)); - color: var(--intergalactic-feature-popover-text-invert, oklch(0.999 0.001 180 / 0.949)); + background-color: var(--intergalactic-feature-popover-bg-neutral, oklch(0.23 0.01 225)); + color: var(--intergalactic-feature-popover-text-invert, oklch(0.993 0.005 215.6 / 0.956)); } } diff --git a/semcore/feedback-form/src/style/checkbox-button.shadow.css b/semcore/feedback-form/src/style/checkbox-button.shadow.css index 17e6ac88bd..5429498dc4 100644 --- a/semcore/feedback-form/src/style/checkbox-button.shadow.css +++ b/semcore/feedback-form/src/style/checkbox-button.shadow.css @@ -1,7 +1,7 @@ SCheckboxButton { margin-top: var(--intergalactic-spacing-content-gap-large, 8px); background-color: var(--intergalactic-control-checkbox-button-bg-normal, transparent); - border: 1px solid var(--intergalactic-control-checkbox-button-border, oklch(0.137 0.026 175.7 / 0.161)); + border: 1px solid var(--intergalactic-control-checkbox-button-border, oklch(0.324 0.062 225.5 / 0.189)); border-radius: var(--intergalactic-control-rounded, 6px); label { @@ -13,14 +13,14 @@ SCheckboxButton { SCheckboxButton:hover, SCheckboxButton[checked] { cursor: pointer; - background-color: var(--intergalactic-control-checkbox-button-bg-hover, oklch(0.177 0.033 175.6 / 0.042)); + background-color: var(--intergalactic-control-checkbox-button-bg-hover, oklch(0.363 0.068 222.8 / 0.05)); } SCheckboxButton[checked] { - border-color: var(--intergalactic-control-checkbox-button-border-selected, oklch(0.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-control-checkbox-button-border-selected, oklch(0.324 0.062 225.5 / 0.189)); } SCheckboxButton[checked]:hover { - background-color: var(--intergalactic-control-checkbox-button-bg-selected-hover, oklch(0.176 0.033 175.6 / 0.056)); + background-color: var(--intergalactic-control-checkbox-button-bg-selected-hover, oklch(0.351 0.065 223 / 0.066)); } diff --git a/semcore/feedback-form/src/style/slider-rating.shadow.css b/semcore/feedback-form/src/style/slider-rating.shadow.css index 7bf4720a7d..8e36a4ac7c 100644 --- a/semcore/feedback-form/src/style/slider-rating.shadow.css +++ b/semcore/feedback-form/src/style/slider-rating.shadow.css @@ -19,10 +19,10 @@ SStar[filled]:active { } SStar path { - fill: var(--intergalactic-control-slider-rating-icon, oklch(0.092 0.024 152.2 / 0.526)); + fill: var(--intergalactic-control-slider-rating-icon, oklch(0.229 0.046 229.9 / 0.58)); } SStar[filled] path { stroke-width: 0; - fill: var(--intergalactic-control-slider-rating-icon-hover-active, oklch(0.22 0.01 140)); + fill: var(--intergalactic-control-slider-rating-icon-hover-active, oklch(0.22 0.01 225)); } diff --git a/semcore/flags/src/style/flags.shadow.css b/semcore/flags/src/style/flags.shadow.css index beea1d4007..5306d0f258 100644 --- a/semcore/flags/src/style/flags.shadow.css +++ b/semcore/flags/src/style/flags.shadow.css @@ -12,7 +12,7 @@ SFlags { display: block; width: 14px; height: 11px; - background-color: var(--intergalactic-bg-secondary-neutral-active, oklch(0.96 0.001 180)); + background-color: var(--intergalactic-bg-secondary-neutral-active, oklch(0.96 0.005 215.6)); z-index: -1; } } @@ -21,7 +21,7 @@ SFlags[data-capital-letters] { display: inline-flex; justify-content: center; align-items: center; - background: var(--intergalactic-bg-primary-neutral-active, oklch(0.96 0.001 180)); + background: var(--intergalactic-bg-primary-neutral-active, oklch(0.96 0.005 215.6)); &::before { content: attr(data-capital-letters); @@ -30,6 +30,6 @@ SFlags[data-capital-letters] { font-size: calc(var(--intergalactic-fs-50, 10px) - 2px); line-height: normal; font-weight: var(--intergalactic-bold, 700); - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); } } diff --git a/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css b/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css index b2c04bcda1..bdef46a0e8 100644 --- a/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css +++ b/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css @@ -38,7 +38,7 @@ SFullscreenOverlay { font-size: var(--intergalactic-fs-500, 24px); line-height: var(--intergalactic-lh-500, 1.1667); font-weight: var(--intergalactic-semi-bold, 600); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } SHeader { @@ -51,12 +51,12 @@ SFullscreenOverlay { padding-bottom: var(--intergalactic-spacing-content-padding-large, 16px); padding-right: 72px; padding-top: var(--intergalactic-spacing-content-padding-xxlarge, 40px); - border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); } SFooter { min-height: 52px; - border-top: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border-top: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); padding: var(--intergalactic-spacing-content-padding-medium, 12px) var(--intergalactic-spacing-content-padding-xxlarge, 40px); justify-content: center; align-items: center; diff --git a/semcore/inline-input/src/style/inline-input.shadow.css b/semcore/inline-input/src/style/inline-input.shadow.css index c43321a6f2..77477ca94f 100644 --- a/semcore/inline-input/src/style/inline-input.shadow.css +++ b/semcore/inline-input/src/style/inline-input.shadow.css @@ -19,11 +19,11 @@ SInlineInput { } SCancelIcon:not([color]) { - color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.003 169.6)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.02 220.2)); } SCancelIcon:not([color]):hover { - color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.003 159.3)); + color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.024 223.6)); } SValue { @@ -36,7 +36,7 @@ SInlineInput { padding: var(--intergalactic-spacing-1x, 4px); border: none; box-sizing: border-box; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); font-size: inherit; line-height: 1.2; text-overflow: ellipsis; @@ -46,7 +46,7 @@ SInlineInput { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; - text-decoration-color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + text-decoration-color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); text-underline-offset: 17%; &:focus, &:focus-visible { @@ -54,7 +54,7 @@ SInlineInput { } &::placeholder { - color: var(--intergalactic-text-placeholder, oklch(0.109 0.023 165.5 / 0.337)); + color: var(--intergalactic-text-placeholder, oklch(0.282 0.055 228.7 / 0.386)); } &[disabled] { @@ -95,7 +95,7 @@ SUnderline { } SInlineInput:hover:not(:focus-within):not([disabled]) SUnderline { - background-color: var(--intergalactic-control-secondary-neutral, oklch(0.176 0.033 175.6 / 0.056)); + background-color: var(--intergalactic-control-secondary-neutral, oklch(0.351 0.065 223 / 0.066)); } SInlineInput:hover:not(:focus-within):not([disabled]) SAddon, @@ -109,7 +109,7 @@ SAddon { align-items: center; flex: 0 0 auto; height: 100%; - color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.003 169.6)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.02 220.2)); padding: 0 var(--intergalactic-spacing-content-gap-small, 4px); } diff --git a/semcore/input-mask/src/style/input-mask.shadow.css b/semcore/input-mask/src/style/input-mask.shadow.css index 7b3e16f1a1..85cd93e891 100644 --- a/semcore/input-mask/src/style/input-mask.shadow.css +++ b/semcore/input-mask/src/style/input-mask.shadow.css @@ -11,7 +11,7 @@ SMask { letter-spacing: 0.1em; text-overflow: inherit; white-space: nowrap; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } SMask[data-neighbor-location='left'], @@ -28,7 +28,7 @@ SMaskHidden:before { } SPlaceholder { - color: var(--intergalactic-text-placeholder, oklch(0.109 0.023 165.5 / 0.337)); + color: var(--intergalactic-text-placeholder, oklch(0.282 0.055 228.7 / 0.386)); } SMaskHidden:before, diff --git a/semcore/input-number/src/style/input-number.shadow.css b/semcore/input-number/src/style/input-number.shadow.css index 4352460477..8f446e0192 100644 --- a/semcore/input-number/src/style/input-number.shadow.css +++ b/semcore/input-number/src/style/input-number.shadow.css @@ -18,7 +18,7 @@ SUp, SDown { padding: 0; width: 16px; - color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.003 169.6)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.02 220.2)); box-sizing: border-box; display: inline-flex; justify-content: center; @@ -31,7 +31,7 @@ SDown { } &:hover { - color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.003 159.3)); + color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.024 223.6)); } } diff --git a/semcore/input-tags/src/style/input-tag.shadow.css b/semcore/input-tags/src/style/input-tag.shadow.css index 4ce8540053..ed8bfd4110 100644 --- a/semcore/input-tags/src/style/input-tag.shadow.css +++ b/semcore/input-tags/src/style/input-tag.shadow.css @@ -11,8 +11,8 @@ SInputTags[disabled] { } SInputTags SContainer:focus SOutline { - border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); - box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469)); + border-color: var(--intergalactic-border-info-active, oklch(0.23 0.01 225)); + box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(from oklch(0.23 0.01 225) l c h / 0.5)); } SInputTags SContainer:focus:has(SOutline)::after { diff --git a/semcore/input/src/style/input.shadow.css b/semcore/input/src/style/input.shadow.css index 38f34c80dc..89e2ba9324 100644 --- a/semcore/input/src/style/input.shadow.css +++ b/semcore/input/src/style/input.shadow.css @@ -37,18 +37,18 @@ SValue { padding: 0; border: none; box-sizing: border-box; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); font-size: inherit; text-overflow: ellipsis; font-family: inherit; background: transparent; &::placeholder { - color: var(--intergalactic-text-placeholder, oklch(0.109 0.023 165.5 / 0.337)); + color: var(--intergalactic-text-placeholder, oklch(0.282 0.055 228.7 / 0.386)); } &:not(:disabled):read-only~SOutline { - background: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180)); + background: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.003 215)); } &:disabled { @@ -85,14 +85,14 @@ SAddon { flex: 0 0 auto; padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px); height: 100%; - color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.003 169.6)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.02 220.2)); } SAddon[interactive] { cursor: pointer; &:hover { - color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.003 159.3)); + color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.024 223.6)); } } @@ -140,7 +140,7 @@ SInput:has(SValue:focus-visible) { SInput[state='normal'] { & SOutline { - border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); } &:has(SValue:focus-visible) SOutline { @@ -148,7 +148,7 @@ SInput[state='normal'] { outline-offset: 0; transition-property: outline-color, outline-width; } - border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); + border-color: var(--intergalactic-border-info-active, oklch(0.23 0.01 225)); } } diff --git a/semcore/link/src/style/link.shadow.css b/semcore/link/src/style/link.shadow.css index 5bbca32e0a..cd3a3490fb 100644 --- a/semcore/link/src/style/link.shadow.css +++ b/semcore/link/src/style/link.shadow.css @@ -20,16 +20,16 @@ SLink { } &[theme='default'] { - color: var(--intergalactic-text-link-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-link-primary, oklch(0.23 0.01 225)); & SText { - text-decoration-color: var(--intergalactic-text-link-primary-underline, oklch(0.86 0.002 174.1)); + text-decoration-color: var(--intergalactic-text-link-primary-underline, oklch(0.86 0.015 218.5)); } &[active], &:hover, &:active { - color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.01 225)); & SText { text-decoration-color: currentColor; @@ -37,7 +37,7 @@ SLink { } } &[theme='light'] { - color: var(--intergalactic-text-link-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-link-secondary, oklch(0.247 0.049 230.2 / 0.524)); & SText { text-decoration-color: transparent; @@ -46,7 +46,7 @@ SLink { &[active], &:hover, &:active { - color: var(--intergalactic-text-link-secondary-hover-active, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-link-secondary-hover-active, oklch(0.247 0.049 230.2 / 0.524)); & SText { text-decoration-color: currentColor; @@ -71,16 +71,16 @@ SLink { } } &[theme='invert'] { - color: var(--intergalactic-text-link-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-link-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); & SText { - text-decoration-color: var(--intergalactic-text-link-primary-underline, oklch(0.86 0.002 174.1)); + text-decoration-color: var(--intergalactic-text-link-primary-underline, oklch(0.86 0.015 218.5)); } &[active], &:hover, &:active { - color: var(--intergalactic-text-link-primary-invert-hover-active, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-link-primary-invert-hover-active, oklch(0.993 0.005 215.6 / 0.956)); & SText { text-decoration-color: currentColor; diff --git a/semcore/mini-chart/src/component/score/line.shadow.css b/semcore/mini-chart/src/component/score/line.shadow.css index a5ffa2e1fd..9fa91b8447 100644 --- a/semcore/mini-chart/src/component/score/line.shadow.css +++ b/semcore/mini-chart/src/component/score/line.shadow.css @@ -2,7 +2,7 @@ SLineGauge { height: 8px; - background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.001 180))); + background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 215.6))); border-radius: var(--intergalactic-chart-rounded, 2px); overflow: hidden; position: relative; @@ -18,7 +18,7 @@ SLineValue[percent] { } SLineValue[color], SLineSegmentItem[color] { - background-color: var(--color, var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140))); + background-color: var(--color, var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225))); } SLineGauge[segments] { @@ -48,7 +48,7 @@ SLineSegmentItem { } SAnimationLine { - background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.001 180)); + background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 215.6)); transition: all var(--intergalactic-duration-extra-slow, 500) ease-in-out; animation-name: move-line; animation-duration: 0.5s; diff --git a/semcore/mini-chart/src/styles/line.shadow.css b/semcore/mini-chart/src/styles/line.shadow.css index 5834eae0df..3a7c3dbd3a 100644 --- a/semcore/mini-chart/src/styles/line.shadow.css +++ b/semcore/mini-chart/src/styles/line.shadow.css @@ -2,7 +2,7 @@ SLineGauge { height: 8px; - background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.001 180))); + background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 215.6))); border-radius: var(--intergalactic-chart-rounded, 2px); overflow: hidden; position: relative; @@ -18,7 +18,7 @@ SLineValue[percent] { } SLineValue[color], SLineSegmentItem[color] { - background-color: var(--color, var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140))); + background-color: var(--color, var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225))); } SLineGauge[segments] { @@ -48,7 +48,7 @@ SLineSegmentItem { } SAnimationLine { - background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.001 180)); + background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 215.6)); transition: all var(--intergalactic-duration-extra-slow, 500) ease-in-out; animation-name: move-line; animation-duration: 0.5s; diff --git a/semcore/modal/src/style/modal.shadow.css b/semcore/modal/src/style/modal.shadow.css index 3ad8867806..002a3f2f7e 100644 --- a/semcore/modal/src/style/modal.shadow.css +++ b/semcore/modal/src/style/modal.shadow.css @@ -5,15 +5,15 @@ SWindow { box-sizing: border-box; margin: auto; padding: var(--intergalactic-spacing-content-padding-xxlarge, 40px); - box-shadow: var(--intergalactic-box-shadow-modal, 0px 1px 5px 0px oklch(0.176 0.033 175.7 / 0.07)); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + box-shadow: var(--intergalactic-box-shadow-modal, 0px 1px 5px 0px oklch(0.344 0.064 223.3 / 0.081)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); &:focus { outline: none; } STitle { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); font-size: var(--intergalactic-fs-500, 24px); line-height: var(--intergalactic-lh-500, 1.1667); font-weight: var(--intergalactic-semi-bold, 600); @@ -61,12 +61,12 @@ SOverlay { left: 0; right: 0; margin: 0; - background: var(--intergalactic-overlay-primary, oklch(0.109 0.023 165.5 / 0.337)); + background: var(--intergalactic-overlay-primary, oklch(from oklch(0.46 0.02 225) l c h / 0.4)); overflow: auto; -webkit-overflow-scrolling: touch; & SOverlay { - background: var(--intergalactic-overlay-secondary, oklch(0.118 0.023 170.1 / 0.262)); + background: var(--intergalactic-overlay-secondary, oklch(from oklch(0.46 0.02 225) l c h / 0.3)); } } diff --git a/semcore/notice-bubble/src/style/notice-bubble.shadow.css b/semcore/notice-bubble/src/style/notice-bubble.shadow.css index 4694b72dac..8b52646ea5 100644 --- a/semcore/notice-bubble/src/style/notice-bubble.shadow.css +++ b/semcore/notice-bubble/src/style/notice-bubble.shadow.css @@ -8,11 +8,11 @@ SView { border-radius: var(--intergalactic-popper-rounded, 6px); overflow: hidden; box-sizing: border-box; - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); gap: var(--intergalactic-spacing-content-gap-large, 8px); &[type='info'] { - background: var(--intergalactic-notice-bubble-bg-info, oklch(0.23 0.01 140)); + background: var(--intergalactic-notice-bubble-bg-info, oklch(0.23 0.01 225)); } &[type='warning'] { @@ -71,7 +71,7 @@ SNoticeBubble[disablePortal] { } SMessage a { - color: var(--intergalactic-text-link-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-text-link-primary-invert */ + color: var(--intergalactic-text-link-invert, oklch(0.993 0.005 215.6 / 0.956)); /* TODO: --intergalactic-text-link-primary-invert */ } SNoticeAriaLiveWrapper { diff --git a/semcore/notice/src/style/notice.shadow.css b/semcore/notice/src/style/notice.shadow.css index 7bd5fe1e54..8006f63edb 100644 --- a/semcore/notice/src/style/notice.shadow.css +++ b/semcore/notice/src/style/notice.shadow.css @@ -7,7 +7,7 @@ SNotice { border-style: solid; border-width: 1px; border-radius: var(--intergalactic-surface-rounded, 8px); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); gap: var(--intergalactic-spacing-content-gap-large, 8px); } @@ -16,10 +16,10 @@ SNotice[theme='info'] { border-color: var(--intergalactic-border-info, oklch(0.524 0.265 263 / 0.096)); & SCloseIcon { - color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.003 153.3)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.025 225)); &:hover { - color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.53 0.004 149.6)); + color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.53 0.023 225)); } } } @@ -64,14 +64,14 @@ SNotice[theme='success'] { } SNotice[theme='muted'] { - background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180)); - border-color: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.003 215)); + border-color: var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); & SCloseIcon { - color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.003 153.3)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.025 225)); &:hover { - color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.53 0.004 149.6)); + color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.53 0.023 225)); } } } @@ -111,7 +111,7 @@ SIllustration { } SLabel[theme='info'], SIcon[theme='info'] { - color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.003 153.3)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.025 225)); } SLabel[theme='danger'], SIcon[theme='danger'] { @@ -127,7 +127,7 @@ SLabel[theme='success'], SIcon[theme='success'] { } SLabel[theme='muted'], SIcon[theme='muted'] { - color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.003 153.3)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.025 225)); } SCloseIcon { diff --git a/semcore/pagination/src/style/pagination.shadow.css b/semcore/pagination/src/style/pagination.shadow.css index 1b003d0d09..212735fed2 100644 --- a/semcore/pagination/src/style/pagination.shadow.css +++ b/semcore/pagination/src/style/pagination.shadow.css @@ -22,7 +22,7 @@ SPrevPage { } SLabel { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } SLabel:not(:first-child) { @@ -40,13 +40,13 @@ STotalPages { STotalPagesLabel { margin-left: var(--intergalactic-spacing-content-gap-large, 8px); margin-right: var(--intergalactic-spacing-content-gap-small, 4px); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } STotalLastPages { font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); &[size='l'] { font-size: var(--intergalactic-fs-300, 16px); diff --git a/semcore/pills/src/style/pills.shadow.css b/semcore/pills/src/style/pills.shadow.css index 311286a7c7..796d2be9b1 100644 --- a/semcore/pills/src/style/pills.shadow.css +++ b/semcore/pills/src/style/pills.shadow.css @@ -4,7 +4,7 @@ SPills { padding: var(--intergalactic-spacing-content-padding-xxsmall, 2px); min-height: var(--intergalactic-form-control-m, 32px); border-radius: var(--intergalactic-pills-rounded, 6px); - background: var(--intergalactic-control-pills-bg-normal, oklch(0.176 0.033 175.6 / 0.056)); + background: var(--intergalactic-control-pills-bg-normal, oklch(0.351 0.065 223 / 0.066)); box-sizing: border-box; &[size='l'] { @@ -71,7 +71,7 @@ SPill { width: 100%; height: 100%; border-radius: var(--intergalactic-rounded-small, 4px); - background: var(--intergalactic-control-pills-bg-hover, oklch(0.176 0.033 175.7 / 0.084)); + background: var(--intergalactic-control-pills-bg-hover, oklch(0.339 0.063 223.5 / 0.097)); } } } @@ -117,7 +117,7 @@ SPillSeparator { width: 1px; height: calc(100% - var(--intergalactic-spacing-content-padding-xsmall-extended, 6px) * 2); - background-color: var(--intergalactic-control-pills-border, oklch(0.137 0.026 175.7 / 0.161)); + background-color: var(--intergalactic-control-pills-border, oklch(0.324 0.062 225.5 / 0.189)); &[size='l'] { height: calc(100% - var(--intergalactic-spacing-content-padding-small, 8px) * 2); @@ -141,17 +141,17 @@ SSegmentIndicator { transition: var(--global-speed); background: var(--intergalactic-control-pills-bg-selected, oklch(1 0 0)); - box-shadow: var(--intergalactic-box-shadow-control-elevated, 0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)); + box-shadow: var(--intergalactic-box-shadow-control-elevated, 0px 0px 1px 0px oklch(0.344 0.064 223.3 / 0.081), 0px 1px 3px 0px oklch(0.344 0.064 223.3 / 0.081)); border-radius: var(--intergalactic-rounded-small, 4px); } SText { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); min-width: 0.8em; } SAddon { - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); display: inline-flex; align-items: center; justify-content: center; diff --git a/semcore/product-head/src/style/title.shadow.css b/semcore/product-head/src/style/title.shadow.css index facf6b8f95..bb881d0c7f 100644 --- a/semcore/product-head/src/style/title.shadow.css +++ b/semcore/product-head/src/style/title.shadow.css @@ -8,7 +8,7 @@ STitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); margin: 0; } diff --git a/semcore/progress-bar/src/style/progress-bar.shadow.css b/semcore/progress-bar/src/style/progress-bar.shadow.css index 48abbe6dac..0030638eeb 100644 --- a/semcore/progress-bar/src/style/progress-bar.shadow.css +++ b/semcore/progress-bar/src/style/progress-bar.shadow.css @@ -62,7 +62,7 @@ SValue[size='l'] { SProgressBar[animation] { background-image: var(--intergalactic-progress-bar-pattern-gradient, - linear-gradient(-45deg, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 25%, oklch(0.157 0.029 176 / 0.11) 0%, oklch(0.157 0.029 176 / 0.11) 50%, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 0%, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 75%, oklch(0.157 0.029 176 / 0.11) 0%)); + linear-gradient(-45deg, oklch(from oklch(0.332 0.062 224.2 / 0.128) l c h / 0.18) 25%, oklch(0.332 0.062 224.2 / 0.128) 0%, oklch(0.332 0.062 224.2 / 0.128) 50%, oklch(from oklch(0.332 0.062 224.2 / 0.128) l c h / 0.18) 0%, oklch(from oklch(0.332 0.062 224.2 / 0.128) l c h / 0.18) 75%, oklch(0.332 0.062 224.2 / 0.128) 0%)); animation-name: loading; animation-timing-function: linear; animation-iteration-count: infinite; @@ -74,16 +74,16 @@ SProgressBar[animation] { } SProgressBar[theme='default'] { - background-color: var(--intergalactic-progress-bar-bg, oklch(0.157 0.029 176 / 0.11)); + background-color: var(--intergalactic-progress-bar-bg, oklch(0.332 0.062 224.2 / 0.128)); SValue { background-image: var(--intergalactic-progress-bar-value-gradient, - linear-gradient(-45deg, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 25%, oklch(0.22 0.01 140) 0%, oklch(0.22 0.01 140) 50%, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 0%, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 75%, oklch(0.22 0.01 140) 0%)); + linear-gradient(-45deg, oklch(from oklch(0.22 0.01 225) l c h / 0.78) 25%, oklch(0.22 0.01 225) 0%, oklch(0.22 0.01 225) 50%, oklch(from oklch(0.22 0.01 225) l c h / 0.78) 0%, oklch(from oklch(0.22 0.01 225) l c h / 0.78) 75%, oklch(0.22 0.01 225) 0%)); } } SProgressBar[theme='invert'] { - background-color: var(--intergalactic-progress-bar-bg-invert, oklch(0.987 0.023 140 / 0.212)); + background-color: var(--intergalactic-progress-bar-bg-invert, oklch(0.927 0.047 225.1 / 0.231)); SValue { background-image: var(--intergalactic-progress-bar-value-gradient-invert, @@ -92,7 +92,7 @@ SProgressBar[theme='invert'] { } SProgressBar[theme='brand'] { - background-color: var(--intergalactic-progress-bar-bg, oklch(0.157 0.029 176 / 0.11)); + background-color: var(--intergalactic-progress-bar-bg, oklch(0.332 0.062 224.2 / 0.128)); SValue { background-image: var(--intergalactic-progress-bar-value-gradient-invert, diff --git a/semcore/radio/src/style/radio.shadow.css b/semcore/radio/src/style/radio.shadow.css index 100543ffde..414769f04f 100644 --- a/semcore/radio/src/style/radio.shadow.css +++ b/semcore/radio/src/style/radio.shadow.css @@ -5,7 +5,7 @@ SRadio { SText { margin-left: var(--intergalactic-spacing-content-gap-medium, 6px); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } &[size='l'] { @@ -89,7 +89,7 @@ SValue[size='l'] { } SValue[state='normal']::before { - border-color: var(--intergalactic-control-radio-border, oklch(0.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-control-radio-border, oklch(0.324 0.062 225.5 / 0.189)); } SValue[state='invalid']::before { @@ -117,8 +117,8 @@ SControl:focus-visible+SValue[state='normal']::before { SControl:checked~SValue::before, SControl:checked:focus-visible~SValue::before { - border-color: var(--intergalactic-control-radio-bg-selected, oklch(0.23 0.01 140)); - background-color: var(--intergalactic-control-radio-bg-selected, oklch(0.23 0.01 140)); + border-color: var(--intergalactic-control-radio-bg-selected, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-control-radio-bg-selected, oklch(0.23 0.01 225)); } SControl:focus-visible+SValue[state='invalid']::before { diff --git a/semcore/select/src/style/select.shadow.css b/semcore/select/src/style/select.shadow.css index 9a76fa6398..3370afff17 100644 --- a/semcore/select/src/style/select.shadow.css +++ b/semcore/select/src/style/select.shadow.css @@ -13,7 +13,7 @@ SOptionCheckbox { right: 0; bottom: 0; background: var(--intergalactic-control-checkbox-bg-normal, oklch(1 0 0)); - border: 1px solid var(--intergalactic-control-checkbox-border, oklch(0.137 0.026 175.7 / 0.161)); + border: 1px solid var(--intergalactic-control-checkbox-border, oklch(0.324 0.062 225.5 / 0.189)); border-radius: var(--intergalactic-addon-rounded, 4px); } @@ -48,13 +48,13 @@ SOptionCheckbox[size='l'][selected]::after { } SOptionCheckbox[selected]:before { - background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140)); - border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 225)); + border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 225)); } SOptionCheckbox[indeterminate]:before { - background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140)); - border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 225)); + border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 225)); } SOptionCheckbox[theme]:before { @@ -68,10 +68,10 @@ SOptionCheckbox[theme][indeterminate]:before { } SOptionCheckbox[selected] { - background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.176 0.033 175.6 / 0.056)); + background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.351 0.065 223 / 0.066)); &:hover { - background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.176 0.033 175.7 / 0.084)); + background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.339 0.063 223.5 / 0.097)); } } diff --git a/semcore/side-panel/src/style/side-panel.shadow.css b/semcore/side-panel/src/style/side-panel.shadow.css index 50edbf1449..7ee590d247 100644 --- a/semcore/side-panel/src/style/side-panel.shadow.css +++ b/semcore/side-panel/src/style/side-panel.shadow.css @@ -7,9 +7,9 @@ SOverlay { margin: 0; display: flex; overflow: hidden; - background: var(--intergalactic-overlay-primary, oklch(0.109 0.023 165.5 / 0.337)); + background: var(--intergalactic-overlay-primary, oklch(from oklch(0.46 0.02 225) l c h / 0.4)); -webkit-overflow-scrolling: touch; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } SPanel { @@ -26,7 +26,7 @@ SPanel { } SPanel[placement='top'] { - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); width: 100%; margin-bottom: auto; top: 0; @@ -34,7 +34,7 @@ SPanel[placement='top'] { } SPanel[placement='right'] { - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); height: 100vh; margin-left: auto; top: 0; @@ -42,7 +42,7 @@ SPanel[placement='right'] { } SPanel[placement='bottom'] { - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); width: 100%; margin-top: auto; bottom: 0; @@ -50,7 +50,7 @@ SPanel[placement='bottom'] { } SPanel[placement='left'] { - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); height: 100vh; margin-right: auto; top: 0; @@ -74,7 +74,7 @@ SHeader { padding-right: var(--intergalactic-spacing-14x, 56px); padding-top: var(--intergalactic-spacing-content-padding-xsmall, 4px); min-height: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-3x, 12px)); - border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); box-sizing: border-box; flex-shrink: 0; flex-direction: column; @@ -87,7 +87,7 @@ SFooter { justify-content: center; align-items: center; gap: var(--intergalactic-spacing-content-gap-xlarge, 12px); - border-top: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border-top: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); } SBody { diff --git a/semcore/skeleton/src/style/chart.shadow.css b/semcore/skeleton/src/style/chart.shadow.css index 7e07f6e0d8..22d32938e3 100644 --- a/semcore/skeleton/src/style/chart.shadow.css +++ b/semcore/skeleton/src/style/chart.shadow.css @@ -2,11 +2,11 @@ SChartSkeleton { height: 200px; width: 100%; mask-image: var(--bgPattern); - background-color: var(--intergalactic-skeleton-bg, oklch(0.94 0.002 180)); + background-color: var(--intergalactic-skeleton-bg, oklch(0.94 0.007 216.1)); } SChartSkeleton[theme='invert'] { - background-color: var(--intergalactic-skeleton-bg-invert, oklch(0.5 0.004 147.4)); + background-color: var(--intergalactic-skeleton-bg-invert, oklch(0.5 0.022 225)); } SChartSkeleton[bgPosition] { diff --git a/semcore/skeleton/src/style/skeleton.shadow.css b/semcore/skeleton/src/style/skeleton.shadow.css index f902e73a4c..4a4369072b 100644 --- a/semcore/skeleton/src/style/skeleton.shadow.css +++ b/semcore/skeleton/src/style/skeleton.shadow.css @@ -21,11 +21,11 @@ SSkeleton { } SSkeletonSVG[theme='default'] { - fill: var(--intergalactic-skeleton-bg, oklch(0.94 0.002 180)); + fill: var(--intergalactic-skeleton-bg, oklch(0.94 0.007 216.1)); } SSkeletonSVG[theme='invert'] { - fill: var(--intergalactic-skeleton-bg-invert, oklch(0.5 0.004 147.4)); + fill: var(--intergalactic-skeleton-bg-invert, oklch(0.5 0.022 225)); } SText { diff --git a/semcore/slider/src/style/slider.shadow.css b/semcore/slider/src/style/slider.shadow.css index a3e2ffff2a..f0796a86b9 100644 --- a/semcore/slider/src/style/slider.shadow.css +++ b/semcore/slider/src/style/slider.shadow.css @@ -15,11 +15,11 @@ SSlider { height: 4px; width: 100%; border-radius: var(--intergalactic-progress-bar-rounded, 6px); - background-color: var(--intergalactic-control-slider-bar-bg, oklch(0.157 0.029 176 / 0.11)); + background-color: var(--intergalactic-control-slider-bar-bg, oklch(0.332 0.062 224.2 / 0.128)); } &:hover:before { - background-color: var(--intergalactic-control-slider-bar-bg-hover, oklch(0.92 0.002 178.5)); + background-color: var(--intergalactic-control-slider-bar-bg-hover, oklch(0.92 0.009 216.7)); } &:focus-visible SKnob { @@ -49,7 +49,7 @@ SBar { border-radius: var(--intergalactic-progress-bar-rounded, 6px); box-sizing: border-box; background-size: 12px; - background-color: var(--intergalactic-control-slider-bar-value-bg, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-slider-bar-value-bg, oklch(0.23 0.01 225)); cursor: pointer; transition: calc(var(--intergalactic-duration-control, 200) * 1ms) width ease-in-out; } @@ -62,7 +62,7 @@ SKnob { border-radius: 50%; box-sizing: border-box; background-color: var(--intergalactic-control-slider-knob-bg, #ffffff); - border: 5px solid var(--intergalactic-control-slider-knob-border, oklch(0.23 0.01 140)); + border: 5px solid var(--intergalactic-control-slider-knob-border, oklch(0.23 0.01 225)); cursor: pointer; transform: translate(-50%, -50%); transition-duration: calc(var(--intergalactic-duration-control, 200) * 1ms); @@ -70,7 +70,7 @@ SKnob { transition-timing-function: ease-in-out; &:hover, &:active { - border-color: var(--intergalactic-control-slider-knob-border-hover, oklch(0.32 0.007 140)); + border-color: var(--intergalactic-control-slider-knob-border-hover, oklch(0.32 0.014 225)); transform: translate(-50%, -50%) scale(1.2); } } @@ -82,7 +82,7 @@ SInput { } SSliderOptions { - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); font-size: var(--intergalactic-fs-200, 14px); font-weight: var(--intergalactic-regular, 400); line-height: var(--intergalactic-lh-200, 1.4286); diff --git a/semcore/spin-container/src/style/spin-container.shadow.css b/semcore/spin-container/src/style/spin-container.shadow.css index ac7b43ead2..8bb37da37b 100644 --- a/semcore/spin-container/src/style/spin-container.shadow.css +++ b/semcore/spin-container/src/style/spin-container.shadow.css @@ -23,7 +23,7 @@ SOverlay { } SOverlay[theme='invert'] { - background-color: var(--intergalactic-overlay-primary, oklch(0.109 0.023 165.5 / 0.337)); + background-color: var(--intergalactic-overlay-primary, oklch(from oklch(0.46 0.02 225) l c h / 0.4)); } SOverlay[theme='default'], SOverlay[theme='dark'] { diff --git a/semcore/spin/src/style/spin.shadow.css b/semcore/spin/src/style/spin.shadow.css index 1cd9484e55..f04d500899 100644 --- a/semcore/spin/src/style/spin.shadow.css +++ b/semcore/spin/src/style/spin.shadow.css @@ -44,11 +44,11 @@ SSpin[theme] SCircle { } SSpin[theme='default'] SCircle, SSpin[theme='dark'] SCircle { - stroke: var(--intergalactic-spin-bg, oklch(0.8 0.003 169.6)); + stroke: var(--intergalactic-spin-bg, oklch(0.8 0.02 220.2)); } SSpin[theme='invert'] { - stroke: var(--intergalactic-spin-bg-invert, oklch(0.85 0.002 173.3)); + stroke: var(--intergalactic-spin-bg-invert, oklch(0.85 0.016 218.8)); } SSpin[centered] { diff --git a/semcore/switch/src/style/switch.shadow.css b/semcore/switch/src/style/switch.shadow.css index dd6fec2bb0..5e16d00f8a 100644 --- a/semcore/switch/src/style/switch.shadow.css +++ b/semcore/switch/src/style/switch.shadow.css @@ -76,9 +76,9 @@ SSwitch[disabled] { } SToggle { - background: var(--intergalactic-control-switch-bg, oklch(0.176 0.033 175.6 / 0.056)); + background: var(--intergalactic-control-switch-bg, oklch(0.351 0.065 223 / 0.066)); position: relative; - color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.003 169.6)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.02 220.2)); cursor: pointer; display: flex; align-items: center; @@ -91,8 +91,8 @@ SToggle { } SToggle[checked][theme='info'] { - color: var(--intergalactic-control-switch-bg-info-active, oklch(0.23 0.01 140)); - background-color: var(--intergalactic-control-switch-bg-info-active, oklch(0.23 0.01 140)); + color: var(--intergalactic-control-switch-bg-info-active, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-control-switch-bg-info-active, oklch(0.23 0.01 225)); } SToggle[checked][theme='success'] { @@ -132,7 +132,7 @@ SSlider { left, calc(var(--intergalactic-duration-switch, 100) * 1ms) ease-in-out; - box-shadow: var(--intergalactic-box-shadow-control-elevated, 0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)); + box-shadow: var(--intergalactic-box-shadow-control-elevated, 0px 0px 1px 0px oklch(0.344 0.064 223.3 / 0.081), 0px 1px 3px 0px oklch(0.344 0.064 223.3 / 0.081)); border-radius: 50%; @@ -167,28 +167,28 @@ SAddon { } SAddon[neighborLocation='right'] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } SAddon[neighborLocation='left'] { - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); } SAddon[neighborLocation='left']:nth-child(2) { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } SSwitch[checked] { & SAddon[neighborLocation='right'] { - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); } & SAddon[neighborLocation='right']:nth-last-child(2) { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } & SAddon[neighborLocation='left'] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } } diff --git a/semcore/tab-line/src/style/tab-line.shadow.css b/semcore/tab-line/src/style/tab-line.shadow.css index b3ca38e3b8..ad5c42d3f1 100644 --- a/semcore/tab-line/src/style/tab-line.shadow.css +++ b/semcore/tab-line/src/style/tab-line.shadow.css @@ -13,7 +13,7 @@ STabLine { } STabLine[underlined] { - border-bottom: 1px solid var(--intergalactic-control-tab-line-border, oklch(0.137 0.026 175.7 / 0.161)); + border-bottom: 1px solid var(--intergalactic-control-tab-line-border, oklch(0.324 0.062 225.5 / 0.189)); } STabLineItem { @@ -37,7 +37,7 @@ STabLineItem { cursor: pointer; border: none; background: transparent; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); gap: var(--intergalactic-spacing-content-gap-medium, 6px); font-weight: var(--intergalactic-medium, 500); @@ -67,7 +67,7 @@ STabLineItem { } &:hover::before { - background-color: var(--intergalactic-control-tab-line-border-hover, oklch(0.137 0.026 175.7 / 0.161)); + background-color: var(--intergalactic-control-tab-line-border-hover, oklch(0.324 0.062 225.5 / 0.189)); transition-duration: calc(var(--intergalactic-duration-extra-fast, 100) * 1ms); } @@ -75,7 +75,7 @@ STabLineItem { bottom: -1px; height: 3px; transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms); - background-color: var(--intergalactic-control-tab-line-border-active, oklch(0.23 0.01 140)); + background-color: var(--intergalactic-control-tab-line-border-active, oklch(0.23 0.01 225)); } } @@ -83,7 +83,7 @@ SCaret { position: absolute; bottom: -1px; height: 3px; - background: var(--intergalactic-control-tab-line-border-active, oklch(0.23 0.01 140)); + background: var(--intergalactic-control-tab-line-border-active, oklch(0.23 0.01 225)); transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out; } diff --git a/semcore/tab-panel/src/style/tab-panel.shadow.css b/semcore/tab-panel/src/style/tab-panel.shadow.css index 184b62587e..4ef5fc7a1e 100644 --- a/semcore/tab-panel/src/style/tab-panel.shadow.css +++ b/semcore/tab-panel/src/style/tab-panel.shadow.css @@ -9,7 +9,7 @@ STabPanel { bottom: -1px; flex: 1; border-top: 1px solid transparent; - border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); } } @@ -20,7 +20,7 @@ STabPanelItem { gap: var(--intergalactic-spacing-content-gap-medium, 6px); min-width: 0; height: var(--intergalactic-form-control-m, 32px); - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); border: 1px solid transparent; border-bottom: none; border-radius: var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px) 0 0; @@ -52,7 +52,7 @@ STabPanelItem { } &:hover { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } &::after { @@ -61,7 +61,7 @@ STabPanelItem { left: -1px; bottom: 0px; width: calc(100% + 2px); - border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); } } @@ -77,8 +77,8 @@ STabPanelItem[disabled] { } STabPanelItem[selected] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); - border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + border-color: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); flex-shrink: 0; background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css index 2d1061f30d..08016e2e5c 100644 --- a/semcore/tag/src/style/tag.shadow.css +++ b/semcore/tag/src/style/tag.shadow.css @@ -170,7 +170,7 @@ STag[theme="secondary"], STagContainerClose[theme="secondary"] { color: var(--intergalactic-tag-secondary-text, #6a6c6a); background-color: var(--intergalactic-tag-secondary-bg-normal, #ffffff); - border-color: var(--intergalactic-tag-secondary-border, oklch(0.95 0.002 180)); + border-color: var(--intergalactic-tag-secondary-border, oklch(0.95 0.006 215.8)); &::before, &::after { @@ -188,7 +188,7 @@ STag[theme="additional"], STagContainerClose[theme="additional"] { color: var(--intergalactic-tag-additional-text, #6a6c6a); background-color: var(--intergalactic-tag-additional-bg-normal, oklch(1 0 0)); - border-color: var(--intergalactic-tag-additional-border, oklch(0.95 0.002 180)); + border-color: var(--intergalactic-tag-additional-border, oklch(0.95 0.006 215.8)); border-style: dashed; &::before, @@ -199,28 +199,28 @@ STagContainerClose[theme="additional"] { &[interactiveView]:hover, &[interactiveView]:active, &[active] { - background-color: var(--intergalactic-tag-additional-bg-hover-active, oklch(0.97 0.001 180)); + background-color: var(--intergalactic-tag-additional-bg-hover-active, oklch(0.97 0.004 215.3)); } } STag[theme="primary-invert"], STagContainerClose[theme="primary-invert"] { - background-color: var(--intergalactic-tag-primary-bg-invert-normal, oklch(0.969 0.057 140 / 0.118)); + background-color: var(--intergalactic-tag-primary-bg-invert-normal, oklch(0.916 0.055 225.3 / 0.127)); color: var(--intergalactic-tag-primary-text-invert, #ffffff); border-color: transparent; &[interactiveView]:hover, &[interactiveView]:active, &[active] { - background-color: var(--intergalactic-tag-primary-bg-invert-hover-active, oklch(0.99 0.017 140 / 0.242)); + background-color: var(--intergalactic-tag-primary-bg-invert-hover-active, oklch(0.928 0.046 225.1 / 0.264)); } } STag[theme="secondary-invert"], STagContainerClose[theme="secondary-invert"] { background-color: var(--intergalactic-tag-secondary-bg-invert-normal, transparent); - color: var(--intergalactic-tag-secondary-text-invert, oklch(0.997 0.004 165.9 / 0.684)); - border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.989 0.019 140 / 0.232)); + color: var(--intergalactic-tag-secondary-text-invert, oklch(0.959 0.028 221.4 / 0.721)); + border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.928 0.047 225.1 / 0.253)); &::before, &::after { @@ -230,15 +230,15 @@ STagContainerClose[theme="secondary-invert"] { &[interactiveView]:hover, &[interactiveView]:active, &[active] { - background-color: var(--intergalactic-tag-secondary-bg-invert-hover-active, oklch(0.98 0.036 140 / 0.164)); + background-color: var(--intergalactic-tag-secondary-bg-invert-hover-active, oklch(0.923 0.05 225.2 / 0.178)); } } STag[theme="additional-invert"], STagContainerClose[theme="additional-invert"] { background-color: var(--intergalactic-tag-additional-bg-invert-normal, transparent); - color: var(--intergalactic-tag-additional-text-invert, oklch(0.997 0.004 165.9 / 0.684)); - border-color: var(--intergalactic-tag-additional-border-invert, oklch(0.995 0.009 144.4 / 0.347)); + color: var(--intergalactic-tag-additional-text-invert, oklch(0.959 0.028 221.4 / 0.721)); + border-color: var(--intergalactic-tag-additional-border-invert, oklch(0.932 0.044 225.1 / 0.378)); border-style: dashed; &::before, @@ -249,7 +249,7 @@ STagContainerClose[theme="additional-invert"] { &[interactiveView]:hover, &[interactiveView]:active, &[active] { - background-color: var(--intergalactic-tag-additional-bg-invert-hover-active, oklch(0.98 0.036 140 / 0.164)); + background-color: var(--intergalactic-tag-additional-bg-invert-hover-active, oklch(0.923 0.05 225.2 / 0.178)); } } @@ -263,7 +263,7 @@ SText { SText:focus-visible { box-shadow: var( --intergalactic-keyboard-focus, - 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469) + 0px 0px 0px 3px oklch(from oklch(0.23 0.01 225) l c h / 0.5) ); z-index: 1; } diff --git a/semcore/textarea/src/style/textarea.shadow.css b/semcore/textarea/src/style/textarea.shadow.css index d83c85f7ba..25cc7f044e 100644 --- a/semcore/textarea/src/style/textarea.shadow.css +++ b/semcore/textarea/src/style/textarea.shadow.css @@ -1,7 +1,7 @@ STextarea { height: auto; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); - border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + border: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); border-radius: var(--intergalactic-control-rounded, 6px); width: 100%; box-sizing: border-box; @@ -10,7 +10,7 @@ STextarea { background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); &:read-only { - background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180)); + background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.003 215)); } &:disabled { @@ -18,7 +18,7 @@ STextarea { } &::placeholder { - color: var(--intergalactic-text-placeholder, oklch(0.109 0.023 165.5 / 0.337)); + color: var(--intergalactic-text-placeholder, oklch(0.282 0.055 228.7 / 0.386)); } } @@ -38,7 +38,7 @@ STextarea[size='l'] { STextarea[state='normal'] { &:focus { - border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); + border-color: var(--intergalactic-border-info-active, oklch(0.23 0.01 225)); @mixin focus-outline-mixin { outline-offset: 0; transition-property: outline-color, outline-width; diff --git a/semcore/time-picker/src/component/PickerFormat/picker-format.shadow.css b/semcore/time-picker/src/component/PickerFormat/picker-format.shadow.css index f72368fb84..43e864326b 100644 --- a/semcore/time-picker/src/component/PickerFormat/picker-format.shadow.css +++ b/semcore/time-picker/src/component/PickerFormat/picker-format.shadow.css @@ -19,7 +19,7 @@ SPickerFormat { user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); background-color: var(--intergalactic-control-tertiary-neutral, transparent); &::before { @@ -29,20 +29,20 @@ SPickerFormat { top: 50%; transform: translateY(-50%); width: 1px; - background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + background-color: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); transition: height calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-out; /* TODO: Sync with animationin FilterTrigger */ } &:hover { cursor: pointer; - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); - background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.177 0.033 175.6 / 0.042)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.363 0.068 222.8 / 0.05)); } &:active, &[active] { - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); - background-color: var(--intergalactic-control-tertiary-neutral-active, oklch(0.176 0.033 175.6 / 0.056)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + background-color: var(--intergalactic-control-tertiary-neutral-active, oklch(0.351 0.065 223 / 0.066)); } } diff --git a/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css b/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css index 3f57955d9b..be65859336 100644 --- a/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css +++ b/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css @@ -18,19 +18,19 @@ STimePickerWrapper { &:focus { outline: none; - background-color: var(--intergalactic-bg-highlight-focus, oklch(0.525 0.265 263 / 0.077)); + background-color: var(--intergalactic-bg-highlight-focus, oklch(0.508 0.293 286.9 / 0.067)); } } } STimePicker[disabled] { - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); cursor: default; pointer-events: none; } STimePickerSeparator { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } STimePickerSeparator[disabled] { diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css index 18eb37448e..15d0b18251 100644 --- a/semcore/tooltip/src/style/tooltip.shadow.css +++ b/semcore/tooltip/src/style/tooltip.shadow.css @@ -3,26 +3,26 @@ STooltip { padding: var(--intergalactic-spacing-content-padding-medium, 12px); border-radius: var(--intergalactic-popper-rounded, 6px); box-sizing: border-box; - color: var(--intergalactic-tooltip-text, oklch(0.23 0.01 140)); + color: var(--intergalactic-tooltip-text, oklch(0.23 0.01 225)); font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); word-wrap: break-word; max-width: 228px; font-weight: normal; white-space: normal; - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); } /* stylelint-disable-next-line no-duplicate-selectors */ STooltip { background-color: var(--intergalactic-tooltip-bg-default, oklch(1 0 0)); - border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + border: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); } STooltip[theme='invert'] { - color: var(--intergalactic-tooltip-text-invert, oklch(0.999 0.001 180 / 0.949)); - background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); - border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140)); + color: var(--intergalactic-tooltip-text-invert, oklch(0.993 0.005 215.6 / 0.956)); + background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 225)); + border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.015 225)); } STooltip[theme='warning'] { @@ -43,7 +43,7 @@ SArrow { /* stylelint-disable-next-line no-duplicate-selectors */ SArrow { - border-color: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + border-color: var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); /* stylelint-disable-next-line no-duplicate-selectors */ &:before { @@ -52,10 +52,10 @@ SArrow { } SArrow[theme='invert'] { - border-color: var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140)); + border-color: var(--intergalactic-tooltip-border-invert, oklch(0.35 0.015 225)); &::before { - border-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); + border-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 225)); } } diff --git a/semcore/typography/src/style/blockquote.shadow.css b/semcore/typography/src/style/blockquote.shadow.css index 05e54160d5..0d46d4d48f 100644 --- a/semcore/typography/src/style/blockquote.shadow.css +++ b/semcore/typography/src/style/blockquote.shadow.css @@ -4,7 +4,7 @@ SBlockquote { font-style: italic; font-size: var(--intergalactic-fs-400, 20px); line-height: var(--intergalactic-lh-400, 1.2); - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } SDoubleQuotation { @@ -15,13 +15,13 @@ SDoubleQuotation { /* disable-tokens-validator */ font-size: 68px; line-height: 52px; - color: var(--intergalactic-text-large-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-large-secondary, oklch(0.247 0.049 230.2 / 0.524)); } SAuthor { display: block; margin-top: var(--intergalactic-spacing-content-gap-xxlarge, 16px); - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); font-style: normal; font-size: var(--intergalactic-fs-300, 16px); line-height: var(--intergalactic-lh-300, 1.5); diff --git a/semcore/typography/src/style/list.shadow.css b/semcore/typography/src/style/list.shadow.css index ac1c1fc735..adbf17f1f5 100644 --- a/semcore/typography/src/style/list.shadow.css +++ b/semcore/typography/src/style/list.shadow.css @@ -23,6 +23,6 @@ SItem + SItem { SMarker { margin-right: var(--intergalactic-spacing-content-gap-large, 8px); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); line-height: normal; } diff --git a/semcore/typography/src/style/text.shadow.css b/semcore/typography/src/style/text.shadow.css index a5c6539d09..ab896cc003 100644 --- a/semcore/typography/src/style/text.shadow.css +++ b/semcore/typography/src/style/text.shadow.css @@ -5,15 +5,15 @@ SText { &[formatTags] { & abbr { - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); - text-decoration: underline dashed var(--intergalactic-text-hint, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + text-decoration: underline dashed var(--intergalactic-text-hint, oklch(0.247 0.049 230.2 / 0.524)); &:active, &:hover, &:focus { outline: none; - color: var(--intergalactic-text-hint-hover-active, oklch(0.095 0.024 154.8 / 0.492)); - text-decoration: underline dashed var(--intergalactic-text-hint-hover-active, oklch(0.095 0.024 154.8 / 0.492)); + color: var(--intergalactic-text-hint-hover-active, oklch(0.243 0.049 230.4 / 0.548)); + text-decoration: underline dashed var(--intergalactic-text-hint-hover-active, oklch(0.243 0.049 230.4 / 0.548)); } } @@ -22,7 +22,7 @@ SText { background: none; outline: none; text-decoration: none; - color: var(--intergalactic-text-link-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-link-primary, oklch(0.23 0.01 225)); border-bottom-width: 1px; border-bottom-style: solid; border-color: transparent; @@ -31,8 +31,8 @@ SText { &:hover { outline: none; text-decoration: none; - color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.01 140)); - border-color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.01 225)); + border-color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.01 225)); } &:focus { @@ -58,7 +58,7 @@ SText { display: inline-block; position: absolute; left: 0; - color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.003 169.6)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.02 220.2)); font-family: Georgia, Times, 'Times New Roman', serif; } @@ -66,7 +66,7 @@ SText { display: block; font-style: normal; margin-top: var(--intergalactic-spacing-4x, 16px); - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); font-size: var(--intergalactic-fs-300, 16px); line-height: var(--intergalactic-lh-300, 1.5); } @@ -83,7 +83,7 @@ SText { &:before { position: absolute; left: 0; - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); } } @@ -103,7 +103,7 @@ SText { & ul:not(ul[start], ul[reversed], ul[type]) li:not(SText):before { content: ''; - background-color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.003 153.3)); + background-color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.025 225)); } & ol:not(ol[start], ol[reversed], ol[type]):has(+ p), @@ -184,7 +184,7 @@ SText { & h5, & h6 { & small { - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); font-weight: 300; font-size: 100%; } @@ -469,11 +469,11 @@ SText[textAlign] { } SText[use='primary'] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 140)); + color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); } SText[use='secondary'] { - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); } SText[disabled] { diff --git a/semcore/widget-empty/src/style/widget-empty.shadow.css b/semcore/widget-empty/src/style/widget-empty.shadow.css index 0ebf123785..0f3ea60717 100644 --- a/semcore/widget-empty/src/style/widget-empty.shadow.css +++ b/semcore/widget-empty/src/style/widget-empty.shadow.css @@ -13,7 +13,7 @@ SImage { STitle { text-align: center; - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); font-size: var(--intergalactic-fs-300, 16px); line-height: var(--intergalactic-lh-300, 1.5); font-weight: var(--intergalactic-bold, 700); @@ -24,7 +24,7 @@ SDescription { text-wrap: balance; font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); - color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468)); + color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); max-width: 400px; } diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css index 54b2707512..a1cb276735 100644 --- a/semcore/wizard/src/style/wizard.shadow.css +++ b/semcore/wizard/src/style/wizard.shadow.css @@ -6,8 +6,8 @@ SWizard { } SSidebar { - background: var(--intergalactic-wizard-sidebar-bg, oklch(0.23 0.01 140)); - color: var(--intergalactic-wizard-sidebar-text-primary, oklch(0.999 0.001 180 / 0.949)); + background: var(--intergalactic-wizard-sidebar-bg, oklch(0.23 0.01 225)); + color: var(--intergalactic-wizard-sidebar-text-primary, oklch(0.993 0.005 215.6 / 0.956)); padding: var(--intergalactic-spacing-content-padding-xxlarge, 40px) var(--intergalactic-spacing-content-padding-small, 8px); max-width: 220px; flex-shrink: 0; @@ -35,11 +35,11 @@ SSidebar { } &:hover { - background: var(--intergalactic-wizard-sidebar-control-hover, oklch(0.36 0.005 140)); + background: var(--intergalactic-wizard-sidebar-control-hover, oklch(0.36 0.016 225)); z-index: 2; } &[active] { - background: var(--intergalactic-wizard-sidebar-control-active, oklch(0.4 0.004 140)); + background: var(--intergalactic-wizard-sidebar-control-active, oklch(0.4 0.017 225)); } &:disabled, &[disabled] { @@ -63,7 +63,7 @@ SSidebar { overflow: auto; } &[active]:hover SStepDescription { - background: var(--intergalactic-wizard-sidebar-control-active, oklch(0.4 0.004 140)); + background: var(--intergalactic-wizard-sidebar-control-active, oklch(0.4 0.017 225)); } } } diff --git a/stories/components/notice/docs/examples/basic_notice.tsx b/stories/components/notice/docs/examples/basic_notice.tsx index 97c1ae69b7..886c1e1af0 100644 --- a/stories/components/notice/docs/examples/basic_notice.tsx +++ b/stories/components/notice/docs/examples/basic_notice.tsx @@ -56,7 +56,7 @@ const Demo = () => ( - @@ -94,7 +94,7 @@ const Demo = () => ( - diff --git a/tools/theme/src/colors/index.ts b/tools/theme/src/colors/index.ts index 5c353aa7e6..3ec1ec38e4 100644 --- a/tools/theme/src/colors/index.ts +++ b/tools/theme/src/colors/index.ts @@ -22,7 +22,10 @@ export type Lightness = typeof lightnessNames[number]; // ============================================================================= // Base color scales export const baseColors: Record = { - 'gray': new ColorScale(['oklch(0.94 0.002 180)', 'oklch(0.40 0.004 140)', 'oklch(0.22 0.01 140)'], 'p3'), + 'gray': new ColorScale( + ['oklch(0.979 0.003 215)', 'oklch(0.807 0.02 220)', 'oklch(0.602 0.026 225)'], + 'p3', + ), 'mint': new ColorScale( ['oklch(0.935 0.019 184.9)', 'oklch(0.736 0.036 189.338)', 'oklch(0.4 0.032 189.338)'], 'p3', @@ -109,7 +112,7 @@ export const semanticColors = { error: baseColors.red, warning: baseColors.orange, info: baseColors.blue, - focus: baseColors.blue, + focus: baseColors.gray, advertising: baseColors.violet, highlight: baseColors.violet, brand: baseColors.violet, @@ -181,8 +184,8 @@ export const L_BG_SELECTED_HOVER = 0.9; /** Background levels */ export const L_BG_LIGHT = 0.96; -export const L_BG_MEDIUM = 0.92; // Midlight? -export const L_BG_STRONG = 0.64; // Heavy? Dark? +export const L_BG_MEDIUM = 0.92; +export const L_BG_STRONG = 0.64; export const L_BG_SKELETON = 0.94; @@ -201,7 +204,7 @@ export const L_BG_BUTTON_STRONG = 0.23; export const L_BG_BUTTON_STRONG_HOVER = 0.32; export const L_BG_BUTTON_STRONG_ACTIVE = 0; -/** Button secondary bg | ⚠️ APCA 60+ under white */ +/** Button secondary bg | ⚠️ APCA 90+ on secondary bg */ export const L_BG_BUTTON_SECONDARY = 0.96; export const L_BG_BUTTON_SECONDARY_HOVER = 0.94; export const L_BG_BUTTON_SECONDARY_ACTIVE = 0.92; diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 27fa903542..150509744a 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -404,7 +404,7 @@ export const theme: Theme = { description: 'Secondary text color for Badge.', }, bg_highlight_focus: { - value: focus.opaqueAt(L_BG_SECONDARY_ACTIVE), + value: highlight.opaqueAt(L_BG_SECONDARY_ACTIVE), description: 'Focusing values in the input.', }, bg_highlight_results: { @@ -568,7 +568,7 @@ export const theme: Theme = { description: 'Subtle secondary border in the informational message.', }, border_info_active: { - value: info.at(L_BORDER_ACTIVE), + value: focus.at(L_BORDER_STRONG), description: 'Active border in focused input filed.', }, border_primary_DEFAULT: { @@ -1217,7 +1217,7 @@ export const theme: Theme = { header_border_primary: { value: '{semanticTokens.colors.border.primary}' }, header_border_secondary: { value: '{semanticTokens.colors.border.primary}' }, icon_non_interactive: { - value: neutral.opaqueAt(L_ICON_NON_INTERACTIVE), + value: neutral.at(L_ICON_NON_INTERACTIVE), description: 'Color for the default non-interactive icon.', }, icon_primary_critical_DEFAULT: { @@ -1361,7 +1361,7 @@ export const theme: Theme = { description: 'Color for keyboard focus outline styles to use on the dark and color background.', }, keyboard_focus_outline: { - value: focus.opaqueAt(L_BORDER_FOCUS), + value: focus.at(L_BORDER_STRONG), description: 'Color for default keyboard focus outline styles.', }, keyboard_focus_valid_outline: { @@ -1393,11 +1393,11 @@ export const theme: Theme = { description: 'Use as a secondary cover of the content under the messages about limitations.', }, overlay_primary: { - value: neutral.opaqueAt(0.74), + value: `oklch(from ${colors.gray['600'].value} l c h / 0.4)`, description: 'Use for cover the content under the modal dialogs.', }, overlay_secondary: { - value: neutral.opaqueAt(0.8), + value: `oklch(from ${colors.gray['600'].value} l c h / 0.3)`, description: 'Use for the secondary modal dialogs that were opened upon the other modal dialogs.', }, page_bg: { @@ -2052,7 +2052,7 @@ export const theme: Theme = { description: 'Keyboard focus styles for use on dark backgrounds.', }, keyboard_focus_DEFAULT: { - value: '0px 0px 0px 3px {semanticTokens.colors.keyboard.focus.outline}', + value: '0px 0px 0px 3px oklch(from {semanticTokens.colors.keyboard.focus.outline} l c h / 0.5)', description: 'Default keyboard focus box-shadow styles.', }, }, diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json index aab4116bd4..61834d45e5 100644 --- a/website/docs/style/design-tokens/base-tokens.json +++ b/website/docs/style/design-tokens/base-tokens.json @@ -1,49 +1,49 @@ [ { "name": "--gray-50", - "value": "oklch(0.97 0.001 180)", + "value": "oklch(0.97 0.004 215.3)", "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." }, { "name": "--gray-75", - "value": "oklch(0.93 0.002 179.3)" + "value": "oklch(0.93 0.008 216.4)" }, { "name": "--gray-100", - "value": "oklch(0.9 0.002 177)", + "value": "oklch(0.9 0.011 217.3)", "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." }, { "name": "--gray-200", - "value": "oklch(0.82 0.002 171.1)" + "value": "oklch(0.82 0.019 219.6)" }, { "name": "--gray-300", - "value": "oklch(0.74 0.003 165.2)" + "value": "oklch(0.74 0.022 221.6)" }, { "name": "--gray-400", - "value": "oklch(0.64 0.003 157.8)" + "value": "oklch(0.64 0.025 224.1)" }, { "name": "--gray-450", - "value": "oklch(0.58 0.003 153.3)" + "value": "oklch(0.58 0.025 225)" }, { "name": "--gray-500", - "value": "oklch(0.53 0.004 149.6)" + "value": "oklch(0.53 0.023 225)" }, { "name": "--gray-600", - "value": "oklch(0.46 0.004 144.4)" + "value": "oklch(0.46 0.02 225)" }, { "name": "--gray-700", - "value": "oklch(0.33 0.006 140)" + "value": "oklch(0.33 0.014 225)" }, { "name": "--gray-800", - "value": "oklch(0.23 0.01 140)" + "value": "oklch(0.23 0.01 225)" }, { "name": "--gray-white", @@ -877,11 +877,11 @@ }, { "name": "--intergalactic-border-tooltip-invert", - "value": "oklch(0.35 0.006 140)" + "value": "oklch(0.35 0.015 225)" }, { "name": "--intergalactic-border-table-accent", - "value": "oklch(0.137 0.026 175.7 / 0.161)" + "value": "oklch(0.324 0.062 225.5 / 0.189)" }, { "name": "--intergalactic-border-date-picker-range-comparison", @@ -893,7 +893,7 @@ }, { "name": "--intergalactic-tooltip-invert", - "value": "oklch(0.23 0.01 140)" + "value": "oklch(0.23 0.01 225)" }, { "name": "--intergalactic-tooltip-warning", @@ -925,7 +925,7 @@ }, { "name": "--intergalactic-feature-popover-neutral-bg", - "value": "oklch(0.23 0.01 140)" + "value": "oklch(0.23 0.01 225)" }, { "name": "--intergalactic-feature-popover-neutral-dot-outer-border", @@ -933,15 +933,15 @@ }, { "name": "--intergalactic-slider-rating-normal", - "value": "oklch(0.092 0.024 152.2 / 0.526)" + "value": "oklch(0.229 0.046 229.9 / 0.58)" }, { "name": "--intergalactic-slider-rating-hover-active", - "value": "oklch(0.22 0.01 140)" + "value": "oklch(0.22 0.01 225)" }, { "name": "--intergalactic-radio-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)" + "value": "oklch(0.324 0.062 225.5 / 0.189)" }, { "name": "--intergalactic-radio-bg-normal", @@ -949,22 +949,22 @@ }, { "name": "--intergalactic-radio-bg-selected", - "value": "oklch(0.23 0.01 140)" + "value": "oklch(0.23 0.01 225)" }, { "name": "--intergalactic-text-link", - "value": "oklch(0.23 0.01 140)" + "value": "oklch(0.23 0.01 225)" }, { "name": "--intergalactic-text-link-hover-active", - "value": "oklch(0.23 0.01 140)" + "value": "oklch(0.23 0.01 225)" }, { "name": "--intergalactic-text-link-invert", - "value": "oklch(0.999 0.001 180 / 0.949)" + "value": "oklch(0.993 0.005 215.6 / 0.956)" }, { "name": "--intergalactic-text-link-invert-hover", - "value": "oklch(0.999 0.001 180 / 0.949)" + "value": "oklch(0.993 0.005 215.6 / 0.956)" } ] diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 48d0bb0387..279192c3ff 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -33,7 +33,7 @@ }, { "name": "--intergalactic-badge-accent-soon", - "value": "oklch(0.64 0.003 157.8)", + "value": "oklch(0.64 0.025 224.1)", "description": "Background color of the soon Badge.", "components": [ "badge" @@ -73,7 +73,7 @@ }, { "name": "--intergalactic-badge-light-soon", - "value": "oklch(0.9 0.002 177)", + "value": "oklch(0.9 0.011 217.3)", "description": "Light background color of the soon Badge.", "components": [ "badge" @@ -113,7 +113,7 @@ }, { "name": "--intergalactic-badge-light-soon-text", - "value": "oklch(0.46 0.004 144.4)", + "value": "oklch(0.46 0.02 225)", "description": "Text color for the soon Badge with light background.", "components": [ "badge" @@ -121,7 +121,7 @@ }, { "name": "--intergalactic-badge-bg-invert", - "value": "oklch(0.969 0.057 140 / 0.118)", + "value": "oklch(0.916 0.055 225.3 / 0.127)", "description": "Background color of the inverted Badge.", "components": [ "badge" @@ -129,7 +129,7 @@ }, { "name": "--intergalactic-badge-bg-unavailable", - "value": "oklch(0.97 0.001 180)", + "value": "oklch(0.97 0.004 215.3)", "description": "Background color of the unavailable Badge.", "components": [ "badge" @@ -137,7 +137,7 @@ }, { "name": "--intergalactic-badge-text-primary-invert", - "value": "oklch(0.999 0.001 180 / 0.949)", + "value": "oklch(0.993 0.005 215.6 / 0.956)", "description": "Inverted primary text color for Badge.", "components": [ "badge", @@ -146,7 +146,7 @@ }, { "name": "--intergalactic-badge-text-secondary", - "value": "oklch(0.097 0.023 156.5 / 0.468)", + "value": "oklch(0.247 0.049 230.2 / 0.524)", "description": "Secondary text color for Badge.", "components": [ "badge" @@ -154,7 +154,7 @@ }, { "name": "--intergalactic-bg-highlight-focus", - "value": "oklch(0.525 0.265 263 / 0.077)", + "value": "oklch(0.508 0.293 286.9 / 0.067)", "description": "Focusing values in the input.", "components": [ "date-picker", @@ -197,13 +197,13 @@ }, { "name": "--intergalactic-bg-primary-invert", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Inverted version of the primary background of the interface that contains the main data and information.", "components": [] }, { "name": "--intergalactic-bg-primary-invert-active", - "value": "oklch(0.4 0.004 140)", + "value": "oklch(0.4 0.017 225)", "description": "Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information.", "components": [ "drag-and-drop" @@ -211,13 +211,13 @@ }, { "name": "--intergalactic-bg-primary-invert-hover", - "value": "oklch(0.36 0.005 140)", + "value": "oklch(0.36 0.016 225)", "description": "Hover state for the inverted version of the primary background of the interface that contains the main data and information.", "components": [] }, { "name": "--intergalactic-bg-primary-muted", - "value": "oklch(0.64 0.003 157.8)", + "value": "oklch(0.64 0.025 224.1)", "description": "Accented muted background for a message with regular information.", "components": [] }, @@ -246,7 +246,7 @@ }, { "name": "--intergalactic-bg-primary-neutral-active", - "value": "oklch(0.96 0.001 180)", + "value": "oklch(0.96 0.005 215.6)", "description": "Active (selected) state of the primary background of the interface which contains the main data and information.", "components": [ "flags" @@ -254,7 +254,7 @@ }, { "name": "--intergalactic-bg-primary-neutral-hover", - "value": "oklch(0.97 0.001 180)", + "value": "oklch(0.97 0.004 215.3)", "description": "Hover state of the primary background of the interface which contains the main data and information.", "components": [] }, @@ -351,7 +351,7 @@ }, { "name": "--intergalactic-bg-secondary-neutral", - "value": "oklch(0.98 0.001 180)", + "value": "oklch(0.98 0.003 215)", "description": "Secondary background of the interface which contains the main data and information.", "components": [ "accordion", @@ -365,7 +365,7 @@ }, { "name": "--intergalactic-bg-secondary-neutral-active", - "value": "oklch(0.96 0.001 180)", + "value": "oklch(0.96 0.005 215.6)", "description": "Active (selected) state of the secondary background of the interface which contains the main data and information.", "components": [ "flags" @@ -373,7 +373,7 @@ }, { "name": "--intergalactic-bg-secondary-neutral-hover", - "value": "oklch(0.97 0.001 180)", + "value": "oklch(0.97 0.004 215.3)", "description": "Hover state of the secondary background of the interface which contains the main data and information.", "components": [ "accordion" @@ -381,7 +381,7 @@ }, { "name": "--intergalactic-bg-secondary-invert", - "value": "oklch(0.969 0.057 140 / 0.118)", + "value": "oklch(0.916 0.055 225.3 / 0.127)", "description": "Inverted version of the secondary background of the interface which contains the main data and information.", "components": [] }, @@ -469,7 +469,7 @@ }, { "name": "--intergalactic-border-info-active", - "value": "oklch(0.7 0.131 275.2)", + "value": "oklch(0.23 0.01 225)", "description": "Active border in focused input filed.", "components": [ "base-trigger", @@ -482,7 +482,7 @@ }, { "name": "--intergalactic-border-primary", - "value": "oklch(0.137 0.026 175.7 / 0.161)", + "value": "oklch(0.324 0.062 225.5 / 0.189)", "description": "Default stroke for interactive controls and structured surfaces.", "components": [ "base-trigger", @@ -504,13 +504,13 @@ }, { "name": "--intergalactic-border-accent", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Accent border for the active and selected states..", "components": [] }, { "name": "--intergalactic-border-primary-invert", - "value": "oklch(0.995 0.009 144.4 / 0.347)", + "value": "oklch(0.932 0.044 225.1 / 0.378)", "description": "Inverted version of the neutral primary border. Use it for borders on the dark or color background.", "components": [ "button", @@ -519,7 +519,7 @@ }, { "name": "--intergalactic-border-secondary", - "value": "oklch(0.176 0.033 175.7 / 0.07)", + "value": "oklch(0.344 0.064 223.3 / 0.081)", "description": "Secondary hairline stroke for grids, cards, and subtle dividers.", "components": [ "card", @@ -534,7 +534,7 @@ }, { "name": "--intergalactic-border-secondary-invert", - "value": "oklch(0.989 0.019 140 / 0.232)", + "value": "oklch(0.928 0.047 225.1 / 0.253)", "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background.", "components": [] }, @@ -628,7 +628,7 @@ }, { "name": "--intergalactic-brand-secondary", - "value": "oklch(0.22 0.01 140)", + "value": "oklch(0.22 0.01 225)", "description": "Secondary brand accent for paired brand treatments (secondary marks, duo-tone lockups).", "components": [] }, @@ -664,7 +664,7 @@ }, { "name": "--intergalactic-chart-grid-bar-chart-base-bg", - "value": "oklch(0.96 0.001 180)", + "value": "oklch(0.96 0.005 215.6)", "description": "Default background color of a bar in the BarChart.", "components": [ "d3-chart", @@ -673,7 +673,7 @@ }, { "name": "--intergalactic-chart-grid-bar-chart-hover", - "value": "oklch(0.177 0.033 175.6 / 0.042)", + "value": "oklch(0.363 0.068 222.8 / 0.05)", "description": "Background color for the hover state of a bar on the chart grid.", "components": [ "d3-chart" @@ -690,7 +690,7 @@ }, { "name": "--intergalactic-chart-grid-line", - "value": "oklch(0.95 0.002 180)", + "value": "oklch(0.95 0.006 215.8)", "description": "Grid and axis guide lines for charts.", "components": [ "d3-chart" @@ -698,7 +698,7 @@ }, { "name": "--intergalactic-chart-grid-period-bg", - "value": "oklch(0.96 0.001 180)", + "value": "oklch(0.96 0.005 215.6)", "description": "Use for highlighting a period on the chart grid.", "components": [ "d3-chart" @@ -706,7 +706,7 @@ }, { "name": "--intergalactic-chart-grid-period-pattern", - "value": "oklch(0.95 0.002 180)", + "value": "oklch(0.95 0.006 215.8)", "description": "Stripe color for diagonal pattern background.", "components": [ "d3-chart" @@ -714,7 +714,7 @@ }, { "name": "--intergalactic-chart-grid-text-label", - "value": "oklch(0.097 0.023 156.5 / 0.468)", + "value": "oklch(0.247 0.049 230.2 / 0.524)", "description": "Text label on the chart grid.", "components": [ "d3-chart" @@ -722,7 +722,7 @@ }, { "name": "--intergalactic-chart-grid-x-axis", - "value": "oklch(0.88 0.002 175.6)", + "value": "oklch(0.88 0.013 217.9)", "description": "X-axis line on the chart grid.", "components": [ "d3-chart" @@ -730,7 +730,7 @@ }, { "name": "--intergalactic-chart-grid-y-accent-hover-line", - "value": "oklch(0.88 0.002 175.6)", + "value": "oklch(0.88 0.013 217.9)", "description": "Accent line for the hover state on the chart grid.", "components": [ "d3-chart" @@ -738,7 +738,7 @@ }, { "name": "--intergalactic-chart-palette-order-1", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "1 color in the default list of colors for charts.", "components": [ "d3-chart", @@ -889,7 +889,7 @@ }, { "name": "--intergalactic-chart-palette-order-null", - "value": "oklch(0.9 0.002 177)", + "value": "oklch(0.9 0.011 217.3)", "description": "Use it to show null value on the chart.", "components": [ "d3-chart" @@ -897,13 +897,13 @@ }, { "name": "--intergalactic-chart-palette-order-other-data", - "value": "oklch(0.82 0.002 171.1)", + "value": "oklch(0.82 0.019 219.6)", "description": "Use it to indicate voids, missing or some other data on the chart.", "components": [] }, { "name": "--intergalactic-chart-palette-order-total-amount", - "value": "oklch(0.64 0.003 157.8)", + "value": "oklch(0.64 0.025 224.1)", "description": "Use it to show total value on the chart.", "components": [] }, @@ -915,13 +915,13 @@ }, { "name": "--intergalactic-chart-x-axis-accent-period-active", - "value": "oklch(0.176 0.033 175.6 / 0.056)", + "value": "oklch(0.351 0.065 223 / 0.066)", "description": "Background color for the clickable date on the X-axis of the chart grid.", "components": [] }, { "name": "--intergalactic-control-carousel-indicator", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Background color of the Carousel indicator.", "components": [ "carousel" @@ -937,7 +937,7 @@ }, { "name": "--intergalactic-control-carousel-indicator-active", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Background color of the active Carousel indicator.", "components": [ "carousel" @@ -954,7 +954,7 @@ }, { "name": "--intergalactic-control-checkbox-bg-selected", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Background color of the checked Checkbox.", "components": [ "checkbox", @@ -963,7 +963,7 @@ }, { "name": "--intergalactic-control-checkbox-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", + "value": "oklch(0.324 0.062 225.5 / 0.189)", "description": "Border color of the Checkbox.", "components": [ "checkbox", @@ -981,7 +981,7 @@ }, { "name": "--intergalactic-control-checkbox-button-bg-hover", - "value": "oklch(0.177 0.033 175.6 / 0.042)", + "value": "oklch(0.363 0.068 222.8 / 0.05)", "description": "Hover state of the Checkbox button background.", "components": [ "feedback-form" @@ -997,13 +997,13 @@ }, { "name": "--intergalactic-control-checkbox-button-bg-selected", - "value": "oklch(0.176 0.033 175.6 / 0.056)", + "value": "oklch(0.351 0.065 223 / 0.066)", "description": "Selected state of the Checkbox button background.", "components": [] }, { "name": "--intergalactic-control-checkbox-button-bg-selected-hover", - "value": "oklch(0.176 0.033 175.6 / 0.056)", + "value": "oklch(0.351 0.065 223 / 0.066)", "description": "Hover for a selected state of the Checkbox button background.", "components": [ "feedback-form" @@ -1011,7 +1011,7 @@ }, { "name": "--intergalactic-control-checkbox-button-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", + "value": "oklch(0.324 0.062 225.5 / 0.189)", "description": "Border color of the Checkbox button in its normal state.", "components": [ "feedback-form" @@ -1019,7 +1019,7 @@ }, { "name": "--intergalactic-control-checkbox-button-border-selected", - "value": "oklch(0.137 0.026 175.7 / 0.161)", + "value": "oklch(0.324 0.062 225.5 / 0.189)", "description": "Border color of the Checkbox button in its active state.", "components": [ "feedback-form" @@ -1035,7 +1035,7 @@ }, { "name": "--intergalactic-control-radio-bg-selected", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Selected state of the Radio background.", "components": [ "radio" @@ -1043,7 +1043,7 @@ }, { "name": "--intergalactic-control-radio-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", + "value": "oklch(0.324 0.062 225.5 / 0.189)", "description": "Border color of the Radio.", "components": [ "radio" @@ -1051,19 +1051,19 @@ }, { "name": "--intergalactic-control-primary-advertising", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Background of the advertising primary control.", "components": [] }, { "name": "--intergalactic-control-primary-advertising-hover", - "value": "oklch(0.36 0.005 140)", + "value": "oklch(0.36 0.016 225)", "description": "Hover state of the advertising primary control.", "components": [] }, { "name": "--intergalactic-control-primary-advertising-active", - "value": "oklch(0.4 0.004 140)", + "value": "oklch(0.4 0.017 225)", "description": "Active (selected) state of the advertising primary control.", "components": [] }, @@ -1118,7 +1118,7 @@ }, { "name": "--intergalactic-control-primary-info", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Background of the regular primary control.", "components": [ "button", @@ -1128,7 +1128,7 @@ }, { "name": "--intergalactic-control-primary-info-active", - "value": "oklch(0 0 140)", + "value": "oklch(0 0 225)", "description": "Active (selected) state of the regular primary control.", "components": [ "button" @@ -1136,7 +1136,7 @@ }, { "name": "--intergalactic-control-primary-info-hover", - "value": "oklch(0.32 0.007 140)", + "value": "oklch(0.32 0.014 225)", "description": "Hover state of the regular primary control.", "components": [ "button" @@ -1152,7 +1152,7 @@ }, { "name": "--intergalactic-control-primary-invert-active", - "value": "oklch(0.94 0.002 180)", + "value": "oklch(0.94 0.007 216.1)", "description": "Active (selected) state of the inverted primary control.", "components": [ "button" @@ -1160,7 +1160,7 @@ }, { "name": "--intergalactic-control-primary-invert-hover", - "value": "oklch(0.96 0.001 180)", + "value": "oklch(0.96 0.005 215.6)", "description": "Hover state of the inverted primary control.", "components": [ "button" @@ -1210,7 +1210,7 @@ }, { "name": "--intergalactic-control-secondary-invert", - "value": "oklch(0.969 0.057 140 / 0.118)", + "value": "oklch(0.916 0.055 225.3 / 0.127)", "description": "Background of the inverted version of the secondary control.", "components": [ "button" @@ -1218,7 +1218,7 @@ }, { "name": "--intergalactic-control-secondary-invert-active", - "value": "oklch(0.986 0.025 140 / 0.203)", + "value": "oklch(0.926 0.048 225.1 / 0.22)", "description": "Active (selected) state of the inverted version of the secondary control.", "components": [ "button" @@ -1226,7 +1226,7 @@ }, { "name": "--intergalactic-control-secondary-invert-hover", - "value": "oklch(0.98 0.036 140 / 0.164)", + "value": "oklch(0.923 0.05 225.2 / 0.178)", "description": "Hover state of the inverted version of the secondary control.", "components": [ "button" @@ -1234,7 +1234,7 @@ }, { "name": "--intergalactic-control-secondary-neutral", - "value": "oklch(0.176 0.033 175.6 / 0.056)", + "value": "oklch(0.351 0.065 223 / 0.066)", "description": "Background of the regular secondary control.", "components": [ "button", @@ -1243,7 +1243,7 @@ }, { "name": "--intergalactic-control-secondary-neutral-active", - "value": "oklch(0.157 0.029 176 / 0.11)", + "value": "oklch(0.332 0.062 224.2 / 0.128)", "description": "Active (selected) state of the regular secondary control.", "components": [ "button" @@ -1251,7 +1251,7 @@ }, { "name": "--intergalactic-control-secondary-neutral-hover", - "value": "oklch(0.176 0.033 175.7 / 0.084)", + "value": "oklch(0.339 0.063 223.5 / 0.097)", "description": "Hover state of the regular secondary control.", "components": [ "button" @@ -1259,7 +1259,7 @@ }, { "name": "--intergalactic-control-select-trigger-active", - "value": "oklch(0.96 0.001 180)", + "value": "oklch(0.96 0.005 215.6)", "description": "Background of the Select trigger in its active state.", "components": [ "base-trigger" @@ -1267,7 +1267,7 @@ }, { "name": "--intergalactic-control-select-trigger-hover", - "value": "oklch(0.97 0.001 180)", + "value": "oklch(0.97 0.004 215.3)", "description": "Background of the Select trigger in its hover state.", "components": [ "base-trigger" @@ -1283,7 +1283,7 @@ }, { "name": "--intergalactic-control-slider-bar-bg", - "value": "oklch(0.157 0.029 176 / 0.11)", + "value": "oklch(0.332 0.062 224.2 / 0.128)", "description": "Background of the Slider bar.", "components": [ "slider" @@ -1291,7 +1291,7 @@ }, { "name": "--intergalactic-control-slider-bar-bg-hover", - "value": "oklch(0.92 0.002 178.5)", + "value": "oklch(0.92 0.009 216.7)", "description": "Hover state of the Slider bar.", "components": [ "slider" @@ -1299,7 +1299,7 @@ }, { "name": "--intergalactic-control-slider-bar-value-bg", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Filled part of the Slider bar.", "components": [ "slider" @@ -1315,7 +1315,7 @@ }, { "name": "--intergalactic-control-slider-knob-border", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Knob border color of the Slider in its normal state.", "components": [ "slider" @@ -1323,7 +1323,7 @@ }, { "name": "--intergalactic-control-slider-knob-border-hover", - "value": "oklch(0.32 0.007 140)", + "value": "oklch(0.32 0.014 225)", "description": "Knob border color of the Slider in its hover state.", "components": [ "slider" @@ -1331,7 +1331,7 @@ }, { "name": "--intergalactic-control-slider-rating-icon", - "value": "oklch(0.092 0.024 152.2 / 0.526)", + "value": "oklch(0.229 0.046 229.9 / 0.58)", "description": "Icon color for the SliderRating component in its normal state.", "components": [ "feedback-form" @@ -1339,7 +1339,7 @@ }, { "name": "--intergalactic-control-slider-rating-icon-hover-active", - "value": "oklch(0.22 0.01 140)", + "value": "oklch(0.22 0.01 225)", "description": "Icon color for the SliderRating component in its hovered and active states.", "components": [ "feedback-form" @@ -1347,7 +1347,7 @@ }, { "name": "--intergalactic-control-switch-bg", - "value": "oklch(0.176 0.033 175.6 / 0.056)", + "value": "oklch(0.351 0.065 223 / 0.066)", "description": "Subtle background of the Switch control.", "components": [ "switch" @@ -1355,7 +1355,7 @@ }, { "name": "--intergalactic-control-switch-bg-info-active", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Active background of the Switch control.", "components": [ "switch" @@ -1411,7 +1411,7 @@ }, { "name": "--intergalactic-control-tertiary-invert-active", - "value": "oklch(0.986 0.025 140 / 0.203)", + "value": "oklch(0.926 0.048 225.1 / 0.22)", "description": "Active (selected) state of the inverted version of the tertiary control.", "components": [ "button" @@ -1419,7 +1419,7 @@ }, { "name": "--intergalactic-control-tertiary-invert-hover", - "value": "oklch(0.98 0.036 140 / 0.164)", + "value": "oklch(0.923 0.05 225.2 / 0.178)", "description": "Hover state of the inverted version of the tertiary control.", "components": [ "button" @@ -1436,7 +1436,7 @@ }, { "name": "--intergalactic-control-tertiary-neutral-active", - "value": "oklch(0.176 0.033 175.6 / 0.056)", + "value": "oklch(0.351 0.065 223 / 0.066)", "description": "Active (selected) state of the regular tertiary control.", "components": [ "button", @@ -1446,7 +1446,7 @@ }, { "name": "--intergalactic-control-tertiary-neutral-hover", - "value": "oklch(0.177 0.033 175.6 / 0.042)", + "value": "oklch(0.363 0.068 222.8 / 0.05)", "description": "Hover state of the regular tertiary control.", "components": [ "button", @@ -1456,7 +1456,7 @@ }, { "name": "--intergalactic-control-text-primary", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Primary text color for form controls.", "components": [ "button" @@ -1464,7 +1464,7 @@ }, { "name": "--intergalactic-control-text-primary-invert", - "value": "oklch(0.999 0.001 180 / 0.949)", + "value": "oklch(0.993 0.005 215.6 / 0.956)", "description": "Inverted primary text color for form controls.", "components": [ "button" @@ -1472,7 +1472,7 @@ }, { "name": "--intergalactic-control-text-secondary", - "value": "oklch(0.097 0.023 156.5 / 0.468)", + "value": "oklch(0.247 0.049 230.2 / 0.524)", "description": "Secondary text color for form controls.", "components": [ "button" @@ -1480,13 +1480,13 @@ }, { "name": "--intergalactic-control-text-secondary-invert", - "value": "oklch(0.997 0.004 165.9 / 0.684)", + "value": "oklch(0.959 0.028 221.4 / 0.721)", "description": "Inverted secondary text color for form controls.", "components": [] }, { "name": "--intergalactic-control-text-tertiary", - "value": "oklch(0.097 0.023 156.5 / 0.468)", + "value": "oklch(0.247 0.049 230.2 / 0.524)", "description": "Tertiary text color for form controls.", "components": [] }, @@ -1506,7 +1506,7 @@ }, { "name": "--intergalactic-date-picker-cell-active", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Active (selected) date-picker cell background.", "components": [ "date-picker" @@ -1514,7 +1514,7 @@ }, { "name": "--intergalactic-date-picker-cell-active-hover", - "value": "oklch(0.32 0.007 140)", + "value": "oklch(0.32 0.014 225)", "description": "Hover for the active (selected) date-picker cell background.", "components": [ "date-picker" @@ -1538,7 +1538,7 @@ }, { "name": "--intergalactic-date-picker-cell-current", - "value": "oklch(0.104 0.023 162.3 / 0.385)", + "value": "oklch(0.267 0.053 229.2 / 0.437)", "description": "Color for marking the cell with the current date, month or year in the date-picker.", "components": [ "date-picker" @@ -1546,13 +1546,13 @@ }, { "name": "--intergalactic-date-picker-cell-current-invert", - "value": "oklch(0.995 0.009 144.4 / 0.347)", + "value": "oklch(0.932 0.044 225.1 / 0.378)", "description": "Color for marking the active cell with the current date, month or year in the date-picker.", "components": [] }, { "name": "--intergalactic-date-picker-cell-hover", - "value": "oklch(0.97 0.001 180)", + "value": "oklch(0.97 0.004 215.3)", "description": "Hover state of the default date-picker cell background.", "components": [ "date-picker" @@ -1560,7 +1560,7 @@ }, { "name": "--intergalactic-date-picker-cell-range", - "value": "oklch(0.96 0.001 180)", + "value": "oklch(0.96 0.005 215.6)", "description": "Background for the cell which is included in the date range in the date-picker.", "components": [ "date-picker" @@ -1568,7 +1568,7 @@ }, { "name": "--intergalactic-date-picker-cell-range-hover", - "value": "oklch(0.9 0.002 177)", + "value": "oklch(0.9 0.011 217.3)", "description": "Hover state of the background for the cell which is included in the date range in the date-picker.", "components": [ "date-picker" @@ -1584,7 +1584,7 @@ }, { "name": "--intergalactic-dot-text", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Text color of the Dot.", "components": [ "dot" @@ -1600,7 +1600,7 @@ }, { "name": "--intergalactic-dropdown-menu-item-hover", - "value": "oklch(0.177 0.033 175.6 / 0.042)", + "value": "oklch(0.363 0.068 222.8 / 0.05)", "description": "Hover state of the default background color for the list item in the dropdown-menu.", "components": [ "dropdown" @@ -1608,7 +1608,7 @@ }, { "name": "--intergalactic-dropdown-menu-item-selected", - "value": "oklch(0.176 0.033 175.6 / 0.056)", + "value": "oklch(0.351 0.065 223 / 0.066)", "description": "Active (selected) state of the default background color for the list item in the dropdown-menu.", "components": [ "dropdown", @@ -1617,7 +1617,7 @@ }, { "name": "--intergalactic-dropdown-menu-item-selected-box-shadow", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Border color of the selected item in the DropdownMenu.", "components": [ "dropdown" @@ -1625,7 +1625,7 @@ }, { "name": "--intergalactic-dropdown-menu-item-selected-hover", - "value": "oklch(0.176 0.033 175.7 / 0.084)", + "value": "oklch(0.339 0.063 223.5 / 0.097)", "description": "Hover state for the selected state of the default background color for the list item in the dropdown-menu.", "components": [ "dropdown", @@ -1642,7 +1642,7 @@ }, { "name": "--intergalactic-feature-popover-bg-neutral", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Background of the FeaturePopover with neutral theme.", "components": [ "feature-popover" @@ -1682,7 +1682,7 @@ }, { "name": "--intergalactic-feature-popover-text", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Text color of the FeaturePopover.", "components": [ "feature-popover" @@ -1690,7 +1690,7 @@ }, { "name": "--intergalactic-feature-popover-text-invert", - "value": "oklch(0.999 0.001 180 / 0.949)", + "value": "oklch(0.993 0.005 215.6 / 0.956)", "description": "Inverted text color of the FeaturePopover.", "components": [ "feature-popover" @@ -1698,28 +1698,28 @@ }, { "name": "--intergalactic-footer-bg", - "value": "oklch(0.97 0.001 180)", + "value": "oklch(0.97 0.004 215.3)", "description": "Background fill for the product page footer.", "components": [] }, { "name": "--intergalactic-header-bg", - "value": "oklch(0.97 0.001 180)", + "value": "oklch(0.97 0.004 215.3)", "components": [] }, { "name": "--intergalactic-header-border-primary", - "value": "oklch(0.137 0.026 175.7 / 0.161)", + "value": "oklch(0.324 0.062 225.5 / 0.189)", "components": [] }, { "name": "--intergalactic-header-border-secondary", - "value": "oklch(0.137 0.026 175.7 / 0.161)", + "value": "oklch(0.324 0.062 225.5 / 0.189)", "components": [] }, { "name": "--intergalactic-icon-non-interactive", - "value": "oklch(0.094 0.024 153.9 / 0.503)", + "value": "oklch(0.6 0.026 225)", "description": "Color for the default non-interactive icon.", "components": [ "base-trigger" @@ -1755,19 +1755,19 @@ }, { "name": "--intergalactic-icon-primary-invert", - "value": "oklch(0.85 0.002 173.3)", + "value": "oklch(0.85 0.016 218.8)", "description": "Inverted version of the primary icon.", "components": [] }, { "name": "--intergalactic-icon-primary-invert-hover-active", - "value": "oklch(0.8 0.003 169.6)", + "value": "oklch(0.8 0.02 220.2)", "description": "Hover and active (selected) states of the inverted version of the primary icon.", "components": [] }, { "name": "--intergalactic-icon-primary-neutral", - "value": "oklch(0.58 0.003 153.3)", + "value": "oklch(0.58 0.025 225)", "description": "Default icon weight on normal backgrounds—stronger emphasis than secondary icons.", "components": [ "accordion", @@ -1779,7 +1779,7 @@ }, { "name": "--intergalactic-icon-primary-neutral-hover-active", - "value": "oklch(0.53 0.004 149.6)", + "value": "oklch(0.53 0.023 225)", "description": "Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color.", "components": [ "feature-highlight", @@ -1844,7 +1844,7 @@ }, { "name": "--intergalactic-icon-secondary-neutral", - "value": "oklch(0.8 0.003 169.6)", + "value": "oklch(0.8 0.02 220.2)", "description": "De-emphasized icons for dense layouts (tables, tertiary actions).", "components": [ "breadcrumbs", @@ -1858,7 +1858,7 @@ }, { "name": "--intergalactic-icon-secondary-neutral-hover-active", - "value": "oklch(0.66 0.003 159.3)", + "value": "oklch(0.66 0.024 223.6)", "description": "Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color.", "components": [ "data-table", @@ -1897,7 +1897,7 @@ }, { "name": "--intergalactic-icon-secondary-invert", - "value": "oklch(0.45 0.004 143.7)", + "value": "oklch(0.45 0.019 225)", "description": "Softer inverted icon for dense UI or inline hints where the surface should stay calm.", "components": [] }, @@ -1909,13 +1909,13 @@ }, { "name": "--intergalactic-illustration-border", - "value": "oklch(0.53 0.004 149.6)", + "value": "oklch(0.53 0.023 225)", "description": "Border color for illustrations.", "components": [] }, { "name": "--intergalactic-illustration-gray", - "value": "oklch(0.9 0.002 177)", + "value": "oklch(0.9 0.011 217.3)", "description": "Gray fill color for illustrations.", "components": [] }, @@ -1987,7 +1987,7 @@ }, { "name": "--intergalactic-keyboard-focus-outline", - "value": "oklch(0.424 0.269 264.2 / 0.469)", + "value": "oklch(0.23 0.01 225)", "description": "Color for default keyboard focus outline styles.", "components": [ "base-components" @@ -2026,7 +2026,7 @@ }, { "name": "--intergalactic-notice-bubble-bg-info", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Background of the NoticeBubble.", "components": [ "notice-bubble" @@ -2034,7 +2034,7 @@ }, { "name": "--intergalactic-overlay-limitation-primary", - "value": "oklch(from oklch(0.97 0.001 180) l c h / 0.7)", + "value": "oklch(from oklch(0.97 0.004 215.3) l c h / 0.7)", "description": "Use as a primary cover of the content under the messages about limitations.", "components": [] }, @@ -2049,7 +2049,7 @@ }, { "name": "--intergalactic-overlay-primary", - "value": "oklch(0.109 0.023 165.5 / 0.337)", + "value": "oklch(from oklch(0.46 0.02 225) l c h / 0.4)", "description": "Use for cover the content under the modal dialogs.", "components": [ "modal", @@ -2059,7 +2059,7 @@ }, { "name": "--intergalactic-overlay-secondary", - "value": "oklch(0.118 0.023 170.1 / 0.262)", + "value": "oklch(from oklch(0.46 0.02 225) l c h / 0.3)", "description": "Use for the secondary modal dialogs that were opened upon the other modal dialogs.", "components": [ "modal" @@ -2067,13 +2067,13 @@ }, { "name": "--intergalactic-page-bg", - "value": "oklch(0.97 0.001 180)", + "value": "oklch(0.97 0.004 215.3)", "description": "Background fill for the whole product page.", "components": [] }, { "name": "--intergalactic-control-pills-bg-hover", - "value": "oklch(0.176 0.033 175.7 / 0.084)", + "value": "oklch(0.339 0.063 223.5 / 0.097)", "description": "Hover state of the Pills background.", "components": [ "pills" @@ -2081,7 +2081,7 @@ }, { "name": "--intergalactic-control-pills-bg-normal", - "value": "oklch(0.176 0.033 175.6 / 0.056)", + "value": "oklch(0.351 0.065 223 / 0.066)", "description": "Background of the Pills in its normal state.", "components": [ "pills" @@ -2097,7 +2097,7 @@ }, { "name": "--intergalactic-control-pills-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", + "value": "oklch(0.324 0.062 225.5 / 0.189)", "description": "Border color of the Pills in its normal state.", "components": [ "pills" @@ -2111,19 +2111,19 @@ }, { "name": "--intergalactic-control-presets-border-selected", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Border color of the selected Preset item.", "components": [] }, { "name": "--intergalactic-control-presets-border-hover", - "value": "oklch(0.137 0.026 175.7 / 0.161)", + "value": "oklch(0.324 0.062 225.5 / 0.189)", "description": "Border color of the hovered Preset item.", "components": [] }, { "name": "--intergalactic-progress-bar-bg", - "value": "oklch(0.157 0.029 176 / 0.11)", + "value": "oklch(0.332 0.062 224.2 / 0.128)", "description": "Background color of the ProgressBar.", "components": [ "progress-bar" @@ -2131,13 +2131,13 @@ }, { "name": "--intergalactic-progress-bar-bg-hover", - "value": "oklch(0.92 0.002 178.5)", + "value": "oklch(0.92 0.009 216.7)", "description": "Hover state of the background color of the ProgressBar.", "components": [] }, { "name": "--intergalactic-progress-bar-bg-invert", - "value": "oklch(0.987 0.023 140 / 0.212)", + "value": "oklch(0.927 0.047 225.1 / 0.231)", "description": "Inverted version of the background color of the ProgressBar.", "components": [ "progress-bar" @@ -2145,13 +2145,13 @@ }, { "name": "--intergalactic-progress-bar-bg-invert-hover", - "value": "oklch(0.995 0.008 147.4 / 0.391)", + "value": "oklch(0.933 0.043 225.1 / 0.426)", "description": "Hover state for the inverted version of the background color of the ProgressBar.", "components": [] }, { "name": "--intergalactic-progress-bar-pattern-gradient", - "value": "linear-gradient(-45deg, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 25%, oklch(0.157 0.029 176 / 0.11) 0%, oklch(0.157 0.029 176 / 0.11) 50%, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 0%, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 75%, oklch(0.157 0.029 176 / 0.11) 0%)", + "value": "linear-gradient(-45deg, oklch(from oklch(0.332 0.062 224.2 / 0.128) l c h / 0.18) 25%, oklch(0.332 0.062 224.2 / 0.128) 0%, oklch(0.332 0.062 224.2 / 0.128) 50%, oklch(from oklch(0.332 0.062 224.2 / 0.128) l c h / 0.18) 0%, oklch(from oklch(0.332 0.062 224.2 / 0.128) l c h / 0.18) 75%, oklch(0.332 0.062 224.2 / 0.128) 0%)", "description": "Null value gradient for the ProgressBar.", "components": [ "progress-bar" @@ -2167,7 +2167,7 @@ }, { "name": "--intergalactic-progress-bar-value-gradient", - "value": "linear-gradient(-45deg, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 25%, oklch(0.22 0.01 140) 0%, oklch(0.22 0.01 140) 50%, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 0%, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 75%, oklch(0.22 0.01 140) 0%)", + "value": "linear-gradient(-45deg, oklch(from oklch(0.22 0.01 225) l c h / 0.78) 25%, oklch(0.22 0.01 225) 0%, oklch(0.22 0.01 225) 50%, oklch(from oklch(0.22 0.01 225) l c h / 0.78) 0%, oklch(from oklch(0.22 0.01 225) l c h / 0.78) 75%, oklch(0.22 0.01 225) 0%)", "description": "Value with gradient for the ProgressBar.", "components": [ "progress-bar" @@ -2215,7 +2215,7 @@ }, { "name": "--intergalactic-scroll-area-shadow-bottom", - "value": "linear-gradient(to top, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)", + "value": "linear-gradient(to top, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)", "description": "Bottom-to-top fade shadow for the ScrollArea.", "components": [ "base-components" @@ -2223,7 +2223,7 @@ }, { "name": "--intergalactic-scroll-area-shadow-left", - "value": "linear-gradient(to right, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)", + "value": "linear-gradient(to right, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)", "description": "Left-to-right fade shadow for the ScrollArea.", "components": [ "base-components", @@ -2232,7 +2232,7 @@ }, { "name": "--intergalactic-scroll-area-shadow-right", - "value": "linear-gradient(to left, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)", + "value": "linear-gradient(to left, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)", "description": "Right-to-left fade shadow for the ScrollArea.", "components": [ "base-components", @@ -2241,7 +2241,7 @@ }, { "name": "--intergalactic-scroll-area-shadow-top", - "value": "linear-gradient(to bottom, oklch(from oklch(0.23 0.01 140) l c h / 0.08) 20.55%, transparent 100%)", + "value": "linear-gradient(to bottom, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)", "description": "Top-to-bottom fade shadow for the ScrollArea.", "components": [ "base-components" @@ -2249,7 +2249,7 @@ }, { "name": "--intergalactic-scroll-bar-background", - "value": "oklch(0.137 0.026 175.7 / 0.161)", + "value": "oklch(0.324 0.062 225.5 / 0.189)", "description": "Background color for ScrollBar.", "components": [ "base-components" @@ -2257,55 +2257,55 @@ }, { "name": "--intergalactic-sidebar-nav-bg", - "value": "oklch(0.97 0.001 180)", + "value": "oklch(0.97 0.004 215.3)", "description": "Background fill for the product page sidebar.", "components": [] }, { "name": "--intergalactic-sidebar-nav-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", + "value": "oklch(0.324 0.062 225.5 / 0.189)", "description": "Color for the border of the page sidebar.", "components": [] }, { "name": "--intergalactic-sidebar-nav-control-active", - "value": "oklch(0.176 0.033 175.6 / 0.056)", + "value": "oklch(0.351 0.065 223 / 0.066)", "description": "Sidebar navigation row active background.", "components": [] }, { "name": "--intergalactic-sidebar-nav-control-hover", - "value": "oklch(0.177 0.033 175.6 / 0.042)", + "value": "oklch(0.363 0.068 222.8 / 0.05)", "description": "Sidebar navigation row hover background.", "components": [] }, { "name": "--intergalactic-sidebar-nav-control-icon-active", - "value": "oklch(0.53 0.004 149.6)", + "value": "oklch(0.53 0.023 225)", "description": "Sidebar navigation icon color for the active item.", "components": [] }, { "name": "--intergalactic-sidebar-nav-control-icon-normal", - "value": "oklch(0.58 0.003 153.3)", + "value": "oklch(0.58 0.025 225)", "description": "Sidebar navigation icon color.", "components": [] }, { "name": "--intergalactic-sidebar-nav-control-text-active", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Sidebar navigation label color for the active item.", "components": [] }, { "name": "--intergalactic-sidebar-nav-control-text-normal", - "value": "oklch(0.63 0.003 157)", + "value": "oklch(0.63 0.025 224.3)", "description": "Sidebar navigation label color.", "components": [] }, { "name": "--intergalactic-skeleton-bg", - "value": "oklch(0.94 0.002 180)", + "value": "oklch(0.94 0.007 216.1)", "description": "Default color for the Skeleton.", "components": [ "skeleton" @@ -2313,7 +2313,7 @@ }, { "name": "--intergalactic-skeleton-bg-invert", - "value": "oklch(0.5 0.004 147.4)", + "value": "oklch(0.5 0.022 225)", "description": "Inverted version of the default color for the Skeleton.", "components": [ "skeleton" @@ -2321,7 +2321,7 @@ }, { "name": "--intergalactic-spin-bg", - "value": "oklch(0.8 0.003 169.6)", + "value": "oklch(0.8 0.02 220.2)", "description": "Track color of the Spin loader.", "components": [ "spin" @@ -2329,7 +2329,7 @@ }, { "name": "--intergalactic-spin-bg-invert", - "value": "oklch(0.85 0.002 173.3)", + "value": "oklch(0.85 0.016 218.8)", "description": "Inverted track color of the Spin loader.", "components": [ "spin" @@ -2337,7 +2337,7 @@ }, { "name": "--intergalactic-control-tab-line-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", + "value": "oklch(0.324 0.062 225.5 / 0.189)", "description": "Border color of the TabLine in its normal state.", "components": [ "tab-line" @@ -2345,7 +2345,7 @@ }, { "name": "--intergalactic-control-tab-line-border-active", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Border color of the TabLine in its active state.", "components": [ "tab-line" @@ -2353,7 +2353,7 @@ }, { "name": "--intergalactic-control-tab-line-border-hover", - "value": "oklch(0.137 0.026 175.7 / 0.161)", + "value": "oklch(0.324 0.062 225.5 / 0.189)", "description": "Border color of the TabLine in its hover state.", "components": [ "tab-line" @@ -2361,7 +2361,7 @@ }, { "name": "--intergalactic-table-border-accent", - "value": "oklch(0.137 0.026 175.7 / 0.161)", + "value": "oklch(0.324 0.062 225.5 / 0.189)", "description": "Accent borders in the Table: for the accordion in the table and for the header of the secondary table.", "components": [] }, @@ -2381,7 +2381,7 @@ }, { "name": "--intergalactic-table-td-cell-active", - "value": "oklch(0.96 0.001 180)", + "value": "oklch(0.96 0.005 215.6)", "description": "Background of the default active cell in the Table.", "components": [ "data-table" @@ -2413,7 +2413,7 @@ }, { "name": "--intergalactic-table-td-cell-hover", - "value": "oklch(0.97 0.001 180)", + "value": "oklch(0.97 0.004 215.3)", "description": "Background of the default hovered cell in the Table.", "components": [ "data-table" @@ -2469,7 +2469,7 @@ }, { "name": "--intergalactic-table-td-cell-unread", - "value": "oklch(0.98 0.001 180)", + "value": "oklch(0.98 0.003 215)", "description": "Background of the unread cell in the Table.", "components": [ "data-table" @@ -2501,13 +2501,13 @@ }, { "name": "--intergalactic-table-th-gradient", - "value": "linear-gradient(to right, transparent 0%, oklch(0.9 0.002 177) 100%)", + "value": "linear-gradient(to right, transparent 0%, oklch(0.9 0.011 217.3) 100%)", "description": "Background gradient for sorting icon that absolute positioned in the table head.", "components": [] }, { "name": "--intergalactic-table-th-primary-cell", - "value": "oklch(0.98 0.001 180)", + "value": "oklch(0.98 0.003 215)", "description": "Background of the header cell in the primary Table.", "components": [ "data-table" @@ -2515,13 +2515,13 @@ }, { "name": "--intergalactic-table-th-primary-cell-active", - "value": "oklch(0.96 0.001 180)", + "value": "oklch(0.96 0.005 215.6)", "description": "Background of the active header cell in the primary Table.", "components": [] }, { "name": "--intergalactic-table-th-primary-cell-hover", - "value": "oklch(0.96 0.001 180)", + "value": "oklch(0.96 0.005 215.6)", "description": "Background of the hovered header cell in the primary Table.", "components": [ "data-table" @@ -2537,7 +2537,7 @@ }, { "name": "--intergalactic-tag-additional-bg-hover-active", - "value": "oklch(0.97 0.001 180)", + "value": "oklch(0.97 0.004 215.3)", "description": "Hover and active states of the additional Tag background.", "components": [ "tag" @@ -2553,7 +2553,7 @@ }, { "name": "--intergalactic-tag-additional-border", - "value": "oklch(0.95 0.002 180)", + "value": "oklch(0.95 0.006 215.8)", "description": "Border color of the additional Tag.", "components": [ "tag" @@ -2577,7 +2577,7 @@ }, { "name": "--intergalactic-tag-additional-bg-invert-hover-active", - "value": "oklch(0.98 0.036 140 / 0.164)", + "value": "oklch(0.923 0.05 225.2 / 0.178)", "description": "Hover and active states of the additional tag on dark backgrounds.", "components": [ "tag" @@ -2585,7 +2585,7 @@ }, { "name": "--intergalactic-tag-additional-text-invert", - "value": "oklch(0.997 0.004 165.9 / 0.684)", + "value": "oklch(0.959 0.028 221.4 / 0.721)", "description": "Text color for the additional tag on dark backgrounds.", "components": [ "tag" @@ -2593,7 +2593,7 @@ }, { "name": "--intergalactic-tag-additional-border-invert", - "value": "oklch(0.995 0.009 144.4 / 0.347)", + "value": "oklch(0.932 0.044 225.1 / 0.378)", "description": "Inverted border color of the additional Tag.", "components": [ "tag" @@ -2601,7 +2601,7 @@ }, { "name": "--intergalactic-tag-primary-bg-hover-active", - "value": "oklch(0.97 0.001 180)", + "value": "oklch(0.97 0.004 215.3)", "description": "Hover and active states of the primary Tag background.", "components": [] }, @@ -2731,7 +2731,7 @@ }, { "name": "--intergalactic-tag-primary-bg-invert-hover-active", - "value": "oklch(0.99 0.017 140 / 0.242)", + "value": "oklch(0.928 0.046 225.1 / 0.264)", "description": "Hover and active states of the primary tag on dark backgrounds.", "components": [ "tag" @@ -2739,7 +2739,7 @@ }, { "name": "--intergalactic-tag-primary-bg-invert-normal", - "value": "oklch(0.969 0.057 140 / 0.118)", + "value": "oklch(0.916 0.055 225.3 / 0.127)", "description": "Primary tag on bold or dark backgrounds—translucent fill for contrast in the normal state.", "components": [ "tag" @@ -2773,7 +2773,7 @@ }, { "name": "--intergalactic-tag-secondary-border", - "value": "oklch(0.95 0.002 180)", + "value": "oklch(0.95 0.006 215.8)", "description": "Border color of the secondary Tag.", "components": [ "tag" @@ -2781,7 +2781,7 @@ }, { "name": "--intergalactic-tag-secondary-border-invert", - "value": "oklch(0.989 0.019 140 / 0.232)", + "value": "oklch(0.928 0.047 225.1 / 0.253)", "description": "Inverted border color of the secondary Tag.", "components": [ "tag" @@ -2813,7 +2813,7 @@ }, { "name": "--intergalactic-tag-secondary-bg-invert-hover-active", - "value": "oklch(0.98 0.036 140 / 0.164)", + "value": "oklch(0.923 0.05 225.2 / 0.178)", "description": "Hover and active states of the secondary tag on dark backgrounds.", "components": [ "tag" @@ -2829,7 +2829,7 @@ }, { "name": "--intergalactic-tag-secondary-text-invert", - "value": "oklch(0.997 0.004 165.9 / 0.684)", + "value": "oklch(0.959 0.028 221.4 / 0.721)", "description": "Text color for the secondary tag on dark backgrounds.", "components": [ "tag" @@ -2855,7 +2855,7 @@ }, { "name": "--intergalactic-text-hint", - "value": "oklch(0.097 0.023 156.5 / 0.468)", + "value": "oklch(0.247 0.049 230.2 / 0.524)", "description": "Supplementary helper text near controls (short guidance), distinct from placeholder text inside inputs.", "components": [ "button", @@ -2865,7 +2865,7 @@ }, { "name": "--intergalactic-text-hint-hover-active", - "value": "oklch(0.095 0.024 154.8 / 0.492)", + "value": "oklch(0.243 0.049 230.4 / 0.548)", "description": "Hover and active states of the hint link text.", "components": [ "typography" @@ -2873,13 +2873,13 @@ }, { "name": "--intergalactic-text-hint-invert", - "value": "oklch(0.75 0.003 165.9)", + "value": "oklch(0.75 0.022 221.4)", "description": "Inverted version of the hint link text.", "components": [] }, { "name": "--intergalactic-text-hint-invert-hover-active", - "value": "oklch(0.85 0.002 173.3)", + "value": "oklch(0.85 0.016 218.8)", "description": "Hover and active states of the inverted version of the hint link text.", "components": [] }, @@ -2911,7 +2911,7 @@ }, { "name": "--intergalactic-text-large-secondary", - "value": "oklch(0.097 0.023 156.5 / 0.468)", + "value": "oklch(0.247 0.049 230.2 / 0.524)", "description": "Secondary text. Use with font-size ≥20px.", "components": [ "typography" @@ -2931,7 +2931,7 @@ }, { "name": "--intergalactic-text-link-primary", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Default primary link color.", "components": [ "button", @@ -2941,7 +2941,7 @@ }, { "name": "--intergalactic-text-link-primary-hover-active", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Hover and active states for the primary link.", "components": [ "button", @@ -2951,7 +2951,7 @@ }, { "name": "--intergalactic-text-link-primary-underline", - "value": "oklch(0.86 0.002 174.1)", + "value": "oklch(0.86 0.015 218.5)", "description": "Underline color for the primary link.", "components": [ "link" @@ -2959,7 +2959,7 @@ }, { "name": "--intergalactic-text-link-primary-invert", - "value": "oklch(0.999 0.001 180 / 0.949)", + "value": "oklch(0.993 0.005 215.6 / 0.956)", "description": "Inverted version of the primary link. Use on dark and colored sbackground only.", "components": [ "link" @@ -2967,7 +2967,7 @@ }, { "name": "--intergalactic-text-link-primary-invert-hover-active", - "value": "oklch(0.999 0.001 180 / 0.949)", + "value": "oklch(0.993 0.005 215.6 / 0.956)", "description": "Hover and active states of the inverted version of the primary link. Use on dark and colored backgrounds only.", "components": [ "link" @@ -2975,7 +2975,7 @@ }, { "name": "--intergalactic-text-link-secondary", - "value": "oklch(0.097 0.023 156.5 / 0.468)", + "value": "oklch(0.247 0.049 230.2 / 0.524)", "description": "Default secondary link color.", "components": [ "link" @@ -2983,7 +2983,7 @@ }, { "name": "--intergalactic-text-link-secondary-hover-active", - "value": "oklch(0.097 0.023 156.5 / 0.468)", + "value": "oklch(0.247 0.049 230.2 / 0.524)", "description": "Hover and active states for the secondary link.", "components": [ "link" @@ -3016,7 +3016,7 @@ }, { "name": "--intergalactic-text-placeholder", - "value": "oklch(0.109 0.023 165.5 / 0.337)", + "value": "oklch(0.282 0.055 228.7 / 0.386)", "description": "Placeholder text color for inputs and fields.", "components": [ "base-trigger", @@ -3029,7 +3029,7 @@ }, { "name": "--intergalactic-text-primary", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Default body and UI copy; strongest reading emphasis for primary content.", "components": [ "accordion", @@ -3067,7 +3067,7 @@ }, { "name": "--intergalactic-text-primary-invert", - "value": "oklch(0.999 0.001 180 / 0.949)", + "value": "oklch(0.993 0.005 215.6 / 0.956)", "description": "Inverted version of the primary text.", "components": [ "date-picker", @@ -3077,7 +3077,7 @@ }, { "name": "--intergalactic-text-secondary", - "value": "oklch(0.097 0.023 156.5 / 0.468)", + "value": "oklch(0.247 0.049 230.2 / 0.524)", "description": "Supporting text: captions, metadata, hints in flowing copy—visually quieter than primary body text.", "components": [ "breadcrumbs", @@ -3100,7 +3100,7 @@ }, { "name": "--intergalactic-text-secondary-invert", - "value": "oklch(0.997 0.004 165.9 / 0.684)", + "value": "oklch(0.959 0.028 221.4 / 0.721)", "description": "Inverted version of the secondary text.", "components": [] }, @@ -3126,7 +3126,7 @@ }, { "name": "--intergalactic-tooltip-bg-invert", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Inverted version of the default Tooltip background.", "components": [ "base-components", @@ -3143,7 +3143,7 @@ }, { "name": "--intergalactic-tooltip-border-invert", - "value": "oklch(0.35 0.006 140)", + "value": "oklch(0.35 0.015 225)", "description": "Border of the Tooltip with dark theme.", "components": [ "base-components", @@ -3152,7 +3152,7 @@ }, { "name": "--intergalactic-tooltip-text", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Text color of the default Tooltip.", "components": [ "tooltip" @@ -3160,7 +3160,7 @@ }, { "name": "--intergalactic-tooltip-text-invert", - "value": "oklch(0.999 0.001 180 / 0.949)", + "value": "oklch(0.993 0.005 215.6 / 0.956)", "description": "Text color of the inverted Tooltip.", "components": [ "base-components", @@ -3177,7 +3177,7 @@ }, { "name": "--intergalactic-wizard-sidebar-bg", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Background of the Wizard sidebar.", "components": [ "wizard" @@ -3185,13 +3185,13 @@ }, { "name": "--intergalactic-wizard-sidebar-control", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.23 0.01 225)", "description": "Background of the control in the Wizard sidebar in its normal state.", "components": [] }, { "name": "--intergalactic-wizard-sidebar-control-active", - "value": "oklch(0.4 0.004 140)", + "value": "oklch(0.4 0.017 225)", "description": "Active state of the control in the Wizard sidebar.", "components": [ "wizard" @@ -3199,7 +3199,7 @@ }, { "name": "--intergalactic-wizard-sidebar-control-hover", - "value": "oklch(0.36 0.005 140)", + "value": "oklch(0.36 0.016 225)", "description": "Hover state of the control in the Wizard sidebar.", "components": [ "wizard" @@ -3207,7 +3207,7 @@ }, { "name": "--intergalactic-wizard-sidebar-text-primary", - "value": "oklch(0.999 0.001 180 / 0.949)", + "value": "oklch(0.993 0.005 215.6 / 0.956)", "description": "Primary text color in the Wizard sidebar.", "components": [ "wizard" @@ -3215,7 +3215,7 @@ }, { "name": "--intergalactic-wizard-sidebar-text-secondary", - "value": "oklch(0.997 0.004 165.9 / 0.684)", + "value": "oklch(0.959 0.028 221.4 / 0.721)", "description": "Secondary text color in the Wizard sidebar.", "components": [] }, @@ -3251,19 +3251,19 @@ }, { "name": "--intergalactic-box-shadow-card", - "value": "0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)", + "value": "0px 0px 1px 0px oklch(0.344 0.064 223.3 / 0.081), 0px 1px 3px 0px oklch(0.344 0.064 223.3 / 0.081)", "description": "Default shadow of the Card.", "components": [] }, { "name": "--intergalactic-box-shadow-card-hover", - "value": "3px 3px 10px 0px oklch(0.176 0.033 175.7 / 0.07)", + "value": "3px 3px 10px 0px oklch(0.344 0.064 223.3 / 0.081)", "description": "Hover state for the shadow of the Card with hover state.", "components": [] }, { "name": "--intergalactic-box-shadow-control-elevated", - "value": "0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)", + "value": "0px 0px 1px 0px oklch(0.344 0.064 223.3 / 0.081), 0px 1px 3px 0px oklch(0.344 0.064 223.3 / 0.081)", "description": "Shadow of the Switch toggle.", "components": [ "pills", @@ -3272,7 +3272,7 @@ }, { "name": "--intergalactic-box-shadow-dnd", - "value": "3px 3px 30px 0px oklch(0.176 0.033 175.7 / 0.07)", + "value": "3px 3px 30px 0px oklch(0.344 0.064 223.3 / 0.081)", "description": "Shadow for show that element are being drag-and-drop.", "components": [ "drag-and-drop" @@ -3280,7 +3280,7 @@ }, { "name": "--intergalactic-box-shadow-modal", - "value": "0px 1px 5px 0px oklch(0.176 0.033 175.7 / 0.07)", + "value": "0px 1px 5px 0px oklch(0.344 0.064 223.3 / 0.081)", "description": "Default shadow if the Modal window.", "components": [ "modal" @@ -3288,7 +3288,7 @@ }, { "name": "--intergalactic-box-shadow-popper", - "value": "1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07)", + "value": "1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)", "description": "Default shadow of all Poppers, Dropdowns and Tooltips.", "components": [ "base-components", @@ -3301,12 +3301,12 @@ }, { "name": "--intergalactic-box-shadow-float-control", - "value": "0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 5px 0px oklch(0.176 0.033 175.7 / 0.07)", + "value": "0px 0px 1px 0px oklch(0.344 0.064 223.3 / 0.081), 0px 1px 5px 0px oklch(0.344 0.064 223.3 / 0.081)", "components": [] }, { "name": "--intergalactic-box-shadow-float-control-hover", - "value": "3px 3px 10px 0px oklch(0.176 0.033 175.7 / 0.07)", + "value": "3px 3px 10px 0px oklch(0.344 0.064 223.3 / 0.081)", "components": [] }, { @@ -3329,7 +3329,7 @@ }, { "name": "--intergalactic-keyboard-focus", - "value": "0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469)", + "value": "0px 0px 0px 3px oklch(from oklch(0.23 0.01 225) l c h / 0.5)", "description": "Default keyboard focus box-shadow styles.", "components": [ "input-tags", From 85ea5ab10a09ab7bfa8eb6ed323efa302b911b93 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Fri, 25 Sep 2026 18:52:03 +0200 Subject: [PATCH 3/7] [theme] grays become more cold --- .../accordion/src/style/accordion.shadow.css | 16 +- semcore/badge/src/style/badge.shadow.css | 20 +- .../flex-box/style/focus-outline-mixin.css | 2 +- .../src/components/hint/style/hint.shadow.css | 8 +- .../components/popper/style/popper.shadow.css | 2 +- .../scroll-area/style/scroll-area.shadow.css | 8 +- .../scroll-area/style/scroll-bar.shadow.css | 2 +- .../src/style/base-trigger.shadow.css | 12 +- .../src/style/button-trigger.shadow.css | 4 +- .../src/style/filter-trigger.shadow.css | 10 +- .../src/style/breadcrumbs.shadow.css | 8 +- .../InputField/inputField.shadow.css | 12 +- .../src/component/Button/button.shadow.css | 96 ++-- .../ButtonLink/buttonLink.shadow.css | 8 +- semcore/card/src/style/card.shadow.css | 6 +- .../carousel/src/style/carousel.shadow.css | 8 +- .../checkbox/src/style/checkbox.shadow.css | 12 +- .../src/style/color-picker.shadow.css | 20 +- semcore/counter/src/style/counter.shadow.css | 4 +- .../LegendItem/legend-item.shadow.css | 2 +- .../src/style/abstract-chart.shadow.css | 2 +- semcore/d3-chart/src/style/area.shadow.css | 6 +- semcore/d3-chart/src/style/axis.shadow.css | 10 +- semcore/d3-chart/src/style/bar.shadow.css | 12 +- semcore/d3-chart/src/style/bubble.shadow.css | 6 +- semcore/d3-chart/src/style/donut.shadow.css | 4 +- semcore/d3-chart/src/style/dot.shadow.css | 2 +- semcore/d3-chart/src/style/hover.shadow.css | 8 +- semcore/d3-chart/src/style/line.shadow.css | 6 +- .../src/style/plotA11yView.shadow.css | 6 +- semcore/d3-chart/src/style/radar.shadow.css | 14 +- .../d3-chart/src/style/reference.shadow.css | 8 +- .../d3-chart/src/style/scatterplot.shadow.css | 2 +- semcore/d3-chart/src/style/tooltip.shadow.css | 14 +- .../src/components/Body/style.shadow.css | 28 +- .../src/components/Head/style.shadow.css | 26 +- .../date-picker/src/style/calendar.shadow.css | 44 +- .../src/style/date-picker.shadow.css | 14 +- semcore/divider/src/style/divider.shadow.css | 12 +- semcore/dot/src/style/dot.shadow.css | 2 +- .../src/style/drag-and-drop.shadow.css | 8 +- .../src/style/dropdown-menu.shadow.css | 4 +- .../dropdown/src/style/dropdown.shadow.css | 26 +- semcore/errors/src/style/errors.shadow.css | 4 +- .../src/components/badge/badge.shadow.css | 2 +- .../src/components/button/button.shadow.css | 6 +- .../src/components/notice/notice.shadow.css | 4 +- .../src/components/switch/switch.shadow.css | 2 +- .../src/style/feature-popover.shadow.css | 8 +- .../src/style/checkbox-button.shadow.css | 8 +- .../src/style/slider-rating.shadow.css | 4 +- semcore/flags/src/style/flags.shadow.css | 6 +- .../src/style/fullscreen-modal.shadow.css | 6 +- .../src/style/inline-input.shadow.css | 14 +- .../src/style/input-mask.shadow.css | 4 +- .../src/style/input-number.shadow.css | 4 +- .../input-tags/src/style/input-tag.shadow.css | 4 +- semcore/input/src/style/input.shadow.css | 14 +- semcore/link/src/style/link.shadow.css | 16 +- .../src/component/score/line.shadow.css | 6 +- semcore/mini-chart/src/styles/line.shadow.css | 6 +- semcore/modal/src/style/modal.shadow.css | 10 +- .../src/style/notice-bubble.shadow.css | 6 +- semcore/notice/src/style/notice.shadow.css | 18 +- .../src/style/pagination.shadow.css | 6 +- semcore/pills/src/style/pills.shadow.css | 12 +- .../product-head/src/style/title.shadow.css | 2 +- .../src/style/progress-bar.shadow.css | 10 +- .../src/styles/radio-cards.shadow.css | 10 +- semcore/radio/src/style/radio.shadow.css | 8 +- semcore/select/src/style/select.shadow.css | 14 +- .../src/style/side-panel.shadow.css | 16 +- semcore/skeleton/src/style/chart.shadow.css | 4 +- .../skeleton/src/style/skeleton.shadow.css | 4 +- semcore/slider/src/style/slider.shadow.css | 12 +- .../src/style/spin-container.shadow.css | 2 +- semcore/spin/src/style/spin.shadow.css | 4 +- semcore/switch/src/style/switch.shadow.css | 22 +- .../tab-line/src/style/tab-line.shadow.css | 10 +- .../tab-panel/src/style/tab-panel.shadow.css | 12 +- semcore/tag/src/style/tag.shadow.css | 24 +- .../textarea/src/style/textarea.shadow.css | 10 +- .../PickerFormat/picker-format.shadow.css | 12 +- .../TimePicker/time-picker.shadow.css | 4 +- semcore/tooltip/src/style/tooltip.shadow.css | 18 +- .../src/style/blockquote.shadow.css | 6 +- semcore/typography/src/style/list.shadow.css | 2 +- semcore/typography/src/style/text.shadow.css | 28 +- .../src/style/widget-empty.shadow.css | 4 +- semcore/wizard/src/style/wizard.shadow.css | 10 +- tools/theme/src/colors/index.ts | 10 +- tools/theme/src/theme.ts | 2 +- .../docs/style/design-tokens/base-tokens.json | 46 +- .../style/design-tokens/design-tokens.json | 414 +++++++++--------- 94 files changed, 710 insertions(+), 704 deletions(-) diff --git a/semcore/accordion/src/style/accordion.shadow.css b/semcore/accordion/src/style/accordion.shadow.css index fae0707fd2..b0234c3de5 100644 --- a/semcore/accordion/src/style/accordion.shadow.css +++ b/semcore/accordion/src/style/accordion.shadow.css @@ -11,8 +11,8 @@ SItemToggle { font-weight: var(--intergalactic-regular, 400); &[use='primary'] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); - background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.003 215)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); + background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.004 232)); border-radius: var(--intergalactic-surface-rounded, 8px); padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-large, 16px) @@ -26,7 +26,7 @@ SItemToggle { } &:hover { - background-color: var(--intergalactic-bg-secondary-neutral-hover, oklch(0.97 0.004 215.3)); + background-color: var(--intergalactic-bg-secondary-neutral-hover, oklch(0.97 0.005 232.2)); } SItemToggleButton { @@ -40,7 +40,7 @@ SItemToggle { } &[use='secondary'] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); padding: var(--intergalactic-spacing-content-gap-large, 8px) var(--intergalactic-spacing-content-padding-xxsmall, 2px) @@ -70,7 +70,7 @@ SItemToggleButton { SItemChevron { transform: rotate(0deg); transition: transform calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)); - fill: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + fill: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); &[selected] { transform: rotate(90deg); @@ -82,7 +82,7 @@ SAccordionItem { position: relative; overflow: clip; border-radius: var(--intergalactic-surface-rounded, 8px); - background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.003 215)); + background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.004 232)); &::before { content: ''; @@ -93,7 +93,7 @@ SAccordionItem { width: 2px; z-index: 1; opacity: 0; - background-color: var(--intergalactic-border-accent, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-border-accent, oklch(0.23 0.009 245)); transition-property: opacity; transition-timing-function: var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)); } @@ -113,7 +113,7 @@ SAccordionItem { &[use='secondary'] { SItemCollapse { - border-left: 2px solid var(--intergalactic-border-accent, oklch(0.23 0.01 225)); + border-left: 2px solid var(--intergalactic-border-accent, oklch(0.23 0.009 245)); } } } diff --git a/semcore/badge/src/style/badge.shadow.css b/semcore/badge/src/style/badge.shadow.css index 5c039e40d3..af54b579d1 100644 --- a/semcore/badge/src/style/badge.shadow.css +++ b/semcore/badge/src/style/badge.shadow.css @@ -12,7 +12,7 @@ SBadge { letter-spacing: 0.3px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - color: var(--intergalactic-badge-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-badge-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); } SBadge[theme='default'] { @@ -33,18 +33,18 @@ SBadge[theme='default'] { } &[type='soon'] { - background-color: var(--intergalactic-badge-accent-soon, oklch(0.64 0.025 224.1)); + background-color: var(--intergalactic-badge-accent-soon, oklch(0.64 0.022 243.8)); } &[type='unavailable'] { - color: var(--intergalactic-badge-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); - background-color: var(--intergalactic-badge-bg-unavailable, oklch(0.97 0.004 215.3)); + color: var(--intergalactic-badge-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); + background-color: var(--intergalactic-badge-bg-unavailable, oklch(0.97 0.005 232.2)); } } SBadge[theme='invert'] { - color: var(--intergalactic-badge-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); - background-color: var(--intergalactic-badge-bg-invert, oklch(0.916 0.055 225.3 / 0.127)); + color: var(--intergalactic-badge-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); + background-color: var(--intergalactic-badge-bg-invert, oklch(0.907 0.048 245.2 / 0.129)); } SBadge[theme='light'] { @@ -65,11 +65,11 @@ SBadge[theme='light'] { background-color: var(--intergalactic-badge-light-new, oklch(0.9 0.11 175)); } &[type='soon'] { - color: var(--intergalactic-badge-light-soon-text, oklch(0.46 0.02 225)); - background-color: var(--intergalactic-badge-light-soon, oklch(0.9 0.011 217.3)); + color: var(--intergalactic-badge-light-soon-text, oklch(0.46 0.018 245)); + background-color: var(--intergalactic-badge-light-soon, oklch(0.9 0.009 234)); } &[type='unavailable'] { - color: var(--intergalactic-badge-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); - background-color: var(--intergalactic-badge-bg-unavailable, oklch(0.97 0.004 215.3)); + color: var(--intergalactic-badge-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); + background-color: var(--intergalactic-badge-bg-unavailable, oklch(0.97 0.005 232.2)); } } diff --git a/semcore/base-components/src/components/flex-box/style/focus-outline-mixin.css b/semcore/base-components/src/components/flex-box/style/focus-outline-mixin.css index b1845a03ef..8a8e3bfaf5 100644 --- a/semcore/base-components/src/components/flex-box/style/focus-outline-mixin.css +++ b/semcore/base-components/src/components/flex-box/style/focus-outline-mixin.css @@ -1,5 +1,5 @@ @define-mixin focus-outline-mixin $offset: 2px { - outline-color: var(--intergalactic-keyboard-focus-outline, oklch(0.23 0.01 225)); + outline-color: var(--intergalactic-keyboard-focus-outline, oklch(0.23 0.009 245)); outline-style: solid; outline-width: 2px; outline-offset: $offset; diff --git a/semcore/base-components/src/components/hint/style/hint.shadow.css b/semcore/base-components/src/components/hint/style/hint.shadow.css index 2a05668191..d60da59d72 100644 --- a/semcore/base-components/src/components/hint/style/hint.shadow.css +++ b/semcore/base-components/src/components/hint/style/hint.shadow.css @@ -8,14 +8,14 @@ SHintPopper { opacity: 0; pointer-events: none; - background: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 225)); - border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.017 225)); - color: var(--intergalactic-tooltip-text-invert, oklch(0.993 0.005 215.6 / 0.956)); + background: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.009 245)); + border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.015 245)); + color: var(--intergalactic-tooltip-text-invert, oklch(0.991 0.005 232.5 / 0.959)); padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-small, 8px); border-radius: var(--intergalactic-rounded-small, 4px); font-size: var(--intergalactic-fs-100, 12px); line-height: var(--intergalactic-lh-100, 1.3334); - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.324 0.077 242.1 / 0.079)); animation-fill-mode: both; animation-timing-function: var(--timingFunction); diff --git a/semcore/base-components/src/components/popper/style/popper.shadow.css b/semcore/base-components/src/components/popper/style/popper.shadow.css index 4776e5a55b..4fdb7018fc 100644 --- a/semcore/base-components/src/components/popper/style/popper.shadow.css +++ b/semcore/base-components/src/components/popper/style/popper.shadow.css @@ -1,5 +1,5 @@ SPopper { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } SPopper:focus-visible { diff --git a/semcore/base-components/src/components/scroll-area/style/scroll-area.shadow.css b/semcore/base-components/src/components/scroll-area/style/scroll-area.shadow.css index 19b893eeb8..999baa60cc 100644 --- a/semcore/base-components/src/components/scroll-area/style/scroll-area.shadow.css +++ b/semcore/base-components/src/components/scroll-area/style/scroll-area.shadow.css @@ -32,14 +32,14 @@ SShadowHorizontal[size] { &[themeLeft='dark'] { &:before { background: var(--intergalactic-scroll-area-shadow-left, - linear-gradient(to right, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)); + linear-gradient(to right, oklch(from oklch(0.23 0.009 245) l c h / 0.08) 20.55%, transparent 100%)); } } &[themeRight='dark'] { &:after { background: var(--intergalactic-scroll-area-shadow-right, - linear-gradient(to left, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)); + linear-gradient(to left, oklch(from oklch(0.23 0.009 245) l c h / 0.08) 20.55%, transparent 100%)); } } @@ -112,14 +112,14 @@ SShadowVertical[size] { &[themeTop='dark'] { &:before { background: var(--intergalactic-scroll-area-shadow-top, - linear-gradient(to bottom, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)); + linear-gradient(to bottom, oklch(from oklch(0.23 0.009 245) l c h / 0.08) 20.55%, transparent 100%)); } } &[themeBottom='dark'] { &:after { background: var(--intergalactic-scroll-area-shadow-bottom, - linear-gradient(to top, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)); + linear-gradient(to top, oklch(from oklch(0.23 0.009 245) l c h / 0.08) 20.55%, transparent 100%)); } } diff --git a/semcore/base-components/src/components/scroll-area/style/scroll-bar.shadow.css b/semcore/base-components/src/components/scroll-area/style/scroll-bar.shadow.css index dd45c834c6..18080d9ab4 100644 --- a/semcore/base-components/src/components/scroll-area/style/scroll-bar.shadow.css +++ b/semcore/base-components/src/components/scroll-area/style/scroll-bar.shadow.css @@ -27,5 +27,5 @@ SSlider { height: 6px; /* disable-tokens-validator */ border-radius: var(--intergalactic-rounded-small, 6px); - background-color: var(--intergalactic-scroll-bar-background, oklch(0.324 0.062 225.5 / 0.189)); + background-color: var(--intergalactic-scroll-bar-background, oklch(0.277 0.066 242.6 / 0.18)); } diff --git a/semcore/base-trigger/src/style/base-trigger.shadow.css b/semcore/base-trigger/src/style/base-trigger.shadow.css index 4f828a21e0..0ceb79dbd6 100644 --- a/semcore/base-trigger/src/style/base-trigger.shadow.css +++ b/semcore/base-trigger/src/style/base-trigger.shadow.css @@ -21,8 +21,8 @@ SBaseTrigger { background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0)); font-weight: var(--intergalactic-regular, 400); - border: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + border: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); border-radius: var(--intergalactic-control-rounded, 6px); padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px); @@ -38,16 +38,16 @@ SBaseTrigger { } &:focus-visible { - border: 1px solid var(--intergalactic-border-info-active, oklch(0.23 0.01 225)); + border: 1px solid var(--intergalactic-border-info-active, oklch(0.23 0.009 245)); } &:hover { - background-color: var(--intergalactic-control-select-trigger-hover, oklch(0.97 0.004 215.3)); + background-color: var(--intergalactic-control-select-trigger-hover, oklch(0.97 0.005 232.2)); } &:active, &[active] { - border-color: var(--intergalactic-border-info-active, oklch(0.23 0.01 225)); + border-color: var(--intergalactic-border-info-active, oklch(0.23 0.009 245)); &:hover { background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0)); @@ -133,7 +133,7 @@ SBaseTrigger[neighborLocation='left'] { } SText[display-placeholder] { - color: var(--intergalactic-text-placeholder, oklch(0.282 0.055 228.7 / 0.386)); + color: var(--intergalactic-text-placeholder, oklch(0.242 0.062 245.8 / 0.371)); } SBaseTrigger[state='valid'] { diff --git a/semcore/base-trigger/src/style/button-trigger.shadow.css b/semcore/base-trigger/src/style/button-trigger.shadow.css index dfca237b1d..a2121a2908 100644 --- a/semcore/base-trigger/src/style/button-trigger.shadow.css +++ b/semcore/base-trigger/src/style/button-trigger.shadow.css @@ -1,11 +1,11 @@ SButtonAddon { width: var(--intergalactic-spacing-3x, 12px); height: var(--intergalactic-spacing-3x, 12px); - color: var(--intergalactic-icon-non-interactive, oklch(0.6 0.026 225)); + color: var(--intergalactic-icon-non-interactive, oklch(0.6 0.023 245)); position: relative; left: var(--intergalactic-spacing-05x, 2px); } SButtonTriggerSpin { - fill: var(--intergalactic-icon-non-interactive, oklch(0.6 0.026 225)); + fill: var(--intergalactic-icon-non-interactive, oklch(0.6 0.023 245)); } diff --git a/semcore/base-trigger/src/style/filter-trigger.shadow.css b/semcore/base-trigger/src/style/filter-trigger.shadow.css index bcbe2e036a..985160126a 100644 --- a/semcore/base-trigger/src/style/filter-trigger.shadow.css +++ b/semcore/base-trigger/src/style/filter-trigger.shadow.css @@ -13,7 +13,7 @@ STrigger { top: 50%; transform: translateY(-50%); width: 1px; - background-color: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + background-color: var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); transition: height calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-out; } @@ -60,7 +60,7 @@ SWrapper { &::after { content: ''; position: absolute; - border: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); border-radius: var(--intergalactic-control-rounded, 6px); inset: 0; z-index: 1; @@ -70,14 +70,14 @@ SWrapper { &[empty]:active, &[empty][active], &[empty]:has(STrigger:focus-visible) { - background-color: var(--intergalactic-control-select-trigger-active, oklch(0.96 0.005 215.6)); + background-color: var(--intergalactic-control-select-trigger-active, oklch(0.96 0.005 232.5)); STrigger { background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0)); } &::after { - border-color: var(--intergalactic-border-info-active, oklch(0.23 0.01 225)); + border-color: var(--intergalactic-border-info-active, oklch(0.23 0.009 245)); } } @@ -94,7 +94,7 @@ SWrapper { border: none; &[active], &:active { - background-color: var(--intergalactic-control-select-trigger-active, oklch(0.96 0.005 215.6)); + background-color: var(--intergalactic-control-select-trigger-active, oklch(0.96 0.005 232.5)); } } } diff --git a/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css b/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css index 385628ecca..3ae16fef56 100644 --- a/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css +++ b/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css @@ -10,7 +10,7 @@ SBreadcrumbs { list-style: none; SSeparator { - color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.02 220.2)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.017 238.3)); display: flex; &:last-child { @@ -31,18 +31,18 @@ SBreadcrumbs { position: relative; font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); text-decoration: none; cursor: pointer; &:hover { text-decoration: underline; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } } SBreadcrumbsItem[active] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); cursor: default; &:hover { text-decoration: none; diff --git a/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css b/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css index ee88cc853f..9669c33a76 100644 --- a/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css +++ b/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css @@ -2,14 +2,14 @@ SInputField>ol { box-sizing: content-box; outline-color: transparent; border-radius: var(--intergalactic-control-rounded, 6px); - border-color: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border-color: var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); border-style: solid; border-width: 1px; overflow: auto; position: relative; background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); word-wrap: break-word; word-break: break-word; font-family: inherit; @@ -20,7 +20,7 @@ SInputField>ol { &:empty::before { content: '1. ' attr(data-placeholder); - color: var(--intergalactic-text-placeholder, oklch(0.282 0.055 228.7 / 0.386)); + color: var(--intergalactic-text-placeholder, oklch(0.242 0.062 245.8 / 0.371)); position: absolute; white-space: pre-wrap; padding-left: var(--intergalactic-spacing-content-padding-medium, 12px); @@ -48,7 +48,7 @@ SInputField>ol { display: inline-block; text-align: right; - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); margin-right: var(--intergalactic-spacing-content-gap-small, 4px); font-variant-numeric: normal; font-weight: 300; @@ -151,7 +151,7 @@ SInputField[size='l']>ol { SInputField[state='normal']:not([disabled])>ol { &:focus { - border-color: var(--intergalactic-border-info-active, oklch(0.23 0.01 225)); + border-color: var(--intergalactic-border-info-active, oklch(0.23 0.009 245)); @mixin focus-outline-mixin { outline-offset: 0; transition-property: outline-color, outline-width; @@ -193,7 +193,7 @@ SInputField[state='invalid']>ol { } SInputField[readonly]>ol { - background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.003 215)); + background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.004 232)); } SInputField[disabled]>ol { diff --git a/semcore/button/src/component/Button/button.shadow.css b/semcore/button/src/component/Button/button.shadow.css index 61de01d72d..fcbffe0510 100644 --- a/semcore/button/src/component/Button/button.shadow.css +++ b/semcore/button/src/component/Button/button.shadow.css @@ -20,7 +20,7 @@ SButton { touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-weight: var(--intergalactic-medium, 500); - color: var(--intergalactic-control-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-control-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); min-width: fit-content; &::-moz-focus-inner { @@ -71,133 +71,133 @@ SButton[size='l']:has(SAddon:only-child) { } SButton[theme='primary-info'] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 225)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.009 245)); &:hover { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); - background-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.014 225)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); + background-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.012 245)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); - background-color: var(--intergalactic-control-primary-info-active, oklch(0 0 225)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); + background-color: var(--intergalactic-control-primary-info-active, oklch(0 0 245)); } } SButton[theme='primary-success'] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); background-color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170)); &:hover { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); background-color: var(--intergalactic-control-primary-success-hover, oklch(0.6 0.155 170)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); background-color: var(--intergalactic-control-primary-success-active, oklch(0.58 0.151 170)); } } SButton[theme='primary-brand'] { - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.009 245)); background-color: var(--intergalactic-control-primary-brand, oklch(0.74 0.17 303)); &:hover { - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.009 245)); background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.72 0.181 302.3)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.009 245)); background-color: var(--intergalactic-control-primary-brand-active, oklch(0.7 0.191 301.5)); } } SButton[theme='primary-warning'] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); background-color: var(--intergalactic-control-primary-brand, oklch(0.74 0.17 303)); &:hover { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.72 0.181 302.3)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); background-color: var(--intergalactic-control-primary-brand-active, oklch(0.7 0.191 301.5)); } } SButton[theme='primary-danger'] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); &:hover { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); background-color: var(--intergalactic-control-primary-critical-hover, oklch(0.6 0.219 25.5)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); background-color: var(--intergalactic-control-primary-critical-active, oklch(0.58 0.215 26)); } } SButton[theme='primary-invert'] { - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.009 245)); background-color: var(--intergalactic-control-primary-invert, oklch(1 0 0)); &:hover { - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); - background-color: var(--intergalactic-control-primary-invert-hover, oklch(0.96 0.005 215.6)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.009 245)); + background-color: var(--intergalactic-control-primary-invert-hover, oklch(0.96 0.005 232.5)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); - background-color: var(--intergalactic-control-primary-invert-active, oklch(0.94 0.007 216.1)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.009 245)); + background-color: var(--intergalactic-control-primary-invert-active, oklch(0.94 0.006 233)); } } SButton[theme='secondary-muted'] { - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); - background-color: var(--intergalactic-control-secondary-neutral, oklch(0.351 0.065 223 / 0.066)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.009 245)); + background-color: var(--intergalactic-control-secondary-neutral, oklch(0.324 0.077 242.1 / 0.079)); &:hover { background-color: var(--intergalactic-control-secondary-neutral-hover, - oklch(0.339 0.063 223.5 / 0.097)); - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); + oklch(0.31 0.074 242 / 0.094)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.009 245)); } &:active, &[active] { background-color: var(--intergalactic-control-secondary-neutral-active, - oklch(0.332 0.062 224.2 / 0.128)); - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); + oklch(0.291 0.069 241.9 / 0.123)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.009 245)); } } SButton[theme='secondary-invert'] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); - background-color: var(--intergalactic-control-secondary-invert, oklch(0.916 0.055 225.3 / 0.127)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); + background-color: var(--intergalactic-control-secondary-invert, oklch(0.907 0.048 245.2 / 0.129)); &:hover { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); - background-color: var(--intergalactic-control-secondary-invert-hover, oklch(0.923 0.05 225.2 / 0.178)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); + background-color: var(--intergalactic-control-secondary-invert-hover, oklch(0.915 0.044 245.1 / 0.18)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); background-color: var(--intergalactic-control-secondary-invert-active, - oklch(0.926 0.048 225.1 / 0.22)); + oklch(0.919 0.042 245.1 / 0.223)); } } @@ -218,35 +218,35 @@ SButton[theme='tertiary-info'] { } SButton[theme='tertiary-muted'] { - color: var(--intergalactic-control-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-control-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); background-color: var(--intergalactic-control-tertiary-neutral, transparent); &:hover { - background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.363 0.068 222.8 / 0.05)); - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.375 0.09 242.7 / 0.05)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.009 245)); } &:active, &[active] { background-color: var(--intergalactic-control-tertiary-neutral-active, - oklch(0.351 0.065 223 / 0.066)); - color: var(--intergalactic-control-text-primary, oklch(0.23 0.01 225)); + oklch(0.344 0.082 242.3 / 0.065)); + color: var(--intergalactic-control-text-primary, oklch(0.23 0.009 245)); } } SButton[theme='tertiary-invert'] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); background-color: var(--intergalactic-control-tertiary-invert, transparent); &:hover { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); - background-color: var(--intergalactic-control-tertiary-invert-hover, oklch(0.923 0.05 225.2 / 0.178)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); + background-color: var(--intergalactic-control-tertiary-invert-hover, oklch(0.915 0.044 245.1 / 0.18)); } &:active, &[active] { - color: var(--intergalactic-control-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); - background-color: var(--intergalactic-control-tertiary-invert-active, oklch(0.926 0.048 225.1 / 0.22)); + color: var(--intergalactic-control-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); + background-color: var(--intergalactic-control-tertiary-invert-active, oklch(0.919 0.042 245.1 / 0.223)); } } @@ -269,12 +269,12 @@ SButton[neighborLocation='left'] { position: relative; &:after { - background-color: var(--intergalactic-border-primary-invert, oklch(0.932 0.044 225.1 / 0.378)); + background-color: var(--intergalactic-border-primary-invert, oklch(0.925 0.039 245 / 0.382)); } /* TODO: need to add a new variables for neighbor location borders based on the final UI */ &[theme='secondary-muted'] { &:after { - background-color: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); /* TODO: need to add a new variables for neighbor location borders based on the final UI */ + background-color: var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); /* TODO: need to add a new variables for neighbor location borders based on the final UI */ } } } diff --git a/semcore/button/src/component/ButtonLink/buttonLink.shadow.css b/semcore/button/src/component/ButtonLink/buttonLink.shadow.css index 9171a7ab1a..a5155c1614 100644 --- a/semcore/button/src/component/ButtonLink/buttonLink.shadow.css +++ b/semcore/button/src/component/ButtonLink/buttonLink.shadow.css @@ -5,7 +5,7 @@ SButtonLink { SButtonLink[use='primary'] { &:not([color]) { - color: var(--intergalactic-text-link-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-link-primary, oklch(0.23 0.009 245)); } SText { @@ -16,7 +16,7 @@ SButtonLink[use='primary'] { &:active, &:hover { &:not([color]) { - color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.009 245)); } SText { @@ -26,12 +26,12 @@ SButtonLink[use='primary'] { } SButtonLink[use='secondary']:not([color]) { - color: var(--intergalactic-text-hint, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-hint, oklch(0.209 0.055 246.6 / 0.505)); &[active], &:active, &:hover { - color: var(--intergalactic-text-link-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-link-primary, oklch(0.23 0.009 245)); } } diff --git a/semcore/card/src/style/card.shadow.css b/semcore/card/src/style/card.shadow.css index 5f719077ce..cc5f709fe2 100644 --- a/semcore/card/src/style/card.shadow.css +++ b/semcore/card/src/style/card.shadow.css @@ -3,7 +3,7 @@ SCard { background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); padding: 0; border-radius: var(--intergalactic-surface-rounded, 8px); - border: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); + border: 1px solid var(--intergalactic-border-secondary, oklch(0.324 0.077 242.1 / 0.079)); STitle { margin: 0 var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-1x, 4px) 0; @@ -20,7 +20,7 @@ SCard { margin: 0 0 var(--intergalactic-spacing-1x, 4px) 0; font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); } SHeader { @@ -31,7 +31,7 @@ SCard { } SBody { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); padding: var(--intergalactic-spacing-content-padding-xlarge, 20px); } } diff --git a/semcore/carousel/src/style/carousel.shadow.css b/semcore/carousel/src/style/carousel.shadow.css index d7690c3599..a37fcf3817 100644 --- a/semcore/carousel/src/style/carousel.shadow.css +++ b/semcore/carousel/src/style/carousel.shadow.css @@ -89,7 +89,7 @@ SIndicator { flex-shrink: 0; width: 12px; height: 12px; - background-color: var(--intergalactic-control-carousel-indicator, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-control-carousel-indicator, oklch(0.23 0.009 245)); border-radius: var(--intergalactic-carousel-indicator-rounded, 8px); opacity: 0.25; object-fit: cover; @@ -104,7 +104,7 @@ SIndicator { &[active] { width: 24px; - background-color: var(--intergalactic-control-carousel-indicator-active, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-control-carousel-indicator-active, oklch(0.23 0.009 245)); opacity: 1; } } @@ -127,7 +127,7 @@ SIndicator[inverted] { } &[active] { - background-color: var(--intergalactic-control-carousel-indicator-active, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-control-carousel-indicator-active, oklch(0.23 0.009 245)); opacity: 1; } } @@ -138,7 +138,7 @@ SNext { align-items: center; justify-content: center; cursor: pointer; - color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.025 225)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.022 245)); SPrevButton span:has(> svg:only-child), SNextButton span:has(> svg:only-child) { diff --git a/semcore/checkbox/src/style/checkbox.shadow.css b/semcore/checkbox/src/style/checkbox.shadow.css index 2a48cbd5b3..0554898ad4 100644 --- a/semcore/checkbox/src/style/checkbox.shadow.css +++ b/semcore/checkbox/src/style/checkbox.shadow.css @@ -10,7 +10,7 @@ SLabel { SText { margin-left: var(--intergalactic-spacing-content-gap-medium, 6px); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); &[disabled] { opacity: var(--intergalactic-disabled-opacity, 0.4); @@ -68,7 +68,7 @@ SCheckbox { } &[state='normal']:before { - border-color: var(--intergalactic-control-checkbox-border, oklch(0.324 0.062 225.5 / 0.189)); + border-color: var(--intergalactic-control-checkbox-border, oklch(0.277 0.066 242.6 / 0.18)); } } @@ -105,13 +105,13 @@ SText[size='m'] { SControl[checked]~SCheckbox[state='normal']:before, SControl[checked]~SCheckbox[state='invalid']:before { - background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 225)); - border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.009 245)); + border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.009 245)); } SControl[indeterminate]~SCheckbox[state='normal']:before { - background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 225)); - border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.009 245)); + border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.009 245)); } SCheckbox[state='invalid'], diff --git a/semcore/color-picker/src/style/color-picker.shadow.css b/semcore/color-picker/src/style/color-picker.shadow.css index 8dadd4e7b1..2b7d699c30 100644 --- a/semcore/color-picker/src/style/color-picker.shadow.css +++ b/semcore/color-picker/src/style/color-picker.shadow.css @@ -21,7 +21,7 @@ SItemContainer { box-sizing: border-box; &:hover { - border: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); } &::after { @@ -39,7 +39,7 @@ SItemContainer:hover>SCloseIcon { } SItemContainer[selected] { - border: 1px solid var(--intergalactic-border-info-active, oklch(0.23 0.01 225)); + border: 1px solid var(--intergalactic-border-info-active, oklch(0.23 0.009 245)); } SItemContainer[displayLabel] { @@ -51,7 +51,7 @@ SItemContainer[displayLabel] { SItemContainer:not([value]) { &::after { - border: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); opacity: 1; } @@ -63,7 +63,7 @@ SItemContainer:not([value]) { transform: translate(-50%, -50%) rotate(45deg); width: 1px; height: 22px; - background: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + background: var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); z-index: 0; } } @@ -95,11 +95,11 @@ SPlusButton { cursor: pointer; &:hover { - background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.363 0.068 222.8 / 0.05)); + background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.375 0.09 242.7 / 0.05)); } &:active { - background-color: var(--intergalactic-control-tertiary-neutral-active, oklch(0.351 0.065 223 / 0.066)); + background-color: var(--intergalactic-control-tertiary-neutral-active, oklch(0.344 0.082 242.3 / 0.065)); } } @@ -125,7 +125,7 @@ STriggerCircle { } STriggerCircle:not([data-value]) { - border: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); &::before { content: ''; @@ -135,12 +135,12 @@ STriggerCircle:not([data-value]) { transform: translate(-50%, -50%) rotate(45deg); width: 1px; height: 20px; - background: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + background: var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); } } SChevronDownM { - fill: var(--intergalactic-text-primary, oklch(0.23 0.01 225)) + fill: var(--intergalactic-text-primary, oklch(0.23 0.009 245)) } SCloseIcon { @@ -170,7 +170,7 @@ SItemColor { width: 22px; height: 22px; border-radius: 50%; - border: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); + border: 1px solid var(--intergalactic-border-secondary, oklch(0.324 0.077 242.1 / 0.079)); background: var(--data-value); box-sizing: border-box; margin: 5px; diff --git a/semcore/counter/src/style/counter.shadow.css b/semcore/counter/src/style/counter.shadow.css index bac5328d8e..0ca0a79046 100644 --- a/semcore/counter/src/style/counter.shadow.css +++ b/semcore/counter/src/style/counter.shadow.css @@ -9,9 +9,9 @@ SCounter { border-radius: var(--intergalactic-counter-rounded, 12px); font-weight: var(--intergalactic-medium, 500); - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); - border: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); } SCounter[size='s'] { diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css index d9de6b6434..df8924b4fa 100644 --- a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css +++ b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css @@ -85,7 +85,7 @@ SAdditionalLabel { SAdditionalLabel::before { content: ''; display: inline-block; - background-color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + background-color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); height: 4px; width: 4px; border-radius: 2px; diff --git a/semcore/d3-chart/src/style/abstract-chart.shadow.css b/semcore/d3-chart/src/style/abstract-chart.shadow.css index ed10ca8643..ee117a8c82 100644 --- a/semcore/d3-chart/src/style/abstract-chart.shadow.css +++ b/semcore/d3-chart/src/style/abstract-chart.shadow.css @@ -40,7 +40,7 @@ STooltipDeltaWrapper { } &[trend='stable'] { - color: var(--intergalactic-text-secondary-invert, oklch(0.959 0.028 221.4 / 0.721)); + color: var(--intergalactic-text-secondary-invert, oklch(0.953 0.025 240.1 / 0.726)); } STooltipDeltaIcon { diff --git a/semcore/d3-chart/src/style/area.shadow.css b/semcore/d3-chart/src/style/area.shadow.css index 0d369b41aa..51d369e788 100644 --- a/semcore/d3-chart/src/style/area.shadow.css +++ b/semcore/d3-chart/src/style/area.shadow.css @@ -1,7 +1,7 @@ @import './var.css'; SArea { - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.009 245)); fill-opacity: 0.1; mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.48) 60%, transparent 100%); } @@ -20,7 +20,7 @@ SArea[transparent] { } SAreaLine { - stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); + stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.009 245)); stroke-width: 2; fill: transparent; } @@ -42,7 +42,7 @@ SAreaLine { SNull { fill: transparent; - stroke: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.011 217.3)); + stroke: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.009 234)); stroke-dasharray: 4; } diff --git a/semcore/d3-chart/src/style/axis.shadow.css b/semcore/d3-chart/src/style/axis.shadow.css index f1e79b93cc..c557b288f8 100644 --- a/semcore/d3-chart/src/style/axis.shadow.css +++ b/semcore/d3-chart/src/style/axis.shadow.css @@ -1,5 +1,5 @@ SAxis { - stroke: var(--intergalactic-chart-grid-x-axis, oklch(0.88 0.013 217.9)); + stroke: var(--intergalactic-chart-grid-x-axis, oklch(0.88 0.011 234.9)); } SAxis[hide] { @@ -8,10 +8,10 @@ SAxis[hide] { STick { font-size: var(--intergalactic-fs-100, 12px); - fill: var(--intergalactic-chart-grid-text-label, oklch(0.247 0.049 230.2 / 0.524)); + fill: var(--intergalactic-chart-grid-text-label, oklch(0.209 0.055 246.6 / 0.505)); } STick[primaryText] { - fill: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + fill: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } STick[hide] { @@ -20,12 +20,12 @@ STick[hide] { SGrid { fill: transparent; - stroke: var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); + stroke: var(--intergalactic-border-secondary, oklch(0.324 0.077 242.1 / 0.079)); } STitle { font-size: var(--intergalactic-fs-100, 12px); - fill: var(--intergalactic-text-hint, oklch(0.247 0.049 230.2 / 0.524)); + fill: var(--intergalactic-text-hint, oklch(0.209 0.055 246.6 / 0.505)); transform-origin: var(--transform-origin); } diff --git a/semcore/d3-chart/src/style/bar.shadow.css b/semcore/d3-chart/src/style/bar.shadow.css index 57612c0cf9..7a4b10558d 100644 --- a/semcore/d3-chart/src/style/bar.shadow.css +++ b/semcore/d3-chart/src/style/bar.shadow.css @@ -1,7 +1,7 @@ @import './var.css'; SBar { - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.009 245)); transition-property: height, width, y; transition-duration: var(--duration); transition-timing-function: ease-in-out; @@ -30,7 +30,7 @@ SBar[onClick] { } SBackground { - fill: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 215.6)); + fill: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 232.5)); opacity: 0.4; } SBackground[onClick] { @@ -42,13 +42,13 @@ SBarAnnotation { justify-content: space-between; } SBarLabel { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); margin-right: auto; font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); } SBarPercent { - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); margin-right: var(--intergalactic-spacing-2x, 8px); font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); @@ -57,11 +57,11 @@ SBarValue { min-width: 52px; display: flex; justify-content: flex-end; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); text-align: right; } SCompactHorizontalBarHoverRect { - fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.363 0.068 222.8 / 0.05)); + fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.375 0.09 242.7 / 0.05)); } \ No newline at end of file diff --git a/semcore/d3-chart/src/style/bubble.shadow.css b/semcore/d3-chart/src/style/bubble.shadow.css index 8b7322e8bc..195f6ddeed 100644 --- a/semcore/d3-chart/src/style/bubble.shadow.css +++ b/semcore/d3-chart/src/style/bubble.shadow.css @@ -1,7 +1,7 @@ @import './var.css'; SBubble { - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.009 245)); stroke: var(--intergalactic-chart-grid-border, #ffffff); stroke-width: 2px; transition-property: cx, cy; @@ -40,7 +40,7 @@ SCenter { text-anchor: middle; /* disable-tokens-validator */ font-size: calc(var(--intergalactic-fs-100, 12px) - 1px); - stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); + stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.009 245)); } SCenter[color] { @@ -52,7 +52,7 @@ SCenter[transparent] { } SLabel { - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.009 245)); } SLabel[position='right'] { diff --git a/semcore/d3-chart/src/style/donut.shadow.css b/semcore/d3-chart/src/style/donut.shadow.css index 10762fe979..8575166e53 100644 --- a/semcore/d3-chart/src/style/donut.shadow.css +++ b/semcore/d3-chart/src/style/donut.shadow.css @@ -2,7 +2,7 @@ SPie { stroke: var(--intergalactic-chart-grid-border, #ffffff); - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.009 245)); } SPie[color] { @@ -20,7 +20,7 @@ SPie[transparent] { } SEmptyData { - fill: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.011 217.3)); + fill: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.009 234)); } SEmptyData[color] { diff --git a/semcore/d3-chart/src/style/dot.shadow.css b/semcore/d3-chart/src/style/dot.shadow.css index c008d65087..bc5bdb21ba 100644 --- a/semcore/d3-chart/src/style/dot.shadow.css +++ b/semcore/d3-chart/src/style/dot.shadow.css @@ -9,7 +9,7 @@ SDots { SDot { stroke-width: 1px; stroke: var(--intergalactic-chart-grid-border, #ffffff); - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.009 245)); transition-property: cx, cy, x, y, filter; transition-timing-function: ease-in-out; } diff --git a/semcore/d3-chart/src/style/hover.shadow.css b/semcore/d3-chart/src/style/hover.shadow.css index c47699975c..2ff9214f99 100644 --- a/semcore/d3-chart/src/style/hover.shadow.css +++ b/semcore/d3-chart/src/style/hover.shadow.css @@ -1,16 +1,16 @@ SHoverLine, SHoverLine:focus-visible { outline: none; - stroke: var(--intergalactic-chart-grid-x-axis, oklch(0.88 0.013 217.9)); + stroke: var(--intergalactic-chart-grid-x-axis, oklch(0.88 0.011 234.9)); } SHoverRect, SHoverRect:focus-visible { outline: none; - fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.363 0.068 222.8 / 0.05)); + fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.375 0.09 242.7 / 0.05)); } STick { font-size: var(--intergalactic-fs-100, 12px); - fill: var(--intergalactic-chart-grid-text-label, oklch(0.247 0.049 230.2 / 0.524)); + fill: var(--intergalactic-chart-grid-text-label, oklch(0.209 0.055 246.6 / 0.505)); transform: translateY(12px); text-anchor: middle; dominant-baseline: hanging; @@ -23,5 +23,5 @@ STick { } STickHover { - fill: var(--intergalactic-chart-x-axis-accent-tick, oklch(0.96 0.005 215.6)); + fill: var(--intergalactic-chart-x-axis-accent-tick, oklch(0.96 0.005 232.5)); } diff --git a/semcore/d3-chart/src/style/line.shadow.css b/semcore/d3-chart/src/style/line.shadow.css index 611c5cdbb1..bbc8bbec90 100644 --- a/semcore/d3-chart/src/style/line.shadow.css +++ b/semcore/d3-chart/src/style/line.shadow.css @@ -3,7 +3,7 @@ SLine { fill: transparent; stroke-width: 2; - stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); + stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.009 245)); transition-property: d; transition-duration: var(--duration); transition-timing-function: ease-in-out; @@ -23,7 +23,7 @@ SLine[transparent] { SNull { fill: transparent; - stroke: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.011 217.3)); + stroke: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.009 234)); stroke-dasharray: 4; } @@ -36,7 +36,7 @@ SLineArea { transition-duration: var(--duration); transition-timing-function: ease-in-out; opacity: 0.3; - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.009 245)); } SLineArea[color] { fill: var(--color); diff --git a/semcore/d3-chart/src/style/plotA11yView.shadow.css b/semcore/d3-chart/src/style/plotA11yView.shadow.css index 8cd9ac902a..bb9579210d 100644 --- a/semcore/d3-chart/src/style/plotA11yView.shadow.css +++ b/semcore/d3-chart/src/style/plotA11yView.shadow.css @@ -2,8 +2,8 @@ SPlotA11yView { position: relative; display: block; background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); - border: 3px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); + border: 3px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); font-size: var(--intergalactic-fs-50, 10px); z-index: var(--intergalactic-z-index-overlay, 500); padding: 2px; @@ -21,6 +21,6 @@ SPlotA11yView { } table, td, th { - border: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); } } diff --git a/semcore/d3-chart/src/style/radar.shadow.css b/semcore/d3-chart/src/style/radar.shadow.css index c1f55b0be0..910314cb33 100644 --- a/semcore/d3-chart/src/style/radar.shadow.css +++ b/semcore/d3-chart/src/style/radar.shadow.css @@ -1,19 +1,19 @@ SAxis { - stroke: var(--intergalactic-chart-grid-line, oklch(0.95 0.006 215.8)); + stroke: var(--intergalactic-chart-grid-line, oklch(0.95 0.006 232.7)); stroke-width: 1; fill: transparent; } SAxisLine, SAxisTick { - stroke: var(--intergalactic-chart-grid-line, oklch(0.95 0.006 215.8)); + stroke: var(--intergalactic-chart-grid-line, oklch(0.95 0.006 232.7)); stroke-width: 1; stroke-dasharray: 2; fill: transparent; } SAxisLine[active] { - stroke: var(--intergalactic-chart-grid-y-accent-hover-line, oklch(0.88 0.013 217.9)); + stroke: var(--intergalactic-chart-grid-y-accent-hover-line, oklch(0.88 0.011 234.9)); } SAxisLabel { @@ -31,7 +31,7 @@ SAxisLabel[yDirection] { } SPolygon { - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.009 245)); opacity: 0.2; } @@ -49,7 +49,7 @@ SPolygonDot { stroke-width: 2px; stroke: var(--intergalactic-chart-grid-border, #ffffff); r: 6px; - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.009 245)); } SPolygonDot[transparent] { @@ -61,7 +61,7 @@ SPolygonDot[color] { } SPolygonLine { - stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); + stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.009 245)); stroke-width: 3; fill: transparent; } @@ -76,5 +76,5 @@ SPolygonLine[color] { SPieRect { outline: none; - fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.363 0.068 222.8 / 0.05)); + fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.375 0.09 242.7 / 0.05)); } diff --git a/semcore/d3-chart/src/style/reference.shadow.css b/semcore/d3-chart/src/style/reference.shadow.css index c92873696f..daa1b5dffc 100644 --- a/semcore/d3-chart/src/style/reference.shadow.css +++ b/semcore/d3-chart/src/style/reference.shadow.css @@ -1,11 +1,11 @@ SReferenceLine { fill: none; - stroke: var(--intergalactic-chart-grid-y-accent-hover-line, oklch(0.88 0.013 217.9)); + stroke: var(--intergalactic-chart-grid-y-accent-hover-line, oklch(0.88 0.011 234.9)); } STitle { font-size: var(--intergalactic-fs-100, 12px); - fill: var(--intergalactic-chart-grid-text-label, oklch(0.247 0.049 230.2 / 0.524)); + fill: var(--intergalactic-chart-grid-text-label, oklch(0.209 0.055 246.6 / 0.505)); transform-origin: var(--transform-origin); } @@ -31,13 +31,13 @@ STitle[position='left'] { } SBackground { - fill: var(--intergalactic-chart-grid-period-bg, oklch(0.96 0.005 215.6)); + fill: var(--intergalactic-chart-grid-period-bg, oklch(0.96 0.005 232.5)); } SStripes { fill: var(--fill); } SStripesPatternPath { - stroke: var(--intergalactic-chart-grid-period-pattern, oklch(0.95 0.006 215.8)); + stroke: var(--intergalactic-chart-grid-period-pattern, oklch(0.95 0.006 232.7)); stroke-width: 1px; } \ No newline at end of file diff --git a/semcore/d3-chart/src/style/scatterplot.shadow.css b/semcore/d3-chart/src/style/scatterplot.shadow.css index 463b7232b0..ae97ee63a1 100644 --- a/semcore/d3-chart/src/style/scatterplot.shadow.css +++ b/semcore/d3-chart/src/style/scatterplot.shadow.css @@ -1,7 +1,7 @@ @import './var.css'; SScatterPlot { - fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225)); + fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.009 245)); transition-property: cx, cy; transition-duration: var(--duration); transition-timing-function: ease-in-out; diff --git a/semcore/d3-chart/src/style/tooltip.shadow.css b/semcore/d3-chart/src/style/tooltip.shadow.css index 96b47c8c28..4545b7a85d 100644 --- a/semcore/d3-chart/src/style/tooltip.shadow.css +++ b/semcore/d3-chart/src/style/tooltip.shadow.css @@ -5,17 +5,17 @@ STooltip { line-height: var(--intergalactic-lh-100, 1.3334); font-variant-numeric: tabular-nums; position: relative; - color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); - background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); + background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.009 245)); border-radius: var(--intergalactic-popper-rounded, 6px); - border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.017 225)); + border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.015 245)); box-sizing: border-box; - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.324 0.077 242.1 / 0.079)); padding: var(--intergalactic-spacing-content-padding-medium, 12px); } STitle { - color: var(--intergalactic-text-secondary-invert, oklch(0.959 0.028 221.4 / 0.721)); + color: var(--intergalactic-text-secondary-invert, oklch(0.953 0.025 240.1 / 0.726)); margin-bottom: var(--intergalactic-spacing-content-gap-large, 8px); } @@ -38,8 +38,8 @@ SDotCircle[color][lightness] { SFooter { - background: var(--intergalactic-bg-secondary-invert, oklch(0.916 0.055 225.3 / 0.127)); - color: var(--intergalactic-text-secondary-invert, oklch(0.959 0.028 221.4 / 0.721)); + background: var(--intergalactic-bg-secondary-invert, oklch(0.907 0.048 245.2 / 0.129)); + color: var(--intergalactic-text-secondary-invert, oklch(0.953 0.025 240.1 / 0.726)); padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-medium, 12px); border-radius: 0 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px); margin: var(--intergalactic-spacing-content-gap-xlarge, 12px) calc(-1 * var(--intergalactic-spacing-content-gap-xlarge, 12px)) calc(-1 * var(--intergalactic-spacing-content-gap-xlarge, 12px)); diff --git a/semcore/data-table/src/components/Body/style.shadow.css b/semcore/data-table/src/components/Body/style.shadow.css index 1049bea3cf..d0ac5a5d6e 100644 --- a/semcore/data-table/src/components/Body/style.shadow.css +++ b/semcore/data-table/src/components/Body/style.shadow.css @@ -60,7 +60,7 @@ SCellWrapper { bottom: 0; width: 2px; z-index: 20; - background-color: var(--intergalactic-table-border-accordion-accent, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-table-border-accordion-accent, oklch(0.23 0.009 245)); } } @@ -71,7 +71,7 @@ SCollapseRow[gridArea] > SCellWrapper, SRow[isAccordionRow] > SCellWrapper { SCollapseRow[gridArea] > SCellWrapper > SCell:not([withoutBorder]), SAccordionRows > SRow[isAccordionRow]:last-child > SCellWrapper > SCell:not([withoutBorder]) { - border-bottom: 1px solid var(--intergalactic-table-border-accent, oklch(0.324 0.062 225.5 / 0.189)); /* TODO: --intergalactic-table-border-accent */ + border-bottom: 1px solid var(--intergalactic-table-border-accent, oklch(0.277 0.066 242.6 / 0.18)); /* TODO: --intergalactic-table-border-accent */ } SCollapseRow > SCellWrapper > SCell { @@ -80,7 +80,7 @@ SCollapseRow > SCellWrapper > SCell { SRow[accordionType='row'][expanded] > SCellWrapper > SCell:not([theme]), SCell:not([theme])[expanded][withAccordion] { - background-color: var(--intergalactic-table-td-cell-active, oklch(0.96 0.005 215.6)); + background-color: var(--intergalactic-table-td-cell-active, oklch(0.96 0.005 232.5)); } SCollapseRow > SCellWrapper > SCell:not([theme]), SRow[isAccordionRow] > SCellWrapper > SCell:not([theme]) { @@ -92,7 +92,7 @@ SCollapseRow > SCellWrapper > SCell:not([theme]), SRow[isAccordionRow] > SCellWr :not(SRowGroup:has([data-row-selector="true"] input:checked)) > SRow:not([accordionType='row'][expanded]):hover:not([isNonInteractive]):not(:has([data-row-selector="true"] input:checked)):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]), SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover):not(:has([data-row-selector="true"] input:checked)) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]), SRowGroup:has(SCell:hover):not(:has([data-row-selector="true"] input:checked)) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([expanded][withAccordion]):not([aria-hidden]) { - background-color: var(--intergalactic-table-td-cell-hover, oklch(0.97 0.004 215.3)); + background-color: var(--intergalactic-table-td-cell-hover, oklch(0.97 0.005 232.2)); } /* MUTED THEME */ @@ -102,7 +102,7 @@ SCollapseRow > SCellWrapper > SCell:not([theme]), SRow[isAccordionRow] > SCellWr SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([accordionType='row'][expanded])[theme='muted']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([aria-hidden]), SRowGroup:has(SCell:hover) > SRow:not([accordionType='row'][expanded]):not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='muted']:not([aria-hidden]), SRowGroup:has(SCell:hover) > SRow:not([accordionType='row'][expanded])[theme='muted']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([aria-hidden]) { - background-color: var(--intergalactic-table-td-cell-active, oklch(0.96 0.005 215.6)); + background-color: var(--intergalactic-table-td-cell-active, oklch(0.96 0.005 232.5)); } /* INFO THEME */ @@ -164,10 +164,10 @@ SCell { height: 100%; font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); background-color: var(--intergalactic-table-td-cell, oklch(1 0 0)); box-sizing: border-box; - border-bottom: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); + border-bottom: 1px solid var(--intergalactic-border-secondary, oklch(0.324 0.077 242.1 / 0.079)); white-space: pre-wrap; word-break: break-word; font-variant-numeric: tabular-nums; @@ -212,10 +212,10 @@ SCell { } &[theme='muted'] { - background-color: var(--intergalactic-table-td-cell-unread, oklch(0.98 0.003 215)); + background-color: var(--intergalactic-table-td-cell-unread, oklch(0.98 0.004 232)); &[expanded][withAccordion] { - background-color: var(--intergalactic-table-td-cell-active, oklch(0.96 0.005 215.6)); + background-color: var(--intergalactic-table-td-cell-active, oklch(0.96 0.005 232.5)); } } @@ -253,12 +253,12 @@ SCell { &[borders='both'], &[borders='left'] { - border-left: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); + border-left: 1px solid var(--intergalactic-border-secondary, oklch(0.324 0.077 242.1 / 0.079)); } &[borders='both'], &[borders='right'] { - border-right: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); + border-right: 1px solid var(--intergalactic-border-secondary, oklch(0.324 0.077 242.1 / 0.079)); } &[innerOutline]:focus-visible { @@ -352,7 +352,7 @@ SCollapseRow { bottom: 0; width: 2px; z-index: 20; - background-color: var(--intergalactic-table-border-accordion-accent, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-table-border-accordion-accent, oklch(0.23 0.009 245)); } } @@ -378,7 +378,7 @@ SCellWrapper[fixed='left'][shadowVertical='start'] { display: block; right: 0; background: var(--intergalactic-scroll-area-shadow-left, - linear-gradient(to right, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)); + linear-gradient(to right, oklch(from oklch(0.23 0.009 245) l c h / 0.08) 20.55%, transparent 100%)); } SCell { margin-right: 5px; @@ -391,7 +391,7 @@ SCellWrapper[fixed='right'][shadowVertical='end'] { display: block; left: 0; background: var(--intergalactic-scroll-area-shadow-right, - linear-gradient(to left, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)); + linear-gradient(to left, oklch(from oklch(0.23 0.009 245) l c h / 0.08) 20.55%, transparent 100%)); } SCell { diff --git a/semcore/data-table/src/components/Head/style.shadow.css b/semcore/data-table/src/components/Head/style.shadow.css index 0416669e33..f8d4a8d587 100644 --- a/semcore/data-table/src/components/Head/style.shadow.css +++ b/semcore/data-table/src/components/Head/style.shadow.css @@ -49,7 +49,7 @@ SGroup, SColumn { display: flex; align-items: flex-start; font-size: var(--intergalactic-fs-100, 12px); - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); box-sizing: border-box; height: 100%; position: relative; @@ -64,7 +64,7 @@ SGroup { background-color: var(--intergalactic-table-th-primary-cell, oklch(1 0 0)); &[isSorted] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); font-weight: var(--intergalactic-bold, 700); } } @@ -81,16 +81,16 @@ SGroup[use='secondary'] { } SGroup[borders='both'], SColumn[borders='both'], SGroup[borders='left'], SColumn[borders='left'] { - border-left: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border-left: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); } SGroup[borders='both'], SColumn[borders='both'], SGroup[borders='right'], SColumn[borders='right'] { - border-right: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border-right: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); } SColumn[use='primary'] { padding: var(--intergalactic-spacing-content-padding-medium, 12px); - border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); background-color: var(--intergalactic-table-th-primary-cell, oklch(1 0 0)); SSortWrapper::before { @@ -102,13 +102,13 @@ SColumn[use='primary'] { } &[isSorted] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); font-weight: var(--intergalactic-bold, 700); } &[visibleSort] { background-color: var(--intergalactic-table-th-primary-cell-active, oklch(1 0 0)); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); SSortWrapper { flex-basis: calc(var(--intergalactic-spacing-content-padding-xsmall, 4px) + 16px); @@ -141,7 +141,7 @@ SColumn[use='primary'] { SColumn[use='secondary'] { padding: var(--intergalactic-spacing-content-padding-small, 8px); - border-bottom: 1px solid var(--intergalactic-table-border-accent, oklch(0.324 0.062 225.5 / 0.189)); + border-bottom: 1px solid var(--intergalactic-table-border-accent, oklch(0.277 0.066 242.6 / 0.18)); background-color: var(--intergalactic-table-th-secondary-cell, oklch(1 0 0)); SSortWrapper::before { @@ -154,12 +154,12 @@ SColumn[use='secondary'] { &[isSorted] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); font-weight: var(--intergalactic-bold, 700); } &[visibleSort] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); SSortWrapper { flex-basis: calc(var(--intergalactic-spacing-content-padding-xsmall, 4px) + 16px); @@ -229,7 +229,7 @@ SSortWrapper:before { SSortButton, SSortIndicator { display: none; - fill: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + fill: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); position: absolute; right: 0; margin-left: var(--intergalactic-spacing-content-gap-small, 4px); @@ -289,7 +289,7 @@ SGroup[fixed='left'][shadowVertical='start'] { display: block; right: 0; background: var(--intergalactic-scroll-area-shadow-left, - linear-gradient(to right, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)); + linear-gradient(to right, oklch(from oklch(0.23 0.009 245) l c h / 0.08) 20.55%, transparent 100%)); } } SColumn[fixed='right'][shadowVertical='median'], @@ -310,6 +310,6 @@ SGroup[fixed='right'][shadowVertical='end'] { display: block; left: 0; background: var(--intergalactic-scroll-area-shadow-right, - linear-gradient(to left, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)); + linear-gradient(to left, oklch(from oklch(0.23 0.009 245) l c h / 0.08) 20.55%, transparent 100%)); } } diff --git a/semcore/date-picker/src/style/calendar.shadow.css b/semcore/date-picker/src/style/calendar.shadow.css index ff9fa699f9..aae3d0e5b1 100644 --- a/semcore/date-picker/src/style/calendar.shadow.css +++ b/semcore/date-picker/src/style/calendar.shadow.css @@ -34,7 +34,7 @@ SWeekDay { display: flex; align-items: center; justify-content: center; - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); font-size: var(--intergalactic-fs-200, 14px); font-weight: var(--intergalactic-regular, 400); overflow: hidden; @@ -48,7 +48,7 @@ SCalendarUnit { text-align: center; vertical-align: middle; border: 1px solid transparent; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); box-shadow: none; overflow: visible; user-select: none; @@ -71,8 +71,8 @@ SCalendarUnit { margin: 0; &:hover { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); - background-color: var(--intergalactic-date-picker-cell-hover, oklch(0.97 0.004 215.3)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); + background-color: var(--intergalactic-date-picker-cell-hover, oklch(0.97 0.005 232.2)); } } @@ -87,42 +87,42 @@ SCalendarUnit[today] { width: calc(100% - 2px); height: calc(100% - 2px); box-sizing: border-box; - border: 1px solid var(--intergalactic-date-picker-cell-current, oklch(0.267 0.053 229.2 / 0.437)); + border: 1px solid var(--intergalactic-date-picker-cell-current, oklch(0.23 0.06 246.3 / 0.422)); } } SCalendarUnit[today]SCalendarUnit[startSelected], SCalendarUnit[today]SCalendarUnit[endSelected] { &:before { - border-color: var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); + border-color: var(--intergalactic-border-secondary, oklch(0.324 0.077 242.1 / 0.079)); } } SCalendarUnit[selected] { - background-color: var(--intergalactic-date-picker-cell-range, oklch(0.96 0.005 215.6)); + background-color: var(--intergalactic-date-picker-cell-range, oklch(0.96 0.005 232.5)); border-radius: 0; transition: border-radius 0s 0s; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); &:hover { - background-color: var(--intergalactic-date-picker-cell-range-hover, oklch(0.9 0.011 217.3)); + background-color: var(--intergalactic-date-picker-cell-range-hover, oklch(0.9 0.009 234)); } } SCalendarUnit[highlighted] { - background-color: var(--intergalactic-date-picker-cell-range, oklch(0.96 0.005 215.6)); + background-color: var(--intergalactic-date-picker-cell-range, oklch(0.96 0.005 232.5)); border-radius: 0; transition: border-radius 0s 0s; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); &:hover { - background-color: var(--intergalactic-date-picker-cell-range-hover, oklch(0.9 0.011 217.3)); + background-color: var(--intergalactic-date-picker-cell-range-hover, oklch(0.9 0.009 234)); } } SCalendarUnit[startSelected] { - color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); - background-color: var(--intergalactic-date-picker-cell-active, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); + background-color: var(--intergalactic-date-picker-cell-active, oklch(0.23 0.009 245)); &:not([highlighted]) { border-bottom-left-radius: var(--intergalactic-rounded-small, 4px); @@ -132,14 +132,14 @@ SCalendarUnit[startSelected] { } &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); - background-color: var(--intergalactic-date-picker-cell-active-hover, oklch(0.32 0.014 225)); + color: var(--intergalactic-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); + background-color: var(--intergalactic-date-picker-cell-active-hover, oklch(0.32 0.012 245)); } } SCalendarUnit[endSelected] { - background-color: var(--intergalactic-date-picker-cell-active, oklch(0.23 0.01 225)); - color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + background-color: var(--intergalactic-date-picker-cell-active, oklch(0.23 0.009 245)); + color: var(--intergalactic-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); &:not([highlighted]) { border-bottom-left-radius: 0; @@ -149,8 +149,8 @@ SCalendarUnit[endSelected] { } &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); - background-color: var(--intergalactic-date-picker-cell-active-hover, oklch(0.32 0.014 225)); + color: var(--intergalactic-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); + background-color: var(--intergalactic-date-picker-cell-active-hover, oklch(0.32 0.012 245)); } } @@ -221,10 +221,10 @@ SCalendarUnit[compareStart], SCalendarUnit[compareEnd] { border-radius: 0; background-color: var(--intergalactic-date-picker-cell-comparison-active, oklch(0.74 0.117 274.1)); - color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); background-color: var(--intergalactic-date-picker-cell-comparison-active-hover, oklch(0.58 0.168 278.2)); } } diff --git a/semcore/date-picker/src/style/date-picker.shadow.css b/semcore/date-picker/src/style/date-picker.shadow.css index 54fcfed9ca..ad07bcb238 100644 --- a/semcore/date-picker/src/style/date-picker.shadow.css +++ b/semcore/date-picker/src/style/date-picker.shadow.css @@ -20,7 +20,7 @@ SHeader { STitle { font-size: var(--intergalactic-fs-200, 14px); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); height: 32px; width: 100%; display: flex; @@ -45,7 +45,7 @@ SButton SInner { } SInputMask { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); line-height: normal; padding-right: var(--intergalactic-spacing-2x, 8px); transition: width calc(var(--intergalactic-duration-medium, 300) * 1ms) ease, min-width calc(var(--intergalactic-duration-medium, 300) * 1ms) ease; @@ -64,7 +64,7 @@ SInputMask SValue { } SIndicator { - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); } SRangeIndicator { @@ -73,7 +73,7 @@ SRangeIndicator { } SRangeIndicator[range='value'] { - background-color: var(--intergalactic-date-picker-cell-active, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-date-picker-cell-active, oklch(0.23 0.009 245)); } SRangeIndicator[range='compare'] { @@ -141,11 +141,11 @@ SDateRange SInputMask:focus-within SMask { SRangeSep[fulfilled], SDateRange:focus-within SRangeSep { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } SRangeComparatorHeader { - border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); padding: var(--intergalactic-spacing-4x, 16px); } @@ -154,7 +154,7 @@ SRangeCalendar { } SFooter { - border-top: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border-top: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); padding: var(--intergalactic-spacing-4x, 16px); } diff --git a/semcore/divider/src/style/divider.shadow.css b/semcore/divider/src/style/divider.shadow.css index b09a67e6fa..59ab2bfc2f 100644 --- a/semcore/divider/src/style/divider.shadow.css +++ b/semcore/divider/src/style/divider.shadow.css @@ -15,31 +15,31 @@ SDivider { } &[use='primary'] { - background-color: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + background-color: var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); &[theme='invert'] { - background-color: var(--intergalactic-border-primary-invert, oklch(0.932 0.044 225.1 / 0.378)); + background-color: var(--intergalactic-border-primary-invert, oklch(0.925 0.039 245 / 0.382)); } } &[use='secondary'] { &[orientation='horizontal'] { - background-image: radial-gradient(circle, var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)) 0.5px, transparent 0.5px); + background-image: radial-gradient(circle, var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)) 0.5px, transparent 0.5px); background-size: 3px 1px; background-position: -1px 50%; &[theme='invert'] { - background-image: radial-gradient(circle, var(--intergalactic-border-primary-invert, oklch(0.932 0.044 225.1 / 0.378)) 0.5px, transparent 0.5px); + background-image: radial-gradient(circle, var(--intergalactic-border-primary-invert, oklch(0.925 0.039 245 / 0.382)) 0.5px, transparent 0.5px); } } &[orientation='vertical'] { - background-image: radial-gradient(circle, var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)) 0.5px, transparent 0.5px); + background-image: radial-gradient(circle, var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)) 0.5px, transparent 0.5px); background-size: 1px 3px; background-position: 50% -1px; &[theme='invert'] { - background-image: radial-gradient(circle, var(--intergalactic-border-primary-invert, oklch(0.932 0.044 225.1 / 0.378)) 0.5px, transparent 0.5px); + background-image: radial-gradient(circle, var(--intergalactic-border-primary-invert, oklch(0.925 0.039 245 / 0.382)) 0.5px, transparent 0.5px); } } } diff --git a/semcore/dot/src/style/dot.shadow.css b/semcore/dot/src/style/dot.shadow.css index 3e2227e519..c163c442c0 100644 --- a/semcore/dot/src/style/dot.shadow.css +++ b/semcore/dot/src/style/dot.shadow.css @@ -5,7 +5,7 @@ SDot { font-size: var(--intergalactic-fs-50, 10px); line-height: normal; background-color: var(--intergalactic-dot-bg, oklch(0.74 0.17 303)); - color: var(--intergalactic-dot-text, oklch(0.23 0.01 225)); + color: var(--intergalactic-dot-text, oklch(0.23 0.009 245)); box-sizing: border-box; z-index: 1; border-radius: 100%; diff --git a/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css b/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css index 84a285b59c..7a97b54c19 100644 --- a/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css +++ b/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css @@ -19,7 +19,7 @@ SDraggable[draggable] { display: none; pointer-events: none; background-image: radial-gradient(circle at center, - var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.02 220.2)) 1px, + var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.017 238.3)) 1px, transparent 0); background-size: 6px 6px; background-position: 2px 2px; @@ -93,19 +93,19 @@ SDropZone { } SDropZone[dropPreview] { - background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.003 215)); + background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.004 232)); } SDropZone[dark][dropPreview] { - background-color: var(--intergalactic-bg-primary-invert-active, oklch(0.4 0.017 225)); + background-color: var(--intergalactic-bg-primary-invert-active, oklch(0.4 0.015 245)); } SDraggable[keyboardDragging] { scale: 1.1; background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); - box-shadow: var(--intergalactic-box-shadow-dnd, 3px 3px 30px 0px oklch(0.344 0.064 223.3 / 0.081)) !important; + box-shadow: var(--intergalactic-box-shadow-dnd, 3px 3px 30px 0px oklch(0.324 0.077 242.1 / 0.079)) !important; &::before { diff --git a/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css b/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css index b0ce5ceaf1..d90ed62f73 100644 --- a/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css +++ b/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css @@ -6,7 +6,7 @@ SDropdownMenuList { min-width: 32px; box-sizing: content-box; z-index: 0; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); SBar { z-index: 3; @@ -85,7 +85,7 @@ SDropdownNestingItem SDropdownMenuItemContainer { } SItemHint { - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); } SScrollContainer { diff --git a/semcore/dropdown/src/style/dropdown.shadow.css b/semcore/dropdown/src/style/dropdown.shadow.css index 8853ae1f33..d1d66414cd 100644 --- a/semcore/dropdown/src/style/dropdown.shadow.css +++ b/semcore/dropdown/src/style/dropdown.shadow.css @@ -3,10 +3,10 @@ SDropdownPopper { background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); border-radius: var(--intergalactic-popper-rounded, 6px); box-sizing: border-box; - border: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); + border: 1px solid var(--intergalactic-border-secondary, oklch(0.324 0.077 242.1 / 0.079)); white-space: normal; - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.324 0.077 242.1 / 0.079)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); SDropdownItem { @@ -21,10 +21,10 @@ SDropdownPopper { SDropdownItem:not(button) { width: 100%; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); &:hover { - background-color: var(--intergalactic-dropdown-menu-item-hover, oklch(0.363 0.068 222.8 / 0.05)); + background-color: var(--intergalactic-dropdown-menu-item-hover, oklch(0.375 0.09 242.7 / 0.05)); } } @@ -48,14 +48,14 @@ SDropdownPopper { display: inline-block; background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out; - border-color: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border-color: var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); } &[selected]::after { background-repeat: no-repeat; background-position: center center; - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 225)); - border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.009 245)); + border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.009 245)); } &[selected][size='m']::after { @@ -68,11 +68,11 @@ SDropdownPopper { } SDropdownItem[selected]:not(SDropdownItem[isMenuItemCheckbox]) { - background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.351 0.065 223 / 0.066)); - box-shadow: 2px 0px 0px 0px var(--intergalactic-dropdown-menu-item-selected-box-shadow, oklch(0.23 0.01 225)) inset; + background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.344 0.082 242.3 / 0.065)); + box-shadow: 2px 0px 0px 0px var(--intergalactic-dropdown-menu-item-selected-box-shadow, oklch(0.23 0.009 245)) inset; &:hover { - background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.339 0.063 223.5 / 0.097)); + background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.31 0.074 242 / 0.094)); } } @@ -145,7 +145,7 @@ SDropdownPopper { } SDropdownItem[variant='hint'] { - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); cursor: default; &:hover { @@ -171,7 +171,7 @@ SDropdownPopper { } SGroupHint { - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); } SDropdownItemContainer[sticky] { diff --git a/semcore/errors/src/style/errors.shadow.css b/semcore/errors/src/style/errors.shadow.css index 6a41ec2ec5..2b14f132d9 100644 --- a/semcore/errors/src/style/errors.shadow.css +++ b/semcore/errors/src/style/errors.shadow.css @@ -49,7 +49,7 @@ SError { STitle[data-errors-title] { font-size: var(--intergalactic-fs-700, 36px); line-height: var(--intergalactic-lh-700, 1.1112); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); font-weight: var(--intergalactic-semi-bold, 600); margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0; } @@ -58,7 +58,7 @@ SError { display: block; font-size: var(--intergalactic-fs-300, 16px); line-height: var(--intergalactic-lh-300, 1.5); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0; } } diff --git a/semcore/feature-highlight/src/components/badge/badge.shadow.css b/semcore/feature-highlight/src/components/badge/badge.shadow.css index 8f4bc9f37a..1f2f57d9c5 100644 --- a/semcore/feature-highlight/src/components/badge/badge.shadow.css +++ b/semcore/feature-highlight/src/components/badge/badge.shadow.css @@ -13,7 +13,7 @@ SHighlightedBadge { letter-spacing: 0.3px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - color: var(--intergalactic-badge-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-badge-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); } SHighlightedBadge[use='accent'] { diff --git a/semcore/feature-highlight/src/components/button/button.shadow.css b/semcore/feature-highlight/src/components/button/button.shadow.css index fd4eeab383..a7859afae3 100644 --- a/semcore/feature-highlight/src/components/button/button.shadow.css +++ b/semcore/feature-highlight/src/components/button/button.shadow.css @@ -1,5 +1,5 @@ SHighlightedButton[theme='primary-highlighted'] { - color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); 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)), @@ -10,13 +10,13 @@ SHighlightedButton[theme='primary-highlighted'] { transition: background-position-x 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); &:hover { - color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); background-position-x: 1%; } &:active, &[active] { - color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); 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%; } diff --git a/semcore/feature-highlight/src/components/notice/notice.shadow.css b/semcore/feature-highlight/src/components/notice/notice.shadow.css index fb5b815e74..24cb71348c 100644 --- a/semcore/feature-highlight/src/components/notice/notice.shadow.css +++ b/semcore/feature-highlight/src/components/notice/notice.shadow.css @@ -21,10 +21,10 @@ SHighlightedNotice[beforeVisibility] { } & SCloseIcon { - color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.025 225)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.022 245)); &:hover { - color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.53 0.023 225)); + color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.53 0.02 245)); } } } diff --git a/semcore/feature-highlight/src/components/switch/switch.shadow.css b/semcore/feature-highlight/src/components/switch/switch.shadow.css index 0381512764..5a382e744f 100644 --- a/semcore/feature-highlight/src/components/switch/switch.shadow.css +++ b/semcore/feature-highlight/src/components/switch/switch.shadow.css @@ -26,7 +26,7 @@ SToggle { } SToggle[checked] { - color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 225)); + color: var(--intergalactic-control-primary-info, oklch(0.23 0.009 245)); 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))); } diff --git a/semcore/feature-popover/src/style/feature-popover.shadow.css b/semcore/feature-popover/src/style/feature-popover.shadow.css index 7231ef72d0..31a5e0243d 100644 --- a/semcore/feature-popover/src/style/feature-popover.shadow.css +++ b/semcore/feature-popover/src/style/feature-popover.shadow.css @@ -5,16 +5,16 @@ SFeaturePopover { padding-left: var(--intergalactic-spacing-content-padding-large, 16px); border-radius: var(--intergalactic-popper-rounded, 6px); box-sizing: border-box; - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.324 0.077 242.1 / 0.079)); position: relative; &[theme='accent'] { background-color: var(--intergalactic-feature-popover-bg-accent, oklch(0.92 0.052 303.1)); - color: var(--intergalactic-feature-popover-text, oklch(0.23 0.01 225)); + color: var(--intergalactic-feature-popover-text, oklch(0.23 0.009 245)); } &[theme='neutral'] { - background-color: var(--intergalactic-feature-popover-bg-neutral, oklch(0.23 0.01 225)); - color: var(--intergalactic-feature-popover-text-invert, oklch(0.993 0.005 215.6 / 0.956)); + background-color: var(--intergalactic-feature-popover-bg-neutral, oklch(0.23 0.009 245)); + color: var(--intergalactic-feature-popover-text-invert, oklch(0.991 0.005 232.5 / 0.959)); } } diff --git a/semcore/feedback-form/src/style/checkbox-button.shadow.css b/semcore/feedback-form/src/style/checkbox-button.shadow.css index 5429498dc4..de3c275483 100644 --- a/semcore/feedback-form/src/style/checkbox-button.shadow.css +++ b/semcore/feedback-form/src/style/checkbox-button.shadow.css @@ -1,7 +1,7 @@ SCheckboxButton { margin-top: var(--intergalactic-spacing-content-gap-large, 8px); background-color: var(--intergalactic-control-checkbox-button-bg-normal, transparent); - border: 1px solid var(--intergalactic-control-checkbox-button-border, oklch(0.324 0.062 225.5 / 0.189)); + border: 1px solid var(--intergalactic-control-checkbox-button-border, oklch(0.277 0.066 242.6 / 0.18)); border-radius: var(--intergalactic-control-rounded, 6px); label { @@ -13,14 +13,14 @@ SCheckboxButton { SCheckboxButton:hover, SCheckboxButton[checked] { cursor: pointer; - background-color: var(--intergalactic-control-checkbox-button-bg-hover, oklch(0.363 0.068 222.8 / 0.05)); + background-color: var(--intergalactic-control-checkbox-button-bg-hover, oklch(0.375 0.09 242.7 / 0.05)); } SCheckboxButton[checked] { - border-color: var(--intergalactic-control-checkbox-button-border-selected, oklch(0.324 0.062 225.5 / 0.189)); + border-color: var(--intergalactic-control-checkbox-button-border-selected, oklch(0.277 0.066 242.6 / 0.18)); } SCheckboxButton[checked]:hover { - background-color: var(--intergalactic-control-checkbox-button-bg-selected-hover, oklch(0.351 0.065 223 / 0.066)); + background-color: var(--intergalactic-control-checkbox-button-bg-selected-hover, oklch(0.344 0.082 242.3 / 0.065)); } diff --git a/semcore/feedback-form/src/style/slider-rating.shadow.css b/semcore/feedback-form/src/style/slider-rating.shadow.css index 8e36a4ac7c..bf8ebb3ddc 100644 --- a/semcore/feedback-form/src/style/slider-rating.shadow.css +++ b/semcore/feedback-form/src/style/slider-rating.shadow.css @@ -19,10 +19,10 @@ SStar[filled]:active { } SStar path { - fill: var(--intergalactic-control-slider-rating-icon, oklch(0.229 0.046 229.9 / 0.58)); + fill: var(--intergalactic-control-slider-rating-icon, oklch(0.193 0.05 246 / 0.562)); } SStar[filled] path { stroke-width: 0; - fill: var(--intergalactic-control-slider-rating-icon-hover-active, oklch(0.22 0.01 225)); + fill: var(--intergalactic-control-slider-rating-icon-hover-active, oklch(0.22 0.008 245)); } diff --git a/semcore/flags/src/style/flags.shadow.css b/semcore/flags/src/style/flags.shadow.css index 5306d0f258..192a2dceef 100644 --- a/semcore/flags/src/style/flags.shadow.css +++ b/semcore/flags/src/style/flags.shadow.css @@ -12,7 +12,7 @@ SFlags { display: block; width: 14px; height: 11px; - background-color: var(--intergalactic-bg-secondary-neutral-active, oklch(0.96 0.005 215.6)); + background-color: var(--intergalactic-bg-secondary-neutral-active, oklch(0.96 0.005 232.5)); z-index: -1; } } @@ -21,7 +21,7 @@ SFlags[data-capital-letters] { display: inline-flex; justify-content: center; align-items: center; - background: var(--intergalactic-bg-primary-neutral-active, oklch(0.96 0.005 215.6)); + background: var(--intergalactic-bg-primary-neutral-active, oklch(0.96 0.005 232.5)); &::before { content: attr(data-capital-letters); @@ -30,6 +30,6 @@ SFlags[data-capital-letters] { font-size: calc(var(--intergalactic-fs-50, 10px) - 2px); line-height: normal; font-weight: var(--intergalactic-bold, 700); - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); } } diff --git a/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css b/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css index bdef46a0e8..df7645e00a 100644 --- a/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css +++ b/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css @@ -38,7 +38,7 @@ SFullscreenOverlay { font-size: var(--intergalactic-fs-500, 24px); line-height: var(--intergalactic-lh-500, 1.1667); font-weight: var(--intergalactic-semi-bold, 600); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } SHeader { @@ -51,12 +51,12 @@ SFullscreenOverlay { padding-bottom: var(--intergalactic-spacing-content-padding-large, 16px); padding-right: 72px; padding-top: var(--intergalactic-spacing-content-padding-xxlarge, 40px); - border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); } SFooter { min-height: 52px; - border-top: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border-top: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); padding: var(--intergalactic-spacing-content-padding-medium, 12px) var(--intergalactic-spacing-content-padding-xxlarge, 40px); justify-content: center; align-items: center; diff --git a/semcore/inline-input/src/style/inline-input.shadow.css b/semcore/inline-input/src/style/inline-input.shadow.css index 77477ca94f..d7b5135a10 100644 --- a/semcore/inline-input/src/style/inline-input.shadow.css +++ b/semcore/inline-input/src/style/inline-input.shadow.css @@ -19,11 +19,11 @@ SInlineInput { } SCancelIcon:not([color]) { - color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.02 220.2)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.017 238.3)); } SCancelIcon:not([color]):hover { - color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.024 223.6)); + color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.022 243.2)); } SValue { @@ -36,7 +36,7 @@ SInlineInput { padding: var(--intergalactic-spacing-1x, 4px); border: none; box-sizing: border-box; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); font-size: inherit; line-height: 1.2; text-overflow: ellipsis; @@ -46,7 +46,7 @@ SInlineInput { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; - text-decoration-color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + text-decoration-color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); text-underline-offset: 17%; &:focus, &:focus-visible { @@ -54,7 +54,7 @@ SInlineInput { } &::placeholder { - color: var(--intergalactic-text-placeholder, oklch(0.282 0.055 228.7 / 0.386)); + color: var(--intergalactic-text-placeholder, oklch(0.242 0.062 245.8 / 0.371)); } &[disabled] { @@ -95,7 +95,7 @@ SUnderline { } SInlineInput:hover:not(:focus-within):not([disabled]) SUnderline { - background-color: var(--intergalactic-control-secondary-neutral, oklch(0.351 0.065 223 / 0.066)); + background-color: var(--intergalactic-control-secondary-neutral, oklch(0.324 0.077 242.1 / 0.079)); } SInlineInput:hover:not(:focus-within):not([disabled]) SAddon, @@ -109,7 +109,7 @@ SAddon { align-items: center; flex: 0 0 auto; height: 100%; - color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.02 220.2)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.017 238.3)); padding: 0 var(--intergalactic-spacing-content-gap-small, 4px); } diff --git a/semcore/input-mask/src/style/input-mask.shadow.css b/semcore/input-mask/src/style/input-mask.shadow.css index 85cd93e891..8273607007 100644 --- a/semcore/input-mask/src/style/input-mask.shadow.css +++ b/semcore/input-mask/src/style/input-mask.shadow.css @@ -11,7 +11,7 @@ SMask { letter-spacing: 0.1em; text-overflow: inherit; white-space: nowrap; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } SMask[data-neighbor-location='left'], @@ -28,7 +28,7 @@ SMaskHidden:before { } SPlaceholder { - color: var(--intergalactic-text-placeholder, oklch(0.282 0.055 228.7 / 0.386)); + color: var(--intergalactic-text-placeholder, oklch(0.242 0.062 245.8 / 0.371)); } SMaskHidden:before, diff --git a/semcore/input-number/src/style/input-number.shadow.css b/semcore/input-number/src/style/input-number.shadow.css index 8f446e0192..130d44e12b 100644 --- a/semcore/input-number/src/style/input-number.shadow.css +++ b/semcore/input-number/src/style/input-number.shadow.css @@ -18,7 +18,7 @@ SUp, SDown { padding: 0; width: 16px; - color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.02 220.2)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.017 238.3)); box-sizing: border-box; display: inline-flex; justify-content: center; @@ -31,7 +31,7 @@ SDown { } &:hover { - color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.024 223.6)); + color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.022 243.2)); } } diff --git a/semcore/input-tags/src/style/input-tag.shadow.css b/semcore/input-tags/src/style/input-tag.shadow.css index ed8bfd4110..db1f914842 100644 --- a/semcore/input-tags/src/style/input-tag.shadow.css +++ b/semcore/input-tags/src/style/input-tag.shadow.css @@ -11,8 +11,8 @@ SInputTags[disabled] { } SInputTags SContainer:focus SOutline { - border-color: var(--intergalactic-border-info-active, oklch(0.23 0.01 225)); - box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(from oklch(0.23 0.01 225) l c h / 0.5)); + border-color: var(--intergalactic-border-info-active, oklch(0.23 0.009 245)); + box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(from oklch(0.23 0.009 245) l c h / 0.5)); } SInputTags SContainer:focus:has(SOutline)::after { diff --git a/semcore/input/src/style/input.shadow.css b/semcore/input/src/style/input.shadow.css index 89e2ba9324..5a11e28c72 100644 --- a/semcore/input/src/style/input.shadow.css +++ b/semcore/input/src/style/input.shadow.css @@ -37,18 +37,18 @@ SValue { padding: 0; border: none; box-sizing: border-box; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); font-size: inherit; text-overflow: ellipsis; font-family: inherit; background: transparent; &::placeholder { - color: var(--intergalactic-text-placeholder, oklch(0.282 0.055 228.7 / 0.386)); + color: var(--intergalactic-text-placeholder, oklch(0.242 0.062 245.8 / 0.371)); } &:not(:disabled):read-only~SOutline { - background: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.003 215)); + background: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.004 232)); } &:disabled { @@ -85,14 +85,14 @@ SAddon { flex: 0 0 auto; padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px); height: 100%; - color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.02 220.2)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.017 238.3)); } SAddon[interactive] { cursor: pointer; &:hover { - color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.024 223.6)); + color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.66 0.022 243.2)); } } @@ -140,7 +140,7 @@ SInput:has(SValue:focus-visible) { SInput[state='normal'] { & SOutline { - border-color: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border-color: var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); } &:has(SValue:focus-visible) SOutline { @@ -148,7 +148,7 @@ SInput[state='normal'] { outline-offset: 0; transition-property: outline-color, outline-width; } - border-color: var(--intergalactic-border-info-active, oklch(0.23 0.01 225)); + border-color: var(--intergalactic-border-info-active, oklch(0.23 0.009 245)); } } diff --git a/semcore/link/src/style/link.shadow.css b/semcore/link/src/style/link.shadow.css index cd3a3490fb..9ce6a30905 100644 --- a/semcore/link/src/style/link.shadow.css +++ b/semcore/link/src/style/link.shadow.css @@ -20,16 +20,16 @@ SLink { } &[theme='default'] { - color: var(--intergalactic-text-link-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-link-primary, oklch(0.23 0.009 245)); & SText { - text-decoration-color: var(--intergalactic-text-link-primary-underline, oklch(0.86 0.015 218.5)); + text-decoration-color: var(--intergalactic-text-link-primary-underline, oklch(0.86 0.012 235.7)); } &[active], &:hover, &:active { - color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.009 245)); & SText { text-decoration-color: currentColor; @@ -37,7 +37,7 @@ SLink { } } &[theme='light'] { - color: var(--intergalactic-text-link-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-link-secondary, oklch(0.209 0.055 246.6 / 0.505)); & SText { text-decoration-color: transparent; @@ -46,7 +46,7 @@ SLink { &[active], &:hover, &:active { - color: var(--intergalactic-text-link-secondary-hover-active, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-link-secondary-hover-active, oklch(0.209 0.055 246.6 / 0.505)); & SText { text-decoration-color: currentColor; @@ -71,16 +71,16 @@ SLink { } } &[theme='invert'] { - color: var(--intergalactic-text-link-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-text-link-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); & SText { - text-decoration-color: var(--intergalactic-text-link-primary-underline, oklch(0.86 0.015 218.5)); + text-decoration-color: var(--intergalactic-text-link-primary-underline, oklch(0.86 0.012 235.7)); } &[active], &:hover, &:active { - color: var(--intergalactic-text-link-primary-invert-hover-active, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-text-link-primary-invert-hover-active, oklch(0.991 0.005 232.5 / 0.959)); & SText { text-decoration-color: currentColor; diff --git a/semcore/mini-chart/src/component/score/line.shadow.css b/semcore/mini-chart/src/component/score/line.shadow.css index 9fa91b8447..afe06bc57d 100644 --- a/semcore/mini-chart/src/component/score/line.shadow.css +++ b/semcore/mini-chart/src/component/score/line.shadow.css @@ -2,7 +2,7 @@ SLineGauge { height: 8px; - background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 215.6))); + background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 232.5))); border-radius: var(--intergalactic-chart-rounded, 2px); overflow: hidden; position: relative; @@ -18,7 +18,7 @@ SLineValue[percent] { } SLineValue[color], SLineSegmentItem[color] { - background-color: var(--color, var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225))); + background-color: var(--color, var(--intergalactic-chart-palette-order-1, oklch(0.23 0.009 245))); } SLineGauge[segments] { @@ -48,7 +48,7 @@ SLineSegmentItem { } SAnimationLine { - background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 215.6)); + background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 232.5)); transition: all var(--intergalactic-duration-extra-slow, 500) ease-in-out; animation-name: move-line; animation-duration: 0.5s; diff --git a/semcore/mini-chart/src/styles/line.shadow.css b/semcore/mini-chart/src/styles/line.shadow.css index 3a7c3dbd3a..c030a9e125 100644 --- a/semcore/mini-chart/src/styles/line.shadow.css +++ b/semcore/mini-chart/src/styles/line.shadow.css @@ -2,7 +2,7 @@ SLineGauge { height: 8px; - background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 215.6))); + background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 232.5))); border-radius: var(--intergalactic-chart-rounded, 2px); overflow: hidden; position: relative; @@ -18,7 +18,7 @@ SLineValue[percent] { } SLineValue[color], SLineSegmentItem[color] { - background-color: var(--color, var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 225))); + background-color: var(--color, var(--intergalactic-chart-palette-order-1, oklch(0.23 0.009 245))); } SLineGauge[segments] { @@ -48,7 +48,7 @@ SLineSegmentItem { } SAnimationLine { - background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 215.6)); + background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 232.5)); transition: all var(--intergalactic-duration-extra-slow, 500) ease-in-out; animation-name: move-line; animation-duration: 0.5s; diff --git a/semcore/modal/src/style/modal.shadow.css b/semcore/modal/src/style/modal.shadow.css index 002a3f2f7e..b0d5e5791a 100644 --- a/semcore/modal/src/style/modal.shadow.css +++ b/semcore/modal/src/style/modal.shadow.css @@ -5,15 +5,15 @@ SWindow { box-sizing: border-box; margin: auto; padding: var(--intergalactic-spacing-content-padding-xxlarge, 40px); - box-shadow: var(--intergalactic-box-shadow-modal, 0px 1px 5px 0px oklch(0.344 0.064 223.3 / 0.081)); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + box-shadow: var(--intergalactic-box-shadow-modal, 0px 1px 5px 0px oklch(0.324 0.077 242.1 / 0.079)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); &:focus { outline: none; } STitle { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); font-size: var(--intergalactic-fs-500, 24px); line-height: var(--intergalactic-lh-500, 1.1667); font-weight: var(--intergalactic-semi-bold, 600); @@ -61,12 +61,12 @@ SOverlay { left: 0; right: 0; margin: 0; - background: var(--intergalactic-overlay-primary, oklch(from oklch(0.46 0.02 225) l c h / 0.4)); + background: var(--intergalactic-overlay-primary, oklch(from oklch(0.46 0.018 245) l c h / 0.4)); overflow: auto; -webkit-overflow-scrolling: touch; & SOverlay { - background: var(--intergalactic-overlay-secondary, oklch(from oklch(0.46 0.02 225) l c h / 0.3)); + background: var(--intergalactic-overlay-secondary, oklch(from oklch(0.46 0.018 245) l c h / 0.3)); } } diff --git a/semcore/notice-bubble/src/style/notice-bubble.shadow.css b/semcore/notice-bubble/src/style/notice-bubble.shadow.css index 8b52646ea5..2b101adc37 100644 --- a/semcore/notice-bubble/src/style/notice-bubble.shadow.css +++ b/semcore/notice-bubble/src/style/notice-bubble.shadow.css @@ -8,11 +8,11 @@ SView { border-radius: var(--intergalactic-popper-rounded, 6px); overflow: hidden; box-sizing: border-box; - color: var(--intergalactic-text-primary-invert, oklch(0.993 0.005 215.6 / 0.956)); + color: var(--intergalactic-text-primary-invert, oklch(0.991 0.005 232.5 / 0.959)); gap: var(--intergalactic-spacing-content-gap-large, 8px); &[type='info'] { - background: var(--intergalactic-notice-bubble-bg-info, oklch(0.23 0.01 225)); + background: var(--intergalactic-notice-bubble-bg-info, oklch(0.23 0.009 245)); } &[type='warning'] { @@ -71,7 +71,7 @@ SNoticeBubble[disablePortal] { } SMessage a { - color: var(--intergalactic-text-link-invert, oklch(0.993 0.005 215.6 / 0.956)); /* TODO: --intergalactic-text-link-primary-invert */ + color: var(--intergalactic-text-link-invert, oklch(0.991 0.005 232.5 / 0.959)); /* TODO: --intergalactic-text-link-primary-invert */ } SNoticeAriaLiveWrapper { diff --git a/semcore/notice/src/style/notice.shadow.css b/semcore/notice/src/style/notice.shadow.css index 8006f63edb..9d4b9ae908 100644 --- a/semcore/notice/src/style/notice.shadow.css +++ b/semcore/notice/src/style/notice.shadow.css @@ -7,7 +7,7 @@ SNotice { border-style: solid; border-width: 1px; border-radius: var(--intergalactic-surface-rounded, 8px); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); gap: var(--intergalactic-spacing-content-gap-large, 8px); } @@ -16,10 +16,10 @@ SNotice[theme='info'] { border-color: var(--intergalactic-border-info, oklch(0.524 0.265 263 / 0.096)); & SCloseIcon { - color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.025 225)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.022 245)); &:hover { - color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.53 0.023 225)); + color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.53 0.02 245)); } } } @@ -64,14 +64,14 @@ SNotice[theme='success'] { } SNotice[theme='muted'] { - background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.003 215)); - border-color: var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); + background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.004 232)); + border-color: var(--intergalactic-border-secondary, oklch(0.324 0.077 242.1 / 0.079)); & SCloseIcon { - color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.025 225)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.022 245)); &:hover { - color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.53 0.023 225)); + color: var(--intergalactic-icon-primary-neutral-hover-active, oklch(0.53 0.02 245)); } } } @@ -111,7 +111,7 @@ SIllustration { } SLabel[theme='info'], SIcon[theme='info'] { - color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.025 225)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.022 245)); } SLabel[theme='danger'], SIcon[theme='danger'] { @@ -127,7 +127,7 @@ SLabel[theme='success'], SIcon[theme='success'] { } SLabel[theme='muted'], SIcon[theme='muted'] { - color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.025 225)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.022 245)); } SCloseIcon { diff --git a/semcore/pagination/src/style/pagination.shadow.css b/semcore/pagination/src/style/pagination.shadow.css index 212735fed2..9db9b84fd6 100644 --- a/semcore/pagination/src/style/pagination.shadow.css +++ b/semcore/pagination/src/style/pagination.shadow.css @@ -22,7 +22,7 @@ SPrevPage { } SLabel { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } SLabel:not(:first-child) { @@ -40,13 +40,13 @@ STotalPages { STotalPagesLabel { margin-left: var(--intergalactic-spacing-content-gap-large, 8px); margin-right: var(--intergalactic-spacing-content-gap-small, 4px); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } STotalLastPages { font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); &[size='l'] { font-size: var(--intergalactic-fs-300, 16px); diff --git a/semcore/pills/src/style/pills.shadow.css b/semcore/pills/src/style/pills.shadow.css index 796d2be9b1..7deb9e9000 100644 --- a/semcore/pills/src/style/pills.shadow.css +++ b/semcore/pills/src/style/pills.shadow.css @@ -4,7 +4,7 @@ SPills { padding: var(--intergalactic-spacing-content-padding-xxsmall, 2px); min-height: var(--intergalactic-form-control-m, 32px); border-radius: var(--intergalactic-pills-rounded, 6px); - background: var(--intergalactic-control-pills-bg-normal, oklch(0.351 0.065 223 / 0.066)); + background: var(--intergalactic-control-pills-bg-normal, oklch(0.324 0.077 242.1 / 0.079)); box-sizing: border-box; &[size='l'] { @@ -71,7 +71,7 @@ SPill { width: 100%; height: 100%; border-radius: var(--intergalactic-rounded-small, 4px); - background: var(--intergalactic-control-pills-bg-hover, oklch(0.339 0.063 223.5 / 0.097)); + background: var(--intergalactic-control-pills-bg-hover, oklch(0.31 0.074 242 / 0.094)); } } } @@ -117,7 +117,7 @@ SPillSeparator { width: 1px; height: calc(100% - var(--intergalactic-spacing-content-padding-xsmall-extended, 6px) * 2); - background-color: var(--intergalactic-control-pills-border, oklch(0.324 0.062 225.5 / 0.189)); + background-color: var(--intergalactic-control-pills-border, oklch(0.277 0.066 242.6 / 0.18)); &[size='l'] { height: calc(100% - var(--intergalactic-spacing-content-padding-small, 8px) * 2); @@ -141,17 +141,17 @@ SSegmentIndicator { transition: var(--global-speed); background: var(--intergalactic-control-pills-bg-selected, oklch(1 0 0)); - box-shadow: var(--intergalactic-box-shadow-control-elevated, 0px 0px 1px 0px oklch(0.344 0.064 223.3 / 0.081), 0px 1px 3px 0px oklch(0.344 0.064 223.3 / 0.081)); + box-shadow: var(--intergalactic-box-shadow-control-elevated, 0px 0px 1px 0px oklch(0.324 0.077 242.1 / 0.079), 0px 1px 3px 0px oklch(0.324 0.077 242.1 / 0.079)); border-radius: var(--intergalactic-rounded-small, 4px); } SText { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); min-width: 0.8em; } SAddon { - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); display: inline-flex; align-items: center; justify-content: center; diff --git a/semcore/product-head/src/style/title.shadow.css b/semcore/product-head/src/style/title.shadow.css index bb881d0c7f..8f3a8f4409 100644 --- a/semcore/product-head/src/style/title.shadow.css +++ b/semcore/product-head/src/style/title.shadow.css @@ -8,7 +8,7 @@ STitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); margin: 0; } diff --git a/semcore/progress-bar/src/style/progress-bar.shadow.css b/semcore/progress-bar/src/style/progress-bar.shadow.css index 3882fec4c6..39d605f9c7 100644 --- a/semcore/progress-bar/src/style/progress-bar.shadow.css +++ b/semcore/progress-bar/src/style/progress-bar.shadow.css @@ -62,7 +62,7 @@ SValue[size='l'] { SProgressBar[animation] { background-image: var(--intergalactic-progress-bar-pattern-gradient, - linear-gradient(-45deg, oklch(from oklch(0.332 0.062 224.2 / 0.128) l c h / 0.18) 25%, oklch(0.332 0.062 224.2 / 0.128) 0%, oklch(0.332 0.062 224.2 / 0.128) 50%, oklch(from oklch(0.332 0.062 224.2 / 0.128) l c h / 0.18) 0%, oklch(from oklch(0.332 0.062 224.2 / 0.128) l c h / 0.18) 75%, oklch(0.332 0.062 224.2 / 0.128) 0%)); + linear-gradient(-45deg, oklch(from oklch(0.291 0.069 241.9 / 0.123) l c h / 0.18) 25%, oklch(0.291 0.069 241.9 / 0.123) 0%, oklch(0.291 0.069 241.9 / 0.123) 50%, oklch(from oklch(0.291 0.069 241.9 / 0.123) l c h / 0.18) 0%, oklch(from oklch(0.291 0.069 241.9 / 0.123) l c h / 0.18) 75%, oklch(0.291 0.069 241.9 / 0.123) 0%)); animation-name: loading; animation-timing-function: linear; animation-iteration-count: infinite; @@ -73,16 +73,16 @@ SProgressBar[animation] { } SProgressBar[theme='default'] { - background-color: var(--intergalactic-progress-bar-bg, oklch(0.332 0.062 224.2 / 0.128)); + background-color: var(--intergalactic-progress-bar-bg, oklch(0.291 0.069 241.9 / 0.123)); SValue { background-image: var(--intergalactic-progress-bar-value-gradient, - linear-gradient(-45deg, oklch(from oklch(0.22 0.01 225) l c h / 0.78) 25%, oklch(0.22 0.01 225) 0%, oklch(0.22 0.01 225) 50%, oklch(from oklch(0.22 0.01 225) l c h / 0.78) 0%, oklch(from oklch(0.22 0.01 225) l c h / 0.78) 75%, oklch(0.22 0.01 225) 0%)); + linear-gradient(-45deg, oklch(from oklch(0.22 0.008 245) l c h / 0.78) 25%, oklch(0.22 0.008 245) 0%, oklch(0.22 0.008 245) 50%, oklch(from oklch(0.22 0.008 245) l c h / 0.78) 0%, oklch(from oklch(0.22 0.008 245) l c h / 0.78) 75%, oklch(0.22 0.008 245) 0%)); } } SProgressBar[theme='invert'] { - background-color: var(--intergalactic-progress-bar-bg-invert, oklch(0.927 0.047 225.1 / 0.231)); + background-color: var(--intergalactic-progress-bar-bg-invert, oklch(0.919 0.042 245.1 / 0.234)); SValue { background-image: var(--intergalactic-progress-bar-value-gradient-invert, @@ -91,7 +91,7 @@ SProgressBar[theme='invert'] { } SProgressBar[theme='brand'] { - background-color: var(--intergalactic-progress-bar-bg, oklch(0.332 0.062 224.2 / 0.128)); + background-color: var(--intergalactic-progress-bar-bg, oklch(0.291 0.069 241.9 / 0.123)); SValue { background-image: var(--intergalactic-progress-bar-value-gradient-invert, diff --git a/semcore/radio-cards/src/styles/radio-cards.shadow.css b/semcore/radio-cards/src/styles/radio-cards.shadow.css index 5c558609fc..94b96368f7 100644 --- a/semcore/radio-cards/src/styles/radio-cards.shadow.css +++ b/semcore/radio-cards/src/styles/radio-cards.shadow.css @@ -12,16 +12,16 @@ SRadioItem { border-radius: var(--intergalactic-pills-rounded, 6px); background: var(--intergalactic-control-presets-bg, oklch(1 0 0)); - box-shadow: var(--intergalactic-box-shadow-control-elevated, 0px 0px 1px 0px oklch(0.344 0.064 223.3 / 0.081), 0px 1px 3px 0px oklch(0.344 0.064 223.3 / 0.081)); + box-shadow: var(--intergalactic-box-shadow-control-elevated, 0px 0px 1px 0px oklch(0.324 0.077 242.1 / 0.079), 0px 1px 3px 0px oklch(0.324 0.077 242.1 / 0.079)); cursor: pointer; border: 1px solid transparent; &:hover { - border: 1px solid var(--intergalactic-control-presets-border-hover, oklch(0.324 0.062 225.5 / 0.189)); + border: 1px solid var(--intergalactic-control-presets-border-hover, oklch(0.277 0.066 242.6 / 0.18)); } &:has(SRadioItemControl[checked]) { - border: 1px solid var(--intergalactic-control-presets-border-selected, oklch(0.23 0.01 225)); + border: 1px solid var(--intergalactic-control-presets-border-selected, oklch(0.23 0.009 245)); } &:has(SRadioItemControl[disabled]) { @@ -52,11 +52,11 @@ SRadioItemDescription { SRadioItemHeaderLeftAddon { transform: translateY(4px); - color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.025 225)); + color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.022 245)); } SRadioItemHeaderRightAddon { - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); } SRadioItemHeaderText { diff --git a/semcore/radio/src/style/radio.shadow.css b/semcore/radio/src/style/radio.shadow.css index 414769f04f..f1a8c17622 100644 --- a/semcore/radio/src/style/radio.shadow.css +++ b/semcore/radio/src/style/radio.shadow.css @@ -5,7 +5,7 @@ SRadio { SText { margin-left: var(--intergalactic-spacing-content-gap-medium, 6px); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } &[size='l'] { @@ -89,7 +89,7 @@ SValue[size='l'] { } SValue[state='normal']::before { - border-color: var(--intergalactic-control-radio-border, oklch(0.324 0.062 225.5 / 0.189)); + border-color: var(--intergalactic-control-radio-border, oklch(0.277 0.066 242.6 / 0.18)); } SValue[state='invalid']::before { @@ -117,8 +117,8 @@ SControl:focus-visible+SValue[state='normal']::before { SControl:checked~SValue::before, SControl:checked:focus-visible~SValue::before { - border-color: var(--intergalactic-control-radio-bg-selected, oklch(0.23 0.01 225)); - background-color: var(--intergalactic-control-radio-bg-selected, oklch(0.23 0.01 225)); + border-color: var(--intergalactic-control-radio-bg-selected, oklch(0.23 0.009 245)); + background-color: var(--intergalactic-control-radio-bg-selected, oklch(0.23 0.009 245)); } SControl:focus-visible+SValue[state='invalid']::before { diff --git a/semcore/select/src/style/select.shadow.css b/semcore/select/src/style/select.shadow.css index 3370afff17..a260e12513 100644 --- a/semcore/select/src/style/select.shadow.css +++ b/semcore/select/src/style/select.shadow.css @@ -13,7 +13,7 @@ SOptionCheckbox { right: 0; bottom: 0; background: var(--intergalactic-control-checkbox-bg-normal, oklch(1 0 0)); - border: 1px solid var(--intergalactic-control-checkbox-border, oklch(0.324 0.062 225.5 / 0.189)); + border: 1px solid var(--intergalactic-control-checkbox-border, oklch(0.277 0.066 242.6 / 0.18)); border-radius: var(--intergalactic-addon-rounded, 4px); } @@ -48,13 +48,13 @@ SOptionCheckbox[size='l'][selected]::after { } SOptionCheckbox[selected]:before { - background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 225)); - border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.009 245)); + border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.009 245)); } SOptionCheckbox[indeterminate]:before { - background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 225)); - border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.009 245)); + border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.009 245)); } SOptionCheckbox[theme]:before { @@ -68,10 +68,10 @@ SOptionCheckbox[theme][indeterminate]:before { } SOptionCheckbox[selected] { - background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.351 0.065 223 / 0.066)); + background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.344 0.082 242.3 / 0.065)); &:hover { - background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.339 0.063 223.5 / 0.097)); + background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.31 0.074 242 / 0.094)); } } diff --git a/semcore/side-panel/src/style/side-panel.shadow.css b/semcore/side-panel/src/style/side-panel.shadow.css index 7ee590d247..f255c7a933 100644 --- a/semcore/side-panel/src/style/side-panel.shadow.css +++ b/semcore/side-panel/src/style/side-panel.shadow.css @@ -7,9 +7,9 @@ SOverlay { margin: 0; display: flex; overflow: hidden; - background: var(--intergalactic-overlay-primary, oklch(from oklch(0.46 0.02 225) l c h / 0.4)); + background: var(--intergalactic-overlay-primary, oklch(from oklch(0.46 0.018 245) l c h / 0.4)); -webkit-overflow-scrolling: touch; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } SPanel { @@ -26,7 +26,7 @@ SPanel { } SPanel[placement='top'] { - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.324 0.077 242.1 / 0.079)); width: 100%; margin-bottom: auto; top: 0; @@ -34,7 +34,7 @@ SPanel[placement='top'] { } SPanel[placement='right'] { - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.324 0.077 242.1 / 0.079)); height: 100vh; margin-left: auto; top: 0; @@ -42,7 +42,7 @@ SPanel[placement='right'] { } SPanel[placement='bottom'] { - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.324 0.077 242.1 / 0.079)); width: 100%; margin-top: auto; bottom: 0; @@ -50,7 +50,7 @@ SPanel[placement='bottom'] { } SPanel[placement='left'] { - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.324 0.077 242.1 / 0.079)); height: 100vh; margin-right: auto; top: 0; @@ -74,7 +74,7 @@ SHeader { padding-right: var(--intergalactic-spacing-14x, 56px); padding-top: var(--intergalactic-spacing-content-padding-xsmall, 4px); min-height: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-3x, 12px)); - border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); box-sizing: border-box; flex-shrink: 0; flex-direction: column; @@ -87,7 +87,7 @@ SFooter { justify-content: center; align-items: center; gap: var(--intergalactic-spacing-content-gap-xlarge, 12px); - border-top: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border-top: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); } SBody { diff --git a/semcore/skeleton/src/style/chart.shadow.css b/semcore/skeleton/src/style/chart.shadow.css index 22d32938e3..687efd63b9 100644 --- a/semcore/skeleton/src/style/chart.shadow.css +++ b/semcore/skeleton/src/style/chart.shadow.css @@ -2,11 +2,11 @@ SChartSkeleton { height: 200px; width: 100%; mask-image: var(--bgPattern); - background-color: var(--intergalactic-skeleton-bg, oklch(0.94 0.007 216.1)); + background-color: var(--intergalactic-skeleton-bg, oklch(0.94 0.006 233)); } SChartSkeleton[theme='invert'] { - background-color: var(--intergalactic-skeleton-bg-invert, oklch(0.5 0.022 225)); + background-color: var(--intergalactic-skeleton-bg-invert, oklch(0.5 0.019 245)); } SChartSkeleton[bgPosition] { diff --git a/semcore/skeleton/src/style/skeleton.shadow.css b/semcore/skeleton/src/style/skeleton.shadow.css index 4a4369072b..e58d93a4d0 100644 --- a/semcore/skeleton/src/style/skeleton.shadow.css +++ b/semcore/skeleton/src/style/skeleton.shadow.css @@ -21,11 +21,11 @@ SSkeleton { } SSkeletonSVG[theme='default'] { - fill: var(--intergalactic-skeleton-bg, oklch(0.94 0.007 216.1)); + fill: var(--intergalactic-skeleton-bg, oklch(0.94 0.006 233)); } SSkeletonSVG[theme='invert'] { - fill: var(--intergalactic-skeleton-bg-invert, oklch(0.5 0.022 225)); + fill: var(--intergalactic-skeleton-bg-invert, oklch(0.5 0.019 245)); } SText { diff --git a/semcore/slider/src/style/slider.shadow.css b/semcore/slider/src/style/slider.shadow.css index f0796a86b9..55c8f1a366 100644 --- a/semcore/slider/src/style/slider.shadow.css +++ b/semcore/slider/src/style/slider.shadow.css @@ -15,11 +15,11 @@ SSlider { height: 4px; width: 100%; border-radius: var(--intergalactic-progress-bar-rounded, 6px); - background-color: var(--intergalactic-control-slider-bar-bg, oklch(0.332 0.062 224.2 / 0.128)); + background-color: var(--intergalactic-control-slider-bar-bg, oklch(0.291 0.069 241.9 / 0.123)); } &:hover:before { - background-color: var(--intergalactic-control-slider-bar-bg-hover, oklch(0.92 0.009 216.7)); + background-color: var(--intergalactic-control-slider-bar-bg-hover, oklch(0.92 0.008 233.5)); } &:focus-visible SKnob { @@ -49,7 +49,7 @@ SBar { border-radius: var(--intergalactic-progress-bar-rounded, 6px); box-sizing: border-box; background-size: 12px; - background-color: var(--intergalactic-control-slider-bar-value-bg, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-control-slider-bar-value-bg, oklch(0.23 0.009 245)); cursor: pointer; transition: calc(var(--intergalactic-duration-control, 200) * 1ms) width ease-in-out; } @@ -62,7 +62,7 @@ SKnob { border-radius: 50%; box-sizing: border-box; background-color: var(--intergalactic-control-slider-knob-bg, #ffffff); - border: 5px solid var(--intergalactic-control-slider-knob-border, oklch(0.23 0.01 225)); + border: 5px solid var(--intergalactic-control-slider-knob-border, oklch(0.23 0.009 245)); cursor: pointer; transform: translate(-50%, -50%); transition-duration: calc(var(--intergalactic-duration-control, 200) * 1ms); @@ -70,7 +70,7 @@ SKnob { transition-timing-function: ease-in-out; &:hover, &:active { - border-color: var(--intergalactic-control-slider-knob-border-hover, oklch(0.32 0.014 225)); + border-color: var(--intergalactic-control-slider-knob-border-hover, oklch(0.32 0.012 245)); transform: translate(-50%, -50%) scale(1.2); } } @@ -82,7 +82,7 @@ SInput { } SSliderOptions { - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); font-size: var(--intergalactic-fs-200, 14px); font-weight: var(--intergalactic-regular, 400); line-height: var(--intergalactic-lh-200, 1.4286); diff --git a/semcore/spin-container/src/style/spin-container.shadow.css b/semcore/spin-container/src/style/spin-container.shadow.css index 8bb37da37b..df340bde19 100644 --- a/semcore/spin-container/src/style/spin-container.shadow.css +++ b/semcore/spin-container/src/style/spin-container.shadow.css @@ -23,7 +23,7 @@ SOverlay { } SOverlay[theme='invert'] { - background-color: var(--intergalactic-overlay-primary, oklch(from oklch(0.46 0.02 225) l c h / 0.4)); + background-color: var(--intergalactic-overlay-primary, oklch(from oklch(0.46 0.018 245) l c h / 0.4)); } SOverlay[theme='default'], SOverlay[theme='dark'] { diff --git a/semcore/spin/src/style/spin.shadow.css b/semcore/spin/src/style/spin.shadow.css index f04d500899..62b4bb0b32 100644 --- a/semcore/spin/src/style/spin.shadow.css +++ b/semcore/spin/src/style/spin.shadow.css @@ -44,11 +44,11 @@ SSpin[theme] SCircle { } SSpin[theme='default'] SCircle, SSpin[theme='dark'] SCircle { - stroke: var(--intergalactic-spin-bg, oklch(0.8 0.02 220.2)); + stroke: var(--intergalactic-spin-bg, oklch(0.8 0.017 238.3)); } SSpin[theme='invert'] { - stroke: var(--intergalactic-spin-bg-invert, oklch(0.85 0.016 218.8)); + stroke: var(--intergalactic-spin-bg-invert, oklch(0.85 0.013 236.2)); } SSpin[centered] { diff --git a/semcore/switch/src/style/switch.shadow.css b/semcore/switch/src/style/switch.shadow.css index 5e16d00f8a..e3d4bb1af6 100644 --- a/semcore/switch/src/style/switch.shadow.css +++ b/semcore/switch/src/style/switch.shadow.css @@ -76,9 +76,9 @@ SSwitch[disabled] { } SToggle { - background: var(--intergalactic-control-switch-bg, oklch(0.351 0.065 223 / 0.066)); + background: var(--intergalactic-control-switch-bg, oklch(0.324 0.077 242.1 / 0.079)); position: relative; - color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.02 220.2)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.017 238.3)); cursor: pointer; display: flex; align-items: center; @@ -91,8 +91,8 @@ SToggle { } SToggle[checked][theme='info'] { - color: var(--intergalactic-control-switch-bg-info-active, oklch(0.23 0.01 225)); - background-color: var(--intergalactic-control-switch-bg-info-active, oklch(0.23 0.01 225)); + color: var(--intergalactic-control-switch-bg-info-active, oklch(0.23 0.009 245)); + background-color: var(--intergalactic-control-switch-bg-info-active, oklch(0.23 0.009 245)); } SToggle[checked][theme='success'] { @@ -132,7 +132,7 @@ SSlider { left, calc(var(--intergalactic-duration-switch, 100) * 1ms) ease-in-out; - box-shadow: var(--intergalactic-box-shadow-control-elevated, 0px 0px 1px 0px oklch(0.344 0.064 223.3 / 0.081), 0px 1px 3px 0px oklch(0.344 0.064 223.3 / 0.081)); + box-shadow: var(--intergalactic-box-shadow-control-elevated, 0px 0px 1px 0px oklch(0.324 0.077 242.1 / 0.079), 0px 1px 3px 0px oklch(0.324 0.077 242.1 / 0.079)); border-radius: 50%; @@ -167,28 +167,28 @@ SAddon { } SAddon[neighborLocation='right'] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } SAddon[neighborLocation='left'] { - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); } SAddon[neighborLocation='left']:nth-child(2) { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } SSwitch[checked] { & SAddon[neighborLocation='right'] { - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); } & SAddon[neighborLocation='right']:nth-last-child(2) { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } & SAddon[neighborLocation='left'] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } } diff --git a/semcore/tab-line/src/style/tab-line.shadow.css b/semcore/tab-line/src/style/tab-line.shadow.css index ad5c42d3f1..43018856a8 100644 --- a/semcore/tab-line/src/style/tab-line.shadow.css +++ b/semcore/tab-line/src/style/tab-line.shadow.css @@ -13,7 +13,7 @@ STabLine { } STabLine[underlined] { - border-bottom: 1px solid var(--intergalactic-control-tab-line-border, oklch(0.324 0.062 225.5 / 0.189)); + border-bottom: 1px solid var(--intergalactic-control-tab-line-border, oklch(0.277 0.066 242.6 / 0.18)); } STabLineItem { @@ -37,7 +37,7 @@ STabLineItem { cursor: pointer; border: none; background: transparent; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); gap: var(--intergalactic-spacing-content-gap-medium, 6px); font-weight: var(--intergalactic-medium, 500); @@ -67,7 +67,7 @@ STabLineItem { } &:hover::before { - background-color: var(--intergalactic-control-tab-line-border-hover, oklch(0.324 0.062 225.5 / 0.189)); + background-color: var(--intergalactic-control-tab-line-border-hover, oklch(0.277 0.066 242.6 / 0.18)); transition-duration: calc(var(--intergalactic-duration-extra-fast, 100) * 1ms); } @@ -75,7 +75,7 @@ STabLineItem { bottom: -1px; height: 3px; transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms); - background-color: var(--intergalactic-control-tab-line-border-active, oklch(0.23 0.01 225)); + background-color: var(--intergalactic-control-tab-line-border-active, oklch(0.23 0.009 245)); } } @@ -83,7 +83,7 @@ SCaret { position: absolute; bottom: -1px; height: 3px; - background: var(--intergalactic-control-tab-line-border-active, oklch(0.23 0.01 225)); + background: var(--intergalactic-control-tab-line-border-active, oklch(0.23 0.009 245)); transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out; } diff --git a/semcore/tab-panel/src/style/tab-panel.shadow.css b/semcore/tab-panel/src/style/tab-panel.shadow.css index 4ef5fc7a1e..8d350553ff 100644 --- a/semcore/tab-panel/src/style/tab-panel.shadow.css +++ b/semcore/tab-panel/src/style/tab-panel.shadow.css @@ -9,7 +9,7 @@ STabPanel { bottom: -1px; flex: 1; border-top: 1px solid transparent; - border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); } } @@ -20,7 +20,7 @@ STabPanelItem { gap: var(--intergalactic-spacing-content-gap-medium, 6px); min-width: 0; height: var(--intergalactic-form-control-m, 32px); - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); border: 1px solid transparent; border-bottom: none; border-radius: var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px) 0 0; @@ -52,7 +52,7 @@ STabPanelItem { } &:hover { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } &::after { @@ -61,7 +61,7 @@ STabPanelItem { left: -1px; bottom: 0px; width: calc(100% + 2px); - border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); } } @@ -77,8 +77,8 @@ STabPanelItem[disabled] { } STabPanelItem[selected] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); - border-color: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); + border-color: var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); flex-shrink: 0; background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css index 965cdd1e92..f2ca2448be 100644 --- a/semcore/tag/src/style/tag.shadow.css +++ b/semcore/tag/src/style/tag.shadow.css @@ -170,7 +170,7 @@ STag[theme="secondary"], STagContainerClose[theme="secondary"] { color: var(--intergalactic-tag-secondary-text, #6a6c6a); background-color: var(--intergalactic-tag-secondary-bg-normal, #ffffff); - border-color: var(--intergalactic-tag-secondary-border, oklch(0.95 0.006 215.8)); + border-color: var(--intergalactic-tag-secondary-border, oklch(0.95 0.006 232.7)); &::before, &::after { @@ -188,7 +188,7 @@ STag[theme="additional"], STagContainerClose[theme="additional"] { color: var(--intergalactic-tag-additional-text, #6a6c6a); background-color: var(--intergalactic-tag-additional-bg-normal, oklch(1 0 0)); - border-color: var(--intergalactic-tag-additional-border, oklch(0.95 0.006 215.8)); + border-color: var(--intergalactic-tag-additional-border, oklch(0.95 0.006 232.7)); border-style: dashed; &::before, @@ -199,28 +199,28 @@ STagContainerClose[theme="additional"] { &[interactiveView]:hover, &[interactiveView]:active, &[active] { - background-color: var(--intergalactic-tag-additional-bg-hover-active, oklch(0.97 0.004 215.3)); + background-color: var(--intergalactic-tag-additional-bg-hover-active, oklch(0.97 0.005 232.2)); } } STag[theme="primary-invert"], STagContainerClose[theme="primary-invert"] { - background-color: var(--intergalactic-tag-primary-bg-invert-normal, oklch(0.916 0.055 225.3 / 0.127)); + background-color: var(--intergalactic-tag-primary-bg-invert-normal, oklch(0.907 0.048 245.2 / 0.129)); color: var(--intergalactic-tag-primary-text-invert, #ffffff); border-color: transparent; &[interactiveView]:hover, &[interactiveView]:active, &[active] { - background-color: var(--intergalactic-tag-primary-bg-invert-hover-active, oklch(0.928 0.046 225.1 / 0.264)); + background-color: var(--intergalactic-tag-primary-bg-invert-hover-active, oklch(0.921 0.041 245.1 / 0.267)); } } STag[theme="secondary-invert"], STagContainerClose[theme="secondary-invert"] { background-color: var(--intergalactic-tag-secondary-bg-invert-normal, transparent); - color: var(--intergalactic-tag-secondary-text-invert, oklch(0.959 0.028 221.4 / 0.721)); - border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.93 0.045 225.1 / 0.309)); + color: var(--intergalactic-tag-secondary-text-invert, oklch(0.953 0.025 240.1 / 0.726)); + border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.923 0.04 245.1 / 0.312)); &::before, &::after { @@ -230,15 +230,15 @@ STagContainerClose[theme="secondary-invert"] { &[interactiveView]:hover, &[interactiveView]:active, &[active] { - background-color: var(--intergalactic-tag-secondary-bg-invert-hover-active, oklch(0.923 0.05 225.2 / 0.178)); + background-color: var(--intergalactic-tag-secondary-bg-invert-hover-active, oklch(0.915 0.044 245.1 / 0.18)); } } STag[theme="additional-invert"], STagContainerClose[theme="additional-invert"] { background-color: var(--intergalactic-tag-additional-bg-invert-normal, transparent); - color: var(--intergalactic-tag-additional-text-invert, oklch(0.959 0.028 221.4 / 0.721)); - border-color: var(--intergalactic-tag-additional-border-invert, oklch(0.932 0.044 225.1 / 0.378)); + color: var(--intergalactic-tag-additional-text-invert, oklch(0.953 0.025 240.1 / 0.726)); + border-color: var(--intergalactic-tag-additional-border-invert, oklch(0.925 0.039 245 / 0.382)); border-style: dashed; &::before, @@ -249,7 +249,7 @@ STagContainerClose[theme="additional-invert"] { &[interactiveView]:hover, &[interactiveView]:active, &[active] { - background-color: var(--intergalactic-tag-additional-bg-invert-hover-active, oklch(0.923 0.05 225.2 / 0.178)); + background-color: var(--intergalactic-tag-additional-bg-invert-hover-active, oklch(0.915 0.044 245.1 / 0.18)); } } @@ -263,7 +263,7 @@ SText { SText:focus-visible { box-shadow: var( --intergalactic-keyboard-focus, - 0px 0px 0px 3px oklch(from oklch(0.23 0.01 225) l c h / 0.5) + 0px 0px 0px 3px oklch(from oklch(0.23 0.009 245) l c h / 0.5) ); z-index: 1; } diff --git a/semcore/textarea/src/style/textarea.shadow.css b/semcore/textarea/src/style/textarea.shadow.css index 25cc7f044e..d79ad2f008 100644 --- a/semcore/textarea/src/style/textarea.shadow.css +++ b/semcore/textarea/src/style/textarea.shadow.css @@ -1,7 +1,7 @@ STextarea { height: auto; - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); - border: 1px solid var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); + border: 1px solid var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); border-radius: var(--intergalactic-control-rounded, 6px); width: 100%; box-sizing: border-box; @@ -10,7 +10,7 @@ STextarea { background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); &:read-only { - background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.003 215)); + background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.004 232)); } &:disabled { @@ -18,7 +18,7 @@ STextarea { } &::placeholder { - color: var(--intergalactic-text-placeholder, oklch(0.282 0.055 228.7 / 0.386)); + color: var(--intergalactic-text-placeholder, oklch(0.242 0.062 245.8 / 0.371)); } } @@ -38,7 +38,7 @@ STextarea[size='l'] { STextarea[state='normal'] { &:focus { - border-color: var(--intergalactic-border-info-active, oklch(0.23 0.01 225)); + border-color: var(--intergalactic-border-info-active, oklch(0.23 0.009 245)); @mixin focus-outline-mixin { outline-offset: 0; transition-property: outline-color, outline-width; diff --git a/semcore/time-picker/src/component/PickerFormat/picker-format.shadow.css b/semcore/time-picker/src/component/PickerFormat/picker-format.shadow.css index 43e864326b..3d5827034c 100644 --- a/semcore/time-picker/src/component/PickerFormat/picker-format.shadow.css +++ b/semcore/time-picker/src/component/PickerFormat/picker-format.shadow.css @@ -19,7 +19,7 @@ SPickerFormat { user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); background-color: var(--intergalactic-control-tertiary-neutral, transparent); &::before { @@ -29,20 +29,20 @@ SPickerFormat { top: 50%; transform: translateY(-50%); width: 1px; - background-color: var(--intergalactic-border-primary, oklch(0.324 0.062 225.5 / 0.189)); + background-color: var(--intergalactic-border-primary, oklch(0.277 0.066 242.6 / 0.18)); transition: height calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-out; /* TODO: Sync with animationin FilterTrigger */ } &:hover { cursor: pointer; - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); - background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.363 0.068 222.8 / 0.05)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); + background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.375 0.09 242.7 / 0.05)); } &:active, &[active] { - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); - background-color: var(--intergalactic-control-tertiary-neutral-active, oklch(0.351 0.065 223 / 0.066)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); + background-color: var(--intergalactic-control-tertiary-neutral-active, oklch(0.344 0.082 242.3 / 0.065)); } } diff --git a/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css b/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css index be65859336..95f8836536 100644 --- a/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css +++ b/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css @@ -24,13 +24,13 @@ STimePickerWrapper { } STimePicker[disabled] { - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); cursor: default; pointer-events: none; } STimePickerSeparator { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } STimePickerSeparator[disabled] { diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css index 2df5951f8a..a0d9ffb581 100644 --- a/semcore/tooltip/src/style/tooltip.shadow.css +++ b/semcore/tooltip/src/style/tooltip.shadow.css @@ -3,26 +3,26 @@ STooltip { padding: var(--intergalactic-spacing-content-padding-medium, 12px); border-radius: var(--intergalactic-popper-rounded, 6px); box-sizing: border-box; - color: var(--intergalactic-tooltip-text, oklch(0.23 0.01 225)); + color: var(--intergalactic-tooltip-text, oklch(0.23 0.009 245)); font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); word-wrap: break-word; max-width: 228px; font-weight: normal; white-space: normal; - box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)); + box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.324 0.077 242.1 / 0.079)); } /* stylelint-disable-next-line no-duplicate-selectors */ STooltip { background-color: var(--intergalactic-tooltip-bg-default, oklch(1 0 0)); - border: 1px solid var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); + border: 1px solid var(--intergalactic-border-secondary, oklch(0.324 0.077 242.1 / 0.079)); } STooltip[theme='invert'] { - color: var(--intergalactic-tooltip-text-invert, oklch(0.993 0.005 215.6 / 0.956)); - background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 225)); - border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.017 225)); + color: var(--intergalactic-tooltip-text-invert, oklch(0.991 0.005 232.5 / 0.959)); + background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.009 245)); + border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.015 245)); } STooltip[theme='warning'] { @@ -43,7 +43,7 @@ SArrow { /* stylelint-disable-next-line no-duplicate-selectors */ SArrow { - border-color: var(--intergalactic-border-secondary, oklch(0.344 0.064 223.3 / 0.081)); + border-color: var(--intergalactic-border-secondary, oklch(0.324 0.077 242.1 / 0.079)); /* stylelint-disable-next-line no-duplicate-selectors */ &:before { @@ -52,10 +52,10 @@ SArrow { } SArrow[theme='invert'] { - border-color: var(--intergalactic-tooltip-border-invert, oklch(0.4 0.017 225)); + border-color: var(--intergalactic-tooltip-border-invert, oklch(0.4 0.015 245)); &::before { - border-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 225)); + border-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.009 245)); } } diff --git a/semcore/typography/src/style/blockquote.shadow.css b/semcore/typography/src/style/blockquote.shadow.css index 0d46d4d48f..c8d2379495 100644 --- a/semcore/typography/src/style/blockquote.shadow.css +++ b/semcore/typography/src/style/blockquote.shadow.css @@ -4,7 +4,7 @@ SBlockquote { font-style: italic; font-size: var(--intergalactic-fs-400, 20px); line-height: var(--intergalactic-lh-400, 1.2); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } SDoubleQuotation { @@ -15,13 +15,13 @@ SDoubleQuotation { /* disable-tokens-validator */ font-size: 68px; line-height: 52px; - color: var(--intergalactic-text-large-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-large-secondary, oklch(0.209 0.055 246.6 / 0.505)); } SAuthor { display: block; margin-top: var(--intergalactic-spacing-content-gap-xxlarge, 16px); - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); font-style: normal; font-size: var(--intergalactic-fs-300, 16px); line-height: var(--intergalactic-lh-300, 1.5); diff --git a/semcore/typography/src/style/list.shadow.css b/semcore/typography/src/style/list.shadow.css index adbf17f1f5..35a40ec537 100644 --- a/semcore/typography/src/style/list.shadow.css +++ b/semcore/typography/src/style/list.shadow.css @@ -23,6 +23,6 @@ SItem + SItem { SMarker { margin-right: var(--intergalactic-spacing-content-gap-large, 8px); - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); line-height: normal; } diff --git a/semcore/typography/src/style/text.shadow.css b/semcore/typography/src/style/text.shadow.css index ab896cc003..32e4883988 100644 --- a/semcore/typography/src/style/text.shadow.css +++ b/semcore/typography/src/style/text.shadow.css @@ -5,15 +5,15 @@ SText { &[formatTags] { & abbr { - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); - text-decoration: underline dashed var(--intergalactic-text-hint, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); + text-decoration: underline dashed var(--intergalactic-text-hint, oklch(0.209 0.055 246.6 / 0.505)); &:active, &:hover, &:focus { outline: none; - color: var(--intergalactic-text-hint-hover-active, oklch(0.243 0.049 230.4 / 0.548)); - text-decoration: underline dashed var(--intergalactic-text-hint-hover-active, oklch(0.243 0.049 230.4 / 0.548)); + color: var(--intergalactic-text-hint-hover-active, oklch(0.204 0.053 246.7 / 0.529)); + text-decoration: underline dashed var(--intergalactic-text-hint-hover-active, oklch(0.204 0.053 246.7 / 0.529)); } } @@ -22,7 +22,7 @@ SText { background: none; outline: none; text-decoration: none; - color: var(--intergalactic-text-link-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-link-primary, oklch(0.23 0.009 245)); border-bottom-width: 1px; border-bottom-style: solid; border-color: transparent; @@ -31,8 +31,8 @@ SText { &:hover { outline: none; text-decoration: none; - color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.01 225)); - border-color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.009 245)); + border-color: var(--intergalactic-text-link-primary-hover-active, oklch(0.23 0.009 245)); } &:focus { @@ -58,7 +58,7 @@ SText { display: inline-block; position: absolute; left: 0; - color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.02 220.2)); + color: var(--intergalactic-icon-secondary-neutral, oklch(0.8 0.017 238.3)); font-family: Georgia, Times, 'Times New Roman', serif; } @@ -66,7 +66,7 @@ SText { display: block; font-style: normal; margin-top: var(--intergalactic-spacing-4x, 16px); - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); font-size: var(--intergalactic-fs-300, 16px); line-height: var(--intergalactic-lh-300, 1.5); } @@ -83,7 +83,7 @@ SText { &:before { position: absolute; left: 0; - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); } } @@ -103,7 +103,7 @@ SText { & ul:not(ul[start], ul[reversed], ul[type]) li:not(SText):before { content: ''; - background-color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.025 225)); + background-color: var(--intergalactic-icon-primary-neutral, oklch(0.58 0.022 245)); } & ol:not(ol[start], ol[reversed], ol[type]):has(+ p), @@ -184,7 +184,7 @@ SText { & h5, & h6 { & small { - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); font-weight: 300; font-size: 100%; } @@ -469,11 +469,11 @@ SText[textAlign] { } SText[use='primary'] { - color: var(--intergalactic-text-primary, oklch(0.23 0.01 225)); + color: var(--intergalactic-text-primary, oklch(0.23 0.009 245)); } SText[use='secondary'] { - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); } SText[disabled] { diff --git a/semcore/widget-empty/src/style/widget-empty.shadow.css b/semcore/widget-empty/src/style/widget-empty.shadow.css index 0f3ea60717..3a627f36f8 100644 --- a/semcore/widget-empty/src/style/widget-empty.shadow.css +++ b/semcore/widget-empty/src/style/widget-empty.shadow.css @@ -13,7 +13,7 @@ SImage { STitle { text-align: center; - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); font-size: var(--intergalactic-fs-300, 16px); line-height: var(--intergalactic-lh-300, 1.5); font-weight: var(--intergalactic-bold, 700); @@ -24,7 +24,7 @@ SDescription { text-wrap: balance; font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 1.4286); - color: var(--intergalactic-text-secondary, oklch(0.247 0.049 230.2 / 0.524)); + color: var(--intergalactic-text-secondary, oklch(0.209 0.055 246.6 / 0.505)); max-width: 400px; } diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css index a1cb276735..ba79f10574 100644 --- a/semcore/wizard/src/style/wizard.shadow.css +++ b/semcore/wizard/src/style/wizard.shadow.css @@ -6,8 +6,8 @@ SWizard { } SSidebar { - background: var(--intergalactic-wizard-sidebar-bg, oklch(0.23 0.01 225)); - color: var(--intergalactic-wizard-sidebar-text-primary, oklch(0.993 0.005 215.6 / 0.956)); + background: var(--intergalactic-wizard-sidebar-bg, oklch(0.23 0.009 245)); + color: var(--intergalactic-wizard-sidebar-text-primary, oklch(0.991 0.005 232.5 / 0.959)); padding: var(--intergalactic-spacing-content-padding-xxlarge, 40px) var(--intergalactic-spacing-content-padding-small, 8px); max-width: 220px; flex-shrink: 0; @@ -35,11 +35,11 @@ SSidebar { } &:hover { - background: var(--intergalactic-wizard-sidebar-control-hover, oklch(0.36 0.016 225)); + background: var(--intergalactic-wizard-sidebar-control-hover, oklch(0.36 0.014 245)); z-index: 2; } &[active] { - background: var(--intergalactic-wizard-sidebar-control-active, oklch(0.4 0.017 225)); + background: var(--intergalactic-wizard-sidebar-control-active, oklch(0.4 0.015 245)); } &:disabled, &[disabled] { @@ -63,7 +63,7 @@ SSidebar { overflow: auto; } &[active]:hover SStepDescription { - background: var(--intergalactic-wizard-sidebar-control-active, oklch(0.4 0.017 225)); + background: var(--intergalactic-wizard-sidebar-control-active, oklch(0.4 0.015 245)); } } } diff --git a/tools/theme/src/colors/index.ts b/tools/theme/src/colors/index.ts index 9969145a89..052b5735dd 100644 --- a/tools/theme/src/colors/index.ts +++ b/tools/theme/src/colors/index.ts @@ -23,7 +23,13 @@ export type Lightness = typeof lightnessNames[number]; // Base color scales export const baseColors: Record = { 'gray': new ColorScale( - ['oklch(0.979 0.003 215)', 'oklch(0.807 0.02 220)', 'oklch(0.602 0.026 225)'], + [ + 'oklch(0.979 0.004 232)', + 'oklch(0.9 0.009 234)', + 'oklch(0.807 0.017 238)', + 'oklch(0.7 0.021 242)', + 'oklch(0.602 0.023 245)', + ], 'p3', ), 'mint': new ColorScale( @@ -205,7 +211,7 @@ export const L_BG_BUTTON_STRONG_HOVER = 0.32; export const L_BG_BUTTON_STRONG_ACTIVE = 0; /** Button secondary bg | ⚠️ APCA 90+ on secondary bg */ -export const L_BG_BUTTON_SECONDARY = 0.96; +export const L_BG_BUTTON_SECONDARY = 0.95; export const L_BG_BUTTON_SECONDARY_HOVER = 0.94; export const L_BG_BUTTON_SECONDARY_ACTIVE = 0.92; diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 4d15fd8a7c..401dc5349e 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -1465,7 +1465,7 @@ export const theme: Theme = { description: 'Use for the secondary modal dialogs that were opened upon the other modal dialogs.', }, page_bg: { - value: neutral.at(0.97), + value: neutral.at(0.98), description: 'Background fill for the whole product page.', }, control_pills_bg_hover: { diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json index a4a5d38fcb..e76cfe9f6e 100644 --- a/website/docs/style/design-tokens/base-tokens.json +++ b/website/docs/style/design-tokens/base-tokens.json @@ -1,49 +1,49 @@ [ { "name": "--gray-50", - "value": "oklch(0.97 0.004 215.3)", + "value": "oklch(0.97 0.005 232.2)", "description": "Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision." }, { "name": "--gray-75", - "value": "oklch(0.93 0.008 216.4)" + "value": "oklch(0.93 0.007 233.2)" }, { "name": "--gray-100", - "value": "oklch(0.9 0.011 217.3)", + "value": "oklch(0.9 0.009 234)", "description": "Use only for light strokes and active backgrounds. Suitable for minimally visible elements." }, { "name": "--gray-200", - "value": "oklch(0.82 0.019 219.6)" + "value": "oklch(0.82 0.016 237.4)" }, { "name": "--gray-300", - "value": "oklch(0.74 0.022 221.6)" + "value": "oklch(0.74 0.02 240.5)" }, { "name": "--gray-400", - "value": "oklch(0.64 0.025 224.1)" + "value": "oklch(0.64 0.022 243.8)" }, { "name": "--gray-450", - "value": "oklch(0.58 0.025 225)" + "value": "oklch(0.58 0.022 245)" }, { "name": "--gray-500", - "value": "oklch(0.53 0.023 225)" + "value": "oklch(0.53 0.02 245)" }, { "name": "--gray-600", - "value": "oklch(0.46 0.02 225)" + "value": "oklch(0.46 0.018 245)" }, { "name": "--gray-700", - "value": "oklch(0.33 0.014 225)" + "value": "oklch(0.33 0.013 245)" }, { "name": "--gray-800", - "value": "oklch(0.23 0.01 225)" + "value": "oklch(0.23 0.009 245)" }, { "name": "--gray-white", @@ -877,11 +877,11 @@ }, { "name": "--intergalactic-border-tooltip-invert", - "value": "oklch(0.4 0.017 225)" + "value": "oklch(0.4 0.015 245)" }, { "name": "--intergalactic-border-table-accent", - "value": "oklch(0.324 0.062 225.5 / 0.189)" + "value": "oklch(0.277 0.066 242.6 / 0.18)" }, { "name": "--intergalactic-border-date-picker-range-comparison", @@ -893,7 +893,7 @@ }, { "name": "--intergalactic-tooltip-invert", - "value": "oklch(0.23 0.01 225)" + "value": "oklch(0.23 0.009 245)" }, { "name": "--intergalactic-tooltip-warning", @@ -925,7 +925,7 @@ }, { "name": "--intergalactic-feature-popover-neutral-bg", - "value": "oklch(0.23 0.01 225)" + "value": "oklch(0.23 0.009 245)" }, { "name": "--intergalactic-feature-popover-neutral-dot-outer-border", @@ -933,15 +933,15 @@ }, { "name": "--intergalactic-slider-rating-normal", - "value": "oklch(0.229 0.046 229.9 / 0.58)" + "value": "oklch(0.193 0.05 246 / 0.562)" }, { "name": "--intergalactic-slider-rating-hover-active", - "value": "oklch(0.22 0.01 225)" + "value": "oklch(0.22 0.008 245)" }, { "name": "--intergalactic-radio-border", - "value": "oklch(0.324 0.062 225.5 / 0.189)" + "value": "oklch(0.277 0.066 242.6 / 0.18)" }, { "name": "--intergalactic-radio-bg-normal", @@ -949,22 +949,22 @@ }, { "name": "--intergalactic-radio-bg-selected", - "value": "oklch(0.23 0.01 225)" + "value": "oklch(0.23 0.009 245)" }, { "name": "--intergalactic-text-link", - "value": "oklch(0.23 0.01 225)" + "value": "oklch(0.23 0.009 245)" }, { "name": "--intergalactic-text-link-hover-active", - "value": "oklch(0.23 0.01 225)" + "value": "oklch(0.23 0.009 245)" }, { "name": "--intergalactic-text-link-invert", - "value": "oklch(0.993 0.005 215.6 / 0.956)" + "value": "oklch(0.991 0.005 232.5 / 0.959)" }, { "name": "--intergalactic-text-link-invert-hover", - "value": "oklch(0.993 0.005 215.6 / 0.956)" + "value": "oklch(0.991 0.005 232.5 / 0.959)" } ] diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 4ae84b1230..47d0bf41c0 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -33,7 +33,7 @@ }, { "name": "--intergalactic-badge-accent-soon", - "value": "oklch(0.64 0.025 224.1)", + "value": "oklch(0.64 0.022 243.8)", "description": "Background color of the soon Badge.", "components": [ "badge" @@ -73,7 +73,7 @@ }, { "name": "--intergalactic-badge-light-soon", - "value": "oklch(0.9 0.011 217.3)", + "value": "oklch(0.9 0.009 234)", "description": "Light background color of the soon Badge.", "components": [ "badge" @@ -113,7 +113,7 @@ }, { "name": "--intergalactic-badge-light-soon-text", - "value": "oklch(0.46 0.02 225)", + "value": "oklch(0.46 0.018 245)", "description": "Text color for the soon Badge with light background.", "components": [ "badge" @@ -121,7 +121,7 @@ }, { "name": "--intergalactic-badge-bg-invert", - "value": "oklch(0.916 0.055 225.3 / 0.127)", + "value": "oklch(0.907 0.048 245.2 / 0.129)", "description": "Background color of the inverted Badge.", "components": [ "badge" @@ -129,7 +129,7 @@ }, { "name": "--intergalactic-badge-bg-unavailable", - "value": "oklch(0.97 0.004 215.3)", + "value": "oklch(0.97 0.005 232.2)", "description": "Background color of the unavailable Badge.", "components": [ "badge" @@ -137,7 +137,7 @@ }, { "name": "--intergalactic-badge-text-primary-invert", - "value": "oklch(0.993 0.005 215.6 / 0.956)", + "value": "oklch(0.991 0.005 232.5 / 0.959)", "description": "Inverted primary text color for Badge.", "components": [ "badge", @@ -146,7 +146,7 @@ }, { "name": "--intergalactic-badge-text-secondary", - "value": "oklch(0.247 0.049 230.2 / 0.524)", + "value": "oklch(0.209 0.055 246.6 / 0.505)", "description": "Secondary text color for Badge.", "components": [ "badge" @@ -197,13 +197,13 @@ }, { "name": "--intergalactic-bg-primary-invert", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Inverted version of the primary background of the interface that contains the main data and information.", "components": [] }, { "name": "--intergalactic-bg-primary-invert-active", - "value": "oklch(0.4 0.017 225)", + "value": "oklch(0.4 0.015 245)", "description": "Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information.", "components": [ "drag-and-drop" @@ -211,13 +211,13 @@ }, { "name": "--intergalactic-bg-primary-invert-hover", - "value": "oklch(0.36 0.016 225)", + "value": "oklch(0.36 0.014 245)", "description": "Hover state for the inverted version of the primary background of the interface that contains the main data and information.", "components": [] }, { "name": "--intergalactic-bg-primary-muted", - "value": "oklch(0.64 0.025 224.1)", + "value": "oklch(0.64 0.022 243.8)", "description": "Accented muted background for a message with regular information.", "components": [] }, @@ -245,7 +245,7 @@ }, { "name": "--intergalactic-bg-primary-neutral-active", - "value": "oklch(0.96 0.005 215.6)", + "value": "oklch(0.96 0.005 232.5)", "description": "Active (selected) state of the primary background of the interface which contains the main data and information.", "components": [ "flags" @@ -253,7 +253,7 @@ }, { "name": "--intergalactic-bg-primary-neutral-hover", - "value": "oklch(0.97 0.004 215.3)", + "value": "oklch(0.97 0.005 232.2)", "description": "Hover state of the primary background of the interface which contains the main data and information.", "components": [] }, @@ -350,7 +350,7 @@ }, { "name": "--intergalactic-bg-secondary-neutral", - "value": "oklch(0.98 0.003 215)", + "value": "oklch(0.98 0.004 232)", "description": "Secondary background of the interface which contains the main data and information.", "components": [ "accordion", @@ -363,7 +363,7 @@ }, { "name": "--intergalactic-bg-secondary-neutral-active", - "value": "oklch(0.96 0.005 215.6)", + "value": "oklch(0.96 0.005 232.5)", "description": "Active (selected) state of the secondary background of the interface which contains the main data and information.", "components": [ "flags" @@ -371,7 +371,7 @@ }, { "name": "--intergalactic-bg-secondary-neutral-hover", - "value": "oklch(0.97 0.004 215.3)", + "value": "oklch(0.97 0.005 232.2)", "description": "Hover state of the secondary background of the interface which contains the main data and information.", "components": [ "accordion" @@ -379,7 +379,7 @@ }, { "name": "--intergalactic-bg-secondary-invert", - "value": "oklch(0.916 0.055 225.3 / 0.127)", + "value": "oklch(0.907 0.048 245.2 / 0.129)", "description": "Inverted version of the secondary background of the interface which contains the main data and information.", "components": [ "d3-chart" @@ -469,7 +469,7 @@ }, { "name": "--intergalactic-border-info-active", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Active border in focused input filed.", "components": [ "base-trigger", @@ -482,7 +482,7 @@ }, { "name": "--intergalactic-border-primary", - "value": "oklch(0.324 0.062 225.5 / 0.189)", + "value": "oklch(0.277 0.066 242.6 / 0.18)", "description": "Default stroke for interactive controls and structured surfaces.", "components": [ "base-trigger", @@ -505,7 +505,7 @@ }, { "name": "--intergalactic-border-accent", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Accent border for the active and selected states..", "components": [ "accordion" @@ -513,7 +513,7 @@ }, { "name": "--intergalactic-border-primary-invert", - "value": "oklch(0.932 0.044 225.1 / 0.378)", + "value": "oklch(0.925 0.039 245 / 0.382)", "description": "Inverted version of the neutral primary border. Use it for borders on the dark or color background.", "components": [ "button", @@ -522,7 +522,7 @@ }, { "name": "--intergalactic-border-secondary", - "value": "oklch(0.344 0.064 223.3 / 0.081)", + "value": "oklch(0.324 0.077 242.1 / 0.079)", "description": "Secondary hairline stroke for grids, cards, and subtle dividers.", "components": [ "card", @@ -537,7 +537,7 @@ }, { "name": "--intergalactic-border-secondary-invert", - "value": "oklch(0.93 0.045 225.1 / 0.309)", + "value": "oklch(0.923 0.04 245.1 / 0.312)", "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background.", "components": [] }, @@ -631,7 +631,7 @@ }, { "name": "--intergalactic-brand-secondary", - "value": "oklch(0.22 0.01 225)", + "value": "oklch(0.22 0.008 245)", "description": "Secondary brand accent for paired brand treatments (secondary marks, duo-tone lockups).", "components": [] }, @@ -713,7 +713,7 @@ }, { "name": "--intergalactic-chart-grid-bar-chart-base-bg", - "value": "oklch(0.96 0.005 215.6)", + "value": "oklch(0.96 0.005 232.5)", "description": "Default background color of a bar in the BarChart.", "components": [ "d3-chart", @@ -722,7 +722,7 @@ }, { "name": "--intergalactic-chart-grid-bar-chart-hover", - "value": "oklch(0.363 0.068 222.8 / 0.05)", + "value": "oklch(0.375 0.09 242.7 / 0.05)", "description": "Background color for the hover state of a bar on the chart grid.", "components": [ "d3-chart" @@ -739,7 +739,7 @@ }, { "name": "--intergalactic-chart-grid-line", - "value": "oklch(0.95 0.006 215.8)", + "value": "oklch(0.95 0.006 232.7)", "description": "Grid and axis guide lines for charts.", "components": [ "d3-chart" @@ -747,7 +747,7 @@ }, { "name": "--intergalactic-chart-grid-period-bg", - "value": "oklch(0.96 0.005 215.6)", + "value": "oklch(0.96 0.005 232.5)", "description": "Use for highlighting a period on the chart grid.", "components": [ "d3-chart" @@ -755,7 +755,7 @@ }, { "name": "--intergalactic-chart-grid-period-pattern", - "value": "oklch(0.95 0.006 215.8)", + "value": "oklch(0.95 0.006 232.7)", "description": "Stripe color for diagonal pattern background.", "components": [ "d3-chart" @@ -775,7 +775,7 @@ }, { "name": "--intergalactic-chart-grid-bg-highlight", - "value": "linear-gradient(180deg, oklch(0.97 0.004 215.3) 0%, oklch(0.97 0.004 215.3) 41.827%, rgb(0 0 0 / 0) 100%)", + "value": "linear-gradient(180deg, oklch(0.97 0.005 232.2) 0%, oklch(0.97 0.005 232.2) 41.827%, rgb(0 0 0 / 0) 100%)", "description": "Background gradient for highlighted chart areas.", "components": [] }, @@ -787,7 +787,7 @@ }, { "name": "--intergalactic-chart-grid-bg-pattern", - "value": "linear-gradient(0deg, oklch(from oklch(0.23 0.01 225) l c h / 0.1) 8.532%, oklch(0.23 0.01 225) 29.015%)", + "value": "linear-gradient(0deg, oklch(from oklch(0.23 0.009 245) l c h / 0.1) 8.532%, oklch(0.23 0.009 245) 29.015%)", "description": "Pattern gradient for chart grid backgrounds.", "components": [] }, @@ -805,7 +805,7 @@ }, { "name": "--intergalactic-chart-grid-text-label", - "value": "oklch(0.247 0.049 230.2 / 0.524)", + "value": "oklch(0.209 0.055 246.6 / 0.505)", "description": "Text label on the chart grid.", "components": [ "d3-chart" @@ -813,13 +813,13 @@ }, { "name": "--intergalactic-chart-grid-text-label-accent", - "value": "oklch(0.116 0.02 215.6 / 0.906)", + "value": "oklch(0.102 0.021 230.9 / 0.9)", "description": "Text label with accent on the chart grid.", "components": [] }, { "name": "--intergalactic-chart-grid-x-axis", - "value": "oklch(0.88 0.013 217.9)", + "value": "oklch(0.88 0.011 234.9)", "description": "X-axis line on the chart grid.", "components": [ "d3-chart" @@ -827,7 +827,7 @@ }, { "name": "--intergalactic-chart-grid-y-accent-hover-line", - "value": "oklch(0.88 0.013 217.9)", + "value": "oklch(0.88 0.011 234.9)", "description": "Accent line for the hover state on the chart grid.", "components": [ "d3-chart" @@ -835,7 +835,7 @@ }, { "name": "--intergalactic-chart-palette-order-1", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "1 color in the default list of colors for charts.", "components": [ "d3-chart", @@ -986,7 +986,7 @@ }, { "name": "--intergalactic-chart-palette-order-null", - "value": "oklch(0.9 0.011 217.3)", + "value": "oklch(0.9 0.009 234)", "description": "Use it to show null value on the chart.", "components": [ "d3-chart" @@ -994,13 +994,13 @@ }, { "name": "--intergalactic-chart-palette-order-other-data", - "value": "oklch(0.82 0.019 219.6)", + "value": "oklch(0.82 0.016 237.4)", "description": "Use it to indicate voids, missing or some other data on the chart.", "components": [] }, { "name": "--intergalactic-chart-palette-order-total-amount", - "value": "oklch(0.64 0.025 224.1)", + "value": "oklch(0.64 0.022 243.8)", "description": "Use it to show total value on the chart.", "components": [] }, @@ -1012,13 +1012,13 @@ }, { "name": "--intergalactic-chart-x-axis-accent-period-active", - "value": "oklch(0.351 0.065 223 / 0.066)", + "value": "oklch(0.344 0.082 242.3 / 0.065)", "description": "Background color for the clickable date on the X-axis of the chart grid.", "components": [] }, { "name": "--intergalactic-chart-x-axis-accent-tick", - "value": "oklch(0.96 0.005 215.6)", + "value": "oklch(0.96 0.005 232.5)", "description": "Background color for the accent tick on the X-axis.", "components": [ "d3-chart" @@ -1026,7 +1026,7 @@ }, { "name": "--intergalactic-control-carousel-indicator", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Background color of the Carousel indicator.", "components": [ "carousel" @@ -1042,7 +1042,7 @@ }, { "name": "--intergalactic-control-carousel-indicator-active", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Background color of the active Carousel indicator.", "components": [ "carousel" @@ -1059,7 +1059,7 @@ }, { "name": "--intergalactic-control-checkbox-bg-selected", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Background color of the checked Checkbox.", "components": [ "checkbox", @@ -1068,7 +1068,7 @@ }, { "name": "--intergalactic-control-checkbox-border", - "value": "oklch(0.324 0.062 225.5 / 0.189)", + "value": "oklch(0.277 0.066 242.6 / 0.18)", "description": "Border color of the Checkbox.", "components": [ "checkbox", @@ -1086,7 +1086,7 @@ }, { "name": "--intergalactic-control-checkbox-button-bg-hover", - "value": "oklch(0.363 0.068 222.8 / 0.05)", + "value": "oklch(0.375 0.09 242.7 / 0.05)", "description": "Hover state of the Checkbox button background.", "components": [ "feedback-form" @@ -1102,13 +1102,13 @@ }, { "name": "--intergalactic-control-checkbox-button-bg-selected", - "value": "oklch(0.351 0.065 223 / 0.066)", + "value": "oklch(0.344 0.082 242.3 / 0.065)", "description": "Selected state of the Checkbox button background.", "components": [] }, { "name": "--intergalactic-control-checkbox-button-bg-selected-hover", - "value": "oklch(0.351 0.065 223 / 0.066)", + "value": "oklch(0.344 0.082 242.3 / 0.065)", "description": "Hover for a selected state of the Checkbox button background.", "components": [ "feedback-form" @@ -1116,7 +1116,7 @@ }, { "name": "--intergalactic-control-checkbox-button-border", - "value": "oklch(0.324 0.062 225.5 / 0.189)", + "value": "oklch(0.277 0.066 242.6 / 0.18)", "description": "Border color of the Checkbox button in its normal state.", "components": [ "feedback-form" @@ -1124,7 +1124,7 @@ }, { "name": "--intergalactic-control-checkbox-button-border-selected", - "value": "oklch(0.324 0.062 225.5 / 0.189)", + "value": "oklch(0.277 0.066 242.6 / 0.18)", "description": "Border color of the Checkbox button in its active state.", "components": [ "feedback-form" @@ -1140,7 +1140,7 @@ }, { "name": "--intergalactic-control-radio-bg-selected", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Selected state of the Radio background.", "components": [ "radio" @@ -1148,7 +1148,7 @@ }, { "name": "--intergalactic-control-radio-border", - "value": "oklch(0.324 0.062 225.5 / 0.189)", + "value": "oklch(0.277 0.066 242.6 / 0.18)", "description": "Border color of the Radio.", "components": [ "radio" @@ -1156,19 +1156,19 @@ }, { "name": "--intergalactic-control-primary-advertising", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Background of the advertising primary control.", "components": [] }, { "name": "--intergalactic-control-primary-advertising-hover", - "value": "oklch(0.36 0.016 225)", + "value": "oklch(0.36 0.014 245)", "description": "Hover state of the advertising primary control.", "components": [] }, { "name": "--intergalactic-control-primary-advertising-active", - "value": "oklch(0.4 0.017 225)", + "value": "oklch(0.4 0.015 245)", "description": "Active (selected) state of the advertising primary control.", "components": [] }, @@ -1223,7 +1223,7 @@ }, { "name": "--intergalactic-control-primary-info", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Background of the regular primary control.", "components": [ "button", @@ -1233,7 +1233,7 @@ }, { "name": "--intergalactic-control-primary-info-active", - "value": "oklch(0 0 225)", + "value": "oklch(0 0 245)", "description": "Active (selected) state of the regular primary control.", "components": [ "button" @@ -1241,7 +1241,7 @@ }, { "name": "--intergalactic-control-primary-info-hover", - "value": "oklch(0.32 0.014 225)", + "value": "oklch(0.32 0.012 245)", "description": "Hover state of the regular primary control.", "components": [ "button" @@ -1257,7 +1257,7 @@ }, { "name": "--intergalactic-control-primary-invert-active", - "value": "oklch(0.94 0.007 216.1)", + "value": "oklch(0.94 0.006 233)", "description": "Active (selected) state of the inverted primary control.", "components": [ "button" @@ -1265,7 +1265,7 @@ }, { "name": "--intergalactic-control-primary-invert-hover", - "value": "oklch(0.96 0.005 215.6)", + "value": "oklch(0.96 0.005 232.5)", "description": "Hover state of the inverted primary control.", "components": [ "button" @@ -1315,7 +1315,7 @@ }, { "name": "--intergalactic-control-secondary-invert", - "value": "oklch(0.916 0.055 225.3 / 0.127)", + "value": "oklch(0.907 0.048 245.2 / 0.129)", "description": "Background of the inverted version of the secondary control.", "components": [ "button" @@ -1323,7 +1323,7 @@ }, { "name": "--intergalactic-control-secondary-invert-active", - "value": "oklch(0.926 0.048 225.1 / 0.22)", + "value": "oklch(0.919 0.042 245.1 / 0.223)", "description": "Active (selected) state of the inverted version of the secondary control.", "components": [ "button" @@ -1331,7 +1331,7 @@ }, { "name": "--intergalactic-control-secondary-invert-hover", - "value": "oklch(0.923 0.05 225.2 / 0.178)", + "value": "oklch(0.915 0.044 245.1 / 0.18)", "description": "Hover state of the inverted version of the secondary control.", "components": [ "button" @@ -1339,7 +1339,7 @@ }, { "name": "--intergalactic-control-secondary-neutral", - "value": "oklch(0.351 0.065 223 / 0.066)", + "value": "oklch(0.324 0.077 242.1 / 0.079)", "description": "Background of the regular secondary control.", "components": [ "button", @@ -1348,7 +1348,7 @@ }, { "name": "--intergalactic-control-secondary-neutral-active", - "value": "oklch(0.332 0.062 224.2 / 0.128)", + "value": "oklch(0.291 0.069 241.9 / 0.123)", "description": "Active (selected) state of the regular secondary control.", "components": [ "button" @@ -1356,7 +1356,7 @@ }, { "name": "--intergalactic-control-secondary-neutral-hover", - "value": "oklch(0.339 0.063 223.5 / 0.097)", + "value": "oklch(0.31 0.074 242 / 0.094)", "description": "Hover state of the regular secondary control.", "components": [ "button" @@ -1364,7 +1364,7 @@ }, { "name": "--intergalactic-control-select-trigger-active", - "value": "oklch(0.96 0.005 215.6)", + "value": "oklch(0.96 0.005 232.5)", "description": "Background of the Select trigger in its active state.", "components": [ "base-trigger" @@ -1372,7 +1372,7 @@ }, { "name": "--intergalactic-control-select-trigger-hover", - "value": "oklch(0.97 0.004 215.3)", + "value": "oklch(0.97 0.005 232.2)", "description": "Background of the Select trigger in its hover state.", "components": [ "base-trigger" @@ -1388,7 +1388,7 @@ }, { "name": "--intergalactic-control-slider-bar-bg", - "value": "oklch(0.332 0.062 224.2 / 0.128)", + "value": "oklch(0.291 0.069 241.9 / 0.123)", "description": "Background of the Slider bar.", "components": [ "slider" @@ -1396,7 +1396,7 @@ }, { "name": "--intergalactic-control-slider-bar-bg-hover", - "value": "oklch(0.92 0.009 216.7)", + "value": "oklch(0.92 0.008 233.5)", "description": "Hover state of the Slider bar.", "components": [ "slider" @@ -1404,7 +1404,7 @@ }, { "name": "--intergalactic-control-slider-bar-value-bg", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Filled part of the Slider bar.", "components": [ "slider" @@ -1420,7 +1420,7 @@ }, { "name": "--intergalactic-control-slider-knob-border", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Knob border color of the Slider in its normal state.", "components": [ "slider" @@ -1428,7 +1428,7 @@ }, { "name": "--intergalactic-control-slider-knob-border-hover", - "value": "oklch(0.32 0.014 225)", + "value": "oklch(0.32 0.012 245)", "description": "Knob border color of the Slider in its hover state.", "components": [ "slider" @@ -1436,7 +1436,7 @@ }, { "name": "--intergalactic-control-slider-rating-icon", - "value": "oklch(0.229 0.046 229.9 / 0.58)", + "value": "oklch(0.193 0.05 246 / 0.562)", "description": "Icon color for the SliderRating component in its normal state.", "components": [ "feedback-form" @@ -1444,7 +1444,7 @@ }, { "name": "--intergalactic-control-slider-rating-icon-hover-active", - "value": "oklch(0.22 0.01 225)", + "value": "oklch(0.22 0.008 245)", "description": "Icon color for the SliderRating component in its hovered and active states.", "components": [ "feedback-form" @@ -1452,7 +1452,7 @@ }, { "name": "--intergalactic-control-switch-bg", - "value": "oklch(0.351 0.065 223 / 0.066)", + "value": "oklch(0.324 0.077 242.1 / 0.079)", "description": "Subtle background of the Switch control.", "components": [ "switch" @@ -1460,7 +1460,7 @@ }, { "name": "--intergalactic-control-switch-bg-info-active", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Active background of the Switch control.", "components": [ "switch" @@ -1516,7 +1516,7 @@ }, { "name": "--intergalactic-control-tertiary-invert-active", - "value": "oklch(0.926 0.048 225.1 / 0.22)", + "value": "oklch(0.919 0.042 245.1 / 0.223)", "description": "Active (selected) state of the inverted version of the tertiary control.", "components": [ "button" @@ -1524,7 +1524,7 @@ }, { "name": "--intergalactic-control-tertiary-invert-hover", - "value": "oklch(0.923 0.05 225.2 / 0.178)", + "value": "oklch(0.915 0.044 245.1 / 0.18)", "description": "Hover state of the inverted version of the tertiary control.", "components": [ "button" @@ -1541,7 +1541,7 @@ }, { "name": "--intergalactic-control-tertiary-neutral-active", - "value": "oklch(0.351 0.065 223 / 0.066)", + "value": "oklch(0.344 0.082 242.3 / 0.065)", "description": "Active (selected) state of the regular tertiary control.", "components": [ "button", @@ -1551,7 +1551,7 @@ }, { "name": "--intergalactic-control-tertiary-neutral-hover", - "value": "oklch(0.363 0.068 222.8 / 0.05)", + "value": "oklch(0.375 0.09 242.7 / 0.05)", "description": "Hover state of the regular tertiary control.", "components": [ "button", @@ -1561,7 +1561,7 @@ }, { "name": "--intergalactic-control-text-primary", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Primary text color for form controls.", "components": [ "button" @@ -1569,7 +1569,7 @@ }, { "name": "--intergalactic-control-text-primary-invert", - "value": "oklch(0.993 0.005 215.6 / 0.956)", + "value": "oklch(0.991 0.005 232.5 / 0.959)", "description": "Inverted primary text color for form controls.", "components": [ "button" @@ -1577,7 +1577,7 @@ }, { "name": "--intergalactic-control-text-secondary", - "value": "oklch(0.247 0.049 230.2 / 0.524)", + "value": "oklch(0.209 0.055 246.6 / 0.505)", "description": "Secondary text color for form controls.", "components": [ "button" @@ -1585,13 +1585,13 @@ }, { "name": "--intergalactic-control-text-secondary-invert", - "value": "oklch(0.959 0.028 221.4 / 0.721)", + "value": "oklch(0.953 0.025 240.1 / 0.726)", "description": "Inverted secondary text color for form controls.", "components": [] }, { "name": "--intergalactic-control-text-tertiary", - "value": "oklch(0.247 0.049 230.2 / 0.524)", + "value": "oklch(0.209 0.055 246.6 / 0.505)", "description": "Tertiary text color for form controls.", "components": [] }, @@ -1611,7 +1611,7 @@ }, { "name": "--intergalactic-date-picker-cell-active", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Active (selected) date-picker cell background.", "components": [ "date-picker" @@ -1619,7 +1619,7 @@ }, { "name": "--intergalactic-date-picker-cell-active-hover", - "value": "oklch(0.32 0.014 225)", + "value": "oklch(0.32 0.012 245)", "description": "Hover for the active (selected) date-picker cell background.", "components": [ "date-picker" @@ -1643,7 +1643,7 @@ }, { "name": "--intergalactic-date-picker-cell-current", - "value": "oklch(0.267 0.053 229.2 / 0.437)", + "value": "oklch(0.23 0.06 246.3 / 0.422)", "description": "Color for marking the cell with the current date, month or year in the date-picker.", "components": [ "date-picker" @@ -1651,13 +1651,13 @@ }, { "name": "--intergalactic-date-picker-cell-current-invert", - "value": "oklch(0.932 0.044 225.1 / 0.378)", + "value": "oklch(0.925 0.039 245 / 0.382)", "description": "Color for marking the active cell with the current date, month or year in the date-picker.", "components": [] }, { "name": "--intergalactic-date-picker-cell-hover", - "value": "oklch(0.97 0.004 215.3)", + "value": "oklch(0.97 0.005 232.2)", "description": "Hover state of the default date-picker cell background.", "components": [ "date-picker" @@ -1665,7 +1665,7 @@ }, { "name": "--intergalactic-date-picker-cell-range", - "value": "oklch(0.96 0.005 215.6)", + "value": "oklch(0.96 0.005 232.5)", "description": "Background for the cell which is included in the date range in the date-picker.", "components": [ "date-picker" @@ -1673,7 +1673,7 @@ }, { "name": "--intergalactic-date-picker-cell-range-hover", - "value": "oklch(0.9 0.011 217.3)", + "value": "oklch(0.9 0.009 234)", "description": "Hover state of the background for the cell which is included in the date range in the date-picker.", "components": [ "date-picker" @@ -1689,7 +1689,7 @@ }, { "name": "--intergalactic-dot-text", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Text color of the Dot.", "components": [ "dot" @@ -1705,7 +1705,7 @@ }, { "name": "--intergalactic-dropdown-menu-item-hover", - "value": "oklch(0.363 0.068 222.8 / 0.05)", + "value": "oklch(0.375 0.09 242.7 / 0.05)", "description": "Hover state of the default background color for the list item in the dropdown-menu.", "components": [ "dropdown" @@ -1713,7 +1713,7 @@ }, { "name": "--intergalactic-dropdown-menu-item-selected", - "value": "oklch(0.351 0.065 223 / 0.066)", + "value": "oklch(0.344 0.082 242.3 / 0.065)", "description": "Active (selected) state of the default background color for the list item in the dropdown-menu.", "components": [ "dropdown", @@ -1722,7 +1722,7 @@ }, { "name": "--intergalactic-dropdown-menu-item-selected-box-shadow", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Border color of the selected item in the DropdownMenu.", "components": [ "dropdown" @@ -1730,7 +1730,7 @@ }, { "name": "--intergalactic-dropdown-menu-item-selected-hover", - "value": "oklch(0.339 0.063 223.5 / 0.097)", + "value": "oklch(0.31 0.074 242 / 0.094)", "description": "Hover state for the selected state of the default background color for the list item in the dropdown-menu.", "components": [ "dropdown", @@ -1747,7 +1747,7 @@ }, { "name": "--intergalactic-feature-popover-bg-neutral", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Background of the FeaturePopover with neutral theme.", "components": [ "feature-popover" @@ -1787,7 +1787,7 @@ }, { "name": "--intergalactic-feature-popover-text", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Text color of the FeaturePopover.", "components": [ "feature-popover" @@ -1795,7 +1795,7 @@ }, { "name": "--intergalactic-feature-popover-text-invert", - "value": "oklch(0.993 0.005 215.6 / 0.956)", + "value": "oklch(0.991 0.005 232.5 / 0.959)", "description": "Inverted text color of the FeaturePopover.", "components": [ "feature-popover" @@ -1803,28 +1803,28 @@ }, { "name": "--intergalactic-footer-bg", - "value": "oklch(0.97 0.004 215.3)", + "value": "oklch(0.97 0.005 232.2)", "description": "Background fill for the product page footer.", "components": [] }, { "name": "--intergalactic-header-bg", - "value": "oklch(0.97 0.004 215.3)", + "value": "oklch(0.97 0.005 232.2)", "components": [] }, { "name": "--intergalactic-header-border-primary", - "value": "oklch(0.324 0.062 225.5 / 0.189)", + "value": "oklch(0.277 0.066 242.6 / 0.18)", "components": [] }, { "name": "--intergalactic-header-border-secondary", - "value": "oklch(0.324 0.062 225.5 / 0.189)", + "value": "oklch(0.277 0.066 242.6 / 0.18)", "components": [] }, { "name": "--intergalactic-icon-non-interactive", - "value": "oklch(0.6 0.026 225)", + "value": "oklch(0.6 0.023 245)", "description": "Color for the default non-interactive icon.", "components": [ "base-trigger" @@ -1860,19 +1860,19 @@ }, { "name": "--intergalactic-icon-primary-invert", - "value": "oklch(0.85 0.016 218.8)", + "value": "oklch(0.85 0.013 236.2)", "description": "Inverted version of the primary icon.", "components": [] }, { "name": "--intergalactic-icon-primary-invert-hover-active", - "value": "oklch(0.8 0.02 220.2)", + "value": "oklch(0.8 0.017 238.3)", "description": "Hover and active (selected) states of the inverted version of the primary icon.", "components": [] }, { "name": "--intergalactic-icon-primary-neutral", - "value": "oklch(0.58 0.025 225)", + "value": "oklch(0.58 0.022 245)", "description": "Default icon weight on normal backgrounds—stronger emphasis than secondary icons.", "components": [ "carousel", @@ -1884,7 +1884,7 @@ }, { "name": "--intergalactic-icon-primary-neutral-hover-active", - "value": "oklch(0.53 0.023 225)", + "value": "oklch(0.53 0.02 245)", "description": "Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color.", "components": [ "feature-highlight", @@ -1949,7 +1949,7 @@ }, { "name": "--intergalactic-icon-secondary-neutral", - "value": "oklch(0.8 0.02 220.2)", + "value": "oklch(0.8 0.017 238.3)", "description": "De-emphasized icons for dense layouts (tables, tertiary actions).", "components": [ "breadcrumbs", @@ -1963,7 +1963,7 @@ }, { "name": "--intergalactic-icon-secondary-neutral-hover-active", - "value": "oklch(0.66 0.024 223.6)", + "value": "oklch(0.66 0.022 243.2)", "description": "Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color.", "components": [ "inline-input", @@ -2001,7 +2001,7 @@ }, { "name": "--intergalactic-icon-secondary-invert", - "value": "oklch(0.45 0.019 225)", + "value": "oklch(0.45 0.017 245)", "description": "Softer inverted icon for dense UI or inline hints where the surface should stay calm.", "components": [] }, @@ -2013,13 +2013,13 @@ }, { "name": "--intergalactic-illustration-border", - "value": "oklch(0.53 0.023 225)", + "value": "oklch(0.53 0.02 245)", "description": "Border color for illustrations.", "components": [] }, { "name": "--intergalactic-illustration-gray", - "value": "oklch(0.9 0.011 217.3)", + "value": "oklch(0.9 0.009 234)", "description": "Gray fill color for illustrations.", "components": [] }, @@ -2091,7 +2091,7 @@ }, { "name": "--intergalactic-keyboard-focus-outline", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Color for default keyboard focus outline styles.", "components": [ "base-components" @@ -2130,7 +2130,7 @@ }, { "name": "--intergalactic-notice-bubble-bg-info", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Background of the NoticeBubble.", "components": [ "notice-bubble" @@ -2138,7 +2138,7 @@ }, { "name": "--intergalactic-overlay-limitation-primary", - "value": "oklch(from oklch(0.97 0.004 215.3) l c h / 0.7)", + "value": "oklch(from oklch(0.97 0.005 232.2) l c h / 0.7)", "description": "Use as a primary cover of the content under the messages about limitations.", "components": [] }, @@ -2153,7 +2153,7 @@ }, { "name": "--intergalactic-overlay-primary", - "value": "oklch(from oklch(0.46 0.02 225) l c h / 0.4)", + "value": "oklch(from oklch(0.46 0.018 245) l c h / 0.4)", "description": "Use for cover the content under the modal dialogs.", "components": [ "modal", @@ -2163,7 +2163,7 @@ }, { "name": "--intergalactic-overlay-secondary", - "value": "oklch(from oklch(0.46 0.02 225) l c h / 0.3)", + "value": "oklch(from oklch(0.46 0.018 245) l c h / 0.3)", "description": "Use for the secondary modal dialogs that were opened upon the other modal dialogs.", "components": [ "modal" @@ -2171,13 +2171,13 @@ }, { "name": "--intergalactic-page-bg", - "value": "oklch(0.97 0.004 215.3)", + "value": "oklch(0.97 0.005 232.2)", "description": "Background fill for the whole product page.", "components": [] }, { "name": "--intergalactic-control-pills-bg-hover", - "value": "oklch(0.339 0.063 223.5 / 0.097)", + "value": "oklch(0.31 0.074 242 / 0.094)", "description": "Hover state of the Pills background.", "components": [ "pills" @@ -2185,7 +2185,7 @@ }, { "name": "--intergalactic-control-pills-bg-normal", - "value": "oklch(0.351 0.065 223 / 0.066)", + "value": "oklch(0.324 0.077 242.1 / 0.079)", "description": "Background of the Pills in its normal state.", "components": [ "pills" @@ -2201,7 +2201,7 @@ }, { "name": "--intergalactic-control-pills-border", - "value": "oklch(0.324 0.062 225.5 / 0.189)", + "value": "oklch(0.277 0.066 242.6 / 0.18)", "description": "Border color of the Pills in its normal state.", "components": [ "pills" @@ -2217,7 +2217,7 @@ }, { "name": "--intergalactic-control-presets-border-selected", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Border color of the selected Preset item.", "components": [ "radio-cards" @@ -2225,7 +2225,7 @@ }, { "name": "--intergalactic-control-presets-border-hover", - "value": "oklch(0.324 0.062 225.5 / 0.189)", + "value": "oklch(0.277 0.066 242.6 / 0.18)", "description": "Border color of the hovered Preset item.", "components": [ "radio-cards" @@ -2233,7 +2233,7 @@ }, { "name": "--intergalactic-progress-bar-bg", - "value": "oklch(0.332 0.062 224.2 / 0.128)", + "value": "oklch(0.291 0.069 241.9 / 0.123)", "description": "Background color of the ProgressBar.", "components": [ "progress-bar" @@ -2241,13 +2241,13 @@ }, { "name": "--intergalactic-progress-bar-bg-hover", - "value": "oklch(0.92 0.009 216.7)", + "value": "oklch(0.92 0.008 233.5)", "description": "Hover state of the background color of the ProgressBar.", "components": [] }, { "name": "--intergalactic-progress-bar-bg-invert", - "value": "oklch(0.927 0.047 225.1 / 0.231)", + "value": "oklch(0.919 0.042 245.1 / 0.234)", "description": "Inverted version of the background color of the ProgressBar.", "components": [ "progress-bar" @@ -2255,13 +2255,13 @@ }, { "name": "--intergalactic-progress-bar-bg-invert-hover", - "value": "oklch(0.933 0.043 225.1 / 0.426)", + "value": "oklch(0.926 0.038 245 / 0.43)", "description": "Hover state for the inverted version of the background color of the ProgressBar.", "components": [] }, { "name": "--intergalactic-progress-bar-pattern-gradient", - "value": "linear-gradient(-45deg, oklch(from oklch(0.332 0.062 224.2 / 0.128) l c h / 0.18) 25%, oklch(0.332 0.062 224.2 / 0.128) 0%, oklch(0.332 0.062 224.2 / 0.128) 50%, oklch(from oklch(0.332 0.062 224.2 / 0.128) l c h / 0.18) 0%, oklch(from oklch(0.332 0.062 224.2 / 0.128) l c h / 0.18) 75%, oklch(0.332 0.062 224.2 / 0.128) 0%)", + "value": "linear-gradient(-45deg, oklch(from oklch(0.291 0.069 241.9 / 0.123) l c h / 0.18) 25%, oklch(0.291 0.069 241.9 / 0.123) 0%, oklch(0.291 0.069 241.9 / 0.123) 50%, oklch(from oklch(0.291 0.069 241.9 / 0.123) l c h / 0.18) 0%, oklch(from oklch(0.291 0.069 241.9 / 0.123) l c h / 0.18) 75%, oklch(0.291 0.069 241.9 / 0.123) 0%)", "description": "Null value gradient for the ProgressBar.", "components": [ "progress-bar" @@ -2277,7 +2277,7 @@ }, { "name": "--intergalactic-progress-bar-value-gradient", - "value": "linear-gradient(-45deg, oklch(from oklch(0.22 0.01 225) l c h / 0.78) 25%, oklch(0.22 0.01 225) 0%, oklch(0.22 0.01 225) 50%, oklch(from oklch(0.22 0.01 225) l c h / 0.78) 0%, oklch(from oklch(0.22 0.01 225) l c h / 0.78) 75%, oklch(0.22 0.01 225) 0%)", + "value": "linear-gradient(-45deg, oklch(from oklch(0.22 0.008 245) l c h / 0.78) 25%, oklch(0.22 0.008 245) 0%, oklch(0.22 0.008 245) 50%, oklch(from oklch(0.22 0.008 245) l c h / 0.78) 0%, oklch(from oklch(0.22 0.008 245) l c h / 0.78) 75%, oklch(0.22 0.008 245) 0%)", "description": "Value with gradient for the ProgressBar.", "components": [ "progress-bar" @@ -2325,7 +2325,7 @@ }, { "name": "--intergalactic-scroll-area-shadow-bottom", - "value": "linear-gradient(to top, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)", + "value": "linear-gradient(to top, oklch(from oklch(0.23 0.009 245) l c h / 0.08) 20.55%, transparent 100%)", "description": "Bottom-to-top fade shadow for the ScrollArea.", "components": [ "base-components" @@ -2333,7 +2333,7 @@ }, { "name": "--intergalactic-scroll-area-shadow-left", - "value": "linear-gradient(to right, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)", + "value": "linear-gradient(to right, oklch(from oklch(0.23 0.009 245) l c h / 0.08) 20.55%, transparent 100%)", "description": "Left-to-right fade shadow for the ScrollArea.", "components": [ "base-components", @@ -2342,7 +2342,7 @@ }, { "name": "--intergalactic-scroll-area-shadow-right", - "value": "linear-gradient(to left, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)", + "value": "linear-gradient(to left, oklch(from oklch(0.23 0.009 245) l c h / 0.08) 20.55%, transparent 100%)", "description": "Right-to-left fade shadow for the ScrollArea.", "components": [ "base-components", @@ -2351,7 +2351,7 @@ }, { "name": "--intergalactic-scroll-area-shadow-top", - "value": "linear-gradient(to bottom, oklch(from oklch(0.23 0.01 225) l c h / 0.08) 20.55%, transparent 100%)", + "value": "linear-gradient(to bottom, oklch(from oklch(0.23 0.009 245) l c h / 0.08) 20.55%, transparent 100%)", "description": "Top-to-bottom fade shadow for the ScrollArea.", "components": [ "base-components" @@ -2359,7 +2359,7 @@ }, { "name": "--intergalactic-scroll-bar-background", - "value": "oklch(0.324 0.062 225.5 / 0.189)", + "value": "oklch(0.277 0.066 242.6 / 0.18)", "description": "Background color for ScrollBar.", "components": [ "base-components" @@ -2367,55 +2367,55 @@ }, { "name": "--intergalactic-sidebar-nav-bg", - "value": "oklch(0.97 0.004 215.3)", + "value": "oklch(0.97 0.005 232.2)", "description": "Background fill for the product page sidebar.", "components": [] }, { "name": "--intergalactic-sidebar-nav-border", - "value": "oklch(0.324 0.062 225.5 / 0.189)", + "value": "oklch(0.277 0.066 242.6 / 0.18)", "description": "Color for the border of the page sidebar.", "components": [] }, { "name": "--intergalactic-sidebar-nav-control-active", - "value": "oklch(0.351 0.065 223 / 0.066)", + "value": "oklch(0.344 0.082 242.3 / 0.065)", "description": "Sidebar navigation row active background.", "components": [] }, { "name": "--intergalactic-sidebar-nav-control-hover", - "value": "oklch(0.363 0.068 222.8 / 0.05)", + "value": "oklch(0.375 0.09 242.7 / 0.05)", "description": "Sidebar navigation row hover background.", "components": [] }, { "name": "--intergalactic-sidebar-nav-control-icon-active", - "value": "oklch(0.53 0.023 225)", + "value": "oklch(0.53 0.02 245)", "description": "Sidebar navigation icon color for the active item.", "components": [] }, { "name": "--intergalactic-sidebar-nav-control-icon-normal", - "value": "oklch(0.58 0.025 225)", + "value": "oklch(0.58 0.022 245)", "description": "Sidebar navigation icon color.", "components": [] }, { "name": "--intergalactic-sidebar-nav-control-text-active", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Sidebar navigation label color for the active item.", "components": [] }, { "name": "--intergalactic-sidebar-nav-control-text-normal", - "value": "oklch(0.63 0.025 224.3)", + "value": "oklch(0.63 0.022 244.1)", "description": "Sidebar navigation label color.", "components": [] }, { "name": "--intergalactic-skeleton-bg", - "value": "oklch(0.94 0.007 216.1)", + "value": "oklch(0.94 0.006 233)", "description": "Default color for the Skeleton.", "components": [ "skeleton" @@ -2423,7 +2423,7 @@ }, { "name": "--intergalactic-skeleton-bg-invert", - "value": "oklch(0.5 0.022 225)", + "value": "oklch(0.5 0.019 245)", "description": "Inverted version of the default color for the Skeleton.", "components": [ "skeleton" @@ -2431,7 +2431,7 @@ }, { "name": "--intergalactic-spin-bg", - "value": "oklch(0.8 0.02 220.2)", + "value": "oklch(0.8 0.017 238.3)", "description": "Track color of the Spin loader.", "components": [ "spin" @@ -2439,7 +2439,7 @@ }, { "name": "--intergalactic-spin-bg-invert", - "value": "oklch(0.85 0.016 218.8)", + "value": "oklch(0.85 0.013 236.2)", "description": "Inverted track color of the Spin loader.", "components": [ "spin" @@ -2447,7 +2447,7 @@ }, { "name": "--intergalactic-control-tab-line-border", - "value": "oklch(0.324 0.062 225.5 / 0.189)", + "value": "oklch(0.277 0.066 242.6 / 0.18)", "description": "Border color of the TabLine in its normal state.", "components": [ "tab-line" @@ -2455,7 +2455,7 @@ }, { "name": "--intergalactic-control-tab-line-border-active", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Border color of the TabLine in its active state.", "components": [ "tab-line" @@ -2463,7 +2463,7 @@ }, { "name": "--intergalactic-control-tab-line-border-hover", - "value": "oklch(0.324 0.062 225.5 / 0.189)", + "value": "oklch(0.277 0.066 242.6 / 0.18)", "description": "Border color of the TabLine in its hover state.", "components": [ "tab-line" @@ -2471,7 +2471,7 @@ }, { "name": "--intergalactic-table-border-accent", - "value": "oklch(0.324 0.062 225.5 / 0.189)", + "value": "oklch(0.277 0.066 242.6 / 0.18)", "description": "Accent borders in the table, e.g. for the accordion.", "components": [ "data-table" @@ -2479,7 +2479,7 @@ }, { "name": "--intergalactic-table-border-accordion-accent", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Accent left border for the table.", "components": [ "data-table" @@ -2503,7 +2503,7 @@ }, { "name": "--intergalactic-table-td-cell-active", - "value": "oklch(0.96 0.005 215.6)", + "value": "oklch(0.96 0.005 232.5)", "description": "Background of the default active cell in the Table.", "components": [ "data-table" @@ -2535,7 +2535,7 @@ }, { "name": "--intergalactic-table-td-cell-hover", - "value": "oklch(0.97 0.004 215.3)", + "value": "oklch(0.97 0.005 232.2)", "description": "Background of the default hovered cell in the Table.", "components": [ "data-table" @@ -2591,7 +2591,7 @@ }, { "name": "--intergalactic-table-td-cell-unread", - "value": "oklch(0.98 0.003 215)", + "value": "oklch(0.98 0.004 232)", "description": "Background of the unread cell in the Table.", "components": [ "data-table" @@ -2659,7 +2659,7 @@ }, { "name": "--intergalactic-tag-additional-bg-hover-active", - "value": "oklch(0.97 0.004 215.3)", + "value": "oklch(0.97 0.005 232.2)", "description": "Hover and active states of the additional Tag background.", "components": [ "tag" @@ -2675,7 +2675,7 @@ }, { "name": "--intergalactic-tag-additional-border", - "value": "oklch(0.95 0.006 215.8)", + "value": "oklch(0.95 0.006 232.7)", "description": "Border color of the additional Tag.", "components": [ "tag" @@ -2699,7 +2699,7 @@ }, { "name": "--intergalactic-tag-additional-bg-invert-hover-active", - "value": "oklch(0.923 0.05 225.2 / 0.178)", + "value": "oklch(0.915 0.044 245.1 / 0.18)", "description": "Hover and active states of the additional tag on dark backgrounds.", "components": [ "tag" @@ -2707,7 +2707,7 @@ }, { "name": "--intergalactic-tag-additional-text-invert", - "value": "oklch(0.959 0.028 221.4 / 0.721)", + "value": "oklch(0.953 0.025 240.1 / 0.726)", "description": "Text color for the additional tag on dark backgrounds.", "components": [ "tag" @@ -2715,7 +2715,7 @@ }, { "name": "--intergalactic-tag-additional-border-invert", - "value": "oklch(0.932 0.044 225.1 / 0.378)", + "value": "oklch(0.925 0.039 245 / 0.382)", "description": "Inverted border color of the additional Tag.", "components": [ "tag" @@ -2723,7 +2723,7 @@ }, { "name": "--intergalactic-tag-primary-bg-hover-active", - "value": "oklch(0.97 0.004 215.3)", + "value": "oklch(0.97 0.005 232.2)", "description": "Hover and active states of the primary Tag background.", "components": [] }, @@ -2853,7 +2853,7 @@ }, { "name": "--intergalactic-tag-primary-bg-invert-hover-active", - "value": "oklch(0.928 0.046 225.1 / 0.264)", + "value": "oklch(0.921 0.041 245.1 / 0.267)", "description": "Hover and active states of the primary tag on dark backgrounds.", "components": [ "tag" @@ -2861,7 +2861,7 @@ }, { "name": "--intergalactic-tag-primary-bg-invert-normal", - "value": "oklch(0.916 0.055 225.3 / 0.127)", + "value": "oklch(0.907 0.048 245.2 / 0.129)", "description": "Primary tag on bold or dark backgrounds—translucent fill for contrast in the normal state.", "components": [ "tag" @@ -2895,7 +2895,7 @@ }, { "name": "--intergalactic-tag-secondary-border", - "value": "oklch(0.95 0.006 215.8)", + "value": "oklch(0.95 0.006 232.7)", "description": "Border color of the secondary Tag.", "components": [ "tag" @@ -2903,7 +2903,7 @@ }, { "name": "--intergalactic-tag-secondary-border-invert", - "value": "oklch(0.93 0.045 225.1 / 0.309)", + "value": "oklch(0.923 0.04 245.1 / 0.312)", "description": "Inverted border color of the secondary Tag.", "components": [ "tag" @@ -2935,7 +2935,7 @@ }, { "name": "--intergalactic-tag-secondary-bg-invert-hover-active", - "value": "oklch(0.923 0.05 225.2 / 0.178)", + "value": "oklch(0.915 0.044 245.1 / 0.18)", "description": "Hover and active states of the secondary tag on dark backgrounds.", "components": [ "tag" @@ -2951,7 +2951,7 @@ }, { "name": "--intergalactic-tag-secondary-text-invert", - "value": "oklch(0.959 0.028 221.4 / 0.721)", + "value": "oklch(0.953 0.025 240.1 / 0.726)", "description": "Text color for the secondary tag on dark backgrounds.", "components": [ "tag" @@ -2977,7 +2977,7 @@ }, { "name": "--intergalactic-text-hint", - "value": "oklch(0.247 0.049 230.2 / 0.524)", + "value": "oklch(0.209 0.055 246.6 / 0.505)", "description": "Supplementary helper text near controls (short guidance), distinct from placeholder text inside inputs.", "components": [ "button", @@ -2987,7 +2987,7 @@ }, { "name": "--intergalactic-text-hint-hover-active", - "value": "oklch(0.243 0.049 230.4 / 0.548)", + "value": "oklch(0.204 0.053 246.7 / 0.529)", "description": "Hover and active states of the hint link text.", "components": [ "typography" @@ -2995,13 +2995,13 @@ }, { "name": "--intergalactic-text-hint-invert", - "value": "oklch(0.75 0.022 221.4)", + "value": "oklch(0.75 0.019 240.1)", "description": "Inverted version of the hint link text.", "components": [] }, { "name": "--intergalactic-text-hint-invert-hover-active", - "value": "oklch(0.85 0.016 218.8)", + "value": "oklch(0.85 0.013 236.2)", "description": "Hover and active states of the inverted version of the hint link text.", "components": [] }, @@ -3033,7 +3033,7 @@ }, { "name": "--intergalactic-text-large-secondary", - "value": "oklch(0.247 0.049 230.2 / 0.524)", + "value": "oklch(0.209 0.055 246.6 / 0.505)", "description": "Secondary text. Use with font-size ≥20px.", "components": [ "typography" @@ -3053,7 +3053,7 @@ }, { "name": "--intergalactic-text-link-primary", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Default primary link color.", "components": [ "button", @@ -3063,7 +3063,7 @@ }, { "name": "--intergalactic-text-link-primary-hover-active", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Hover and active states for the primary link.", "components": [ "button", @@ -3073,7 +3073,7 @@ }, { "name": "--intergalactic-text-link-primary-underline", - "value": "oklch(0.86 0.015 218.5)", + "value": "oklch(0.86 0.012 235.7)", "description": "Underline color for the primary link.", "components": [ "link" @@ -3081,7 +3081,7 @@ }, { "name": "--intergalactic-text-link-primary-invert", - "value": "oklch(0.993 0.005 215.6 / 0.956)", + "value": "oklch(0.991 0.005 232.5 / 0.959)", "description": "Inverted version of the primary link. Use on dark and colored sbackground only.", "components": [ "link" @@ -3089,7 +3089,7 @@ }, { "name": "--intergalactic-text-link-primary-invert-hover-active", - "value": "oklch(0.993 0.005 215.6 / 0.956)", + "value": "oklch(0.991 0.005 232.5 / 0.959)", "description": "Hover and active states of the inverted version of the primary link. Use on dark and colored backgrounds only.", "components": [ "link" @@ -3097,7 +3097,7 @@ }, { "name": "--intergalactic-text-link-secondary", - "value": "oklch(0.247 0.049 230.2 / 0.524)", + "value": "oklch(0.209 0.055 246.6 / 0.505)", "description": "Default secondary link color.", "components": [ "link" @@ -3105,7 +3105,7 @@ }, { "name": "--intergalactic-text-link-secondary-hover-active", - "value": "oklch(0.247 0.049 230.2 / 0.524)", + "value": "oklch(0.209 0.055 246.6 / 0.505)", "description": "Hover and active states for the secondary link.", "components": [ "link" @@ -3138,7 +3138,7 @@ }, { "name": "--intergalactic-text-placeholder", - "value": "oklch(0.282 0.055 228.7 / 0.386)", + "value": "oklch(0.242 0.062 245.8 / 0.371)", "description": "Placeholder text color for inputs and fields.", "components": [ "base-trigger", @@ -3151,7 +3151,7 @@ }, { "name": "--intergalactic-text-primary", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Default body and UI copy; strongest reading emphasis for primary content.", "components": [ "accordion", @@ -3189,7 +3189,7 @@ }, { "name": "--intergalactic-text-primary-invert", - "value": "oklch(0.993 0.005 215.6 / 0.956)", + "value": "oklch(0.991 0.005 232.5 / 0.959)", "description": "Inverted version of the primary text.", "components": [ "d3-chart", @@ -3200,7 +3200,7 @@ }, { "name": "--intergalactic-text-secondary", - "value": "oklch(0.247 0.049 230.2 / 0.524)", + "value": "oklch(0.209 0.055 246.6 / 0.505)", "description": "Supporting text: captions, metadata, hints in flowing copy—visually quieter than primary body text.", "components": [ "breadcrumbs", @@ -3225,7 +3225,7 @@ }, { "name": "--intergalactic-text-secondary-invert", - "value": "oklch(0.959 0.028 221.4 / 0.721)", + "value": "oklch(0.953 0.025 240.1 / 0.726)", "description": "Inverted version of the secondary text.", "components": [ "d3-chart" @@ -3253,7 +3253,7 @@ }, { "name": "--intergalactic-tooltip-bg-invert", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Inverted version of the default Tooltip background.", "components": [ "base-components", @@ -3271,7 +3271,7 @@ }, { "name": "--intergalactic-tooltip-border-invert", - "value": "oklch(0.4 0.017 225)", + "value": "oklch(0.4 0.015 245)", "description": "Border of the Tooltip with dark theme.", "components": [ "base-components", @@ -3281,7 +3281,7 @@ }, { "name": "--intergalactic-tooltip-text", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Text color of the default Tooltip.", "components": [ "tooltip" @@ -3289,7 +3289,7 @@ }, { "name": "--intergalactic-tooltip-text-invert", - "value": "oklch(0.993 0.005 215.6 / 0.956)", + "value": "oklch(0.991 0.005 232.5 / 0.959)", "description": "Text color of the inverted Tooltip.", "components": [ "base-components", @@ -3306,7 +3306,7 @@ }, { "name": "--intergalactic-wizard-sidebar-bg", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Background of the Wizard sidebar.", "components": [ "wizard" @@ -3314,13 +3314,13 @@ }, { "name": "--intergalactic-wizard-sidebar-control", - "value": "oklch(0.23 0.01 225)", + "value": "oklch(0.23 0.009 245)", "description": "Background of the control in the Wizard sidebar in its normal state.", "components": [] }, { "name": "--intergalactic-wizard-sidebar-control-active", - "value": "oklch(0.4 0.017 225)", + "value": "oklch(0.4 0.015 245)", "description": "Active state of the control in the Wizard sidebar.", "components": [ "wizard" @@ -3328,7 +3328,7 @@ }, { "name": "--intergalactic-wizard-sidebar-control-hover", - "value": "oklch(0.36 0.016 225)", + "value": "oklch(0.36 0.014 245)", "description": "Hover state of the control in the Wizard sidebar.", "components": [ "wizard" @@ -3336,7 +3336,7 @@ }, { "name": "--intergalactic-wizard-sidebar-text-primary", - "value": "oklch(0.993 0.005 215.6 / 0.956)", + "value": "oklch(0.991 0.005 232.5 / 0.959)", "description": "Primary text color in the Wizard sidebar.", "components": [ "wizard" @@ -3344,7 +3344,7 @@ }, { "name": "--intergalactic-wizard-sidebar-text-secondary", - "value": "oklch(0.959 0.028 221.4 / 0.721)", + "value": "oklch(0.953 0.025 240.1 / 0.726)", "description": "Secondary text color in the Wizard sidebar.", "components": [] }, @@ -3381,31 +3381,31 @@ }, { "name": "--intergalactic-box-shadow-card", - "value": "0px 0px 1px 0px oklch(0.344 0.064 223.3 / 0.081), 0px 1px 3px 0px oklch(0.344 0.064 223.3 / 0.081)", + "value": "0px 0px 1px 0px oklch(0.324 0.077 242.1 / 0.079), 0px 1px 3px 0px oklch(0.324 0.077 242.1 / 0.079)", "description": "Default shadow of the Card.", "components": [] }, { "name": "--intergalactic-box-shadow-card-hover", - "value": "3px 3px 10px 0px oklch(0.344 0.064 223.3 / 0.081)", + "value": "3px 3px 10px 0px oklch(0.324 0.077 242.1 / 0.079)", "description": "Hover state for the shadow of the Card with hover state.", "components": [] }, { "name": "--intergalactic-box-shadow-chart-dot-elevated", - "value": "0px 0px 2px 0px oklch(0.324 0.062 225.5 / 0.189), 0px 1px 2px 0px oklch(0.324 0.062 225.5 / 0.189)", + "value": "0px 0px 2px 0px oklch(0.277 0.066 242.6 / 0.18), 0px 1px 2px 0px oklch(0.277 0.066 242.6 / 0.18)", "description": "Shadow of the elevated chart dot.", "components": [] }, { "name": "--intergalactic-box-shadow-chart-elevated", - "value": "0px 0px 2px 0px oklch(from oklch(0.23 0.01 225) l c h / 0.165), 0px 1px 2px 0px oklch(from oklch(0.23 0.01 225) l c h / 0.165)", + "value": "0px 0px 2px 0px oklch(from oklch(0.23 0.009 245) l c h / 0.165), 0px 1px 2px 0px oklch(from oklch(0.23 0.009 245) l c h / 0.165)", "description": "Shadow of elevated elements on charts.", "components": [] }, { "name": "--intergalactic-box-shadow-control-elevated", - "value": "0px 0px 1px 0px oklch(0.344 0.064 223.3 / 0.081), 0px 1px 3px 0px oklch(0.344 0.064 223.3 / 0.081)", + "value": "0px 0px 1px 0px oklch(0.324 0.077 242.1 / 0.079), 0px 1px 3px 0px oklch(0.324 0.077 242.1 / 0.079)", "description": "Shadow of the Switch toggle.", "components": [ "pills", @@ -3415,7 +3415,7 @@ }, { "name": "--intergalactic-box-shadow-dnd", - "value": "3px 3px 30px 0px oklch(0.344 0.064 223.3 / 0.081)", + "value": "3px 3px 30px 0px oklch(0.324 0.077 242.1 / 0.079)", "description": "Shadow for show that element are being drag-and-drop.", "components": [ "drag-and-drop" @@ -3423,7 +3423,7 @@ }, { "name": "--intergalactic-box-shadow-modal", - "value": "0px 1px 5px 0px oklch(0.344 0.064 223.3 / 0.081)", + "value": "0px 1px 5px 0px oklch(0.324 0.077 242.1 / 0.079)", "description": "Default shadow if the Modal window.", "components": [ "modal" @@ -3431,7 +3431,7 @@ }, { "name": "--intergalactic-box-shadow-popper", - "value": "1px 1px 10px 0px oklch(0.344 0.064 223.3 / 0.081)", + "value": "1px 1px 10px 0px oklch(0.324 0.077 242.1 / 0.079)", "description": "Default shadow of all Poppers, Dropdowns and Tooltips.", "components": [ "base-components", @@ -3444,12 +3444,12 @@ }, { "name": "--intergalactic-box-shadow-float-control", - "value": "0px 0px 1px 0px oklch(0.344 0.064 223.3 / 0.081), 0px 1px 5px 0px oklch(0.344 0.064 223.3 / 0.081)", + "value": "0px 0px 1px 0px oklch(0.324 0.077 242.1 / 0.079), 0px 1px 5px 0px oklch(0.324 0.077 242.1 / 0.079)", "components": [] }, { "name": "--intergalactic-box-shadow-float-control-hover", - "value": "3px 3px 10px 0px oklch(0.344 0.064 223.3 / 0.081)", + "value": "3px 3px 10px 0px oklch(0.324 0.077 242.1 / 0.079)", "components": [] }, { @@ -3472,7 +3472,7 @@ }, { "name": "--intergalactic-keyboard-focus", - "value": "0px 0px 0px 3px oklch(from oklch(0.23 0.01 225) l c h / 0.5)", + "value": "0px 0px 0px 3px oklch(from oklch(0.23 0.009 245) l c h / 0.5)", "description": "Default keyboard focus box-shadow styles.", "components": [ "input-tags", From b3ae7d41365645b0131a8079c4e4fdc56bb677e1 Mon Sep 17 00:00:00 2001 From: Sheila Sheikh <166654065+sheila-semrush@users.noreply.github.com> Date: Mon, 28 Sep 2026 16:23:31 +0200 Subject: [PATCH 4/7] [chore] update design-tokens.json --- website/docs/style/design-tokens/design-tokens.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 47d0bf41c0..135f8391eb 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -1803,13 +1803,13 @@ }, { "name": "--intergalactic-footer-bg", - "value": "oklch(0.97 0.005 232.2)", + "value": "oklch(0.98 0.004 232)", "description": "Background fill for the product page footer.", "components": [] }, { "name": "--intergalactic-header-bg", - "value": "oklch(0.97 0.005 232.2)", + "value": "oklch(0.98 0.004 232)", "components": [] }, { @@ -2171,7 +2171,7 @@ }, { "name": "--intergalactic-page-bg", - "value": "oklch(0.97 0.005 232.2)", + "value": "oklch(0.98 0.004 232)", "description": "Background fill for the whole product page.", "components": [] }, @@ -2367,7 +2367,7 @@ }, { "name": "--intergalactic-sidebar-nav-bg", - "value": "oklch(0.97 0.005 232.2)", + "value": "oklch(0.98 0.004 232)", "description": "Background fill for the product page sidebar.", "components": [] }, From c831e7756d5511d51beb66a663a0bc6c65930e62 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Mon, 28 Sep 2026 17:58:13 +0200 Subject: [PATCH 5/7] [stories] remove test story for chart referenceBackground --- .../reference-background-chart-grid-bg.tsx | 82 ------------------- 1 file changed, 82 deletions(-) delete mode 100644 stories/components/d3-chart/tests/examples/d3-chart/reference-background-chart-grid-bg.tsx diff --git a/stories/components/d3-chart/tests/examples/d3-chart/reference-background-chart-grid-bg.tsx b/stories/components/d3-chart/tests/examples/d3-chart/reference-background-chart-grid-bg.tsx deleted file mode 100644 index 97fd9ba1b8..0000000000 --- a/stories/components/d3-chart/tests/examples/d3-chart/reference-background-chart-grid-bg.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { Plot, ReferenceBackground, XAxis, YAxis } from '@semcore/ui/d3-chart'; -import { scaleBand, scaleLinear } from 'd3-scale'; -import React from 'react'; - -import BarMockData from '../../../__mocks__/bar'; - -const backgroundTokens = [ - 'chart-grid-bg-bad', - 'chart-grid-bg-good', - 'chart-grid-bg-highlight', - 'chart-grid-bg-insight', - 'chart-grid-bg-pattern', - 'chart-grid-bg-potential', -] as const; - -const Demo = () => { - const MARGIN = 40; - const width = 360; - const height = 220; - - const xScale = scaleBand() - .range([MARGIN, width - MARGIN]) - .domain(dataBar.map((d) => d.category)) - .paddingInner(0.4) - .paddingOuter(0.2); - - const yScale = scaleLinear() - .range([height - MARGIN, MARGIN]) - .domain([0, 10]); - - const startValue = dataBar[1].category; - const endValue = dataBar[3].category; - const xStart = (xScale(startValue) ?? 0) + xScale.bandwidth() / 2; - const xEnd = (xScale(endValue) ?? 0) + xScale.bandwidth() / 2; - const yTop = yScale.range()[1]; - const bgWidth = xEnd - xStart; - const bgHeight = yScale.range()[0] - yScale.range()[1]; - - return ( -
- {backgroundTokens.map((token) => ( -
-
-
- - - - - - - - - -
-
- ))} -
- ); -}; - -const dataBar = BarMockData.Default; - -export default Demo; From 81298166a491a7f48e1e611a74e3be6c9f58bf8f Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 29 Sep 2026 16:05:13 +0200 Subject: [PATCH 6/7] [theme] update var for chart bar bg and active select control --- .../src/style/filter-trigger.shadow.css | 4 +-- semcore/d3-chart/src/style/bar.shadow.css | 4 +-- semcore/d3-chart/src/style/hover.shadow.css | 2 +- semcore/d3-chart/src/style/radar.shadow.css | 2 +- .../src/component/score/line.shadow.css | 4 +-- .../mini-chart/src/components/score/Donut.tsx | 2 +- semcore/mini-chart/src/styles/line.shadow.css | 4 +-- tools/theme/src/theme.ts | 36 ++++++++++++++----- .../docs/style/design-tokens/base-tokens.json | 8 +++++ .../style/design-tokens/design-tokens.json | 8 ++--- 10 files changed, 50 insertions(+), 24 deletions(-) diff --git a/semcore/base-trigger/src/style/filter-trigger.shadow.css b/semcore/base-trigger/src/style/filter-trigger.shadow.css index 985160126a..6fd071eeb2 100644 --- a/semcore/base-trigger/src/style/filter-trigger.shadow.css +++ b/semcore/base-trigger/src/style/filter-trigger.shadow.css @@ -70,7 +70,7 @@ SWrapper { &[empty]:active, &[empty][active], &[empty]:has(STrigger:focus-visible) { - background-color: var(--intergalactic-control-select-trigger-active, oklch(0.96 0.005 232.5)); + background-color: var(--intergalactic-control-select-trigger-active, oklch(1 0 0)); STrigger { background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0)); @@ -94,7 +94,7 @@ SWrapper { border: none; &[active], &:active { - background-color: var(--intergalactic-control-select-trigger-active, oklch(0.96 0.005 232.5)); + background-color: var(--intergalactic-control-select-trigger-active, oklch(1 0 0)); } } } diff --git a/semcore/d3-chart/src/style/bar.shadow.css b/semcore/d3-chart/src/style/bar.shadow.css index 7a4b10558d..9f10d3b4ec 100644 --- a/semcore/d3-chart/src/style/bar.shadow.css +++ b/semcore/d3-chart/src/style/bar.shadow.css @@ -30,7 +30,7 @@ SBar[onClick] { } SBackground { - fill: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 232.5)); + fill: var(--intergalactic-chart-grid-bar-base-bg, oklch(0.92 0.008 233.5)); opacity: 0.4; } SBackground[onClick] { @@ -63,5 +63,5 @@ SBarValue { text-align: right; } SCompactHorizontalBarHoverRect { - fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.375 0.09 242.7 / 0.05)); + fill: var(--intergalactic-chart-grid-bar-hover, oklch(0.375 0.09 242.7 / 0.05)); } \ No newline at end of file diff --git a/semcore/d3-chart/src/style/hover.shadow.css b/semcore/d3-chart/src/style/hover.shadow.css index 2ff9214f99..a2176d6323 100644 --- a/semcore/d3-chart/src/style/hover.shadow.css +++ b/semcore/d3-chart/src/style/hover.shadow.css @@ -5,7 +5,7 @@ SHoverLine, SHoverLine:focus-visible { SHoverRect, SHoverRect:focus-visible { outline: none; - fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.375 0.09 242.7 / 0.05)); + fill: var(--intergalactic-chart-grid-bar-hover, oklch(0.375 0.09 242.7 / 0.05)); } STick { diff --git a/semcore/d3-chart/src/style/radar.shadow.css b/semcore/d3-chart/src/style/radar.shadow.css index 910314cb33..f9c22be91d 100644 --- a/semcore/d3-chart/src/style/radar.shadow.css +++ b/semcore/d3-chart/src/style/radar.shadow.css @@ -76,5 +76,5 @@ SPolygonLine[color] { SPieRect { outline: none; - fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.375 0.09 242.7 / 0.05)); + fill: var(--intergalactic-chart-grid-bar-hover, oklch(0.375 0.09 242.7 / 0.05)); } diff --git a/semcore/mini-chart/src/component/score/line.shadow.css b/semcore/mini-chart/src/component/score/line.shadow.css index afe06bc57d..b1e930411a 100644 --- a/semcore/mini-chart/src/component/score/line.shadow.css +++ b/semcore/mini-chart/src/component/score/line.shadow.css @@ -2,7 +2,7 @@ SLineGauge { height: 8px; - background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 232.5))); + background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-base-bg, oklch(0.92 0.008 233.5))); border-radius: var(--intergalactic-chart-rounded, 2px); overflow: hidden; position: relative; @@ -48,7 +48,7 @@ SLineSegmentItem { } SAnimationLine { - background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 232.5)); + background-color: var(--intergalactic-chart-grid-bar-base-bg, oklch(0.92 0.008 233.5)); transition: all var(--intergalactic-duration-extra-slow, 500) ease-in-out; animation-name: move-line; animation-duration: 0.5s; diff --git a/semcore/mini-chart/src/components/score/Donut.tsx b/semcore/mini-chart/src/components/score/Donut.tsx index d59fd83323..ed3630fe83 100644 --- a/semcore/mini-chart/src/components/score/Donut.tsx +++ b/semcore/mini-chart/src/components/score/Donut.tsx @@ -39,7 +39,7 @@ class DonutRoot extends Component< const { value, styles, - baseBgColor = 'chart-grid-bar-chart-base-bg', + baseBgColor = 'chart-grid-bar-base-bg', color = 'chart-palette-order-1', resolveColor, isSemiDonut, diff --git a/semcore/mini-chart/src/styles/line.shadow.css b/semcore/mini-chart/src/styles/line.shadow.css index c030a9e125..27584a73b8 100644 --- a/semcore/mini-chart/src/styles/line.shadow.css +++ b/semcore/mini-chart/src/styles/line.shadow.css @@ -2,7 +2,7 @@ SLineGauge { height: 8px; - background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 232.5))); + background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-base-bg, oklch(0.92 0.008 233.5))); border-radius: var(--intergalactic-chart-rounded, 2px); overflow: hidden; position: relative; @@ -48,7 +48,7 @@ SLineSegmentItem { } SAnimationLine { - background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.005 232.5)); + background-color: var(--intergalactic-chart-grid-bar-base-bg, oklch(0.92 0.008 233.5)); transition: all var(--intergalactic-duration-extra-slow, 500) ease-in-out; animation-name: move-line; animation-duration: 0.5s; diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 401dc5349e..2aaffad068 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -692,11 +692,11 @@ export const theme: Theme = { value: colors.yellow['200'].value, description: 'Color for the transactional data intent on the chart.', }, - chart_grid_bar_chart_base_bg: { - value: neutral.at(L_BG_LIGHT), + chart_grid_bar_base_bg: { + value: neutral.at(L_BG_MEDIUM), description: 'Default background color of a bar in the BarChart.', }, - chart_grid_bar_chart_hover: { + chart_grid_bar_hover: { value: neutral.opaqueAt(L_BG_PRIMARY_HOVER), description: 'Background color for the hover state of a bar on the chart grid.', }, @@ -1053,7 +1053,7 @@ export const theme: Theme = { description: 'Hover state of the regular secondary control.', }, control_select_trigger_active: { - value: '{semanticTokens.colors.bg_primary_neutral_active}', + value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', description: 'Background of the Select trigger in its active state.', }, control_select_trigger_hover: { @@ -2425,6 +2425,16 @@ export const theme: Theme = { 400: colors.blue['400'], 500: colors.blue['500'], }, + chart: { + grid: { + bar: { + chart: { + base: { bg: { value: '{semanticTokens.colors.chart_grid_bar_base_bg}' } }, + hover: { value: '{semanticTokens.colors.chart_grid_bar_hover}' }, + }, + }, + }, + }, table: { td: { cell: { actions: { accordion: { value: '{semanticTokens.colors.table_td_cell_accordion}' } } } } }, keyboard: { focus: { outline: { invert: { value: '{semanticTokens.colors.keyboard_focus_invert_outline}' } } } }, border: { @@ -3454,11 +3464,9 @@ type SemanticColors = { }; }; bar: { - chart: { - hover: Value; - base: { - bg: Value; - }; + hover: Value; + base: { + bg: Value; }; }; period: { @@ -3665,6 +3673,16 @@ type Deprecates = { fs: { 50: Value }; violet: { 400: Value; 500: Value }; blue: { 400: Value; 500: Value }; + chart: { + grid: { + bar: { + chart: { + base: { bg: Value }; + hover: Value; + }; + }; + }; + }; table: { td: { cell: { actions: { accordion: Value } } } }; keyboard: { focus: { outline: { invert: Value } } }; border: { diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json index e76cfe9f6e..c323471c60 100644 --- a/website/docs/style/design-tokens/base-tokens.json +++ b/website/docs/style/design-tokens/base-tokens.json @@ -867,6 +867,14 @@ "name": "--intergalactic-blue-500", "value": "oklch(0.53 0.157 279.2)" }, + { + "name": "--intergalactic-chart-grid-bar-chart-base-bg", + "value": "oklch(0.92 0.008 233.5)" + }, + { + "name": "--intergalactic-chart-grid-bar-chart-hover", + "value": "oklch(0.375 0.09 242.7 / 0.05)" + }, { "name": "--intergalactic-table-td-cell-actions-accordion", "value": "oklch(1 0 0)" diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 135f8391eb..3353ceed24 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -712,8 +712,8 @@ "components": [] }, { - "name": "--intergalactic-chart-grid-bar-chart-base-bg", - "value": "oklch(0.96 0.005 232.5)", + "name": "--intergalactic-chart-grid-bar-base-bg", + "value": "oklch(0.92 0.008 233.5)", "description": "Default background color of a bar in the BarChart.", "components": [ "d3-chart", @@ -721,7 +721,7 @@ ] }, { - "name": "--intergalactic-chart-grid-bar-chart-hover", + "name": "--intergalactic-chart-grid-bar-hover", "value": "oklch(0.375 0.09 242.7 / 0.05)", "description": "Background color for the hover state of a bar on the chart grid.", "components": [ @@ -1364,7 +1364,7 @@ }, { "name": "--intergalactic-control-select-trigger-active", - "value": "oklch(0.96 0.005 232.5)", + "value": "oklch(1 0 0)", "description": "Background of the Select trigger in its active state.", "components": [ "base-trigger" From 80c80ec754716f4ebb9b777e08b57ba0bd3dd1b2 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Wed, 30 Sep 2026 17:25:03 +0200 Subject: [PATCH 7/7] [theme] update value for text-large-info --- tools/theme/src/theme.ts | 4 ++-- website/docs/style/design-tokens/design-tokens.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 2aaffad068..47090b3503 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -1930,11 +1930,11 @@ export const theme: Theme = { description: 'Hover and active states of the text with font-size ≥20px associated with critical states and data.', }, text_large_info_DEFAULT: { - value: info.at(L_TEXT_ACCENT), + value: '{semanticTokens.colors.text.link.primary}', description: 'Link text with font-size ≥20px.', }, text_large_info_hover_active: { - value: info.at(L_TEXT_ACCENT), + value: '{semanticTokens.colors.text.link.primary_hover_active}', description: 'Hover and active states of the link text with font-size ≥20px.', }, text_large_secondary: { diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 3353ceed24..2e313bd89c 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -3019,7 +3019,7 @@ }, { "name": "--intergalactic-text-large-info", - "value": "oklch(0.6 0.166 277.7)", + "value": "oklch(0.23 0.009 245)", "description": "Link text with font-size ≥20px.", "components": [ "d3-chart" @@ -3027,7 +3027,7 @@ }, { "name": "--intergalactic-text-large-info-hover-active", - "value": "oklch(0.6 0.166 277.7)", + "value": "oklch(0.23 0.009 245)", "description": "Hover and active states of the link text with font-size ≥20px.", "components": [] },