From 2cc41dedcfe73183a285a5ce5e7192290926771b Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 5 Apr 2024 15:43:41 +0200
Subject: [PATCH] feat(Kbd): add `color` prop

---
 playground/pages/kbd.vue                      | 28 +++++++++++++++++--
 src/runtime/components/Kbd.vue                |  3 +-
 src/theme/kbd.ts                              |  8 +++++-
 test/components/Kbd.spec.ts                   |  3 ++
 .../components/__snapshots__/Kbd.spec.ts.snap | 20 ++++++++-----
 5 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/playground/pages/kbd.vue b/playground/pages/kbd.vue
index 52f917b6..31d6f7a8 100644
--- a/playground/pages/kbd.vue
+++ b/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">
-    <UKbd value="⌘" />
-    <UKbd value="K" />
+  <div class="flex flex-col gap-2">
+    <div class="flex items-center gap-1">
+      <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>
diff --git a/src/runtime/components/Kbd.vue b/src/runtime/components/Kbd.vue
index 6da5d5f0..b3221ba7 100644
--- a/src/runtime/components/Kbd.vue
+++ b/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>
diff --git a/src/theme/kbd.ts b/src/theme/kbd.ts
index 706a379e..a366bda0 100644
--- a/src/theme/kbd.ts
+++ b/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'
   }
 }
diff --git a/test/components/Kbd.spec.ts b/test/components/Kbd.spec.ts
index 6487db9d..c3c714d6 100644
--- a/test/components/Kbd.spec.ts
+++ b/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)
diff --git a/test/components/__snapshots__/Kbd.spec.ts.snap b/test/components/__snapshots__/Kbd.spec.ts.snap
index 2eaca1dd..c11b26a4 100644
--- a/test/components/__snapshots__/Kbd.spec.ts.snap
+++ b/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>"`;