[UIK-5551] pills rebranding - #3060
Conversation
…rand-button-styles
…heme' into UIK-5551/pills-rebranding
github-actions
Bot
removed
base-components
badge
breadcrumbs
checkbox
d3-chart
divider
dot
dropdown
ellipsis
labels
| } | ||
| SPillSeparator { | ||
| width: 1px; | ||
| height: 18px; |
There was a problem hiding this comment.
what do you think to use here something likecalc(var(--intergalactic-form-control-m) - var(border?) - var(padding) ?
There was a problem hiding this comment.
if I get an idea correctly, the separator size should be equal to text's height...
but I don't have any ideas how to achieve this in a simple way....
There was a problem hiding this comment.
hey, I think we can try just lh-200 (300 in size L), so that it equals the line height. It's a bit different to the design, but we will look at it live and maybe it'll be fine
There was a problem hiding this comment.
@sheila-semrush could you please verify it during Desing Review phase and leave it if it will make sense?
There was a problem hiding this comment.
I ended up making them just spacing-4x/6x
we'll also synchronize them with filter trigger after both are merge (I added a reminder to our root task)
| margin-right: var(--intergalactic-spacing-3x, 12px); | ||
| } | ||
| &[size='l'] { | ||
| height: 24px; |
| transition: var(--global-speed); | ||
|
|
||
| background: var(--intergalactic-control-pills-bg-selected, oklch(1 0 0)); | ||
| box-shadow: 0 0 1px 0 rgba(0, 21, 16, 0.07), 0 1px 3px 0 rgba(0, 21, 16, 0.07); |
There was a problem hiding this comment.
TODO: update value to be control-elevated variable
| } | ||
|
|
||
| --transition-fast: | ||
| left calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-timing-fast, cubic-bezier(0.5, 0, 0, 1.12)), |
There was a problem hiding this comment.
TODO: timing vars have been changed. Update it when modal PR will be merged
…5551/pills-rebranding
…heme' into UIK-5551/pills-rebranding
5 participants
Motivation and Context
Pills rebranding.
How has this been tested?
Manually
Screenshots (if appropriate):
Types of changes
Checklist: