diff --git a/packages/web/src/scss/components/UNSTABLE_Slider/_UNSTABLE_Slider.scss b/packages/web/src/scss/components/UNSTABLE_Slider/_UNSTABLE_Slider.scss index e21256dd7d..6e77d7d0f3 100644 --- a/packages/web/src/scss/components/UNSTABLE_Slider/_UNSTABLE_Slider.scss +++ b/packages/web/src/scss/components/UNSTABLE_Slider/_UNSTABLE_Slider.scss @@ -46,7 +46,7 @@ $_field-name: 'UNSTABLE_Slider'; --slider-track-background: #{theme.$track-background-hover}; --slider-track-lower-background: #{theme.$track-lower-background-hover}; --slider-thumb-border-color: #{theme.$thumb-border-color-hover}; - --slider-thumb-background-image: #{svg.escape(theme.$thumb-background-image-hover)}; + --slider-thumb-background-color: #{svg.escape(theme.$thumb-background-color-hover)}; --slider-thumb-box-shadow: #{theme.$thumb-box-shadow-hover}; } } @@ -55,7 +55,7 @@ $_field-name: 'UNSTABLE_Slider'; --slider-track-background: #{theme.$track-background-active}; --slider-track-lower-background: #{theme.$track-lower-background-active}; --slider-thumb-border-color: #{theme.$thumb-border-color-active}; - --slider-thumb-background-image: #{svg.escape(theme.$thumb-background-image-active)}; + --slider-thumb-background-color: #{svg.escape(theme.$thumb-background-color-active)}; --slider-thumb-box-shadow: #{theme.$thumb-box-shadow-active}; } @@ -146,6 +146,7 @@ $_field-name: 'UNSTABLE_Slider'; --slider-track-lower-background: #{theme.$track-lower-background-disabled}; --slider-thumb-border-width: #{theme.$thumb-border-width-disabled}; --slider-thumb-border-color: #{theme.$thumb-border-color-disabled}; + --slider-thumb-background-color: #{svg.escape(theme.$thumb-background-color-disabled)}; --slider-thumb-background-image: #{svg.escape(theme.$thumb-background-image-disabled)}; --slider-thumb-box-shadow: #{theme.$thumb-box-shadow-disabled}; diff --git a/packages/web/src/scss/components/UNSTABLE_Slider/_theme.scss b/packages/web/src/scss/components/UNSTABLE_Slider/_theme.scss index eaeb878377..ca37c1f1ef 100644 --- a/packages/web/src/scss/components/UNSTABLE_Slider/_theme.scss +++ b/packages/web/src/scss/components/UNSTABLE_Slider/_theme.scss @@ -1,40 +1,42 @@ -@use '@tokens' as tokens; +@use '@global' as global-tokens; +@use '../../settings/globals'; @use '../../settings/transitions'; -$padding: tokens.$space-400; -$row-gap: tokens.$space-600; +$padding: global-tokens.$space-500; +$row-gap: global-tokens.$space-700; $transition-duration: transitions.$duration-100; $transition-timing: transitions.$timing-eased-out; -$track-height: tokens.$space-300; -$track-border-radius: tokens.$radius-100; -$track-background: tokens.$border-primary-default; -$track-background-hover: tokens.$border-primary-hover; -$track-background-active: tokens.$border-primary-active; -$track-background-disabled: tokens.$border-primary-disabled; -$track-lower-background: tokens.$action-primary-default; -$track-lower-background-hover: tokens.$action-primary-hover; -$track-lower-background-active: tokens.$action-primary-active; -$track-lower-background-disabled: tokens.$action-primary-disabled; +$track-height: global-tokens.$space-300; +$track-border-radius: global-tokens.$radius-100; +$track-background: var(--#{globals.$prefix}color-border-interactive-default); +$track-background-hover: var(--#{globals.$prefix}color-border-interactive-hover); +$track-background-active: var(--#{globals.$prefix}color-border-interactive-active); +$track-background-disabled: var(--#{globals.$prefix}color-disabled-background); +$track-lower-background: var(--#{globals.$prefix}color-selected-default); +$track-lower-background-hover: var(--#{globals.$prefix}color-selected-default); +$track-lower-background-active: var(--#{globals.$prefix}color-selected-default); +$track-lower-background-disabled: var(--#{globals.$prefix}color-disabled-foreground); -$thumb-width: tokens.$space-700; -$thumb-height: tokens.$space-900; -$thumb-border-width: tokens.$border-width-200; -$thumb-border-width-disabled: tokens.$border-width-100; -$thumb-border-style: tokens.$border-style-100; -$thumb-border-color: tokens.$action-primary-default; -$thumb-border-color-hover: tokens.$action-primary-hover; -$thumb-border-color-active: tokens.$action-primary-active; -$thumb-border-color-disabled: tokens.$action-primary-disabled; -$thumb-border-radius: tokens.$radius-100; -$thumb-background-color: tokens.$background-basic; -$thumb-background-image: url('data:image/svg+xml,'); -$thumb-background-image-hover: url('data:image/svg+xml,'); -$thumb-background-image-active: url('data:image/svg+xml,'); -$thumb-background-image-disabled: url('data:image/svg+xml,'); -$thumb-background-size: tokens.$space-400 tokens.$space-600; -$thumb-box-shadow: tokens.$shadow-100; -$thumb-box-shadow-hover: tokens.$shadow-200; -$thumb-box-shadow-active: tokens.$shadow-200; +$thumb-width: global-tokens.$space-900; +$thumb-height: global-tokens.$space-1100; +$thumb-border-width: global-tokens.$border-width-200; +$thumb-border-width-disabled: global-tokens.$border-width-100; +$thumb-border-style: solid; +$thumb-border-color: var(--#{globals.$prefix}color-form-field-border-default); +$thumb-border-color-hover: var(--#{globals.$prefix}color-form-field-border-hover); +$thumb-border-color-active: var(--#{globals.$prefix}color-selected-default); +$thumb-border-color-disabled: var(--#{globals.$prefix}color-disabled-foreground); +$thumb-border-radius: global-tokens.$radius-200; +$thumb-background-color: var(--#{globals.$prefix}color-form-field-default); +$thumb-background-color-hover: var(--#{globals.$prefix}color-form-field-hover); +$thumb-background-color-active: var(--#{globals.$prefix}color-form-field-active); +$thumb-background-color-disabled: var(--#{globals.$prefix}color-disabled-background); +$thumb-background-image: var(--#{globals.$prefix}slider-thumb-background-image-url); +$thumb-background-image-disabled: var(--#{globals.$prefix}slider-thumb-disabled-background-image-url); +$thumb-background-size: global-tokens.$space-500 global-tokens.$space-700; +$thumb-box-shadow: global-tokens.$shadow-100; +$thumb-box-shadow-hover: global-tokens.$shadow-200; +$thumb-box-shadow-active: global-tokens.$shadow-200; $thumb-box-shadow-disabled: none; -$thumb-box-shadow-focus: tokens.$focus; +$thumb-box-shadow-focus: global-tokens.$focus; diff --git a/packages/web/src/scss/components/UNSTABLE_Slider/_tools.scss b/packages/web/src/scss/components/UNSTABLE_Slider/_tools.scss index 6c851008cd..bd143b4854 100644 --- a/packages/web/src/scss/components/UNSTABLE_Slider/_tools.scss +++ b/packages/web/src/scss/components/UNSTABLE_Slider/_tools.scss @@ -16,7 +16,7 @@ border: var(--slider-thumb-border-width, #{theme.$thumb-border-width}) theme.$thumb-border-style var(--slider-thumb-border-color, #{theme.$thumb-border-color}); border-radius: theme.$thumb-border-radius; - background: theme.$thumb-background-color + background: var(--slider-thumb-background-color, #{svg.escape(theme.$thumb-background-color)}) var(--slider-thumb-background-image, #{svg.escape(theme.$thumb-background-image)}) no-repeat center / theme.$thumb-background-size; box-shadow: var(--slider-thumb-box-shadow, #{theme.$thumb-box-shadow}); diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss index 91c3233cfb..a1132130cd 100644 --- a/packages/web/src/scss/components/index.scss +++ b/packages/web/src/scss/components/index.scss @@ -40,6 +40,6 @@ @forward 'UNSTABLE_Avatar'; @forward 'UNSTABLE_EmptyState'; @forward 'UNSTABLE_Section'; +@forward 'UNSTABLE_Slider'; -// @forward 'UNSTABLE_Slider'; // @forward 'UNSTABLE_Toggle'; diff --git a/packages/web/src/scss/tools/_themes.scss b/packages/web/src/scss/tools/_themes.scss index 4ef418c30d..ec09e1a456 100644 --- a/packages/web/src/scss/tools/_themes.scss +++ b/packages/web/src/scss/tools/_themes.scss @@ -54,13 +54,7 @@ // Slider --#{globals.$prefix}slider-thumb-background-image-url: #{svg.escape( - url('data:image/svg+xml,') - )}; - --#{globals.$prefix}slider-thumb-hover-background-image-url: #{svg.escape( - url('data:image/svg+xml,') - )}; - --#{globals.$prefix}slider-thumb-active-background-image-url: #{svg.escape( - url('data:image/svg+xml,') + url('data:image/svg+xml,') )}; --#{globals.$prefix}slider-thumb-disabled-background-image-url: #{svg.escape( url('data:image/svg+xml,') diff --git a/tests/e2e/demo-components-compare.spec.ts b/tests/e2e/demo-components-compare.spec.ts index cdc4c1faa7..b0dde4bc6d 100644 --- a/tests/e2e/demo-components-compare.spec.ts +++ b/tests/e2e/demo-components-compare.spec.ts @@ -24,7 +24,6 @@ const IGNORED_TESTS: string[] = [ 'TextArea', 'Toast', 'Tooltip', - 'UNSTABLE_Slider', 'UNSTABLE_Toggle', 'UNSTABLE_Truncate', ]; diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-slider-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-slider-chromium-linux.png index 5fd92032d4..ce31840481 100644 Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-slider-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-slider-chromium-linux.png differ