feat: add support for fallback, accent and bg muted colors

itsjavi · Sep 9, 2024 · e312f14 · e312f14
1 parent 4bf1d66
commit e312f14
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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,13 +140,18 @@ const defaultConfig: PresetConfig = {
   colors: {
     primary: "blue",
     secondary: "fuchsia",
+    accent: "fuchsia",
     gray: "neutral",
     danger: "red",
     warn: "yellow",
     background: {
       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",