feat: color

jaskang · Jul 17, 2024 · 90cd203 · 90cd203
1 parent 07032be
commit 90cd203
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 110 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/site/.vitepress/theme/components/DemoWrapper.vue b/site/.vitepress/theme/components/DemoWrapper.vue
@@ -26,7 +26,7 @@ const showCode = ref(false)
 </script>
 <template>
   <div
-    class="demo-wrapper bg-background divide-border ring-border flex flex-col divide-y rounded ring-1 [&+.demo-wrapper]:mt-8 [&>:first-child]:rounded-t [&>:last-child]:rounded-b"
+    class="demo-wrapper divide-border ring-border flex flex-col divide-y rounded ring-1 [&+.demo-wrapper]:mt-8 [&>:first-child]:rounded-t [&>:last-child]:rounded-b"
     :style="{
       '--tw-prose-pre-bg': 'transparent',
     }"
@@ -46,7 +46,7 @@ const showCode = ref(false)
         </Switch>
       </div>
     </div>
-    <div class="not-prose p-4">
+    <div class="not-prose bg-gray-50 p-4">
       <slot />
     </div>
 

diff --git a/site/components/booth/button.vue b/site/components/booth/button.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { Button, RadioGroup, Radio, RadioCard, Switch } from '@/index'
+import { ref } from 'vue'
 import { InboxIcon } from '@heroicons/vue/24/outline'
-
-import type { ColorAlias } from '@/utils/theme'
+import { Button, RadioCard, RadioGroup, Switch } from '@/index'
 defineOptions({ name: 'ButtonBooth' })
 const emit = defineEmits<{ click: [any] }>()
 const slots = defineSlots<{ default?(_: {}): any }>()
@@ -18,7 +16,7 @@ const a = ref('')
 
 const variant = ref<'outline' | 'solid' | 'soft' | 'text' | 'link'>('outline')
 const size = ref<'sm' | 'md' | 'lg'>('md')
-const color = ref<'primary' | 'success' | 'warning' | 'danger' | 'none'>('none')
+const color = ref<'primary' | 'success' | 'warning' | 'danger' | 'default'>('default')
 const pill = ref(false)
 const square = ref(false)
 const block = ref(false)
@@ -54,7 +52,7 @@ const disabled = ref(false)
           <RadioCard value="success">success</RadioCard>
           <RadioCard value="warning">warning</RadioCard>
           <RadioCard value="danger">danger</RadioCard>
-          <RadioCard value="none">none</RadioCard>
+          <RadioCard value="default">default</RadioCard>
         </RadioGroup>
       </div>
 

diff --git a/site/components/button.md b/site/components/button.md
@@ -234,10 +234,10 @@ import { PaperAirplaneIcon, InboxIcon, TrashIcon, ArchiveBoxIcon, CircleStackIco
         <Button>button</Button>
       </Tooltip>
       <Tooltip content="Comment">
-        <Button>button</Button>
+        <Button variant="soft" color="primary">button</Button>
       </Tooltip>
       <Tooltip content="Star">
-        <Button>button</Button>
+        <Button variant="soft" color="success">button</Button>
       </Tooltip>
       <Tooltip content="Heart">
         <Button>button</Button>

diff --git a/src/Button/index.vue b/src/Button/index.vue
@@ -7,16 +7,16 @@ const emit = defineEmits<{ click: [Event] }>()
 const slots = defineSlots<{ default?(_: {}): any; icon?(_: {}): any }>()
 const props = defineProps({
   variant: {
-    type: String as PropType<'solid' | 'soft' | 'outline' | 'text' | 'link' | 'pure'>,
+    type: String as PropType<'solid' | 'soft' | 'outline' | 'text' | 'pure'>,
     default: 'outline',
   },
   size: {
     type: String as PropType<'sm' | 'md' | 'lg'>,
     default: 'md',
   },
   color: {
-    type: String as PropType<'primary' | 'success' | 'warning' | 'danger' | 'none'>,
-    default: 'none',
+    type: String as PropType<'primary' | 'success' | 'warning' | 'danger' | 'default'>,
+    default: 'default',
   },
   pill: Boolean,
   square: Boolean,
@@ -28,53 +28,44 @@ const props = defineProps({
 <template>
   <button
     type="button"
-    class="inline-flex appearance-none items-center justify-center whitespace-nowrap text-center font-medium outline-none transition-all focus:z-10 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+    class="focus-visible:outline-primary inline-flex cursor-pointer appearance-none items-center justify-center whitespace-nowrap text-center font-medium outline-none transition-all focus:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
     :class="[
       {
-        outline: `border shadow-sm focus:ring-2 focus:ring-offset-2 ${
+        outline: `ring-1 shadow-sm ${
           {
-            none: 'border-border text-default-text bg-default hover:bg-default-hover focus:ring-primary',
-            primary: 'border-primary text-primary hover:bg-primary-subtle focus:ring-primary',
-            success: 'border-success text-success hover:bg-success-subtle focus:ring-success',
-            warning: 'border-warning text-warning hover:bg-warning-subtle focus:ring-warning',
-            danger: 'border-danger text-danger hover:bg-danger-subtle focus:ring-danger',
+            default: 'ring-border text-default-subtle-text bg-default-subtle hover:bg-default-subtle-hover',
+            primary: 'hover:bg-primary-subtle text-primary bg-default-subtle ring-primary',
+            success: 'hover:bg-success-subtle ring-success bg-default-subtle text-success',
+            warning: 'hover:bg-warning-subtle ring-warning bg-default-subtle text-warning',
+            danger: 'hover:bg-danger-subtle ring-danger bg-default-subtle text-danger',
           }[props.color]
         }`,
-        solid: `shadow-sm focus:ring-2 focus:ring-offset-2 ${
+        solid: `shadow-sm ${
           {
-            none: 'text-default-text hover:bg-default-hover focus:ring-primary bg-default',
-            primary: 'bg-primary text-primary-text hover:bg-primary-hover focus:ring-primary',
-            success: 'bg-success text-success-text hover:bg-success-hover focus:ring-success',
-            warning: 'bg-warning text-warning-text hover:bg-warning-hover focus:ring-warning',
-            danger: 'bg-danger text-danger-text hover:bg-danger-hover focus:ring-danger',
+            default: 'text-default-text bg-default hover:bg-default-hover',
+            primary: 'text-primary-text bg-primary hover:bg-primary-hover',
+            success: 'text-success-text bg-success hover:bg-success-hover',
+            warning: 'text-warning-text bg-warning hover:bg-warning-hover',
+            danger: 'text-danger-text bg-danger hover:bg-danger-hover',
           }[props.color]
         }`,
-        soft: `focus:ring-2 focus:ring-offset-2 ${
+        soft: `shadow-sm ${
           {
-            none: 'bg-default text-default-text hover:bg-default-hover focus:ring-primary',
-            primary: 'bg-primary-subtle text-primary hover:bg-primary-subtle-hover focus:ring-primary',
-            success: 'bg-success-subtle text-success hover:bg-success-subtle-hover focus:ring-success',
-            warning: 'bg-warning-subtle text-warning hover:bg-warning-subtle-hover focus:ring-warning',
-            danger: 'bg-danger-subtle text-danger hover:bg-danger-subtle-hover focus:ring-danger',
-          }[props.color]
+            default: 'bg-default-subtle hover:bg-default-subtle-hover text-default',
+            primary: 'bg-primary-subtle hover:bg-primary-subtle-hover text-primary',
+            success: 'bg-success-subtle hover:bg-success-subtle-hover text-success',
+            warning: 'bg-warning-subtle hover:bg-warning-subtle-hover text-warning',
+            danger: 'bg-danger-subtle hover:bg-danger-subtle-hover text-danger',
+          }[props.color || 'primary']
         }`,
-        text: `focus:ring-2 focus:ring-offset-2 ${
+        text: `${
           {
-            none: 'text-default-text hover:bg-default-hover focus:ring-primary',
-            primary: 'text-primary hover:bg-primary-subtle focus:ring-primary-subtle-hover',
-            success: 'text-success hover:bg-success-subtle focus:ring-success-subtle-hover',
-            warning: 'text-warning hover:bg-warning-subtle focus:ring-warning-subtle-hover',
-            danger: 'text-danger hover:bg-danger-subtle focus:ring-danger-subtle-hover',
-          }[props.color]
-        }`,
-        link: `underline-offset-4 hover:underline ${
-          {
-            none: 'text-default-text',
-            primary: 'text-primary',
-            success: 'text-success',
-            warning: 'text-warning',
-            danger: 'text-danger',
-          }[props.color]
+            default: 'hover:bg-default-subtle-hover text-default',
+            primary: 'hover:bg-primary-subtle-hover text-primary',
+            success: 'hover:bg-success-subtle-hover text-success',
+            warning: 'hover:bg-warning-subtle-hover text-warning',
+            danger: 'hover:bg-danger-subtle-hover text-danger',
+          }[props.color || 'primary']
         }`,
         pure: '',
       }[props.variant],

diff --git a/src/Space/SpaceCompact.vue b/src/Space/SpaceCompact.vue
@@ -6,7 +6,7 @@ const props = defineProps({})
 </script>
 <template>
   <div
-    class="t-space-compact flex items-center *:-me-[1px] *:rounded-none [&>:first-child]:rounded-l-md [&>:last-child]:rounded-r-md"
+    class="t-space-compact ring-border flex items-center gap-x-px rounded-md bg-slate-200 ring-1 *:rounded-none [&>:first-child]:rounded-l-md [&>:last-child]:rounded-r-md"
   >
     <slot />
   </div>

diff --git a/src/theme/index.css b/src/theme/index.css
@@ -1,12 +1,15 @@
 /* @import './colors.css'; */
 
 @theme {
-  --color-border: var(--color-slate-200);
+  --color-border: var(--color-slate-300);
   --color-background: var(--color-slate-50);
 
-  --color-default: var(--color-white);
-  --color-default-hover: var(--color-slate-50);
-  --color-default-text: var(--color-slate-700);
+  --color-default: var(--color-slate-900);
+  --color-default-hover: var(--color-slate-800);
+  --color-default-text: var(--color-white);
+  --color-default-subtle: var(--color-white);
+  --color-default-subtle-hover: var(--color-slate-50);
+  --color-default-subtle-text: var(--color-slate-700);
 
   --color-primary: var(--color-indigo-600);
   --color-primary-hover: var(--color-indigo-500);