Skip to content

[UIK-5351][theme] Add more variables to theme #3039

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
j-mnizhek wants to merge 21 commits into
base: release/v18
Choose a base branch
from
Open

[UIK-5351][theme] Add more variables to theme #3039

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
0bb77b0
[theme] add new variables
j-mnizhek Jun 30, 2026
86f37f0
[theme] update theme and add comments to a bunch of components styles
j-mnizhek Jul 1, 2026
940a74e
[theme] update groups for some variables
j-mnizhek Jul 2, 2026
7d7e876
[theme] added renamed vars to derprecated
j-mnizhek Jul 2, 2026
c880f63
[theme] added TODO instead of changing styles
j-mnizhek Jul 3, 2026
a902bfa
[theme] added more context for neighborlocation styles
j-mnizhek Jul 3, 2026
7c54fee
Merge branch 'release/v17' into UIK-5351/add-more-variables-to-theme
j-mnizhek Jul 7, 2026
5bfa958
[theme] a bunch of updates after discussing
j-mnizhek Jul 7, 2026
0cfa5b4
[theme] update comment for Hint styles
j-mnizhek Jul 7, 2026
20fb9cc
[theme] name updates
j-mnizhek Jul 7, 2026
208e04a
[theme] add bg to additional Tag
j-mnizhek Jul 7, 2026
f23e679
[feature-highlight] fix missing top prop
j-mnizhek Jul 7, 2026
9d90750
[UIK-5565][dropdown-menu] fixed preventFocusByClick - skip draggable …
ilyabrower Jul 9, 2026
65bdb8f
[chore] Merge branch 'release/v17' into UIK-5351/add-more-variables-t…
j-mnizhek Jul 9, 2026
19e6690
[theme] update some variables names
j-mnizhek Jul 9, 2026
5ea3ceb
[chore] Merge branch 'release/v17' into UIK-5351/add-more-variables-t…
ilyabrower Jul 10, 2026
f83edb5
[theme] removed duplicates in depricates
ilyabrower Jul 13, 2026
e4ed6be
[theme] fix values for Wizard variables
j-mnizhek Jul 13, 2026
e111f7a
[theme] fix switch control bg
j-mnizhek Jul 13, 2026
f4516f6
[switch] update css file
Valeria-Zimnitskaya Jul 14, 2026
59fa951
[chore] Merge branch 'release/v17' into UIK-5351/add-more-variables-t…
ilyabrower Jul 16, 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/badge/src/Badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ class RootBadge extends Component<

if (type === 'unavailable' && !inverted) {
return resolveColor('--intergalactic-text-secondary');
}
} // TODO: --intergalactic-badge-text-secondary

return undefined;
}
Expand All @@ -64,27 +64,27 @@ class RootBadge extends Component<

if (inverted) {
return resolveColor('--gray-white');
}
} // TODO: --intergalactic-badge-bg-invert

switch (type) {
case 'admin': {
return resolveColor('--blue-400');
}
} // TODO: --intergalactic-badge-bg-admin
case 'alpha': {
return resolveColor('--red-400');
}
} // TODO: --intergalactic-badge-bg-alpha
case 'beta': {
return resolveColor('--orange-400');
}
} // TODO: --intergalactic-badge-bg-beta
case 'new': {
return resolveColor('--green-400');
}
} // TODO: --intergalactic-badge-bg-new
case 'soon': {
return resolveColor('--gray-400');
}
} // TODO: --intergalactic-badge-bg-soon
case 'unavailable': {
return resolveColor('--gray-100');
}
} // TODO: --intergalactic-badge-bg-unavailable
default: {
const t: never = type;
throw new Error(`Type can't be "${t}"`);
Expand Down
4 changes: 2 additions & 2 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 @@ -11,7 +11,7 @@ SBadge {
letter-spacing: 0.3px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-badge-text-primary-invert */
}

SBadge[bg] {
Expand All @@ -20,7 +20,7 @@ SBadge[bg] {

SBadge[inverted] {
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
}
} /* TODO: --intergalactic-badge-text-primary */

SBadge[color] {
color: var(--color);
Expand Down
4 changes: 2 additions & 2 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,8 +8,8 @@ SHintPopper {
opacity: 0;
pointer-events: none;

background: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140));
border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369));
background: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert or consider adding hint category */
border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert or consider adding hint category */
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-2x, 8px);
border-radius: var(--intergalactic-rounded-small, 4px);
Expand Down
6 changes: 3 additions & 3 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 @@ -19,7 +19,7 @@ SBaseTrigger {
font-family: inherit;
cursor: pointer;

background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-select-trigger-normal */
Comment thread
j-mnizhek marked this conversation as resolved.

font-weight: var(--intergalactic-regular, 400);
border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
Expand All @@ -40,13 +40,13 @@ SBaseTrigger {
}

&:hover {
background-color: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180));
background-color: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); /* TODO: --intergalactic-control-select-trigger-hover */
}

&:active,
&[active] {
border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-select-trigger-active */
}
}

Expand Down
70 changes: 36 additions & 34 deletions semcore/button/src/component/Button/button.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ SButton {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
font-weight: var(--intergalactic-medium, 500);
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); /* TODO: --intergalactic-control-text-secondary */
Comment thread
j-mnizhek marked this conversation as resolved.
min-width: fit-content;

&::-moz-focus-inner {
Expand Down Expand Up @@ -61,120 +61,121 @@ SButton[size='l'] {
}

SButton[theme='primary-info'] {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));

&:hover {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.007 140));
}

&:active,
&[active] {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-info-active, oklch(0 0 140));
}
}

SButton[theme='primary-success'] {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170));

&:hover {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-success-hover, oklch(0.6 0.155 170));
}

&:active,
&[active] {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-success-active, oklch(0.58 0.151 170));
}
}

SButton[theme='primary-brand'] {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary */
background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3)); /* TODO:: update the value to a lighter lavander color */

&:hover {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary */
background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.6 0.244 297.8));
}

&:active,
&[active] {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary */
background-color: var(--intergalactic-control-primary-brand-active, oklch(0.58 0.254 297.1));
}
}

SButton[theme='primary-warning'] {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3));

&:hover {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.6 0.244 297.8));
}

&:active,
&[active] {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-brand-active, oklch(0.58 0.254 297.1));
}
}

SButton[theme='primary-danger'] {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5));

&:hover {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-critical-hover, oklch(0.6 0.219 25.5));
}

&:active,
&[active] {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-primary-critical-active, oklch(0.58 0.215 26));
}
}

SButton[theme='primary-invert'] {
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */
background-color: var(--intergalactic-control-primary-invert, oklch(1 0 0));

&:hover {
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */
background-color: var(--intergalactic-control-primary-invert-hover, oklch(0.96 0.001 180));
}

&:active,
&[active] {
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */
background-color: var(--intergalactic-control-primary-invert-active, oklch(0.94 0.002 180));
}
}

SButton[theme='secondary-muted'] {
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); /* TODO: --intergalactic-control-text-secondary */
border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
background-color: var(--intergalactic-control-secondary-neutral, oklch(0.177 0.033 175.6 / 0.028));

&:hover {
background-color: var(--intergalactic-control-secondary-neutral-hover,
oklch(0.176 0.033 175.6 / 0.056));
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */
}

&:active,
&[active] {
background-color: var(--intergalactic-control-secondary-neutral-active,
oklch(0.176 0.033 175.7 / 0.084));
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */
}
}

/* Remove this theme */
SButton[theme='secondary-info'] {
background-color: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039));
color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
Expand All @@ -193,23 +194,24 @@ SButton[theme='secondary-info'] {
}

SButton[theme='secondary-invert'] {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
border-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391));
background-color: var(--intergalactic-control-secondary-invert, oklch(0.969 0.057 140 / 0.118));

&:hover {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-secondary-invert-hover, oklch(0.976 0.043 140 / 0.145));
}

&:active,
&[active] {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-secondary-invert-active,
oklch(0.983 0.03 140 / 0.183));
}
}

/* Remove this theme */
SButton[theme='tertiary-info'] {
color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
background-color: var(--intergalactic-control-tertiary-info, transparent);
Expand All @@ -227,34 +229,34 @@ SButton[theme='tertiary-info'] {
}

SButton[theme='tertiary-muted'] {
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); /* TODO: --intergalactic-control-text-tertiary */
background-color: var(--intergalactic-control-tertiary-neutral, transparent);

&:hover {
background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.176 0.033 175.6 / 0.056));
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */
}

&:active,
&[active] {
background-color: var(--intergalactic-control-tertiary-neutral-active,
oklch(0.176 0.033 175.7 / 0.084));
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-control-text-primary */
}
}

SButton[theme='tertiary-invert'] {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-tertiary-invert, transparent);

&:hover {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-tertiary-invert-hover, oklch(0.976 0.043 140 / 0.145));
}

&:active,
&[active] {
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-control-text-primary-invert */
background-color: var(--intergalactic-control-tertiary-invert-active, oklch(0.983 0.03 140 / 0.183));
}
}
Expand Down Expand Up @@ -283,11 +285,11 @@ SButton[neighborLocation='left'] {

&:after {
background-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391));
}
} /* TODO: need to add a new variables for neighbor location borders based on the final UI */

&[theme='secondary-muted'] {
&:after {
background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: need to add a new variables for neighbor location borders based on the final UI */
}
}
}
Expand Down
Loading
Loading