From 74f53debf2d2dfe80b50117bba7bdc8f989026f6 Mon Sep 17 00:00:00 2001 From: Slizhevsky Vladislav Date: Wed, 19 Aug 2026 15:07:16 +0200 Subject: [PATCH] [UIK-5794][slider] slider rebranding --- semcore/slider/src/Slider.tsx | 2 +- semcore/slider/src/style/slider.shadow.css | 21 ++++++------ .../style/design-tokens/design-tokens.json | 33 +++++++++++-------- 3 files changed, 32 insertions(+), 24 deletions(-) diff --git a/semcore/slider/src/Slider.tsx b/semcore/slider/src/Slider.tsx index 7b33184da6..2e6bcc0720 100644 --- a/semcore/slider/src/Slider.tsx +++ b/semcore/slider/src/Slider.tsx @@ -294,7 +294,7 @@ function Options( const SSliderOptions = Root; return sstyled(styles)( - + {(options ?? []).map((option) => ( {option.label} ))} diff --git a/semcore/slider/src/style/slider.shadow.css b/semcore/slider/src/style/slider.shadow.css index e7936885d1..d235d118ef 100644 --- a/semcore/slider/src/style/slider.shadow.css +++ b/semcore/slider/src/style/slider.shadow.css @@ -3,7 +3,7 @@ SSlider { width: 140px; box-sizing: border-box; cursor: pointer; - padding-top: var(--intergalactic-spacing-5x, 20px); + padding: var(--intergalactic-spacing-5x, 20px) 0 0 0; border: none; background-color: transparent; @@ -15,14 +15,13 @@ SSlider { height: 4px; width: 100%; border-radius: var(--intergalactic-progress-bar-rounded, 6px); - background-color: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); /* TODO: --intergalactic-control-slider-bar-bg */ + background-color: var(--intergalactic-control-slider-bar-bg, oklch(0.157 0.029 176 / 0.11)); } &:hover:before { - background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-slider-bar-bg-hover */ + background-color: var(--intergalactic-control-slider-bar-bg-hover, oklch(0.92 0.002 178.5)); } - &:active SKnob, &:focus-visible SKnob { @mixin focus-outline-mixin { transition-property: outline-color, outline-width, outline-offset, left; @@ -50,7 +49,7 @@ SBar { border-radius: var(--intergalactic-progress-bar-rounded, 6px); box-sizing: border-box; background-size: 12px; - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-slider-bar-value-bg */ + background-color: var(--intergalactic-control-slider-bar-value-bg, oklch(0.23 0.01 140)); cursor: pointer; transition: calc(var(--intergalactic-duration-control, 200) * 1ms) width ease-in-out; } @@ -62,14 +61,17 @@ SKnob { width: 20px; border-radius: 50%; box-sizing: border-box; - background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-slider-knob-bg */ - border: 5px solid var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-slider-knob-border */ + background-color: var(--intergalactic-control-slider-knob-bg, #ffffff); + border: 5px solid var(--intergalactic-control-slider-knob-border, oklch(0.23 0.01 140)); cursor: pointer; transform: translate(-50%, -50%); - transition: calc(var(--intergalactic-duration-control, 200) * 1ms) left ease-in-out; + transition-duration: calc(var(--intergalactic-duration-control, 200) * 1ms); + transition-property: left, transform; + transition-timing-function: ease-in-out; &:hover { - border-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.007 140)); /* TODO: --intergalactic-control-slider-knob-border-hover */ + border-color: var(--intergalactic-control-slider-knob-border-hover, oklch(0.32 0.007 140)); + transform: translate(-50%, -50%) scale(1.2); } } @@ -80,7 +82,6 @@ SInput { } SSliderOptions { - padding-top: var(--intergalactic-spacing-05x, 2px); color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); font-size: var(--intergalactic-fs-200, 14px); font-weight: var(--intergalactic-regular, 400); diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 466b219300..5a7566b8f3 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -240,7 +240,6 @@ "input", "modal", "side-panel", - "slider", "textarea", "wizard" ] @@ -494,7 +493,6 @@ "fullscreen-modal", "input", "side-panel", - "slider", "tab-line", "tab-panel", "textarea", @@ -528,7 +526,6 @@ "date-picker", "dropdown", "notice", - "slider", "tooltip" ] }, @@ -1095,8 +1092,7 @@ "components": [ "button", "dropdown", - "feature-highlight", - "slider" + "feature-highlight" ] }, { @@ -1112,8 +1108,7 @@ "value": "oklch(0.32 0.007 140)", "description": "Hover state of the regular primary control.", "components": [ - "button", - "slider" + "button" ] }, { @@ -1259,37 +1254,49 @@ "name": "--intergalactic-control-slider-bar-bg", "value": "oklch(0.157 0.029 176 / 0.11)", "description": "Background of the Slider bar.", - "components": [] + "components": [ + "slider" + ] }, { "name": "--intergalactic-control-slider-bar-bg-hover", "value": "oklch(0.92 0.002 178.5)", "description": "Hover state of the Slider bar.", - "components": [] + "components": [ + "slider" + ] }, { "name": "--intergalactic-control-slider-bar-value-bg", "value": "oklch(0.23 0.01 140)", "description": "Filled part of the Slider bar.", - "components": [] + "components": [ + "slider" + ] }, { "name": "--intergalactic-control-slider-knob-bg", "value": "#ffffff", "description": "Knob fill color of the Slider.", - "components": [] + "components": [ + "slider" + ] }, { "name": "--intergalactic-control-slider-knob-border", "value": "oklch(0.23 0.01 140)", "description": "Knob border color of the Slider in its normal state.", - "components": [] + "components": [ + "slider" + ] }, { "name": "--intergalactic-control-slider-knob-border-hover", "value": "oklch(0.32 0.007 140)", "description": "Knob border color of the Slider in its hover state.", - "components": [] + "components": [ + "slider" + ] }, { "name": "--intergalactic-control-slider-rating-icon",