Skip to content

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

Open
j-mnizhek wants to merge 23 commits into
release/v18from
UIK-5351/add-more-variables-to-theme
Open

[UIK-5351][theme] Add more variables to theme#3039
j-mnizhek wants to merge 23 commits into
release/v18from
UIK-5351/add-more-variables-to-theme

Conversation

@j-mnizhek

@j-mnizhek j-mnizhek commented Jul 2, 2026

Copy link
Copy Markdown
Member

Changelog

@semcore/theme

BREAK

  • 81 new semantic variables
  • fallbacks for 12 renamed variables

@semcore/accordion

BREAK

  • New theme applied.

@semcore/add-filter

BREAK

  • New theme applied.

@semcore/animation

BREAK

  • New theme applied.

@semcore/badge

BREAK

  • New theme applied.

@semcore/base-trigger

BREAK

  • New theme applied.

@semcore/breadcrumbs

BREAK

  • New theme applied.

@semcore/breakpoints

BREAK

  • New theme applied.

@semcore/bulk-textarea

BREAK

  • New theme applied.

@semcore/button

BREAK

  • New theme applied.

@semcore/card

BREAK

  • New theme applied.

@semcore/carousel

BREAK

  • New theme applied.

@semcore/checkbox

BREAK

  • New theme applied.

@semcore/color-picker

BREAK

  • New theme applied.

@semcore/core

BREAK

  • New theme applied.

@semcore/counter

BREAK

  • New theme applied.

@semcore/d3-chart

BREAK

  • New theme applied.

@semcore/data-table

BREAK

  • New theme applied.

@semcore/date-picker

BREAK

  • New theme applied.

@semcore/divider

BREAK

  • New theme applied.

@semcore/dot

BREAK

  • New theme applied.

@semcore/drag-and-drop

BREAK

  • New theme applied.

@semcore/dropdown

BREAK

  • New theme applied.

@semcore/dropdown-menu

BREAK

  • New theme applied.

@semcore/ellipsis

BREAK

  • New theme applied.

@semcore/errors

BREAK

  • New theme applied.

@semcore/feature-highlight

BREAK

  • New theme applied.

@semcore/feature-popover

BREAK

  • New theme applied.

@semcore/feedback-form

BREAK

  • New theme applied.

@semcore/flags

BREAK

  • New theme applied.

@semcore/flex-box

BREAK

  • New theme applied.

@semcore/fullscreen-modal

BREAK

  • New theme applied.

@semcore/grid

BREAK

  • New theme applied.

@semcore/hint

BREAK

  • New theme applied.

@semcore/icon

BREAK

  • New theme applied.

@semcore/illustration

BREAK

  • New theme applied.

@semcore/inline-edit

BREAK

  • New theme applied.

@semcore/inline-input

BREAK

  • New theme applied.

@semcore/input

BREAK

  • New theme applied.

@semcore/input-mask

BREAK

  • New theme applied.

@semcore/input-number

BREAK

  • New theme applied.

@semcore/input-tags

BREAK

  • New theme applied.

@semcore/link

BREAK

  • New theme applied.

@semcore/mini-chart

BREAK

  • New theme applied.

@semcore/modal

BREAK

  • New theme applied.

@semcore/neighbor-location

BREAK

  • New theme applied.

@semcore/notice

BREAK

  • New theme applied.

@semcore/notice-bubble

BREAK

  • New theme applied.

@semcore/outside-click

BREAK

  • New theme applied.

@semcore/pagination

BREAK

  • New theme applied.

@semcore/pills

BREAK

  • New theme applied.

@semcore/popper

BREAK

  • New theme applied.

@semcore/portal

BREAK

  • New theme applied.

@semcore/product-head

BREAK

  • New theme applied.

@semcore/progress-bar

BREAK

  • New theme applied.

@semcore/radio

BREAK

  • New theme applied.

@semcore/scroll-area

BREAK

  • New theme applied.

@semcore/select

BREAK

  • New theme applied.

@semcore/side-panel

BREAK

  • New theme applied.

@semcore/skeleton

BREAK

  • New theme applied.

@semcore/slider

BREAK

  • New theme applied.

@semcore/spin

BREAK

  • New theme applied.

@semcore/spin-container

BREAK

  • New theme applied.

@semcore/switch

BREAK

  • New theme applied.

@semcore/tab-line

BREAK

  • New theme applied.

@semcore/tab-panel

BREAK

  • New theme applied.

@semcore/tag

BREAK

  • New theme applied.

@semcore/textarea

BREAK

  • New theme applied.

@semcore/time-picker

BREAK

  • New theme applied.

@semcore/tooltip

BREAK

  • New theme applied.

@semcore/typography

BREAK

  • New theme applied.

@semcore/widget-empty

BREAK

  • New theme applied.

@semcore/wizard

BREAK

  • New theme applied.

Motivation and Context

  • Added 81 new variables to support upcoming changes and updates in the components styles
  • Added TODO comments to styles of some components
  • Added fallbacks for deprecated renamed variables
  • Updated variable name in the Tooltip example with custom background color (documentation)

How has this been tested?

Manually.

Types of changes

  • Bug fix (non-breaking change which fixes an issue).
  • New feature (non-breaking change which adds functionality).
  • Breaking change (fix or feature that would cause existing functionality to not work as expected).
  • Nice improve.

Checklist:

  • I have updated the documentation accordingly.
  • I have added new tests on added of fixed functionality.

@ilyabrower ilyabrower left a comment

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.

It looks like the tokens are sorted alphabetically, but previously they were sorted by meaning. Were these changes necessary?

Comment thread tools/theme/src/theme.ts
@j-mnizhek

Copy link
Copy Markdown
Member Author

It looks like the tokens are sorted alphabetically, but previously they were sorted by meaning. Were these changes necessary?

Yep, it's necessary for now, alphabetical order is temporary, just for convenience during the updating styles

@ilyabrower
ilyabrower changed the base branch from release/v17 to release/v18 July 13, 2026 07:46
@Valeria-Zimnitskaya

Copy link
Copy Markdown
Contributor

@ilyabrower @j-mnizhek after merge release/v17 i see that new wizard styled not applied

Actual:
-visual-Steps-and-buttons--95529-r-and-focus---small-state-1-actual

Expected: should be black
-visual-Steps-and-buttons--95529-r-and-focus---small-state-1-expected

@Valeria-Zimnitskaya
Valeria-Zimnitskaya self-requested a review July 13, 2026 13:30
j-mnizhek and others added 4 commits July 13, 2026 15:55
…some theme initial fixes (#3057)

## Changelog

### @semcore/button

#### Changed

- Styles

#### Break

- Remove legacy `secondary` `info` theme.

### @semcore/theme

#### Changed

- Values for color variables
- Default height for controls: for M — from 28 to 32. for L — from 40 to
44

### @semcore/link

#### Changed

- Styles

### @semcore/modal

#### Fixed

- Hardcoded margins in Close button.

### @semcore/fullscreen-modal

#### Fixed

- Hardcoded margins in Close button.

## Motivation and Context

**Along with button styles and values for its variables, I had to:**
- update comments in some components according to the new variables
names we were discussing with girls
- remove hardcoded margins in Close button component inside the Modal
and FullscreModal
- remove hardcoded values for w and h in: BaseTrigger, ColorPicker,
InputTags, Input, Notice.Label, Pills, TabLine, TimePicker
- updated variables' values and styles of the Link

## How has this been tested?

Manually.

## Screenshots (if appropriate):

Current:
<img width="831" height="477" alt="image"
src="https://github.com/user-attachments/assets/d59b0010-13e1-404b-88bc-8de25be28d94"
/>

Updated:
<img width="1024" height="524" alt="image"
src="https://github.com/user-attachments/assets/ffcdb9ab-5d09-4821-9d69-87601376f362"
/>


## Types of changes

- [ ] Bug fix (non-breaking change which fixes an issue).
- [ ] New feature (non-breaking change which adds functionality).
- [x] Breaking change (fix or feature that would cause existing
functionality to not work as expected).
- [x] Nice improve.

## Checklist:

- [ ] I have updated the documentation accordingly.
- [ ] I have added new tests on added of fixed functionality.

---------

Co-authored-by: Valeryia Zimnitskaya <valeryia.zimnitskaya@semrush.com>
Co-authored-by: ilia.brauer <ilia.brauer@semrush.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment