Skip to content

[UIK-5923][theme] update gray shade #3197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sheila-semrush wants to merge 9 commits into
base: release/v18
Choose a base branch
from
Open

[UIK-5923][theme] update gray shade #3197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
547566d
[theme] remove opacity from text primary var
j-mnizhek Sep 14, 2026
147c58e
[theme] update focus and gray shades
j-mnizhek Sep 15, 2026
68da468
[chore] merge release/v18 into UIK-5923/theme-update-gray-shade
j-mnizhek Sep 25, 2026
85ea5ab
[theme] grays become more cold
j-mnizhek Sep 25, 2026
18fb847
Merge branch 'release/v18' into UIK-5923/theme-update-gray-shade
sheila-semrush Sep 28, 2026
b3ae7d4
[chore] update design-tokens.json
sheila-semrush Sep 28, 2026
c831e77
[stories] remove test story for chart referenceBackground
j-mnizhek Sep 28, 2026
8129816
[theme] update var for chart bar bg and active select control
j-mnizhek Sep 29, 2026
80c80ec
[theme] update value for text-large-info
j-mnizhek Sep 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions semcore/accordion/src/style/accordion.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ SItemToggle {
font-weight: var(--intergalactic-regular, 400);

&[use='primary'] {
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
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)
Expand All @@ -26,7 +26,7 @@ SItemToggle {
}

&: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.005 232.2));
}

SItemToggleButton {
Expand All @@ -40,7 +40,7 @@ SItemToggle {
}

&[use='secondary'] {
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
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)
Expand Down Expand Up @@ -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.1 0.03 137 / 0.899));
fill: var(--intergalactic-text-primary, oklch(0.23 0.009 245));

&[selected] {
transform: rotate(90deg);
Expand All @@ -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.001 180));
background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.004 232));

&::before {
content: '';
Expand All @@ -93,7 +93,7 @@ SAccordionItem {
width: 2px;
z-index: 1;
opacity: 0;
background-color: var(--intergalactic-border-accent, oklch(0.23 0.01 140));
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));
}
Expand All @@ -113,7 +113,7 @@ SAccordionItem {

&[use='secondary'] {
SItemCollapse {
border-left: 2px solid var(--intergalactic-border-accent, oklch(0.23 0.01 140));
border-left: 2px solid var(--intergalactic-border-accent, oklch(0.23 0.009 245));
}
}
}
Expand Down
20 changes: 10 additions & 10 deletions semcore/badge/src/style/badge.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.991 0.005 232.5 / 0.959));
}

SBadge[theme='default'] {
Expand All @@ -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.022 243.8));
}

&[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.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.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.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'] {
Expand All @@ -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.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.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.209 0.055 246.6 / 0.505));
background-color: var(--intergalactic-badge-bg-unavailable, oklch(0.97 0.005 232.2));
}
}
2 changes: 1 addition & 1 deletion semcore/base-components/src/components/flex-box/style/focus-outline-mixin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.009 245));
outline-style: solid;
outline-width: 2px;
outline-offset: $offset;
Expand Down
8 changes: 4 additions & 4 deletions semcore/base-components/src/components/hint/style/hint.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.4 0.004 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.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.176 0.033 175.7 / 0.07));
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);
Expand Down
2 changes: 1 addition & 1 deletion semcore/base-components/src/components/popper/style/popper.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.009 245));
}

SPopper:focus-visible {
Expand Down
8 changes: 4 additions & 4 deletions semcore/base-components/src/components/scroll-area/style/scroll-area.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.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 140) 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%));
}
}

Expand Down Expand Up @@ -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.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 140) 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%));
}
}

Expand Down
2 changes: 1 addition & 1 deletion semcore/base-components/src/components/scroll-area/style/scroll-bar.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.277 0.066 242.6 / 0.18));
}
12 changes: 6 additions & 6 deletions semcore/base-trigger/src/style/base-trigger.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.1 0.03 137 / 0.899));
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);
Expand All @@ -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.009 245));
}

&: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.005 232.2));
}

&: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.009 245));

&:hover {
background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0));
Expand Down Expand Up @@ -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.242 0.062 245.8 / 0.371));
}

SBaseTrigger[state='valid'] {
Expand Down
4 changes: 2 additions & 2 deletions semcore/base-trigger/src/style/button-trigger.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.023 245));
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.023 245));
}
10 changes: 5 additions & 5 deletions semcore/base-trigger/src/style/filter-trigger.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.277 0.066 242.6 / 0.18));
transition: height calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-out;
}

Expand Down Expand Up @@ -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.277 0.066 242.6 / 0.18));
border-radius: var(--intergalactic-control-rounded, 6px);
inset: 0;
z-index: 1;
Expand All @@ -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(1 0 0));

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.009 245));
}
}

Expand All @@ -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(1 0 0));
}
}
}
8 changes: 4 additions & 4 deletions semcore/breadcrumbs/src/style/breadcrumbs.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.017 238.3));
display: flex;

&:last-child {
Expand All @@ -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.209 0.055 246.6 / 0.505));
text-decoration: none;
cursor: pointer;

&: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.009 245));
}
}

SBreadcrumbsItem[active] {
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
color: var(--intergalactic-text-primary, oklch(0.23 0.009 245));
cursor: default;
&:hover {
text-decoration: none;
Expand Down
12 changes: 6 additions & 6 deletions semcore/bulk-textarea/src/components/InputField/inputField.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.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.1 0.03 137 / 0.899));
color: var(--intergalactic-text-primary, oklch(0.23 0.009 245));
word-wrap: break-word;
word-break: break-word;
font-family: inherit;
Expand All @@ -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.242 0.062 245.8 / 0.371));
position: absolute;
white-space: pre-wrap;
padding-left: var(--intergalactic-spacing-content-padding-medium, 12px);
Expand Down Expand Up @@ -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.209 0.055 246.6 / 0.505));
margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
font-variant-numeric: normal;
font-weight: 300;
Expand Down Expand Up @@ -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.009 245));
@mixin focus-outline-mixin {
outline-offset: 0;
transition-property: outline-color, outline-width;
Expand Down Expand Up @@ -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.004 232));
}

SInputField[disabled]>ol {
Expand Down
Loading
Loading