feat(Checkbox/Progress/RadioGroup/Slider/Switch): add black color

src/runtime/components/Checkbox.vue

@@ -72,8 +72,7 @@ const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
   color: color.value,
   required: props.required,
   disabled: disabled.value,
-  checked: modelValue.value ?? props.defaultValue,
-  indeterminate: indeterminate.value
+  checked: (modelValue.value ?? props.defaultValue) || indeterminate.value
 }))
 </script>
 

src/theme/checkbox.ts

@@ -1,7 +1,7 @@
 export default (config: { colors: string[] }) => ({
   slots: {
     root: 'relative flex items-start',
-    base: 'shrink-0 flex items-center justify-center text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
+    base: 'shrink-0 flex items-center justify-center rounded text-white dark:text-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
     container: 'flex items-center',
     wrapper: 'ms-2',
     icon: 'shrink-0 size-full',
@@ -9,7 +9,10 @@ export default (config: { colors: string[] }) => ({
     description: 'text-gray-500 dark:text-gray-400'
   },
   variants: {
-    color: Object.fromEntries(config.colors.map((color: string) => [color, `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`])),
+    color: {
+      ...Object.fromEntries(config.colors.map((color: string) => [color, `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`])),
+      black: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white'
+    },
     size: {
       xs: {
         base: 'size-3',
@@ -51,21 +54,17 @@ export default (config: { colors: string[] }) => ({
     },
     checked: {
       true: ''
-    },
-    indeterminate: {
-      true: ''
     }
   },
-  compoundVariants: config.colors.flatMap(color => ([{
+  compoundVariants: [...config.colors.map((color: string) => ({
     color,
     checked: true,
-    class: `ring-2 ring-inset ring-${color}-500 dark:ring-${color}-400 bg-${color}-500 dark:bg-${color}-400`
-  }, {
-    color,
-    indeterminate: true,
-    class: `ring-2 ring-inset ring-${color}-500 dark:ring-${color}-400 bg-${color}-500 dark:bg-${color}-400`
-  }
-  ])),
+    class: `ring-2 ring-${color}-500 dark:ring-${color}-400 bg-${color}-500 dark:bg-${color}-400`
+  })), {
+    color: 'black',
+    checked: true,
+    class: 'ring-2 ring-gray-900 dark:ring-white bg-gray-900 dark:bg-white'
+  }],
   defaultVariants: {
     size: 'md',
     color: 'primary'

src/theme/progress.ts

@@ -14,10 +14,16 @@ export default (config: { colors: string[] }) => ({
       'swing': '',
       'elastic': ''
     },
-    color: Object.fromEntries(config.colors.map((color: string) => [color, {
-      indicator: `bg-${color}-500 dark:bg-${color}-400`,
-      steps: `text-${color}-500 dark:text-${color}-400`
-    }])),
+    color: {
+      ...Object.fromEntries(config.colors.map((color: string) => [color, {
+        indicator: `bg-${color}-500 dark:bg-${color}-400`,
+        steps: `text-${color}-500 dark:text-${color}-400`
+      }])),
+      black: {
+        indicator: 'bg-gray-900 dark:bg-white',
+        steps: 'text-white dark:text-gray-900'
+      }
+    },
     size: {
       '2xs': {
         status: 'text-xs',

src/theme/radio-group.ts

@@ -12,10 +12,16 @@ export default (config: { colors: string[] }) => ({
     description: 'text-gray-500 dark:text-gray-400'
   },
   variants: {
-    color: Object.fromEntries(config.colors.map((color: string) => [color, {
-      base: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`,
-      indicator: `bg-${color}-500 dark:bg-${color}-400`
-    }])),
+    color: {
+      ...Object.fromEntries(config.colors.map((color: string) => [color, {
+        base: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`,
+        indicator: `bg-${color}-500 dark:bg-${color}-400`
+      }])),
+      black: {
+        base: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white',
+        indicator: 'bg-gray-900 dark:bg-white'
+      }
+    },
     orientation: {
       horizontal: {
         fieldset: 'flex-row',

src/theme/slider.ts

@@ -6,10 +6,16 @@ export default (config: { colors: string[] }) => ({
     thumb: 'rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2'
   },
   variants: {
-    color: Object.fromEntries(config.colors.map((color: string) => [color, {
-      range: `bg-${color}-500 dark:bg-${color}-400`,
-      thumb: `ring-${color}-500 dark:ring-${color}-400 focus-visible:outline-${color}-500/50 dark:focus-visible:outline-${color}-400/50`
-    }])),
+    color: {
+      ...Object.fromEntries(config.colors.map((color: string) => [color, {
+        range: `bg-${color}-500 dark:bg-${color}-400`,
+        thumb: `ring-${color}-500 dark:ring-${color}-400 focus-visible:outline-${color}-500/50 dark:focus-visible:outline-${color}-400/50`
+      }])),
+      black: {
+        range: 'bg-gray-900 dark:bg-white',
+        thumb: 'ring-gray-900 dark:ring-white focus-visible:outline-gray-900/50 dark:focus-visible:outline-white/50'
+      }
+    },
     size: {
       xs: {
         thumb: 'size-3'

src/theme/switch.ts

@@ -10,10 +10,16 @@ export default (config: { colors: string[] }) => ({
     description: 'text-gray-500 dark:text-gray-400'
   },
   variants: {
-    color: Object.fromEntries(config.colors.map((color: string) => [color, {
-      base: `data-[state=checked]:bg-${color}-500 dark:data-[state=checked]:bg-${color}-400 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
-      icon: `group-data-[state=checked]:text-${color}-500 dark:group-data-[state=checked]:text-${color}-400`
-    }])),
+    color: {
+      ...Object.fromEntries(config.colors.map((color: string) => [color, {
+        base: `data-[state=checked]:bg-${color}-500 dark:data-[state=checked]:bg-${color}-400 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
+        icon: `group-data-[state=checked]:text-${color}-500 dark:group-data-[state=checked]:text-${color}-400`
+      }])),
+      black: {
+        base: 'data-[state=checked]:bg-gray-900 dark:data-[state=checked]:bg-white focus-visible:ring-gray-900 dark:focus-visible:ring-white',
+        icon: 'group-data-[state=checked]:text-gray-900 dark:group-data-[state=checked]:text-white'
+      }
+    },
     size: {
       xs: {
         base: 'w-7',