From 55ba1a80722982666ae48bb61ca441aaf8814914 Mon Sep 17 00:00:00 2001 From: Albert Yu Date: Tue, 2 Jul 2024 21:15:21 +0800 Subject: [PATCH] [Slider] New Slider components and hook (#373) Co-authored-by: colmtuite --- .../base/components/slider/DiscreteSlider.js | 163 -- .../base/components/slider/DiscreteSlider.tsx | 162 -- .../slider/DiscreteSlider.tsx.preview | 11 - .../components/slider/DiscreteSliderMarks.js | 168 -- .../components/slider/DiscreteSliderMarks.tsx | 168 -- .../slider/DiscreteSliderMarks.tsx.preview | 6 - .../components/slider/DiscreteSliderValues.js | 169 -- .../slider/DiscreteSliderValues.tsx | 169 -- .../slider/DiscreteSliderValues.tsx.preview | 7 - .../components/slider/LabeledValuesSlider.js | 161 -- .../components/slider/LabeledValuesSlider.tsx | 160 -- .../slider/LabeledValuesSlider.tsx.preview | 1 - .../base/components/slider/RangeSlider.js | 238 +-- .../base/components/slider/RangeSlider.tsx | 240 +-- docs/data/base/components/slider/RtlSlider.js | 158 ++ .../data/base/components/slider/RtlSlider.tsx | 153 ++ .../components/slider/RtlSlider.tsx.preview | 10 + .../UnstyledSliderIntroduction/css/index.js | 203 ++- .../UnstyledSliderIntroduction/css/index.tsx | 200 ++- .../system/index.js | 213 ++- .../system/index.tsx | 210 ++- .../system/index.tsx.preview | 12 +- .../tailwind/index.js | 263 ++- .../tailwind/index.tsx | 225 ++- .../tailwind/index.tsx.preview | 12 +- .../base/components/slider/VerticalSlider.js | 256 ++- .../base/components/slider/VerticalSlider.tsx | 253 ++- .../slider/VerticalSlider.tsx.preview | 1 - docs/data/base/components/slider/slider.md | 292 +-- .../accessibility/FocusRing.js | 125 +- .../accessibility/FocusRing.tsx | 125 +- .../accessibility/FocusRing.tsx.preview | 10 +- docs/data/base/pages.ts | 2 +- docs/data/base/pagesApi.js | 46 +- docs/pages/base-ui/api/slider-control.json | 19 + docs/pages/base-ui/api/slider-indicator.json | 19 + docs/pages/base-ui/api/slider-output.json | 19 + docs/pages/base-ui/api/slider-root.json | 54 + docs/pages/base-ui/api/slider-thumb.json | 32 + docs/pages/base-ui/api/slider-track.json | 19 + docs/pages/base-ui/api/slider.json | 99 - .../pages/base-ui/api/use-slider-control.json | 97 + .../base-ui/api/use-slider-indicator.json | 32 + docs/pages/base-ui/api/use-slider-output.json | 30 + docs/pages/base-ui/api/use-slider-root.json | 8 + docs/pages/base-ui/api/use-slider-thumb.json | 105 ++ docs/pages/base-ui/api/use-slider.json | 8 - .../base-ui/react-slider/[docsTab]/index.js | 126 +- .../slider-change-committed-lag.tsx | 38 + docs/pages/experiments/slider-marks.tsx | 257 +++ docs/pages/experiments/slider-template.tsx | 18 + docs/pages/experiments/slider-tooltip.tsx | 229 +++ docs/pages/experiments/slider.tsx | 436 +++++ .../slider-control/slider-control.json | 10 + .../slider-indicator/slider-indicator.json | 10 + .../api-docs/slider-output/slider-output.json | 10 + .../api-docs/slider-root/slider-root.json | 58 + .../api-docs/slider-thumb/slider-thumb.json | 25 + .../api-docs/slider-track/slider-track.json | 10 + docs/translations/api-docs/slider/slider.json | 81 - .../use-slider-control.json | 20 + .../use-slider-indicator.json | 9 + .../use-slider-output/use-slider-output.json | 9 + .../use-slider-root.json} | 0 .../use-slider-thumb/use-slider-thumb.json | 34 + docs/translations/translations.json | 1 + .../src/Slider/Control/SliderControl.test.tsx | 72 + .../src/Slider/Control/SliderControl.tsx | 83 + .../src/Slider/Control/SliderControl.types.ts | 34 + .../src/Slider/Control/useSliderControl.ts | 288 +++ .../Slider/Indicator/SliderIndicator.test.tsx | 72 + .../src/Slider/Indicator/SliderIndicator.tsx | 59 + .../Slider/Indicator/SliderIndicator.types.ts | 16 + .../Slider/Indicator/useSliderIndicator.ts | 86 + .../src/Slider/Output/SliderOutput.test.tsx | 106 ++ .../src/Slider/Output/SliderOutput.tsx | 57 + .../src/Slider/Output/SliderOutput.types.ts | 14 + .../src/Slider/Output/useSliderOutput.ts | 42 + .../src/Slider/Root/SliderProvider.tsx | 102 ++ .../src/Slider/Root/SliderRoot.test.tsx | 1592 +++++++++++++++++ .../mui-base/src/Slider/Root/SliderRoot.tsx | 195 ++ .../src/Slider/Root/SliderRoot.types.ts | 282 +++ .../mui-base/src/Slider/Root/styleHooks.ts | 12 + .../mui-base/src/Slider/Root/useSliderRoot.ts | 444 +++++ packages/mui-base/src/Slider/Slider.spec.tsx | 138 -- packages/mui-base/src/Slider/Slider.test.tsx | 617 ------- packages/mui-base/src/Slider/Slider.tsx | 538 ------ packages/mui-base/src/Slider/Slider.types.ts | 238 --- .../src/Slider/Thumb/SliderThumb.test.tsx | 72 + .../mui-base/src/Slider/Thumb/SliderThumb.tsx | 197 ++ .../src/Slider/Thumb/SliderThumb.types.ts | 89 + .../src/Slider/Thumb/useSliderThumb.ts | 278 +++ .../src/Slider/Track/SliderTrack.test.tsx | 72 + .../mui-base/src/Slider/Track/SliderTrack.tsx | 48 + .../src/Slider/Track/SliderTrack.types.ts | 4 + packages/mui-base/src/Slider/index.barrel.ts | 40 + packages/mui-base/src/Slider/index.ts | 53 +- packages/mui-base/src/Slider/sliderClasses.ts | 64 - packages/mui-base/src/Slider/utils.ts | 25 + packages/mui-base/src/index.ts | 1 + packages/mui-base/src/useSlider/index.ts | 3 - .../mui-base/src/useSlider/useSlider.test.js | 91 - packages/mui-base/src/useSlider/useSlider.ts | 758 -------- .../mui-base/src/useSlider/useSlider.types.ts | 259 --- .../src/utils/defaultRenderFunctions.tsx | 3 + 105 files changed, 8232 insertions(+), 5426 deletions(-) delete mode 100644 docs/data/base/components/slider/DiscreteSlider.js delete mode 100644 docs/data/base/components/slider/DiscreteSlider.tsx delete mode 100644 docs/data/base/components/slider/DiscreteSlider.tsx.preview delete mode 100644 docs/data/base/components/slider/DiscreteSliderMarks.js delete mode 100644 docs/data/base/components/slider/DiscreteSliderMarks.tsx delete mode 100644 docs/data/base/components/slider/DiscreteSliderMarks.tsx.preview delete mode 100644 docs/data/base/components/slider/DiscreteSliderValues.js delete mode 100644 docs/data/base/components/slider/DiscreteSliderValues.tsx delete mode 100644 docs/data/base/components/slider/DiscreteSliderValues.tsx.preview delete mode 100644 docs/data/base/components/slider/LabeledValuesSlider.js delete mode 100644 docs/data/base/components/slider/LabeledValuesSlider.tsx delete mode 100644 docs/data/base/components/slider/LabeledValuesSlider.tsx.preview create mode 100644 docs/data/base/components/slider/RtlSlider.js create mode 100644 docs/data/base/components/slider/RtlSlider.tsx create mode 100644 docs/data/base/components/slider/RtlSlider.tsx.preview delete mode 100644 docs/data/base/components/slider/VerticalSlider.tsx.preview create mode 100644 docs/pages/base-ui/api/slider-control.json create mode 100644 docs/pages/base-ui/api/slider-indicator.json create mode 100644 docs/pages/base-ui/api/slider-output.json create mode 100644 docs/pages/base-ui/api/slider-root.json create mode 100644 docs/pages/base-ui/api/slider-thumb.json create mode 100644 docs/pages/base-ui/api/slider-track.json delete mode 100644 docs/pages/base-ui/api/slider.json create mode 100644 docs/pages/base-ui/api/use-slider-control.json create mode 100644 docs/pages/base-ui/api/use-slider-indicator.json create mode 100644 docs/pages/base-ui/api/use-slider-output.json create mode 100644 docs/pages/base-ui/api/use-slider-root.json create mode 100644 docs/pages/base-ui/api/use-slider-thumb.json delete mode 100644 docs/pages/base-ui/api/use-slider.json create mode 100644 docs/pages/experiments/slider-change-committed-lag.tsx create mode 100644 docs/pages/experiments/slider-marks.tsx create mode 100644 docs/pages/experiments/slider-template.tsx create mode 100644 docs/pages/experiments/slider-tooltip.tsx create mode 100644 docs/pages/experiments/slider.tsx create mode 100644 docs/translations/api-docs/slider-control/slider-control.json create mode 100644 docs/translations/api-docs/slider-indicator/slider-indicator.json create mode 100644 docs/translations/api-docs/slider-output/slider-output.json create mode 100644 docs/translations/api-docs/slider-root/slider-root.json create mode 100644 docs/translations/api-docs/slider-thumb/slider-thumb.json create mode 100644 docs/translations/api-docs/slider-track/slider-track.json delete mode 100644 docs/translations/api-docs/slider/slider.json create mode 100644 docs/translations/api-docs/use-slider-control/use-slider-control.json create mode 100644 docs/translations/api-docs/use-slider-indicator/use-slider-indicator.json create mode 100644 docs/translations/api-docs/use-slider-output/use-slider-output.json rename docs/translations/api-docs/{use-slider/use-slider.json => use-slider-root/use-slider-root.json} (100%) create mode 100644 docs/translations/api-docs/use-slider-thumb/use-slider-thumb.json create mode 100644 packages/mui-base/src/Slider/Control/SliderControl.test.tsx create mode 100644 packages/mui-base/src/Slider/Control/SliderControl.tsx create mode 100644 packages/mui-base/src/Slider/Control/SliderControl.types.ts create mode 100644 packages/mui-base/src/Slider/Control/useSliderControl.ts create mode 100644 packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx create mode 100644 packages/mui-base/src/Slider/Indicator/SliderIndicator.tsx create mode 100644 packages/mui-base/src/Slider/Indicator/SliderIndicator.types.ts create mode 100644 packages/mui-base/src/Slider/Indicator/useSliderIndicator.ts create mode 100644 packages/mui-base/src/Slider/Output/SliderOutput.test.tsx create mode 100644 packages/mui-base/src/Slider/Output/SliderOutput.tsx create mode 100644 packages/mui-base/src/Slider/Output/SliderOutput.types.ts create mode 100644 packages/mui-base/src/Slider/Output/useSliderOutput.ts create mode 100644 packages/mui-base/src/Slider/Root/SliderProvider.tsx create mode 100644 packages/mui-base/src/Slider/Root/SliderRoot.test.tsx create mode 100644 packages/mui-base/src/Slider/Root/SliderRoot.tsx create mode 100644 packages/mui-base/src/Slider/Root/SliderRoot.types.ts create mode 100644 packages/mui-base/src/Slider/Root/styleHooks.ts create mode 100644 packages/mui-base/src/Slider/Root/useSliderRoot.ts delete mode 100644 packages/mui-base/src/Slider/Slider.spec.tsx delete mode 100644 packages/mui-base/src/Slider/Slider.test.tsx delete mode 100644 packages/mui-base/src/Slider/Slider.tsx delete mode 100644 packages/mui-base/src/Slider/Slider.types.ts create mode 100644 packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx create mode 100644 packages/mui-base/src/Slider/Thumb/SliderThumb.tsx create mode 100644 packages/mui-base/src/Slider/Thumb/SliderThumb.types.ts create mode 100644 packages/mui-base/src/Slider/Thumb/useSliderThumb.ts create mode 100644 packages/mui-base/src/Slider/Track/SliderTrack.test.tsx create mode 100644 packages/mui-base/src/Slider/Track/SliderTrack.tsx create mode 100644 packages/mui-base/src/Slider/Track/SliderTrack.types.ts create mode 100644 packages/mui-base/src/Slider/index.barrel.ts delete mode 100644 packages/mui-base/src/Slider/sliderClasses.ts create mode 100644 packages/mui-base/src/Slider/utils.ts delete mode 100644 packages/mui-base/src/useSlider/index.ts delete mode 100644 packages/mui-base/src/useSlider/useSlider.test.js delete mode 100644 packages/mui-base/src/useSlider/useSlider.ts delete mode 100644 packages/mui-base/src/useSlider/useSlider.types.ts diff --git a/docs/data/base/components/slider/DiscreteSlider.js b/docs/data/base/components/slider/DiscreteSlider.js deleted file mode 100644 index f412bbfb4..000000000 --- a/docs/data/base/components/slider/DiscreteSlider.js +++ /dev/null @@ -1,163 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { styled, alpha, Box } from '@mui/system'; -import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/Slider'; - -export default function DiscreteSlider() { - return ( - - - - ); -} - -function SliderValueLabel({ children }) { - return {children}; -} - -SliderValueLabel.propTypes = { - children: PropTypes.element.isRequired, -}; - -function valuetext(value) { - return `${value}°C`; -} - -const blue = { - 100: '#DAECFF', - 200: '#99CCF3', - 400: '#3399FF', - 300: '#66B2FF', - 500: '#007FFF', - 600: '#0072E5', - 700: '#0059B3', - 900: '#003A75', -}; - -const grey = { - 50: '#F3F6F9', - 100: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -const Slider = styled(BaseSlider)( - ({ theme }) => ` - color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - height: 6px; - width: 100%; - padding: 16px 0; - display: inline-flex; - align-items: center; - position: relative; - cursor: pointer; - touch-action: none; - -webkit-tap-highlight-color: transparent; - - &.${sliderClasses.disabled} { - pointer-events: none; - cursor: default; - color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; - opacity: 0.4; - } - - & .${sliderClasses.rail} { - display: block; - position: absolute; - width: 100%; - height: 4px; - border-radius: 6px; - background-color: currentColor; - opacity: 0.3; - } - - & .${sliderClasses.track} { - display: block; - position: absolute; - height: 4px; - border-radius: 6px; - background-color: currentColor; - } - - & .${sliderClasses.thumb} { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - margin-left: -6px; - width: 20px; - height: 20px; - box-sizing: border-box; - border-radius: 50%; - outline: 0; - background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - transition-property: box-shadow, transform; - transition-timing-function: ease; - transition-duration: 120ms; - transform-origin: center; - - &:hover { - box-shadow: 0 0 0 6px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[300], - 0.3, - )}; - } - - &.${sliderClasses.focusVisible} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - } - - &.${sliderClasses.active} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - transform: scale(1.2); - } - } - - & .${sliderClasses.mark} { - position: absolute; - width: 10px; - height: 10px; - border-radius: 99%; - background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[700]}; - transform: translateX(-50%); - } - - & .${sliderClasses.markActive} { - background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - } - - & .valueLabel { - font-family: IBM Plex Sans; - font-weight: 600; - font-size: 12px; - position: relative; - top: -2em; - text-align: center; - align-self: center; - } -`, -); diff --git a/docs/data/base/components/slider/DiscreteSlider.tsx b/docs/data/base/components/slider/DiscreteSlider.tsx deleted file mode 100644 index 28af59a20..000000000 --- a/docs/data/base/components/slider/DiscreteSlider.tsx +++ /dev/null @@ -1,162 +0,0 @@ -import * as React from 'react'; -import { styled, alpha, Box } from '@mui/system'; -import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/Slider'; - -export default function DiscreteSlider() { - return ( - - - - ); -} - -interface SliderValueLabelProps { - children: React.ReactElement; -} - -function SliderValueLabel({ children }: SliderValueLabelProps) { - return {children}; -} - -function valuetext(value: number) { - return `${value}°C`; -} - -const blue = { - 100: '#DAECFF', - 200: '#99CCF3', - 400: '#3399FF', - 300: '#66B2FF', - 500: '#007FFF', - 600: '#0072E5', - 700: '#0059B3', - 900: '#003A75', -}; - -const grey = { - 50: '#F3F6F9', - 100: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -const Slider = styled(BaseSlider)( - ({ theme }) => ` - color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - height: 6px; - width: 100%; - padding: 16px 0; - display: inline-flex; - align-items: center; - position: relative; - cursor: pointer; - touch-action: none; - -webkit-tap-highlight-color: transparent; - - &.${sliderClasses.disabled} { - pointer-events: none; - cursor: default; - color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; - opacity: 0.4; - } - - & .${sliderClasses.rail} { - display: block; - position: absolute; - width: 100%; - height: 4px; - border-radius: 6px; - background-color: currentColor; - opacity: 0.3; - } - - & .${sliderClasses.track} { - display: block; - position: absolute; - height: 4px; - border-radius: 6px; - background-color: currentColor; - } - - & .${sliderClasses.thumb} { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - margin-left: -6px; - width: 20px; - height: 20px; - box-sizing: border-box; - border-radius: 50%; - outline: 0; - background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - transition-property: box-shadow, transform; - transition-timing-function: ease; - transition-duration: 120ms; - transform-origin: center; - - &:hover { - box-shadow: 0 0 0 6px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[300], - 0.3, - )}; - } - - &.${sliderClasses.focusVisible} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - } - - &.${sliderClasses.active} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - transform: scale(1.2); - } - } - - & .${sliderClasses.mark} { - position: absolute; - width: 10px; - height: 10px; - border-radius: 99%; - background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[700]}; - transform: translateX(-50%); - } - - & .${sliderClasses.markActive} { - background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - } - - & .valueLabel { - font-family: IBM Plex Sans; - font-weight: 600; - font-size: 12px; - position: relative; - top: -2em; - text-align: center; - align-self: center; - } -`, -); diff --git a/docs/data/base/components/slider/DiscreteSlider.tsx.preview b/docs/data/base/components/slider/DiscreteSlider.tsx.preview deleted file mode 100644 index 1d0ad0d7b..000000000 --- a/docs/data/base/components/slider/DiscreteSlider.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.js b/docs/data/base/components/slider/DiscreteSliderMarks.js deleted file mode 100644 index 8a63200dd..000000000 --- a/docs/data/base/components/slider/DiscreteSliderMarks.js +++ /dev/null @@ -1,168 +0,0 @@ -import * as React from 'react'; -import { styled, alpha, Box } from '@mui/system'; -import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/Slider'; - -export default function DiscreteSliderMarks() { - return ( - - - - ); -} - -const marks = [ - { - value: 0, - label: '0°C', - }, - { - value: 20, - label: '20°C', - }, - { - value: 37, - label: '37°C', - }, - { - value: 100, - label: '100°C', - }, -]; - -function valuetext(value) { - return `${value}°C`; -} - -const blue = { - 100: '#DAECFF', - 200: '#99CCF3', - 400: '#3399FF', - 300: '#66B2FF', - 500: '#007FFF', - 600: '#0072E5', - 700: '#0059B3', - 900: '#003A75', -}; - -const grey = { - 50: '#F3F6F9', - 100: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -const Slider = styled(BaseSlider)( - ({ theme }) => ` - color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - height: 6px; - width: 100%; - padding: 16px 0; - display: inline-flex; - align-items: center; - position: relative; - cursor: pointer; - touch-action: none; - -webkit-tap-highlight-color: transparent; - - &.${sliderClasses.disabled} { - pointer-events: none; - cursor: default; - color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; - opacity: 0.4; - } - - & .${sliderClasses.rail} { - display: block; - position: absolute; - width: 100%; - height: 4px; - border-radius: 6px; - background-color: currentColor; - opacity: 0.3; - } - - & .${sliderClasses.track} { - display: block; - position: absolute; - height: 4px; - border-radius: 6px; - background-color: currentColor; - } - - & .${sliderClasses.thumb} { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - margin-left: -6px; - width: 20px; - height: 20px; - box-sizing: border-box; - border-radius: 50%; - outline: 0; - background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - transition-property: box-shadow, transform; - transition-timing-function: ease; - transition-duration: 120ms; - transform-origin: center; - - &:hover { - box-shadow: 0 0 0 6px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[300], - 0.3, - )}; - } - - &.${sliderClasses.focusVisible} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - } - - &.${sliderClasses.active} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - transform: scale(1.2); - } - } - - & .${sliderClasses.mark} { - position: absolute; - width: 10px; - height: 10px; - border-radius: 99%; - background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]}; - transform: translateX(-50%); - } - - & .${sliderClasses.markActive} { - background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - } - - & .${sliderClasses.markLabel} { - font-family: IBM Plex Sans; - font-weight: 600; - font-size: 12px; - position: absolute; - top: 24px; - transform: translateX(-50%); - margin-top: 8px; - } -`, -); diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.tsx b/docs/data/base/components/slider/DiscreteSliderMarks.tsx deleted file mode 100644 index 67d0d0041..000000000 --- a/docs/data/base/components/slider/DiscreteSliderMarks.tsx +++ /dev/null @@ -1,168 +0,0 @@ -import * as React from 'react'; -import { styled, alpha, Box } from '@mui/system'; -import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/Slider'; - -export default function DiscreteSliderMarks() { - return ( - - - - ); -} - -const marks = [ - { - value: 0, - label: '0°C', - }, - { - value: 20, - label: '20°C', - }, - { - value: 37, - label: '37°C', - }, - { - value: 100, - label: '100°C', - }, -]; - -function valuetext(value: number) { - return `${value}°C`; -} - -const blue = { - 100: '#DAECFF', - 200: '#99CCF3', - 400: '#3399FF', - 300: '#66B2FF', - 500: '#007FFF', - 600: '#0072E5', - 700: '#0059B3', - 900: '#003A75', -}; - -const grey = { - 50: '#F3F6F9', - 100: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -const Slider = styled(BaseSlider)( - ({ theme }) => ` - color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - height: 6px; - width: 100%; - padding: 16px 0; - display: inline-flex; - align-items: center; - position: relative; - cursor: pointer; - touch-action: none; - -webkit-tap-highlight-color: transparent; - - &.${sliderClasses.disabled} { - pointer-events: none; - cursor: default; - color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; - opacity: 0.4; - } - - & .${sliderClasses.rail} { - display: block; - position: absolute; - width: 100%; - height: 4px; - border-radius: 6px; - background-color: currentColor; - opacity: 0.3; - } - - & .${sliderClasses.track} { - display: block; - position: absolute; - height: 4px; - border-radius: 6px; - background-color: currentColor; - } - - & .${sliderClasses.thumb} { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - margin-left: -6px; - width: 20px; - height: 20px; - box-sizing: border-box; - border-radius: 50%; - outline: 0; - background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - transition-property: box-shadow, transform; - transition-timing-function: ease; - transition-duration: 120ms; - transform-origin: center; - - &:hover { - box-shadow: 0 0 0 6px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[300], - 0.3, - )}; - } - - &.${sliderClasses.focusVisible} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - } - - &.${sliderClasses.active} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - transform: scale(1.2); - } - } - - & .${sliderClasses.mark} { - position: absolute; - width: 10px; - height: 10px; - border-radius: 99%; - background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]}; - transform: translateX(-50%); - } - - & .${sliderClasses.markActive} { - background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - } - - & .${sliderClasses.markLabel} { - font-family: IBM Plex Sans; - font-weight: 600; - font-size: 12px; - position: absolute; - top: 24px; - transform: translateX(-50%); - margin-top: 8px; - } -`, -); diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.tsx.preview b/docs/data/base/components/slider/DiscreteSliderMarks.tsx.preview deleted file mode 100644 index 32bef2b87..000000000 --- a/docs/data/base/components/slider/DiscreteSliderMarks.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/base/components/slider/DiscreteSliderValues.js b/docs/data/base/components/slider/DiscreteSliderValues.js deleted file mode 100644 index 71f32e7f4..000000000 --- a/docs/data/base/components/slider/DiscreteSliderValues.js +++ /dev/null @@ -1,169 +0,0 @@ -import * as React from 'react'; -import { styled, alpha, Box } from '@mui/system'; -import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/Slider'; - -export default function DiscreteSliderValues() { - return ( - - - - ); -} - -const marks = [ - { - value: 0, - label: '0°C', - }, - { - value: 20, - label: '20°C', - }, - { - value: 37, - label: '37°C', - }, - { - value: 100, - label: '100°C', - }, -]; - -function valuetext(value) { - return `${value}°C`; -} - -const blue = { - 100: '#DAECFF', - 200: '#99CCF3', - 400: '#3399FF', - 300: '#66B2FF', - 500: '#007FFF', - 600: '#0072E5', - 700: '#0059B3', - 900: '#003A75', -}; - -const grey = { - 50: '#F3F6F9', - 100: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -const Slider = styled(BaseSlider)( - ({ theme }) => ` - color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - height: 6px; - width: 100%; - padding: 16px 0; - display: inline-flex; - align-items: center; - position: relative; - cursor: pointer; - touch-action: none; - -webkit-tap-highlight-color: transparent; - - &.${sliderClasses.disabled} { - pointer-events: none; - cursor: default; - color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; - opacity: 0.4; - } - - & .${sliderClasses.rail} { - display: block; - position: absolute; - width: 100%; - height: 4px; - border-radius: 6px; - background-color: currentColor; - opacity: 0.3; - } - - & .${sliderClasses.track} { - display: block; - position: absolute; - height: 4px; - border-radius: 6px; - background-color: currentColor; - } - - & .${sliderClasses.thumb} { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - margin-left: -6px; - width: 20px; - height: 20px; - box-sizing: border-box; - border-radius: 50%; - outline: 0; - background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - transition-property: box-shadow, transform; - transition-timing-function: ease; - transition-duration: 120ms; - transform-origin: center; - - &:hover { - box-shadow: 0 0 0 6px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[300], - 0.3, - )}; - } - - &.${sliderClasses.focusVisible} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - } - - &.${sliderClasses.active} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - transform: scale(1.2); - } - } - - & .${sliderClasses.mark} { - position: absolute; - width: 10px; - height: 10px; - border-radius: 99%; - background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]}; - transform: translateX(-50%); - } - - & .${sliderClasses.markActive} { - background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - } - - & .${sliderClasses.markLabel} { - font-family: IBM Plex Sans; - font-weight: 600; - font-size: 12px; - position: absolute; - top: 24px; - transform: translateX(-50%); - margin-top: 8px; - } -`, -); diff --git a/docs/data/base/components/slider/DiscreteSliderValues.tsx b/docs/data/base/components/slider/DiscreteSliderValues.tsx deleted file mode 100644 index dd26e6815..000000000 --- a/docs/data/base/components/slider/DiscreteSliderValues.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import * as React from 'react'; -import { styled, alpha, Box } from '@mui/system'; -import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/Slider'; - -export default function DiscreteSliderValues() { - return ( - - - - ); -} - -const marks = [ - { - value: 0, - label: '0°C', - }, - { - value: 20, - label: '20°C', - }, - { - value: 37, - label: '37°C', - }, - { - value: 100, - label: '100°C', - }, -]; - -function valuetext(value: number) { - return `${value}°C`; -} - -const blue = { - 100: '#DAECFF', - 200: '#99CCF3', - 400: '#3399FF', - 300: '#66B2FF', - 500: '#007FFF', - 600: '#0072E5', - 700: '#0059B3', - 900: '#003A75', -}; - -const grey = { - 50: '#F3F6F9', - 100: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -const Slider = styled(BaseSlider)( - ({ theme }) => ` - color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - height: 6px; - width: 100%; - padding: 16px 0; - display: inline-flex; - align-items: center; - position: relative; - cursor: pointer; - touch-action: none; - -webkit-tap-highlight-color: transparent; - - &.${sliderClasses.disabled} { - pointer-events: none; - cursor: default; - color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; - opacity: 0.4; - } - - & .${sliderClasses.rail} { - display: block; - position: absolute; - width: 100%; - height: 4px; - border-radius: 6px; - background-color: currentColor; - opacity: 0.3; - } - - & .${sliderClasses.track} { - display: block; - position: absolute; - height: 4px; - border-radius: 6px; - background-color: currentColor; - } - - & .${sliderClasses.thumb} { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - margin-left: -6px; - width: 20px; - height: 20px; - box-sizing: border-box; - border-radius: 50%; - outline: 0; - background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - transition-property: box-shadow, transform; - transition-timing-function: ease; - transition-duration: 120ms; - transform-origin: center; - - &:hover { - box-shadow: 0 0 0 6px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[300], - 0.3, - )}; - } - - &.${sliderClasses.focusVisible} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - } - - &.${sliderClasses.active} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - transform: scale(1.2); - } - } - - & .${sliderClasses.mark} { - position: absolute; - width: 10px; - height: 10px; - border-radius: 99%; - background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]}; - transform: translateX(-50%); - } - - & .${sliderClasses.markActive} { - background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - } - - & .${sliderClasses.markLabel} { - font-family: IBM Plex Sans; - font-weight: 600; - font-size: 12px; - position: absolute; - top: 24px; - transform: translateX(-50%); - margin-top: 8px; - } -`, -); diff --git a/docs/data/base/components/slider/DiscreteSliderValues.tsx.preview b/docs/data/base/components/slider/DiscreteSliderValues.tsx.preview deleted file mode 100644 index f5e963865..000000000 --- a/docs/data/base/components/slider/DiscreteSliderValues.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/base/components/slider/LabeledValuesSlider.js b/docs/data/base/components/slider/LabeledValuesSlider.js deleted file mode 100644 index 7727e6b1b..000000000 --- a/docs/data/base/components/slider/LabeledValuesSlider.js +++ /dev/null @@ -1,161 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { styled, alpha, Box } from '@mui/system'; -import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/Slider'; - -export default function LabeledValuesSlider() { - return ( - - - - ); -} - -function SliderValueLabel({ children }) { - return ( - -
{children}
- - ); -} - -SliderValueLabel.propTypes = { - children: PropTypes.element.isRequired, -}; - -const blue = { - 100: '#DAECFF', - 200: '#99CCF3', - 400: '#3399FF', - 300: '#66B2FF', - 500: '#007FFF', - 600: '#0072E5', - 700: '#0059B3', - 900: '#003A75', -}; - -const grey = { - 50: '#F3F6F9', - 100: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -const Slider = styled(BaseSlider)( - ({ theme }) => ` - color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - height: 6px; - width: 100%; - padding: 16px 0; - display: inline-flex; - align-items: center; - position: relative; - cursor: pointer; - touch-action: none; - -webkit-tap-highlight-color: transparent; - - &.${sliderClasses.disabled} { - pointer-events: none; - cursor: default; - color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; - opacity: 0.4; - } - - & .${sliderClasses.rail} { - display: block; - position: absolute; - width: 100%; - height: 4px; - border-radius: 6px; - background-color: currentColor; - opacity: 0.3; - } - - & .${sliderClasses.track} { - display: block; - position: absolute; - height: 4px; - border-radius: 6px; - background-color: currentColor; - } - - & .${sliderClasses.thumb} { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - margin-left: -6px; - width: 20px; - height: 20px; - box-sizing: border-box; - border-radius: 50%; - outline: 0; - background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - transition-property: box-shadow, transform; - transition-timing-function: ease; - transition-duration: 120ms; - transform-origin: center; - - &:hover { - box-shadow: 0 0 0 6px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[300], - 0.3, - )}; - } - - &.${sliderClasses.focusVisible} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - } - - &.${sliderClasses.active} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - transform: scale(1.2); - } - } - - & .label { - font-family: IBM Plex Sans; - font-weight: 600; - font-size: 14px; - background: unset; - background-color: ${theme.palette.mode === 'light' ? blue[600] : blue[900]}; - width: 32px; - height: 32px; - padding: 0px; - visibility: hidden; - color: #fff; - border-radius: 50% 50% 50% 0; - position: absolute; - transform: translate(0%, -140%) rotate(-45deg) scale(0); - transition: transform 0.2s ease; - display: flex; - align-items: center; - justify-content: center; - } - - :hover .label { - visibility: visible; - transform: translate(0%, -140%) rotate(-45deg) scale(1); - } - - :hover .value { - transform: rotate(45deg); - text-align: center; - } - } -`, -); diff --git a/docs/data/base/components/slider/LabeledValuesSlider.tsx b/docs/data/base/components/slider/LabeledValuesSlider.tsx deleted file mode 100644 index a845927d1..000000000 --- a/docs/data/base/components/slider/LabeledValuesSlider.tsx +++ /dev/null @@ -1,160 +0,0 @@ -import * as React from 'react'; -import { styled, alpha, Box } from '@mui/system'; -import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/Slider'; - -export default function LabeledValuesSlider() { - return ( - - - - ); -} - -interface SliderValueLabelProps { - children: React.ReactElement; -} - -function SliderValueLabel({ children }: SliderValueLabelProps) { - return ( - -
{children}
- - ); -} - -const blue = { - 100: '#DAECFF', - 200: '#99CCF3', - 400: '#3399FF', - 300: '#66B2FF', - 500: '#007FFF', - 600: '#0072E5', - 700: '#0059B3', - 900: '#003A75', -}; - -const grey = { - 50: '#F3F6F9', - 100: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -const Slider = styled(BaseSlider)( - ({ theme }) => ` - color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - height: 6px; - width: 100%; - padding: 16px 0; - display: inline-flex; - align-items: center; - position: relative; - cursor: pointer; - touch-action: none; - -webkit-tap-highlight-color: transparent; - - &.${sliderClasses.disabled} { - pointer-events: none; - cursor: default; - color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; - opacity: 0.4; - } - - & .${sliderClasses.rail} { - display: block; - position: absolute; - width: 100%; - height: 4px; - border-radius: 6px; - background-color: currentColor; - opacity: 0.3; - } - - & .${sliderClasses.track} { - display: block; - position: absolute; - height: 4px; - border-radius: 6px; - background-color: currentColor; - } - - & .${sliderClasses.thumb} { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - margin-left: -6px; - width: 20px; - height: 20px; - box-sizing: border-box; - border-radius: 50%; - outline: 0; - background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - transition-property: box-shadow, transform; - transition-timing-function: ease; - transition-duration: 120ms; - transform-origin: center; - - &:hover { - box-shadow: 0 0 0 6px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[300], - 0.3, - )}; - } - - &.${sliderClasses.focusVisible} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - } - - &.${sliderClasses.active} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - transform: scale(1.2); - } - } - - & .label { - font-family: IBM Plex Sans; - font-weight: 600; - font-size: 14px; - background: unset; - background-color: ${theme.palette.mode === 'light' ? blue[600] : blue[900]}; - width: 32px; - height: 32px; - padding: 0px; - visibility: hidden; - color: #fff; - border-radius: 50% 50% 50% 0; - position: absolute; - transform: translate(0%, -140%) rotate(-45deg) scale(0); - transition: transform 0.2s ease; - display: flex; - align-items: center; - justify-content: center; - } - - :hover .label { - visibility: visible; - transform: translate(0%, -140%) rotate(-45deg) scale(1); - } - - :hover .value { - transform: rotate(45deg); - text-align: center; - } - } -`, -); diff --git a/docs/data/base/components/slider/LabeledValuesSlider.tsx.preview b/docs/data/base/components/slider/LabeledValuesSlider.tsx.preview deleted file mode 100644 index ab77eaafc..000000000 --- a/docs/data/base/components/slider/LabeledValuesSlider.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/base/components/slider/RangeSlider.js b/docs/data/base/components/slider/RangeSlider.js index 074b00a9e..a88543368 100644 --- a/docs/data/base/components/slider/RangeSlider.js +++ b/docs/data/base/components/slider/RangeSlider.js @@ -1,52 +1,49 @@ import * as React from 'react'; -import { styled, alpha, Box } from '@mui/system'; -import { Slider as BaseSlider, sliderClasses } from '@base_ui/react/Slider'; +import { styled, useTheme, Box } from '@mui/system'; +import * as BaseSlider from '@base_ui/react/Slider'; export default function RangeSlider() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); const [value, setValue] = React.useState([20, 37]); - const handleChange = (event, newValue) => { - setValue(newValue); - }; - return ( - + {/* controlled: */} 'Temperature range'} - getAriaValueText={valuetext} - min={0} - max={100} - /> + onValueChange={setValue} + aria-labelledby="ControlledRangeLabel" + > + + + + + + + + + + {/* uncontrolled: */} - 'Temperature range'} - getAriaValueText={valuetext} - min={0} - max={100} - /> + + + + + + + + + + + ); } -function valuetext(value) { - return `${value}°C`; -} - -const blue = { - 100: '#DAECFF', - 200: '#99CCF3', - 400: '#3399FF', - 300: '#66B2FF', - 500: '#007FFF', - 600: '#0072E5', - 700: '#0059B3', - 900: '#003A75', -}; - const grey = { 50: '#F3F6F9', 100: '#E5EAF2', @@ -60,98 +57,111 @@ const grey = { 900: '#1C2025', }; -const Slider = styled(BaseSlider)( - ({ theme }) => ` - color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - height: 6px; +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +const Slider = styled(BaseSlider.Root)` + font-family: 'IBM Plex Sans', sans-serif; + font-size: 1rem; width: 100%; - padding: 16px 0; - display: inline-flex; align-items: center; position: relative; - cursor: pointer; - touch-action: none; -webkit-tap-highlight-color: transparent; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +`; + +const SliderOutput = styled(BaseSlider.Output)` + text-align: right; +`; + +const SliderControl = styled(BaseSlider.Control)` + grid-column: 1/3; + display: flex; + align-items: center; + position: relative; + width: 100%; + height: 16px; + border-radius: 9999px; + touch-action: none; - &.${sliderClasses.disabled} { - pointer-events: none; - cursor: default; - color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; - opacity: 0.4; + &[data-disabled] { + cursor: not-allowed; } +`; - & .${sliderClasses.rail} { - display: block; - position: absolute; - width: 100%; - height: 4px; - border-radius: 6px; - background-color: currentColor; - opacity: 0.3; +const SliderTrack = styled(BaseSlider.Track)` + width: 100%; + height: 2px; + border-radius: 9999px; + background-color: ${grey[400]}; + touch-action: none; + + .dark & { + background-color: ${grey[700]}; + } +`; + +const SliderIndicator = styled(BaseSlider.Indicator)` + border-radius: 9999px; + background-color: black; + + .dark & { + background-color: ${grey[100]}; + } +`; + +const SliderThumb = styled(BaseSlider.Thumb)` + position: absolute; + width: 16px; + height: 16px; + box-sizing: border-box; + border-radius: 50%; + background-color: black; + transform: translateX(-50%); + touch-action: none; + + &:focus-visible { + outline: 2px solid black; + outline-offset: 2px; } - & .${sliderClasses.track} { - display: block; - position: absolute; - height: 4px; - border-radius: 6px; - background-color: currentColor; + .dark & { + background-color: ${grey[300]}; } - & .${sliderClasses.thumb} { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - margin-left: -6px; - width: 20px; - height: 20px; - box-sizing: border-box; - border-radius: 50%; - outline: 0; - background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - transition-property: box-shadow, transform; - transition-timing-function: ease; - transition-duration: 120ms; - transform-origin: center; - - &:hover { - box-shadow: 0 0 0 6px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[300], - 0.3, - )}; - } - - &.${sliderClasses.focusVisible} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - } - - &.${sliderClasses.active} { - box-shadow: 0 0 0 8px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[400], - 0.5, - )}; - outline: none; - transform: scale(1.2); - } + .dark &:focus-visible { + outline-color: ${grey[300]}; + outline-width: 1px; + outline-offset: 3px; } - & .${sliderClasses.mark} { - position: absolute; - width: 10px; - height: 10px; - border-radius: 99%; - background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]}; - top: 44%; - transform: translateX(-50%); + &[data-dragging='true'] { + background-color: pink; } - & .${sliderClasses.markActive} { - background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; + &[data-disabled], + .dark &[data-disabled] { + background-color: ${grey[600]}; + } + + .dark &[data-dragging='true'] { + background-color: pink; + } +`; + +// we can't use a