feat(Kbd): add color prop

playground/pages/kbd.vue

@@ -1,6 +1,28 @@
+<script setup lang="ts">
+import theme from '#build/ui/kbd'
+
+const sizes = Object.keys(theme.variants.size)
+</script>
+
 <template>
-  <div class="flex items-center gap-1">
+  <div class="flex flex-col gap-2">
-    <UKbd value="⌘" />
+    <div class="flex items-center gap-1">
-    <UKbd value="K" />
+      <UKbd value="⌘" />
+      <UKbd value="K" />
+    </div>
+    <div class="flex items-center gap-1">
+      <UKbd value="⌘" color="gray" />
+      <UKbd value="K" color="gray" />
+    </div>
+    <div class="flex items-center gap-1">
+      <UKbd value="⌘" color="black" />
+      <UKbd value="K" color="black" />
+    </div>
+    <div class="flex items-center gap-1 -ml-[41px]">
+      <template v-for="size in sizes" :key="size">
+        <UKbd value="⌘" :size="(size as any)" />
+        <UKbd value="K" :size="(size as any)" />
+      </template>
+    </div>
   </div>
 </template>

src/runtime/components/Kbd.vue

@@ -13,6 +13,7 @@ type KbdVariants = VariantProps<typeof kbd>
 
 export interface KbdProps extends Omit<PrimitiveProps, 'asChild'> {
   value?: string
+  color?: KbdVariants['color']
   size?: KbdVariants['size']
   class?: any
 }
@@ -30,7 +31,7 @@ defineSlots<KbdSlots>()
 </script>
 
 <template>
-  <Primitive :as="as" :class="kbd({ size, class: props.class })">
+  <Primitive :as="as" :class="kbd({ color, size, class: props.class })">
     <slot>
       {{ value }}
     </slot>

src/theme/kbd.ts

@@ -1,6 +1,11 @@
 export default {
-  base: 'inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset',
+  base: 'inline-flex items-center justify-center px-1 rounded font-medium font-sans',
   variants: {
+    color: {
+      white: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700',
+      gray: 'bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 ring ring-inset ring-gray-300 dark:ring-gray-700',
+      black: 'bg-gray-900 dark:bg-white text-white dark:text-gray-900'
+    },
     size: {
       xs: 'h-4 min-w-[16px] text-[10px]',
       sm: 'h-5 min-w-[20px] text-[11px]',
@@ -8,6 +13,7 @@ export default {
     }
   },
   defaultVariants: {
+    color: 'white',
     size: 'sm'
   }
 }

test/components/Kbd.spec.ts

@@ -10,6 +10,9 @@ describe('Kbd', () => {
     ['with size xs', { props: { value: 'K', size: 'xs' as const } }],
     ['with size sm', { props: { value: 'K', size: 'sm' as const } }],
     ['with size md', { props: { value: 'K', size: 'md' as const } }],
+    ['with color white', { props: { value: 'K', color: 'white' as const } }],
+    ['with color gray', { props: { value: 'K', color: 'gray' as const } }],
+    ['with color black', { props: { value: 'K', color: 'black' as const } }],
     ['with default slot', { slots: { default: () => 'Default slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: KbdProps, slots?: any }) => {
     const html = await ComponentRender(nameOrHtml, options, Kbd)

test/components/__snapshots__/Kbd.spec.ts.snap

@@ -1,15 +1,21 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Kbd > renders with as correctly 1`] = `"<span class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">K</span>"`;
+exports[`Kbd > renders with as correctly 1`] = `"<span class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">K</span>"`;
 
-exports[`Kbd > renders with class correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px] font-bold">K</kbd>"`;
+exports[`Kbd > renders with class correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px] font-bold">K</kbd>"`;
 
-exports[`Kbd > renders with default slot correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">Default slot</kbd>"`;
+exports[`Kbd > renders with color black correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-gray-900 dark:bg-white text-white dark:text-gray-900 h-5 min-w-[20px] text-[11px]">K</kbd>"`;
 
-exports[`Kbd > renders with size md correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-6 min-w-[24px] text-[12px]">K</kbd>"`;
+exports[`Kbd > renders with color gray correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">K</kbd>"`;
 
-exports[`Kbd > renders with size sm correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">K</kbd>"`;
+exports[`Kbd > renders with color white correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">K</kbd>"`;
 
-exports[`Kbd > renders with size xs correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-4 min-w-[16px] text-[10px]">K</kbd>"`;
+exports[`Kbd > renders with default slot correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">Default slot</kbd>"`;
 
-exports[`Kbd > renders with value correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">K</kbd>"`;
+exports[`Kbd > renders with size md correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-6 min-w-[24px] text-[12px]">K</kbd>"`;
+
+exports[`Kbd > renders with size sm correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">K</kbd>"`;
+
+exports[`Kbd > renders with size xs correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-4 min-w-[16px] text-[10px]">K</kbd>"`;
+
+exports[`Kbd > renders with value correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded font-medium font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 h-5 min-w-[20px] text-[11px]">K</kbd>"`;