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 6 commits into
base: release/v17
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 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
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 @@ -91,7 +91,7 @@ class RootBadge extends Component<BadgeProps, typeof RootBadge.enhance> {

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

return undefined;
}
Expand All @@ -102,27 +102,27 @@ class RootBadge extends Component<BadgeProps, typeof RootBadge.enhance> {

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

switch (type) {
case 'admin': {
return resolveColor('--blue-400');
}
} // change to --intergalactic-badge-bg-admin
case 'alpha': {
return resolveColor('--red-400');
}
} // change to --intergalactic-badge-bg-alpha
case 'beta': {
return resolveColor('--orange-400');
}
} // change to --intergalactic-badge-bg-beta
case 'new': {
return resolveColor('--green-400');
}
} // change to --intergalactic-badge-bg-new
case 'soon': {
return resolveColor('--gray-400');
}
} // change to --intergalactic-badge-bg-soon
case 'unavailable': {
return resolveColor('--gray-100');
}
} // change to --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-bg-invert, oklch(0.23 0.01 140));
border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.995 0.008 145.9 / 0.369));
Comment thread
j-mnizhek marked this conversation as resolved.
Outdated
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 */

@ilyabrower ilyabrower Jul 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why control-select instead of select ?
why select instead of trigger?


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: ? */
Comment thread
j-mnizhek marked this conversation as resolved.
Outdated

&[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: ? */
}
}
}
Expand Down
Loading
Loading