arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-20 06:51:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Kbd): add color prop

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-05 15:43:41 +02:00
parent 06ea029ef6
commit 2cc41dedcf
5 changed files with 50 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/runtime/components/Kbd.vue
View File

@@ -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>

8
src/theme/kbd.ts
View File

@@ -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'
}
}