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",