UI: Increase border contrast of Checkbox, Radio, and Range

code/addons/docs/src/blocks/controls/Range.tsx

@@ -11,148 +11,128 @@ import type { ControlProps, NumberValue, RangeConfig } from './types';
 type RangeProps = ControlProps<NumberValue | null> & RangeConfig;
 
 const RangeInput = styled.input<{ min: number; max: number; value: number }>(
-  ({ theme, min, max, value, disabled }) => ({
-    // Resytled using http://danielstern.ca/range.css/#/
-    '&': {
-      width: '100%',
-      backgroundColor: 'transparent',
-      appearance: 'none',
-    },
-
-    '&::-webkit-slider-runnable-track': {
-      background:
-        theme.base === 'light'
-          ? `linear-gradient(to right, 
-            ${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%, 
-            ${darken(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%, 
-            ${darken(0.02, theme.input.background)} 100%)`
-          : `linear-gradient(to right, 
-            ${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%, 
-            ${lighten(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%, 
-            ${lighten(0.02, theme.input.background)} 100%)`,
-      boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
+  ({ theme, min, max, value, disabled }) => {
+    // Shared track background gradient
+    const trackBackground =
+      theme.base === 'light'
+        ? `linear-gradient(to right, 
+          ${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%, 
+          ${darken(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%, 
+          ${darken(0.02, theme.input.background)} 100%)`
+        : `linear-gradient(to right, 
+          ${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%, 
+          ${lighten(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%, 
+          ${lighten(0.02, theme.input.background)} 100%)`;
+
+    // Shared track base styles
+    const trackBaseStyles = {
+      background: trackBackground,
       borderRadius: 6,
-      width: '100%',
-      height: 6,
+      boxShadow: `${theme.base == 'dark' ? 'hsl(0 0 100 / 0.4)' : 'hsl(0 0 0 / 0.44)'} 0 0 0 1px inset`,
       cursor: disabled ? 'not-allowed' : 'pointer',
-    },
+      height: 6,
+      width: '100%',
+    };
+
+    const trackFocusStyles = {
+      borderColor: rgba(theme.color.secondary, 0.4),
+    };
 
-    '&::-webkit-slider-thumb': {
-      marginTop: '-6px',
+    // Shared thumb base styles
+    const thumbBaseStyles = {
       width: 16,
       height: 16,
-
-      border: `1px solid ${theme.appBorderColor}`,
-      borderRadius: '50px',
-      boxShadow:
-        theme.base === 'light' ? `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}` : 'unset',
+      borderRadius: 50,
       cursor: disabled ? 'not-allowed' : 'grab',
-      appearance: 'none',
       background: theme.input.background,
+      border: `1px solid ${theme.base == 'dark' ? 'hsl(0 0 100 / 0.4)' : 'hsl(0 0 0 / 0.44)'}`,
+      boxShadow:
+        theme.base === 'light' ? `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}` : 'unset',
       transition: 'all 150ms ease-out',
+    };
+
+    // Shared thumb hover styles
+    const thumbHoverStyles = {
+      background: `${darken(0.05, theme.input.background)}`,
+      transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
+      transition: 'all 50ms ease-out',
+    };
+
+    // Shared thumb active styles
+    const thumbActiveStyles = {
+      background: `${theme.input.background}`,
+      transform: 'scale3d(1, 1, 1) translateY(0px)',
+    };
+
+    const thumbFocusStyles = {
+      borderColor: theme.color.secondary,
+      boxShadow: theme.base === 'light' ? `0 0px 5px 0px ${theme.color.secondary}` : 'unset',
+    };
+
+    return {
+      // Restyled using http://danielstern.ca/range.css/#/
+      appearance: 'none',
+      backgroundColor: 'transparent',
+      width: '100%',
 
-      '&:hover': {
-        background: `${darken(0.05, theme.input.background)}`,
-        transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
-        transition: 'all 50ms ease-out',
-      },
+      // Track styles
+      '&::-webkit-slider-runnable-track': trackBaseStyles,
+
+      '&::-moz-range-track': trackBaseStyles,
 
-      '&:active': {
-        background: `${theme.input.background}`,
-        transform: 'scale3d(1, 1, 1) translateY(0px)',
-        cursor: disabled ? 'not-allowed' : 'grab',
+      '&::-ms-track': {
+        ...trackBaseStyles,
+        color: 'transparent',
       },
-    },
 
-    '&:focus': {
-      outline: 'none',
+      // Thumb styles
+      '&::-moz-range-thumb': {
+        ...thumbBaseStyles,
 
-      '&::-webkit-slider-runnable-track': {
-        borderColor: rgba(theme.color.secondary, 0.4),
+        '&:hover': thumbHoverStyles,
+        '&:active': thumbActiveStyles,
       },
 
       '&::-webkit-slider-thumb': {
-        borderColor: theme.color.secondary,
-        boxShadow: theme.base === 'light' ? `0 0px 5px 0px ${theme.color.secondary}` : 'unset',
+        ...thumbBaseStyles,
+        marginTop: '-6px',
+        appearance: 'none',
+
+        '&:hover': thumbHoverStyles,
+        '&:active': thumbActiveStyles,
       },
-    },
-
-    '&::-moz-range-track': {
-      background:
-        theme.base === 'light'
-          ? `linear-gradient(to right, 
-            ${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%, 
-            ${darken(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%, 
-            ${darken(0.02, theme.input.background)} 100%)`
-          : `linear-gradient(to right, 
-            ${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%, 
-            ${lighten(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%, 
-            ${lighten(0.02, theme.input.background)} 100%)`,
-      boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
-      borderRadius: 6,
-      width: '100%',
-      height: 6,
-      cursor: disabled ? 'not-allowed' : 'pointer',
-      outline: 'none',
-    },
 
-    '&::-moz-range-thumb': {
-      width: 16,
-      height: 16,
-      border: `1px solid ${theme.appBorderColor}`,
-      borderRadius: '50px',
-      boxShadow:
-        theme.base === 'light' ? `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}` : 'unset',
-      cursor: disabled ? 'not-allowed' : 'grab',
-      background: theme.input.background,
-      transition: 'all 150ms ease-out',
+      '&::-ms-thumb': {
+        ...thumbBaseStyles,
+        marginTop: 0,
 
-      '&:hover': {
-        background: `${darken(0.05, theme.input.background)}`,
-        transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
-        transition: 'all 50ms ease-out',
+        '&:hover': thumbHoverStyles,
+        '&:active': thumbActiveStyles,
       },
 
-      '&:active': {
-        background: `${theme.input.background}`,
-        transform: 'scale3d(1, 1, 1) translateY(0px)',
-        cursor: 'grabbing',
+      '&:focus': {
+        outline: 'none',
+
+        '&::-webkit-slider-runnable-track': trackFocusStyles,
+        '&::-moz-range-track': trackFocusStyles,
+        '&::-ms-track': trackFocusStyles,
+
+        '&::-webkit-slider-thumb': thumbFocusStyles,
+        '&::-moz-range-thumb': thumbFocusStyles,
+        '&::-ms-thumb': thumbFocusStyles,
       },
-    },
-    '&::-ms-track': {
-      background:
-        theme.base === 'light'
-          ? `linear-gradient(to right, 
-            ${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%, 
-            ${darken(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%, 
-            ${darken(0.02, theme.input.background)} 100%)`
-          : `linear-gradient(to right, 
-            ${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%, 
-            ${lighten(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%, 
-            ${lighten(0.02, theme.input.background)} 100%)`,
-      boxShadow: theme.base === 'light' ? `${theme.appBorderColor} 0 0 0 1px inset` : 'unset',
-      color: 'transparent',
-      width: '100%',
-      height: '6px',
-      cursor: 'pointer',
-    },
-    '&::-ms-fill-lower': {
-      borderRadius: 6,
-    },
-    '&::-ms-fill-upper': {
-      borderRadius: 6,
-    },
-    '&::-ms-thumb': {
-      width: 16,
-      height: 16,
-      background: theme.input.background,
-      border: `1px solid ${rgba(theme.appBorderColor, 0.2)}`,
-      borderRadius: 50,
-      cursor: disabled ? 'not-allowed' : 'grab',
-      marginTop: 0,
-    },
-    '@supports (-ms-ime-align:auto)': { 'input[type=range]': { margin: '0' } },
-  })
+
+      '&::-ms-fill-lower': {
+        borderRadius: 6,
+      },
+
+      '&::-ms-fill-upper': {
+        borderRadius: 6,
+      },
+
+      '@supports (-ms-ime-align:auto)': { 'input[type=range]': { margin: '0' } },
+    };
+  }
 );
 
 const RangeLabel = styled.span({

code/core/src/components/components/Form/Checkbox.tsx

@@ -4,27 +4,30 @@ import { color, styled } from 'storybook/theming';
 
 const Input = styled.input(({ theme }) => ({
   appearance: 'none',
+  backgroundColor: theme.input.background,
+  border: `1px solid ${theme.base == 'dark' ? 'hsl(0 0 100 / 0.4)' : 'hsl(0 0 0 / 0.44)'}`,
+  //border: `1px solid ${theme.input.border}`,
+  borderRadius: 2,
   display: 'grid',
-  placeContent: 'center',
-  width: 14,
-  height: 14,
   flexShrink: 0,
+  height: 14,
   margin: 0,
-  border: `1px solid ${theme.input.border}`,
-  borderRadius: 2,
-  backgroundColor: theme.input.background,
+  placeContent: 'center',
   transition: 'background-color 0.1s',
+  width: 14,
 
   '&:enabled': {
     cursor: 'pointer',
   },
   '&:disabled': {
-    backgroundColor: theme.base === 'light' ? color.light : 'transparent',
+    backgroundColor: 'transparent',
+    borderColor: theme.input.border,
   },
   '&:disabled:checked, &:disabled:indeterminate': {
-    backgroundColor: theme.base === 'light' ? color.mediumdark : theme.color.dark,
+    backgroundColor: theme.base === 'dark' ? color.dark : theme.color.mediumdark,
   },
   '&:checked, &:indeterminate': {
+    border: 'none',
     backgroundColor: color.secondary,
   },
   '&:checked::before': {

code/core/src/components/components/Form/Radio.tsx

@@ -4,28 +4,31 @@ import { color, styled } from 'storybook/theming';
 
 const Input = styled.input(({ theme }) => ({
   appearance: 'none',
+  backgroundColor: theme.input.background,
+  border: `1px solid ${theme.base == 'dark' ? 'hsl(0 0 100 / 0.4)' : 'hsl(0 0 0 / 0.44)'}`,
+  borderRadius: 8,
   display: 'grid',
-  placeContent: 'center',
-  width: 16,
-  height: 16,
   flexShrink: 0,
+  height: 16,
   margin: -1,
-  border: `1px solid ${theme.input.border}`,
-  borderRadius: 8,
-  backgroundColor: theme.input.background,
+  placeContent: 'center',
   transition: 'background-color 0.1s',
+  width: 16,
 
   '&:enabled': {
     cursor: 'pointer',
   },
   '&:disabled': {
-    backgroundColor: theme.base === 'light' ? color.light : 'transparent',
+    backgroundColor: 'transparent',
+    borderColor: theme.input.border,
   },
   '&:disabled:checked': {
-    backgroundColor: theme.base === 'light' ? color.light : theme.color.mediumdark,
+    backgroundColor: theme.base === 'dark' ? color.dark : theme.color.mediumdark,
+    borderColor: theme.base === 'dark' ? color.dark : theme.color.mediumdark,
   },
   '&:checked': {
     backgroundColor: color.secondary,
+    borderColor: color.secondary,
     boxShadow: `inset 0 0 0 2px ${theme.input.background}`,
   },
   '&:enabled:focus-visible': {