add light / dark colours

francisashley · Jul 6, 2024 · dd00cb5 · dd00cb5
1 parent 339da6a
commit dd00cb5
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@ https://github.com/francisashley/vue-button/assets/12685308/c96d50b2-d681-42f3-a
 ## Features
 
 - Variants: Solid, Soft, Outline, Ghost
-- Colors: Primary, Neutral, Danger, Success, Warning
+- Colors: Primary, Neutral, Danger, Success, Warning, Light, Dark
 - Sizes: 20, 24, 28, 32, 36, 40, 44
 - Types: Button, Submit, Link (internal/external)
 - Icons: Supports icon and icon-only buttons
@@ -51,7 +51,7 @@ https://github.com/francisashley/vue-button/assets/12685308/c96d50b2-d681-42f3-a
 - **variant**: Button style variant
   - Options: `solid` | `soft` | `outline` | `ghost`
 - **color**: Button color
-  - Options: `primary` | `neutral` | `danger` | `success` | `warning`
+  - Options: `primary` | `neutral` | `danger` | `success` | `warning` | `light` | `dark`
 - **active**: Boolean indicating an active state, useful for dropdowns
   - Style is similar to hover state, midway between default and fully active
 - **disable**: Disables the button

diff --git a/src/components/UIButton.vue b/src/components/UIButton.vue
@@ -27,7 +27,7 @@ const props = withDefaults(
     size?: '20' | '24' | '28' | '32' | '36' | '40' | '44'
     type?: 'button' | 'submit' | 'link'
     variant?: 'solid' | 'soft' | 'outline' | 'ghost'
-    color?: 'primary' | 'neutral' | 'danger' | 'success' | 'warning'
+    color?: 'primary' | 'neutral' | 'danger' | 'success' | 'warning' | 'light' | 'dark'
     active?: boolean
     disable?: boolean
     loading?: boolean
@@ -180,6 +180,42 @@ const classes = computed(() => {
       ghostPressed: 'active:tw-bg-orange-300',
       ghostActive: 'tw-bg-orange-200',
     },
+    light: {
+      solid: 'tw-bg-neutral-100 tw-text-neutral-950',
+      solidHover: 'hover:tw-bg-neutral-300',
+      solidPressed: 'active:tw-bg-neutral-400',
+      solidActive: 'tw-bg-neutral-300',
+      soft: 'tw-bg-neutral-100 tw-text-neutral-800',
+      softHover: 'hover:tw-bg-neutral-200',
+      softPressed: 'active:tw-bg-neutral-300',
+      softActive: '!tw-bg-neutral-200',
+      outline: '!tw-border-neutral-100 tw-text-neutral-100 tw-ring-1 tw-ring-inset tw-ring-current',
+      outlineHover: 'hover:tw-bg-neutral-200 hover:tw-text-neutral-950 hover:tw-ring-neutral-200',
+      outlinePressed: 'active:tw-bg-neutral-300 active:tw-text-neutral-950 active:tw-ring-neutral-300',
+      outlineActive: 'tw-bg-neutral-200 tw-text-neutral-950 tw-ring-neutral-200',
+      ghost: 'tw-text-neutral-100',
+      ghostHover: 'hover:tw-bg-neutral-200 hover:tw-text-neutral-950',
+      ghostPressed: 'active:tw-bg-neutral-300 active:tw-text-neutral-950',
+      ghostActive: 'tw-bg-neutral-200 tw-text-neutral-950',
+    },
+    dark: {
+      solid: 'tw-bg-neutral-950 tw-text-neutral-100',
+      solidHover: 'hover:tw-bg-neutral-900',
+      solidPressed: 'active:tw-bg-neutral-800',
+      solidActive: '!tw-bg-neutral-900',
+      soft: 'tw-bg-neutral-950 tw-text-neutral-100',
+      softHover: 'hover:tw-bg-neutral-900',
+      softPressed: 'active:tw-bg-neutral-800',
+      softActive: '!tw-bg-neutral-900',
+      outline: '!tw-border-neutral-950 tw-text-neutral-950 tw-ring-1 tw-ring-inset tw-ring-current',
+      outlineHover: 'hover:tw-bg-neutral-900 hover:tw-text-neutral-100 hover:tw-ring-neutral-900',
+      outlinePressed: 'active:tw-bg-neutral-800 active:tw-text-neutral-100 active:tw-ring-neutral-800',
+      outlineActive: 'tw-bg-neutral-800 !tw-text-neutral-100 tw-ring-neutral-800',
+      ghost: 'tw-text-neutral-950',
+      ghostHover: 'hover:tw-bg-neutral-950 hover:tw-text-neutral-100',
+      ghostPressed: 'active:tw-bg-neutral-900 active:tw-text-neutral-100',
+      ghostActive: 'tw-bg-neutral-800 !tw-text-neutral-100',
+    },
   }
 
   switch (variant) {

diff --git a/src/components/UIIconButton.vue b/src/components/UIIconButton.vue
@@ -23,7 +23,7 @@ const props = withDefaults(
     size?: '20' | '24' | '28' | '32' | '36' | '40' | '44'
     type?: 'button' | 'submit'
     variant?: 'solid' | 'soft' | 'outline' | 'ghost'
-    color?: 'primary' | 'neutral' | 'danger' | 'success' | 'warning'
+    color?: 'primary' | 'neutral' | 'danger' | 'success' | 'warning' | 'light' | 'dark'
     active?: boolean
     disable?: boolean
     loading?: boolean

diff --git a/src/stories/1.reference.story.vue b/src/stories/1.reference.story.vue
@@ -273,7 +273,7 @@ const loading = ref<boolean>(false)
 const icon = ref<boolean>(false)
 
 const buttons = computed(() => {
-  return (['primary', 'neutral', 'danger', 'success', 'warning'] as const).map((color) => ({
+  return (['primary', 'neutral', 'danger', 'success', 'warning', 'light', 'dark'] as const).map((color) => ({
     color,
     variant,
     disable,