[base-ui][Slider] Refine demos (#39526)

mui · Oct 20, 2023 · e00fa56 · e00fa56
1 parent dee1c9c
commit e00fa56
Show file tree

Hide file tree

Showing 22 changed files with 256 additions and 174 deletions.
diff --git a/docs/data/base/components/slider/DiscreteSlider.js b/docs/data/base/components/slider/DiscreteSlider.js
@@ -39,6 +39,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -67,10 +68,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -109,20 +106,26 @@ const Slider = styled(BaseSlider)(
     display: flex;
     flex-direction: column-reverse;
 
-    :hover,
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
       )};
     }
+    
+    &.${sliderClasses.focusVisible} {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+      outline: none;
+    }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
+
   }
 
   & .${sliderClasses.mark} {

diff --git a/docs/data/base/components/slider/DiscreteSlider.tsx b/docs/data/base/components/slider/DiscreteSlider.tsx
@@ -38,6 +38,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -66,10 +67,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -108,20 +105,26 @@ const Slider = styled(BaseSlider)(
     display: flex;
     flex-direction: column-reverse;
 
-    :hover,
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
       )};
     }
+    
+    &.${sliderClasses.focusVisible} {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+      outline: none;
+    }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
+
   }
 
   & .${sliderClasses.mark} {

diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.js b/docs/data/base/components/slider/DiscreteSliderMarks.js
@@ -45,6 +45,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -73,10 +74,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -113,19 +110,24 @@ const Slider = styled(BaseSlider)(
     border: 3px solid currentColor;
     background-color: #fff;
 
-    :hover,
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
       )};
     }
+    
+    &.${sliderClasses.focusVisible} {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+      outline: none;
+    }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
   }
 

diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.tsx b/docs/data/base/components/slider/DiscreteSliderMarks.tsx
@@ -45,6 +45,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -73,10 +74,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -113,19 +110,24 @@ const Slider = styled(BaseSlider)(
     border: 3px solid currentColor;
     background-color: #fff;
 
-    :hover,
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
       )};
     }
+    
+    &.${sliderClasses.focusVisible} {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+      outline: none;
+    }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
   }
 

diff --git a/docs/data/base/components/slider/DiscreteSliderValues.js b/docs/data/base/components/slider/DiscreteSliderValues.js
@@ -46,6 +46,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -74,10 +75,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -115,17 +112,24 @@ const Slider = styled(BaseSlider)(
     border: 3px solid currentColor;
     background-color: #fff;
 
-    :hover,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
+      )};
+    }
+    
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
       outline: none;
     }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
   }
 

diff --git a/docs/data/base/components/slider/DiscreteSliderValues.tsx b/docs/data/base/components/slider/DiscreteSliderValues.tsx
@@ -46,6 +46,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -74,10 +75,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -115,17 +112,24 @@ const Slider = styled(BaseSlider)(
     border: 3px solid currentColor;
     background-color: #fff;
 
-    :hover,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
+      )};
+    }
+    
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
       outline: none;
     }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
   }
 

diff --git a/docs/data/base/components/slider/LabeledValuesSlider.js b/docs/data/base/components/slider/LabeledValuesSlider.js
@@ -30,6 +30,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -57,9 +58,7 @@ const Slider = styled(BaseSlider)(
   cursor: pointer;
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
-  &:hover {
-    opacity: 1;
-  }
+
   &.${sliderClasses.disabled} {
     pointer-events: none;
     cursor: default;
@@ -92,17 +91,31 @@ const Slider = styled(BaseSlider)(
     outline: 0;
     border: 3px solid currentColor;
     background-color: #fff;
-    :hover,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
+      )};
+    }
+    
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+      outline: none;
+    }
+
+    &.${sliderClasses.active} {
+      box-shadow: 0 0 0 5px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.5,
+      )};
       outline: none;
     }
     & .label {
         font-family: IBM Plex Sans;
         font-weight: 600;
         font-size: 14px;
         background: unset;
-        background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+        background-color: ${theme.palette.mode === 'light' ? blue[600] : blue[900]};
         width: 32px;
         height: 32px;
         padding: 0px;
@@ -125,10 +138,8 @@ const Slider = styled(BaseSlider)(
         text-align: center;
     }
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[600] : blue[300]};
+      outline: none;
     }
   }
 `,