From e312f149489a7bddeac018dfb6bf5413e4114100 Mon Sep 17 00:00:00 2001
From: Javi Aguilar <122741+itsjavi@users.noreply.github.com>
Date: Mon, 9 Sep 2024 02:22:06 +0200
Subject: [PATCH] feat: add support for fallback, accent and bg muted colors

---
 README.md                | 51 ++++++++++++++++++++++++++++++++--------
 src/globals.css          |  2 ++
 src/lib/create-preset.ts | 43 ++++++++++++++++++++++++++++++++-
 3 files changed, 85 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index eddda9e..951656d 100644
--- a/README.md
+++ b/README.md
@@ -110,19 +110,50 @@ export default {
 
 @layer base {
   :root {
-    --background: theme("colors.background.DEFAULT");
-    --foreground: theme("colors.foreground.DEFAULT");
-    --foreground-muted: theme("colors.foreground.muted.DEFAULT");
-    --border: theme("colors.border.DEFAULT");
-    --border-muted: theme("colors.border.muted.DEFAULT");
+    --background: theme('colors.background.light');
+    --background-muted: theme('colors.background.muted.light');
+    --foreground: theme('colors.foreground.light');
+    --foreground-muted: theme('colors.foreground.muted.light');
+    --border: theme('colors.border.light');
+    --border-muted: theme('colors.border.muted.light');
   }
 
   .dark {
-    --background: theme("colors.background.dark");
-    --foreground: theme("colors.foreground.dark");
-    --foreground-muted: theme("colors.foreground.muted.dark");
-    --border: theme("colors.border.dark");
-    --border-muted: theme("colors.border.muted.dark");
+    --background: theme('colors.background.dark');
+    --background-muted: theme('colors.background.muted.dark');
+    --foreground: theme('colors.foreground.dark');
+    --foreground-muted: theme('colors.foreground.muted.dark');
+    --border: theme('colors.border.dark');
+    --border-muted: theme('colors.border.muted.dark');
+  }
+
+  *,
+  ::before,
+  ::after {
+    border-color: var(--border);
+  }
+
+  * {
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  [hidden] {
+    display: none;
+  }
+
+  [inert] {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  html {
+    font-size: 16px;
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
   }
 }
 ```
diff --git a/src/globals.css b/src/globals.css
index 37601e4..2fb9285 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -5,6 +5,7 @@
 @layer base {
   :root {
     --background: theme('colors.background.light');
+    --background-muted: theme('colors.background.muted.light');
     --foreground: theme('colors.foreground.light');
     --foreground-muted: theme('colors.foreground.muted.light');
     --border: theme('colors.border.light');
@@ -13,6 +14,7 @@
 
   .dark {
     --background: theme('colors.background.dark');
+    --background-muted: theme('colors.background.muted.dark');
     --foreground: theme('colors.foreground.dark');
     --foreground-muted: theme('colors.foreground.muted.dark');
     --border: theme('colors.border.dark');
diff --git a/src/lib/create-preset.ts b/src/lib/create-preset.ts
index e6949d7..7c6a4d5 100644
--- a/src/lib/create-preset.ts
+++ b/src/lib/create-preset.ts
@@ -67,6 +67,11 @@ type PresetConfigColors = {
    * @default 'fuchsia'
    */
   secondary: TailwindColor | CustomColor;
+  /**
+   * Accent color name or custom color palette object
+   * @default 'fuchsia'
+   */
+  accent: TailwindColor | CustomColor;
   /**
    * Gray color name or custom color palette object
    * @default 'neutral'
@@ -87,6 +92,11 @@ type PresetConfigColors = {
    * @default 'bg-white' and 'bg-gray-950'
    */
   background: DarkLightColor;
+  /**
+   * Default muted background color in light and dark modes
+   * @default 'bg-gray-100' and 'bg-gray-900'
+   */
+  backgroundMuted: DarkLightColor;
   /**
    * Default foreground color in light and dark modes
    * @default 'text-gray-950' and 'text-white'
@@ -130,6 +140,7 @@ const defaultConfig: PresetConfig = {
   colors: {
     primary: "blue",
     secondary: "fuchsia",
+    accent: "fuchsia",
     gray: "neutral",
     danger: "red",
     warn: "yellow",
@@ -137,6 +148,10 @@ const defaultConfig: PresetConfig = {
       light: "#ffffff",
       dark: safeTwColors.gray[950],
     },
+    backgroundMuted: {
+      light: safeTwColors.gray[100],
+      dark: safeTwColors.gray[900],
+    },
     foreground: {
       light: safeTwColors.gray[950],
       dark: "#ffffff",
@@ -177,6 +192,7 @@ function resolveConfig(config: PartialPresetConfig): PresetConfig {
 
   resolvedConfig.colors.primary = resolveColor(colors.primary);
   resolvedConfig.colors.secondary = resolveColor(colors.secondary);
+  resolvedConfig.colors.accent = resolveColor(colors.accent);
   resolvedConfig.colors.gray = resolveColor(colors.gray);
   resolvedConfig.colors.danger = resolveColor(colors.danger);
   resolvedConfig.colors.warn = resolveColor(colors.warn);
@@ -203,7 +219,11 @@ export function createTailwindPreset(
             DEFAULT: getColorMix("var(--background)"),
             light: resolvedConfig.colors.background.light,
             dark: resolvedConfig.colors.background.dark,
-            // muted: resolvedConfig.colors.backgroundMuted,
+            muted: {
+              DEFAULT: getColorMix("var(--background-muted)"),
+              light: resolvedConfig.colors.backgroundMuted.light,
+              dark: resolvedConfig.colors.backgroundMuted.dark,
+            },
           },
           foreground: {
             DEFAULT: getColorMix("var(--foreground)"),
@@ -227,9 +247,30 @@ export function createTailwindPreset(
           },
           primary: resolvedConfig.colors.primary,
           secondary: resolvedConfig.colors.secondary,
+          accent: resolvedConfig.colors.accent,
           gray: resolvedConfig.colors.gray,
           danger: resolvedConfig.colors.danger,
           warn: resolvedConfig.colors.warn,
+
+          // Just kept for original shadcn/ui compatibility, but not used by the glasscn components:
+          input: getColorMix("var(--border)"),
+          ring: "currentColor",
+          destructive: {
+            DEFAULT: resolvedConfig.colors.danger[500],
+            foreground: getColorMix("var(--foreground)"),
+          },
+          muted: {
+            DEFAULT: getColorMix("var(--background-muted)"),
+            foreground: getColorMix("var(--foreground-muted)"),
+          },
+          popover: {
+            DEFAULT: getColorMix("var(--background-muted)"),
+            foreground: getColorMix("var(--foreground-muted)"),
+          },
+          card: {
+            DEFAULT: getColorMix("var(--background-muted)"),
+            foreground: getColorMix("var(--foreground-muted)"),
+          },
         },
         fontWeight: {
           base: "400",