Skip to content

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

Open
j-mnizhek wants to merge 44 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 44 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.

Valeria-Zimnitskaya and others added 22 commits July 20, 2026 17:12
## 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.
## Motivation and Context

Updated styles for:
- Input
- InputNumber
- InlineInput
- TimePicker

Updated:
- Button's width and max-width
- Link's border-radius to round it's focus outline
- A bunch of stories to align them with design requirements

## How has this been tested?

Manually.

## Screenshots (if appropriate):

### InlineInput before:
<img width="354" height="123" alt="image"
src="https://github.com/user-attachments/assets/826125fc-82df-4038-b475-ae304f0d559f"
/>
<img width="464" height="131" alt="image"
src="https://github.com/user-attachments/assets/f8fc06f0-329e-48d4-91fa-f64b63b6709a"
/>

### InlineInput after:
<img width="318" height="132" alt="image"
src="https://github.com/user-attachments/assets/0fad9b3c-03ec-4d9c-974a-aec6bd1a392a"
/>
<img width="315" height="127" alt="image"
src="https://github.com/user-attachments/assets/2114eb5e-ee93-42d1-938d-522acaf7035d"
/>

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

## Checklist:

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

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Slizhevsky Vladislav <uladzislau.slizheuski@semrush.com>
Co-authored-by: ilia.brauer <ilia.brauer@semrush.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. -->

- increased right margin for Modal.Title
- replaced spacing tokens with paddings tokens for paddings
- added fixed min-width for Button so that it has square shape when its
content width is small
- replaced green button with black in examples

Unrelated to Modal:

- renamed "timings" to "easings" for compatibility with Panda

## 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: Slizhevsky Vladislav <uladzislau.slizheuski@semrush.com>
Co-authored-by: Valeryia Zimnitskaya <valeryia.zimnitskaya@semrush.com>
<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

Checbox/Radio/Switch 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: Sheila Sheikh <166654065+sheila-semrush@users.noreply.github.com>
Co-authored-by: Valeryia Zimnitskaya <valeryia.zimnitskaya@semrush.com>
## Motivation and Context

Updates for Card:
- Borders
- Paddings
- Title size (+ added new fontSize and lineheight vars)
- Remove bottom border from CardHeader

## How has this been tested?

Manually.

## Screenshots (if appropriate):

Before:
<img width="1588" height="853" alt="image"
src="https://github.com/user-attachments/assets/ca632a87-3df8-42c2-bb5c-f120e74239d8"
/>

After:
<img width="1595" height="869" alt="image"
src="https://github.com/user-attachments/assets/936430ca-f6e1-4771-b989-08087e0907c7"
/>


## 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:

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

---------

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