feat(comp): Slider component - design update

.changeset/giant-colts-move.md

@@ -0,0 +1,8 @@
+---
+"docs": patch
+"@marigold/components": patch
+"@marigold/theme-b2b": patch
+"@marigold/theme-unicorn": patch
+---
+
+Slider component - design update

docs/content/components/slider.mdx

@@ -7,13 +7,13 @@ title: Slider
 ## Description
 
 With the Slider component you can add a HTML `<input>` element with `type="range"` to your form.
-The variant can be added with the variant prop. The default variant is `slider`.
+The variant can be added with the variant prop. The default variant ist `default`.
 
 ## Properties
 
-| Property             | Type     | Default  |
-| :------------------- | :------- | :------- |
-| `variant` (optional) | `string` | `slider` |
+| Property             | Type     | Default   |
+| :------------------- | :------- | :-------- |
+| `variant` (optional) | `string` | `default` |
 
 ## Import
 
@@ -24,31 +24,51 @@ import { Slider } from '@marigold/components';
 ## Live-Code Example
 
 ```tsx expandCode
-<Slider id="vol" name="vol" min="0" max="50" />
+<Label htmlFor="slider">
+  Slider:
+  <br />
+  <Slider id="slider" name="slider" min="0" max="50" />
+</Label>
 ```
 
 ## Usage
 
-### Slider with default range and fix value
+### Slider with default range
 
 ```tsx
-<Label htmlFor="vol">
-  Volume:
+<Label htmlFor="slider2">
+  Default range:
   <br />
-  <Slider id="vol" name="vol" min="0" max="50" />
+  <Slider id="slider2" name="slider" min="0" max="50" />
+</Label>
+```
+
+### Slider with fixed value
+
+```tsx
+<Label htmlFor="slider3">
+  Fix value:
   <br />
-  <Slider id="vol" name="vol" min="0" max="50" value="25" />
+  <Slider id="slider3" name="slider" min="0" max="50" value="25" />
 </Label>
 ```
 
 ### Slider with steps
 
 ```tsx
-<Label htmlFor="vol">
-  Volume:
+<Label htmlFor="slider4">
+  Slider with steps:
   <br />
-  <Slider id="vol" name="vol" min="0" max="100" step="10"></Slider>
+  <Slider id="slider4" name="slider" min="0" max="100" step="10" />
+</Label>
+```
+
+### Slider disabled
+
+```tsx
+<Label htmlFor="slider5">
+  Disabled:
   <br />
-  <Slider id="vol" name="vol" min="20" max="80" step="5"></Slider>
+  <Slider id="slider5" name="slider" min="0" max="100" disabled />
 </Label>
 ```

packages/components/src/Slider/Slider.stories.mdx

@@ -11,7 +11,7 @@ import { Slider } from './Slider';
       description: 'Style',
       table: {
         defaultValue: {
-          summary: 'slider',
+          summary: 'default',
         },
       },
     },

packages/components/src/Slider/Slider.test.tsx

@@ -4,11 +4,11 @@ import { ThemeProvider } from '@marigold/system';
 import { Slider } from './Slider';
 
 const theme = {
-  form: {
-    slider: {
+  slider: {
+    default: {
       fontFamily: 'Oswald Regular',
     },
-    range: {
+    special: {
       fontFamily: 'Inter',
     },
   },
@@ -28,7 +28,7 @@ test('supports default variant and themeSection', () => {
 test('accepts other variant than default', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Slider variant="range" title="slider" />
+      <Slider variant="special" title="slider" />
     </ThemeProvider>
   );
   const slider = screen.getByTitle(/slider/);

packages/components/src/Slider/Slider.tsx

@@ -2,22 +2,31 @@ import React from 'react';
 import { useStyles } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 
+import { Box } from '../Box';
+
 export type SliderProps = {
   variant?: string;
 } & ComponentProps<'input'>;
 
 export const Slider: React.FC<SliderProps> = ({
-  variant = 'slider',
+  variant = 'default',
   className,
   ...props
 }) => {
   const classNames = useStyles({
-    variant: `form.${variant}`,
     css: {
       verticalAlign: 'middle',
     },
     className,
   });
 
-  return <input type="range" className={classNames} {...props} />;
+  return (
+    <Box
+      as="input"
+      type="range"
+      variant={`slider.${variant}`}
+      className={classNames}
+      {...props}
+    />
+  );
 };

themes/theme-b2b/src/index.ts

@@ -176,6 +176,25 @@ const selectOption = {
   px: 'xsmall',
   listStyle: 'none',
 };
+const sliderThumb = {
+  WebkitAppearance: 'none',
+  boxSizing: 'border-box',
+  border: '4px solid ' + colors.gray70,
+  width: '16px',
+  height: '16px',
+  background: colors.gray00,
+  borderRadius: '8px',
+  cursor: 'pointer',
+  marginTop: '-4px',
+};
+const sliderTrack = {
+  WebkitAppearance: 'none',
+  width: '100%',
+  height: '8px',
+  background: colors.gray30,
+  borderRadius: '8px',
+  border: 'none',
+};
 
 const theme: BaseTheme = {
   breakpoints: ['768', '1200'],
@@ -681,6 +700,73 @@ const theme: BaseTheme = {
       },
     },
   },
+  slider: {
+    default: {
+      // styles need to be applied to range inputs in all browsers to override their basic appearance.
+      WebkitAppearance: 'none',
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: 'transparent',
+      ':focus': {
+        outline: 'none',
+      },
+      // chrome, safari, opera (theres actually no webkit option to style the progress bar like in firefox)
+      '&::-webkit-slider-thumb': {
+        ...sliderThumb,
+      },
+      '&:focus::-webkit-slider-thumb': {
+        ...sliderThumb,
+        border: '4px solid ' + colors.blue60,
+      },
+      '&:disabled::-webkit-slider-thumb': {
+        ...sliderThumb,
+        border: '4px solid ' + colors.gray40,
+        background: colors.gray40,
+      },
+      '&::-webkit-slider-runnable-track': {
+        ...sliderTrack,
+      },
+      '&:focus::-webkit-slider-runnable-track': {
+        ...sliderTrack,
+        background: colors.blue60,
+      },
+      '&:disabled::-webkit-slider-runnable-track': {
+        ...sliderTrack,
+        background: colors.gray40,
+      },
+      '&::-webkit-progress-value': {
+        background: colors.green60,
+      },
+      // firefox
+      '&::-moz-range-thumb': {
+        ...sliderThumb,
+      },
+      '&:focus::-moz-range-thumb': {
+        ...sliderThumb,
+        border: '4px solid ' + colors.blue60,
+      },
+      '&:disabled::-moz-range-thumb': {
+        ...sliderThumb,
+        border: '4px solid ' + colors.gray40,
+        background: colors.gray40,
+      },
+      '&::-moz-range-track': {
+        ...sliderTrack,
+      },
+      '&::-moz-range-progress': {
+        ...sliderTrack,
+        background: colors.gray70,
+      },
+      '&:focus::-moz-range-progress': {
+        ...sliderTrack,
+        background: colors.blue60,
+      },
+      '&:disabled::-moz-range-progress': {
+        ...sliderTrack,
+        background: colors.gray40,
+      },
+    },
+  },
   validation: {
     error: {
       ...text.root,

themes/theme-core/src/index.ts

@@ -181,6 +181,25 @@ const selectOption = {
   listStyle: 'none',
   bg: colors.gray00,
 };
+const sliderThumb = {
+  WebkitAppearance: 'none',
+  boxSizing: 'border-box',
+  border: '4px solid ' + colors.gray70,
+  width: '16px',
+  height: '16px',
+  background: colors.gray00,
+  borderRadius: '8px',
+  cursor: 'pointer',
+  marginTop: '-4px',
+};
+const sliderTrack = {
+  WebkitAppearance: 'none',
+  width: '100%',
+  height: '8px',
+  background: colors.gray30,
+  borderRadius: '8px',
+  border: 'none',
+};
 
 const theme: BaseTheme = {
   breakpoints: ['768', '1200'],
@@ -700,6 +719,73 @@ const theme: BaseTheme = {
       },
     },
   },
+  slider: {
+    default: {
+      // styles need to be applied to range inputs in all browsers to override their basic appearance.
+      WebkitAppearance: 'none',
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: 'transparent',
+      ':focus': {
+        outline: 'none',
+      },
+      // chrome, safari, opera (theres actually no webkit option to style the progress bar like in firefox)
+      '&::-webkit-slider-thumb': {
+        ...sliderThumb,
+      },
+      '&:focus::-webkit-slider-thumb': {
+        ...sliderThumb,
+        border: '4px solid ' + colors.blue60,
+      },
+      '&:disabled::-webkit-slider-thumb': {
+        ...sliderThumb,
+        border: '4px solid ' + colors.gray40,
+        background: colors.gray40,
+      },
+      '&::-webkit-slider-runnable-track': {
+        ...sliderTrack,
+      },
+      '&:focus::-webkit-slider-runnable-track': {
+        ...sliderTrack,
+        background: colors.blue60,
+      },
+      '&:disabled::-webkit-slider-runnable-track': {
+        ...sliderTrack,
+        background: colors.gray40,
+      },
+      '&::-webkit-progress-value': {
+        background: colors.green60,
+      },
+      // firefox
+      '&::-moz-range-thumb': {
+        ...sliderThumb,
+      },
+      '&:focus::-moz-range-thumb': {
+        ...sliderThumb,
+        border: '4px solid ' + colors.blue60,
+      },
+      '&:disabled::-moz-range-thumb': {
+        ...sliderThumb,
+        border: '4px solid ' + colors.gray40,
+        background: colors.gray40,
+      },
+      '&::-moz-range-track': {
+        ...sliderTrack,
+      },
+      '&::-moz-range-progress': {
+        ...sliderTrack,
+        background: colors.gray70,
+      },
+      '&:focus::-moz-range-progress': {
+        ...sliderTrack,
+        background: colors.blue60,
+      },
+      '&:disabled::-moz-range-progress': {
+        ...sliderTrack,
+        background: colors.gray40,
+      },
+    },
+  },
   validation: {
     error: {
       ...text.root,