feat(button): support accent color

itsjavi · Sep 9, 2024 · 6599cc9 · 6599cc9
1 parent d06fb47
commit 6599cc9
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 4 deletions.
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -47,6 +47,10 @@ const twStyles = {
       "ring-offset-white focus-visible:ring-secondary-900",
       "dark:ring-offset-secondary-900 dark:focus-visible:ring-secondary-300",
     ],
+    accent: [
+      "ring-offset-white focus-visible:ring-accent-900",
+      "dark:ring-offset-accent-900 dark:focus-visible:ring-accent-300",
+    ],
     danger: [
       "ring-offset-white focus-visible:ring-danger-900",
       "dark:ring-offset-danger-900 dark:focus-visible:ring-danger-300",
@@ -103,6 +107,29 @@ const twStyles = {
         "dark:text-secondary-500 dark:decoration-current",
       ],
     },
+    accent: {
+      default: [
+        "bg-accent-600 text-white hover:bg-accent-600/90",
+        "dark:bg-accent-600 dark:text-white dark:hover:bg-accent-600/90",
+      ],
+      subtle: [
+        "bg-accent-100 text-accent-900 hover:bg-accent-100/80",
+        "dark:bg-accent-800 dark:text-accent-50 dark:hover:bg-accent-800/80",
+      ],
+      outline: [
+        "border border-accent-300 bg-white hover:bg-accent-100 text-accent-900 hover:text-accent-900",
+        "dark:border-accent-800 dark:bg-accent-950 dark:hover:bg-accent-800",
+        "dark:text-accent-50 dark:hover:text-accent-50",
+      ],
+      ghost: [
+        "hover:bg-accent-100 hover:text-accent-900",
+        "dark:hover:bg-accent-800 dark:hover:text-accent-50",
+      ],
+      link: [
+        "text-accent-700 underline decoration-current decoration-dotted underline-offset-4 hover:decoration-solid",
+        "dark:text-accent-500 dark:decoration-current",
+      ],
+    },
     danger: {
       default: [
         "bg-danger-600 text-white hover:bg-danger-600/90",
@@ -165,6 +192,7 @@ const buttonVariants = cva(cn(twStyles.base), {
       default: "",
       primary: cn(twStyles.colors.primary),
       secondary: cn(twStyles.colors.secondary),
+      accent: cn(twStyles.colors.accent),
       danger: cn(twStyles.colors.danger),
       warning: cn(twStyles.colors.warning),
     },
@@ -245,6 +273,33 @@ const buttonVariants = cva(cn(twStyles.base), {
       color: "secondary",
       className: cn(twStyles.colorVariants.secondary.link),
     },
+
+    // accent color variants
+    {
+      variant: "default",
+      color: "accent",
+      className: cn(twStyles.colorVariants.accent.default),
+    },
+    {
+      variant: "subtle",
+      color: "accent",
+      className: cn(twStyles.colorVariants.accent.subtle),
+    },
+    {
+      variant: "outline",
+      color: "accent",
+      className: cn(twStyles.colorVariants.accent.outline),
+    },
+    {
+      variant: "ghost",
+      color: "accent",
+      className: cn(twStyles.colorVariants.accent.ghost),
+    },
+    {
+      variant: "link",
+      color: "accent",
+      className: cn(twStyles.colorVariants.accent.link),
+    },
     // danger color variants
     {
       variant: "default",

diff --git a/src/lib/create-preset.ts b/src/lib/create-preset.ts
@@ -64,7 +64,7 @@ type PresetConfigColors = {
   primary: TailwindColor | CustomColor;
   /**
    * Secondary color name or custom color palette object
-   * @default 'fuchsia'
+   * @default 'green'
    */
   secondary: TailwindColor | CustomColor;
   /**
@@ -154,7 +154,7 @@ function resolveConfig(config: PartialPresetConfig): PresetConfig {
     colors: {
       gray: grayColor,
       primary: resolveColor(config.colors?.primary ?? "blue"),
-      secondary: resolveColor(config.colors?.secondary ?? "fuchsia"),
+      secondary: resolveColor(config.colors?.secondary ?? "green"),
       accent: resolveColor(config.colors?.accent ?? "fuchsia"),
       danger: resolveColor(config.colors?.danger ?? "red"),
       warn: resolveColor(config.colors?.warn ?? "yellow"),

diff --git a/stories/badge.stories.tsx b/stories/badge.stories.tsx
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 const meta: Meta<typeof Badge> = {
   title: 'UI/Badge',
   component: Badge,
-  tags: ['autodocs'],
+  // tags: ['autodocs'],
 };
 
 export default meta;

diff --git a/stories/button/button.stories.tsx b/stories/button/button.stories.tsx
@@ -34,7 +34,7 @@ const meta = {
     },
     color: {
       control: "select",
-      options: ["default", "primary", "secondary", "danger", "warning"],
+      options: ["default", "primary", "secondary", "accent", "danger", "warning"],
     },
     loading: { control: "boolean" },
     disabled: { control: "boolean" },