refactor: add DEFAULT colors for bg, border and text

itsjavi · Sep 8, 2024 · 4673385 · 4673385
1 parent d8e37ac
commit 4673385
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -36,8 +36,7 @@ a glassmorphic style:
 
 ## Installation
 
-This is a Tailwind CSS component library, so you need to install the package,
-and also adjust your `tailwind.config.js|ts` configuration.
+This is a Tailwind CSS component library, so you need to install the package, adjust your `tailwind.config.js|ts` configuration and some global styles.
 
 ```bash
 npm install glasscn-ui
@@ -102,6 +101,32 @@ export default {
 };
 ```
 
+### Global styles
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@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");
+  }
+
+  .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");
+  }
+}
+```
+
 ## What components are not included?
 
 In order to reduce the amount of dependencies and the bundle size and complexity, some components are not included:

diff --git a/src/components/ui-extras/heading-title.tsx b/src/components/ui-extras/heading-title.tsx
@@ -8,7 +8,7 @@ const twStyles = {
     gradient: ["bg-clip-text text-transparent bg-gradient-to-br"],
   },
   colors: {
-    default: ["text-foreground dark:text-foreground-dark"],
+    default: ["text-foreground"],
     primary: ["text-primary-600"],
     secondary: ["text-secondary-600"],
   },

diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
@@ -7,12 +7,12 @@ import { cn } from "@/lib/utils";
 const twStyles = {
   nav: "mx-auto flex w-full justify-center",
   list: [
-    "flex flex-wrap items-center gap-1.5 break-words text-sm text-neutral-500",
-    "sm:gap-2.5 dark:text-neutral-400",
+    "flex flex-wrap items-center gap-1.5 break-words text-sm text-foreground-muted",
+    "sm:gap-2.5",
   ],
   item: "inline-flex items-center gap-1.5",
-  link: "transition-colors hover:text-neutral-950 dark:hover:text-neutral-50",
-  page: "font-normal text-neutral-950 dark:text-neutral-50",
+  link: "transition-colors hover:text-foreground",
+  page: "font-normal text-foreground",
   separator: "[&>svg]:size-3.5",
   ellipsis: "flex h-9 w-9 items-center justify-center",
 };

diff --git a/src/globals.css b/src/globals.css
@@ -4,11 +4,11 @@
 
 @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');
+    --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 {

diff --git a/src/lib/create-preset.ts b/src/lib/create-preset.ts
@@ -49,8 +49,7 @@ type CustomColorLevel =
   | 700
   | 800
   | 900
-  | 950
-  | string;
+  | 950;
 type CustomColor = Record<CustomColorLevel, string>;
 type DarkLightColor = {
   light: string;
@@ -159,7 +158,7 @@ const defaultConfig: PresetConfig = {
 
 function resolveColor(color: TailwindColor | CustomColor): CustomColor {
   if (typeof color === "string") {
-    return safeTwColors[color];
+    return safeTwColors[color] as CustomColor;
   }
   return color;
 }
@@ -185,6 +184,10 @@ function resolveConfig(config: PartialPresetConfig): PresetConfig {
   return resolvedConfig;
 }
 
+function getColorMix(color: string) {
+  return `color-mix(in srgb, ${color}, transparent calc(100% - <alpha-value> * 100%))`;
+}
+
 export function createTailwindPreset(
   config: PartialPresetConfig = {},
 ): Partial<Config> {
@@ -197,23 +200,28 @@ export function createTailwindPreset(
       extend: {
         colors: {
           background: {
-            DEFAULT: resolvedConfig.colors.background.light,
+            DEFAULT: getColorMix("var(--background)"),
+            light: resolvedConfig.colors.background.light,
             dark: resolvedConfig.colors.background.dark,
             // muted: resolvedConfig.colors.backgroundMuted,
           },
           foreground: {
-            DEFAULT: resolvedConfig.colors.foreground.light,
+            DEFAULT: getColorMix("var(--foreground)"),
+            light: resolvedConfig.colors.foreground.light,
             dark: resolvedConfig.colors.foreground.dark,
             muted: {
-              DEFAULT: resolvedConfig.colors.foregroundMuted.light,
+              DEFAULT: getColorMix("var(--foreground-muted)"),
+              light: resolvedConfig.colors.foregroundMuted.light,
               dark: resolvedConfig.colors.foregroundMuted.dark,
             },
           },
           border: {
-            DEFAULT: resolvedConfig.colors.border.light,
+            DEFAULT: getColorMix("var(--border)"),
+            light: resolvedConfig.colors.border.light,
             dark: resolvedConfig.colors.border.dark,
             muted: {
-              DEFAULT: resolvedConfig.colors.borderMuted.light,
+              DEFAULT: getColorMix("var(--border-muted)"),
+              light: resolvedConfig.colors.borderMuted.light,
               dark: resolvedConfig.colors.borderMuted.dark,
             },
           },

diff --git a/stories/breadcrumb.stories.tsx b/stories/breadcrumb.stories.tsx
@@ -1,24 +1,35 @@
 import {
-    Breadcrumb,
-    BreadcrumbEllipsis,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof Breadcrumb> = {
   title: "UI/Breadcrumb",
   component: Breadcrumb,
   // tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="bg-decorator">
+        <Story />
+        <div className="text-foreground">FG text </div>
+        <div className="text-foreground-muted">
+          FG text muted
+        </div>
+      </div>
+    ),
+  ],
 };
 
 export default meta;

diff --git a/stories/navigation-menu-demo.tsx b/stories/navigation-menu-demo.tsx
@@ -69,7 +69,7 @@ export function NavigationMenuDemo() {
                     <div className="mb-2 mt-4 text-lg font-medium">
                       shadcn/ui
                     </div>
-                    <p className="text-sm leading-tight text-muted-foreground">
+                    <p className="text-sm leading-tight text-foreground-muted">
                       Beautifully designed components that you can copy and
                       paste into your apps. Accessible. Customizable. Open
                       Source.
@@ -131,7 +131,7 @@ const ListItem = React.forwardRef<
           {...props}
         >
           <div className="text-sm font-medium leading-none">{title}</div>
-          <p className="line-clamp-2 text-sm leading-snug text-foreground-muted dark:text-foreground-muted-dark group-hover:text-white group-focus:text-white">
+          <p className="line-clamp-2 text-sm leading-snug text-foreground-muted group-hover:text-white group-focus:text-white">
             {children}
           </p>
         </a>

diff --git a/stories/separator.stories.tsx b/stories/separator.stories.tsx
@@ -15,7 +15,7 @@ export const Default: Story = {
     <div>
       <div className="space-y-1">
         <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
-        <p className="text-sm text-muted-foreground">An open-source UI component library.</p>
+        <p className="text-sm text-foreground-muted">An open-source UI component library.</p>
       </div>
       <Separator className="my-4" />
       <div className="flex h-5 items-center space-x-4 text-sm">