[UIK-5351][theme] Add more variables to theme - #3039
Open
j-mnizhek wants to merge 44 commits into
Open
Conversation
## 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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changelog
@semcore/theme
BREAK
@semcore/accordion
BREAK
@semcore/add-filter
BREAK
@semcore/animation
BREAK
@semcore/badge
BREAK
@semcore/base-trigger
BREAK
@semcore/breadcrumbs
BREAK
@semcore/breakpoints
BREAK
@semcore/bulk-textarea
BREAK
@semcore/button
BREAK
@semcore/card
BREAK
@semcore/carousel
BREAK
@semcore/checkbox
BREAK
@semcore/color-picker
BREAK
@semcore/core
BREAK
@semcore/counter
BREAK
@semcore/d3-chart
BREAK
@semcore/data-table
BREAK
@semcore/date-picker
BREAK
@semcore/divider
BREAK
@semcore/dot
BREAK
@semcore/drag-and-drop
BREAK
@semcore/dropdown
BREAK
@semcore/dropdown-menu
BREAK
@semcore/ellipsis
BREAK
@semcore/errors
BREAK
@semcore/feature-highlight
BREAK
@semcore/feature-popover
BREAK
@semcore/feedback-form
BREAK
@semcore/flags
BREAK
@semcore/flex-box
BREAK
@semcore/fullscreen-modal
BREAK
@semcore/grid
BREAK
@semcore/hint
BREAK
@semcore/icon
BREAK
@semcore/illustration
BREAK
@semcore/inline-edit
BREAK
@semcore/inline-input
BREAK
@semcore/input
BREAK
@semcore/input-mask
BREAK
@semcore/input-number
BREAK
@semcore/input-tags
BREAK
@semcore/link
BREAK
@semcore/mini-chart
BREAK
@semcore/modal
BREAK
@semcore/neighbor-location
BREAK
@semcore/notice
BREAK
@semcore/notice-bubble
BREAK
@semcore/outside-click
BREAK
@semcore/pagination
BREAK
@semcore/pills
BREAK
@semcore/popper
BREAK
@semcore/portal
BREAK
@semcore/product-head
BREAK
@semcore/progress-bar
BREAK
@semcore/radio
BREAK
@semcore/scroll-area
BREAK
@semcore/select
BREAK
@semcore/side-panel
BREAK
@semcore/skeleton
BREAK
@semcore/slider
BREAK
@semcore/spin
BREAK
@semcore/spin-container
BREAK
@semcore/switch
BREAK
@semcore/tab-line
BREAK
@semcore/tab-panel
BREAK
@semcore/tag
BREAK
@semcore/textarea
BREAK
@semcore/time-picker
BREAK
@semcore/tooltip
BREAK
@semcore/typography
BREAK
@semcore/widget-empty
BREAK
@semcore/wizard
BREAK
Motivation and Context
How has this been tested?
Manually.
Types of changes
Checklist: