Skip to content

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

Open
j-mnizhek wants to merge 90 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 90 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.
  • Added new property theme: default | light | invert.
  • Removed outdated flag inverted.

@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.
  • Update MiniChart.Score typings to enforce either value/color props or custom children, preventing unsupported prop combinations.

@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.

j-mnizhek and others added 30 commits August 10, 2026 23:07
## Motivation and Context

- Updated styles for BulkTextarea and Textarea (mostly paddings,
margins)
- Pulled updates from
#3073, because needed them
for testing content alignment in different inputs
- Added 2 test stories for forms with horizontal and vertical layout

## How has this been tested?

Manually.

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] 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).
- [x] Nice improve.

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

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

---------

Signed-off-by: Julia Mnizhek <77798437+j-mnizhek@users.noreply.github.com>
Co-authored-by: ilia.brauer <ilia.brauer@semrush.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Valeryia Zimnitskaya <valeryia.zimnitskaya@semrush.com>
<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] 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:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

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

---------

Co-authored-by: Valeria-Zimnitskaya <valeryia.zimnitskaya@semrush.com>
Co-authored-by: Sheila Sheikh <166654065+sheila-semrush@users.noreply.github.com>
<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] 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:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

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

---------

Signed-off-by: Valeria-Zimnitskaya <valeryia.zimnitskaya@semrush.com>
Co-authored-by: Sheila Sheikh <166654065+sheila-semrush@users.noreply.github.com>
Co-authored-by: Valeria-Zimnitskaya <valeryia.zimnitskaya@semrush.com>
<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] 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:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

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

---------

Signed-off-by: ilyabrower <ilya-brower@yandex.ru>
Co-authored-by: Valeryia Zimnitskaya <valeryia.zimnitskaya@semrush.com>
Co-authored-by: Sheila <166654065+sheila-semrush@users.noreply.github.com>
<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

- Rewrite components to use namespaces instead of deprecated atomic
types.
- Refactor Storybook stories.
- Fix type checking for the MiniChart.ScoreLine component.

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] 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:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

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

---------

Co-authored-by: Valeria-Zimnitskaya <valeryia.zimnitskaya@semrush.com>
<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] 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:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

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

---------

Co-authored-by: Sheila Sheikh <166654065+sheila-semrush@users.noreply.github.com>
Co-authored-by: Valeria-Zimnitskaya <valeryia.zimnitskaya@semrush.com>
<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] 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:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

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

---------

Signed-off-by: Valeria-Zimnitskaya <valeryia.zimnitskaya@semrush.com>
Co-authored-by: Julia Mnizhek <j.mnizhek@semrush.com>
Co-authored-by: Julia Mnizhek <77798437+j-mnizhek@users.noreply.github.com>
Co-authored-by: Valeria-Zimnitskaya <valeryia.zimnitskaya@semrush.com>
<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] 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:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [ ] 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>
<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

`Wizard` rebranding.

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] 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:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

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

---------

Co-authored-by: Valeria-Zimnitskaya <valeryia.zimnitskaya@semrush.com>
Co-authored-by: Sheila Sheikh <166654065+sheila-semrush@users.noreply.github.com>
<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] 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:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

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

---------

Signed-off-by: Valeria-Zimnitskaya <valeryia.zimnitskaya@semrush.com>
Co-authored-by: Sheila Sheikh <166654065+sheila-semrush@users.noreply.github.com>
Co-authored-by: Valeria-Zimnitskaya <valeryia.zimnitskaya@semrush.com>
<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] 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:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [ ] 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>
<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] 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:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

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

---------

Co-authored-by: Valeria-Zimnitskaya <valeryia.zimnitskaya@semrush.com>
Co-authored-by: Sheila Sheikh <166654065+sheila-semrush@users.noreply.github.com>
<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] 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:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [ ] I have updated the documentation accordingly.
- [ ] I have added new tests on added of fixed functionality.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment