From 46733853f946d7acd28c25daaabf1b31ebbc6a17 Mon Sep 17 00:00:00 2001 From: Javi Aguilar <122741+itsjavi@users.noreply.github.com> Date: Mon, 9 Sep 2024 00:50:21 +0200 Subject: [PATCH] refactor: add DEFAULT colors for bg, border and text --- README.md | 29 +++++++++++++++++-- src/components/ui-extras/heading-title.tsx | 2 +- src/components/ui/breadcrumb.tsx | 8 +++--- src/globals.css | 10 +++---- src/lib/create-preset.ts | 24 ++++++++++------ stories/breadcrumb.stories.tsx | 33 ++++++++++++++-------- stories/navigation-menu-demo.tsx | 4 +-- stories/separator.stories.tsx | 2 +- 8 files changed, 78 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 112aea6..eddda9e 100644 --- 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 index 4380c6e..859d463 100644 --- 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 index 2da2908..648584e 100644 --- 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 index 5c4a3ac..37601e4 100644 --- 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 index 5d91f7f..e6949d7 100644 --- 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; 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% - * 100%))`; +} + export function createTailwindPreset( config: PartialPresetConfig = {}, ): Partial { @@ -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 index ab8f7be..a35d60f 100644 --- a/stories/breadcrumb.stories.tsx +++ b/stories/breadcrumb.stories.tsx @@ -1,17 +1,17 @@ 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"; @@ -19,6 +19,17 @@ const meta: Meta = { title: "UI/Breadcrumb", component: Breadcrumb, // tags: ["autodocs"], + decorators: [ + (Story) => ( +
+ +
FG text
+
+ FG text muted +
+
+ ), + ], }; export default meta; diff --git a/stories/navigation-menu-demo.tsx b/stories/navigation-menu-demo.tsx index 89aa540..409edfd 100644 --- a/stories/navigation-menu-demo.tsx +++ b/stories/navigation-menu-demo.tsx @@ -69,7 +69,7 @@ export function NavigationMenuDemo() {
shadcn/ui
-

+

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} >

{title}
-

+

{children}

diff --git a/stories/separator.stories.tsx b/stories/separator.stories.tsx index d5d9a8f..e4dd793 100644 --- a/stories/separator.stories.tsx +++ b/stories/separator.stories.tsx @@ -15,7 +15,7 @@ export const Default: Story = {

Radix Primitives

-

An open-source UI component library.

+

An open-source UI component library.