feat: finer controls: allow disable color vars, radius, global styles

hyoban · May 11, 2024 · b5e1197 · b5e1197
1 parent c59e42a
commit b5e1197
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 35 deletions.
diff --git a/src/generate.ts b/src/generate.ts
@@ -15,10 +15,42 @@ function generateColorCSSVars(color: ThemeCSSVars) {
     .join('\n')
 }
 
+function colorCSSVarsStyles(lightVars: string, darkVars: string, { radius, themeName }: { radius?: number | false, themeName?: string | false }) {
+  return `
+${themeName ? `.theme-${themeName}` : ':root'} {
+${lightVars}
+${radius ? generateRadiusCSSVars(radius) : ''}
+}
+${themeName ? `.dark .theme-${themeName}` : '.dark'} {
+${darkVars}
+}`
+}
+
 function generateRadiusCSSVars(radius: number) {
   return `  --radius: ${radius}rem;`
 }
 
+function radiusCSSVarsStyles(radius: number) {
+  return `
+:root {
+${generateRadiusCSSVars(radius)}
+}
+`
+}
+
+export function generateGlobalStyles() {
+  return `
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+}
+`
+}
+
 function getBuiltInTheme(name: string) {
   const theme = themes.find(t => t.name === name)
   if (!theme)
@@ -58,27 +90,20 @@ export function generateCSSVars(
     return theme.map(t => generateCSSVars(t, false)).join('\n')
 
   const { color = 'zinc', radius = 0.5 } = theme
-  const { light, dark, name } = getColorTheme(color)
-  const lightVars = generateColorCSSVars(light)
-  const darkVars = generateColorCSSVars(dark)
 
-  if (!onlyOne) {
-    return `.theme-${name} {
-${lightVars}
-${generateRadiusCSSVars(radius)}
-}
+  let cssStyle = ''
 
-.dark .theme-${name} {
-${darkVars}
-}`
+  if (!color) {
+    if (radius)
+      cssStyle += radiusCSSVarsStyles(radius)
   }
+  else {
+    const { light, dark, name } = getColorTheme(color)
+    const lightVars = generateColorCSSVars(light)
+    const darkVars = generateColorCSSVars(dark)
 
-  return `:root {
-${lightVars}
-${generateRadiusCSSVars(radius)}
-}
+    cssStyle += colorCSSVarsStyles(lightVars, darkVars, { radius, themeName: !onlyOne && name })
+  }
 
-.dark {
-${darkVars}
-}`
+  return cssStyle
 }
diff --git a/src/index.ts b/src/index.ts
@@ -1,14 +1,18 @@
 import type { Preset } from 'unocss'
 import type { Theme } from 'unocss/preset-mini'
 
-import { generateCSSVars } from './generate'
+import { generateCSSVars, generateGlobalStyles } from './generate'
 import { themes } from './themes'
 import type { PresetShadcnOptions } from './types'
 
 export const builtinColors = themes.map(theme => theme.name)
 export const builtinRadiuses = [0, 0.3, 0.5, 0.75, 1] as const
 
-export function presetShadcn(options: PresetShadcnOptions = {}): Preset<Theme> {
+/**
+ * @param globals Generates global variables, like *.border-color, body.color, body.background.
+ * @default true
+ */
+export function presetShadcn(options: PresetShadcnOptions = {}, globals?: boolean): Preset<Theme> {
   return {
     name: 'unocss-preset-shadcn',
     preflights: [
@@ -21,14 +25,7 @@ export function presetShadcn(options: PresetShadcnOptions = {}): Preset<Theme> {
 
           ${generateCSSVars(options)}
 
-          * {
-            border-color: hsl(var(--border));
-          }
-
-          body {
-            color: hsl(var(--foreground));
-            background: hsl(var(--background));
-          }
+          ${globals ? generateGlobalStyles() : ''}
         `,
       },
     ],

diff --git a/src/types.ts b/src/types.ts
@@ -18,11 +18,11 @@ export type ThemeOptions = {
   /**
    * @default 'zinc'
    */
-  color?: ColorOptions
+  color?: ColorOptions | false
   /**
    * @default 0.5
    */
-  radius?: number
+  radius?: number | false
 }
 
 export type PresetShadcnOptions = ArrayOrSingle<ThemeOptions>
diff --git a/test/custom.css b/test/custom.css
@@ -20,7 +20,6 @@
   --ring: 240 5.9% 10%;
   --radius: 1rem;
 }
-
 .dark {
   --background: 240 10% 3.9%;
   --foreground: 0 0% 98%;

diff --git a/test/multiple.css b/test/multiple.css
@@ -20,7 +20,6 @@
   --ring: 240 5.9% 10%;
   --radius: 0.5rem;
 }
-
 .dark .theme-zinc {
   --background: 240 10% 3.9%;
   --foreground: 0 0% 98%;
@@ -42,6 +41,7 @@
   --input: 240 3.7% 15.9%;
   --ring: 240 4.9% 83.9%;
 }
+
 .theme-neutral {
   --background: 0 0% 100%;
   --foreground: 0 0% 3.9%;
@@ -64,7 +64,6 @@
   --ring: 0 0% 3.9%;
   --radius: 0.75rem;
 }
-
 .dark .theme-neutral {
   --background: 0 0% 3.9%;
   --foreground: 0 0% 98%;

diff --git a/test/neutral-0.75.css b/test/neutral-0.75.css
@@ -20,7 +20,6 @@
   --ring: 0 0% 3.9%;
   --radius: 0.75rem;
 }
-
 .dark {
   --background: 0 0% 3.9%;
   --foreground: 0 0% 98%;

diff --git a/test/zinc-0.5.css b/test/zinc-0.5.css
@@ -20,7 +20,6 @@
   --ring: 240 5.9% 10%;
   --radius: 0.5rem;
 }
-
 .dark {
   --background: 240 10% 3.9%;
   --foreground: 0 0% 98%;