@veltra/styles 1.6.6 → 1.7.0

package/src/theme/presets/dark.ts

@@ -1,47 +1,50 @@
 import { lightTheme } from './light'
 
-export const darkTheme = lightTheme.new({
-  color: {
-    primary: '#3b82f6',
-    success: '#22c55e',
-    warning: '#f59e0b',
-    danger: '#ef4444',
-    info: '#06b6d4',
-    disabled: '#27272a',
-    default: '#27272a'
-  },
-
-  bg: {
+export const darkTheme = lightTheme.new(
+  {
     color: {
-      bottom: '#0c0c0e',
-      middle: '#141417',
-      top: '#1c1c21',
-      hover: '#26262c',
-      black: '#000000'
+      primary: '#3b82f6',
+      success: '#22c55e',
+      warning: '#f59e0b',
+      danger: '#ef4444',
+      info: '#06b6d4',
+      disabled: '#27272a',
+      default: '#27272a'
     },
-    filter: { blur: 'none', saturate: 'none' }
-  },
 
-  'text-color': {
-    title: '#f4f4f5',
-    main: '#d4d4d8',
-    second: '#a1a1aa',
-    placeholder: '#71717a',
-    assist: '#52525b',
-    disabled: '#3f3f46',
-    white: '#ffffff'
-  },
+    bg: {
+      color: {
+        bottom: '#0c0c0e',
+        middle: '#141417',
+        top: '#1c1c21',
+        hover: '#26262c',
+        black: '#000000'
+      },
+      filter: { blur: 'none', saturate: 'none' }
+    },
+
+    'text-color': {
+      title: '#f4f4f5',
+      main: '#d4d4d8',
+      second: '#a1a1aa',
+      placeholder: '#71717a',
+      assist: '#52525b',
+      disabled: '#3f3f46',
+      white: '#ffffff'
+    },
 
-  border: { color: '#37373f', mutedColor: '#42424c' },
+    border: { color: '#37373f', mutedColor: '#42424c' },
 
-  shadow: {
-    color: '#00000066',
-    x: 0,
-    y: 1,
-    blur: 3,
-    spread: 0,
-    emboss: 'none',
-    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.4)',
-    lg: '0 8px 24px 0 rgba(0, 0, 0, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.35)'
-  }
-})
+    shadow: {
+      color: '#00000066',
+      x: 0,
+      y: 1,
+      blur: 3,
+      spread: 0,
+      emboss: 'none',
+      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.4)',
+      lg: '0 8px 24px 0 rgba(0, 0, 0, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.35)'
+    }
+  },
+  { series: 'dark' }
+)

package/src/theme/presets/glass.ts

@@ -1,73 +1,62 @@
 import { lightTheme } from './light'
 
-export const glassLightTheme = lightTheme.new({
-  color: {
-    primary: '#3B82F6',
-    success: '#10B981',
-    warning: '#F59E0B',
-    danger: '#EF4444',
-    info: '#06B6D4',
-    disabled: '#E5E7EB',
-    default: '#F3F4F6'
-  },
-  bg: {
+/**
+ * 玻璃拟态，天生适合深色（半透明背景 + 背景模糊在深色下层次最好）。
+ * 背景为 rgba() 时派生 token（kbd / batch-edit 混合色）无法自动推导，
+ * 需通过组件级扩展键显式声明。
+ */
+export const glassTheme = lightTheme.new(
+  {
     color: {
-      bottom: 'rgba(255, 255, 255, 0.45)',
-      middle: 'rgba(255, 255, 255, 0.55)',
-      top: 'rgba(255, 255, 255, 0.6)',
-      hover: 'rgba(255, 255, 255, 0.75)',
-      black: '#000000'
+      primary: '#3B82F6',
+      success: '#10B981',
+      warning: '#F59E0B',
+      danger: '#EF4444',
+      info: '#06B6D4',
+      disabled: '#374151',
+      default: '#1E293B'
     },
-    filter: { blur: 'blur(24px)', saturate: 'saturate(180%)' }
-  },
-  border: {
-    color: 'rgba(15, 23, 42, 0.14)',
-    mutedColor: 'rgba(15, 23, 42, 0.08)',
-    width: 1,
-    style: 'solid'
-  },
-  'text-color': {
-    title: '#1E293B',
-    main: '#334155',
-    placeholder: '#94A3B8',
-    second: '#64748B',
-    assist: '#CBD5E1',
-    disabled: '#94A3B8',
-    white: '#FFFFFF'
-  },
-  shadow: { color: '#00000014', x: 0, y: 4, blur: 24, spread: 0, emboss: 'none' }
-})
-
-export const glassDarkTheme = glassLightTheme.new({
-  color: { disabled: '#374151', default: '#1E293B' },
-  bg: {
-    color: {
-      bottom: 'rgba(15, 23, 42, 0.6)',
-      middle: 'rgba(15, 23, 42, 0.7)',
-      top: 'rgba(15, 23, 42, 0.75)',
-      hover: 'rgba(30, 41, 59, 0.85)',
-      black: '#000000'
+    bg: {
+      color: {
+        bottom: 'rgba(15, 23, 42, 0.6)',
+        middle: 'rgba(15, 23, 42, 0.7)',
+        top: 'rgba(15, 23, 42, 0.75)',
+        hover: 'rgba(30, 41, 59, 0.85)',
+        black: '#000000'
+      },
+      filter: { blur: 'blur(20px)', saturate: 'saturate(200%)' }
     },
-    filter: { blur: 'blur(20px)', saturate: 'saturate(200%)' }
-  },
-  border: { color: 'rgba(255, 255, 255, 0.18)', mutedColor: 'rgba(255, 255, 255, 0.1)' },
-  'text-color': {
-    title: '#F8FAFC',
-    main: '#F1F5F9',
-    second: '#94A3B8',
-    placeholder: '#64748B',
-    assist: '#64748B',
-    disabled: '#475569',
-    white: '#ffffff'
+    border: {
+      color: 'rgba(255, 255, 255, 0.18)',
+      mutedColor: 'rgba(255, 255, 255, 0.1)',
+      width: 1,
+      style: 'solid'
+    },
+    'text-color': {
+      title: '#F8FAFC',
+      main: '#F1F5F9',
+      second: '#94A3B8',
+      placeholder: '#64748B',
+      assist: '#64748B',
+      disabled: '#475569',
+      white: '#ffffff'
+    },
+    shadow: {
+      color: '#00000059',
+      x: 0,
+      y: 4,
+      blur: 32,
+      spread: 0,
+      emboss: 'none',
+      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.4)',
+      lg: '0 8px 24px 0 rgba(0, 0, 0, 0.55), 0 2px 6px 0 rgba(0, 0, 0, 0.35)'
+    },
+    kbd: {
+      'inset-shadow': 'rgba(0, 0, 0, 0.5)',
+      'border-shadow': 'rgba(255, 255, 255, 0.09)',
+      'drop-shadow': 'rgba(0, 0, 0, 0.6)'
+    },
+    'batch-edit': { 'form-header-bg': 'rgba(15, 23, 42, 0.8)' }
   },
-  shadow: {
-    color: '#00000059',
-    x: 0,
-    y: 4,
-    blur: 32,
-    spread: 0,
-    emboss: 'none',
-    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.4)',
-    lg: '0 8px 24px 0 rgba(0, 0, 0, 0.55), 0 2px 6px 0 rgba(0, 0, 0, 0.35)'
-  }
-})
+  { series: 'dark' }
+)

package/src/theme/presets/hero.ts

@@ -1,6 +1,7 @@
 import { lightTheme } from './light'
 
-export const heroLightTheme = lightTheme.new({
+/** HeroUI 风格，天生适合浅色 */
+export const heroTheme = lightTheme.new({
   color: {
     primary: '#7828c8', // purple
     success: '#17c964',
@@ -31,37 +32,3 @@ export const heroLightTheme = lightTheme.new({
   },
   button: { 'default-bg': '#ebebec' }
 })
-
-export const heroDarkTheme = heroLightTheme.new({
-  color: { primary: '#9353d3', disabled: '#27272a', default: '#27272a' },
-  bg: {
-    color: {
-      bottom: '#000000',
-      middle: '#18181b',
-      top: '#27272a',
-      hover: '#3f3f46',
-      black: '#000000'
-    }
-  },
-  border: { color: '#3f3f46', mutedColor: '#3f3f46' },
-  'text-color': {
-    title: '#ECEDEE',
-    main: '#ECEDEE',
-    second: '#A1A1AA',
-    placeholder: '#71717A',
-    assist: '#71717A',
-    disabled: '#71717A',
-    white: '#FFFFFF'
-  },
-  shadow: {
-    color: '#00000033',
-    x: 0,
-    y: 4,
-    blur: 14,
-    spread: 0,
-    emboss: '0 2px 4px 0 #0000000a,0 1px 2px 0 #0000000f,0 0 1px 0 #0000000f',
-    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.4)',
-    lg: '0 8px 24px 0 rgba(0, 0, 0, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.35)'
-  },
-  button: { 'default-bg': 'var(--u-bg-color-top)' }
-})

package/src/theme/presets/index.ts

@@ -1,6 +1,9 @@
 export { lightTheme } from './light'
 export { darkTheme } from './dark'
-export { heroDarkTheme, heroLightTheme } from './hero'
-export { shadcnLightTheme, shadcnDarkTheme } from './shadcn'
-export { glassDarkTheme, glassLightTheme } from './glass'
-export { ancientLightTheme } from './ancient'
+export { heroTheme } from './hero'
+export { glassTheme } from './glass'
+export { ancientTheme } from './ancient'
+export { sakuraTheme } from './sakura'
+export { oceanTheme } from './ocean'
+export { midnightTheme } from './midnight'
+export { neonTheme } from './neon'

package/src/theme/presets/midnight.ts

@@ -0,0 +1,45 @@
+import { darkTheme } from './dark'
+
+/** 午夜（靛蓝 + 深空底，宽松间距、舒缓缓动），天生适合深色 */
+export const midnightTheme = darkTheme.new({
+  color: {
+    primary: '#6f78ee', // 星靛（白字对比 3.75:1）
+    success: '#34d399',
+    warning: '#fbbf24',
+    danger: '#f87171',
+    info: '#38bdf8',
+    disabled: '#232d4a',
+    default: '#232d4a'
+  },
+  bg: {
+    color: {
+      bottom: '#0a0f1e', // 深空
+      middle: '#101731',
+      top: '#182242',
+      hover: '#212d54'
+    }
+  },
+  'text-color': {
+    title: '#e8ecff', // 月光
+    main: '#c3cbf0',
+    second: '#8d97c6',
+    placeholder: '#7d8ab8',
+    assist: '#5b6895',
+    disabled: '#576493'
+  },
+  // mutedColor 与卡片底对比 2.6:1，保证输入控件清晰可见
+  border: { color: '#36457a', mutedColor: '#52619a' },
+  // 更宽松的间距，配合深空的呼吸感
+  gap: { small: 8, default: 10, large: 14 },
+  shadow: {
+    color: '#00000080',
+    x: 0,
+    y: 2,
+    blur: 8,
+    spread: 0,
+    emboss: 'none',
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.5)',
+    lg: '0 8px 24px 0 rgba(0, 0, 0, 0.6), 0 2px 6px 0 rgba(0, 0, 0, 0.4)'
+  },
+  transition: { slow: '0.4s', ease: 'cubic-bezier(0.33, 1, 0.68, 1)' }
+})

package/src/theme/presets/neon.ts

@@ -0,0 +1,45 @@
+import { darkTheme } from './dark'
+
+/** 霓虹（品红 + 夜紫底 + 辉光阴影，小圆角、急速缓动），天生适合深色 */
+export const neonTheme = darkTheme.new({
+  color: {
+    primary: '#c026d3', // 霓红
+    success: '#4ade80',
+    warning: '#facc15',
+    danger: '#fb7185',
+    info: '#22d3ee',
+    disabled: '#241532',
+    default: '#241532'
+  },
+  bg: {
+    color: {
+      bottom: '#0c0612', // 夜紫
+      middle: '#130a1d',
+      top: '#1c102a',
+      hover: '#28163d'
+    }
+  },
+  'text-color': {
+    title: '#f6efff',
+    main: '#d9cdee',
+    second: '#a08bc4',
+    placeholder: '#8f74b8',
+    assist: '#6b4f94',
+    disabled: '#63498a'
+  },
+  // mutedColor 与卡片底对比 2.65:1，输入控件带清晰的紫色描边
+  border: { color: '#503480', mutedColor: '#684a9e' },
+  // 赛博感：小圆角 + 品红辉光
+  radius: { small: 2, default: 4, large: 8 },
+  shadow: {
+    color: 'rgba(192, 38, 211, 0.3)',
+    x: 0,
+    y: 0,
+    blur: 12,
+    spread: 0,
+    emboss: 'none',
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.5)',
+    lg: '0 0 24px 0 rgba(192, 38, 211, 0.25), 0 8px 24px 0 rgba(0, 0, 0, 0.5)'
+  },
+  transition: { fast: '0.1s', ease: 'cubic-bezier(0.85, 0, 0.15, 1)' }
+})

package/src/theme/presets/ocean.ts

@@ -0,0 +1,35 @@
+import { lightTheme } from './light'
+
+/** 海盐（松石青 + 冷白底，利落的快缓动），天生适合浅色 */
+export const oceanTheme = lightTheme.new({
+  color: {
+    primary: '#0d9488', // 松石青
+    success: '#16a34a',
+    warning: '#d97706',
+    danger: '#dc2626',
+    info: '#0284c7',
+    disabled: '#eff6f5',
+    default: '#eff6f5'
+  },
+  bg: { color: { bottom: '#eef6f5', middle: '#f5fafa', top: '#ffffff', hover: '#e0efee' } },
+  'text-color': {
+    title: '#16302e', // 深礁
+    main: '#2f4a48',
+    second: '#5b7875',
+    assist: '#c3d6d4',
+    placeholder: '#7fa19e',
+    disabled: '#a3bab7'
+  },
+  border: { width: 1, color: '#c2dedb', mutedColor: '#8fbcb7' },
+  radius: { small: 6, default: 10, large: 14 },
+  shadow: {
+    color: 'rgba(21, 94, 89, 0.12)',
+    x: 0,
+    y: 2,
+    blur: 10,
+    spread: -1,
+    sm: '0 1px 2px 0 rgba(21, 94, 89, 0.08)',
+    lg: '0 8px 24px 0 rgba(21, 94, 89, 0.12), 0 2px 6px 0 rgba(21, 94, 89, 0.06)'
+  },
+  transition: { fast: '0.12s', ease: 'cubic-bezier(0.22, 1, 0.36, 1)' }
+})

package/src/theme/presets/sakura.ts

@@ -0,0 +1,37 @@
+import { lightTheme } from './light'
+
+/** 樱花（柔粉 + 花瓣底，大圆角、弹性缓动），天生适合浅色 */
+export const sakuraTheme = lightTheme.new({
+  color: {
+    primary: '#e64980', // 樱粉
+    success: '#2f9e6e',
+    warning: '#e8890c',
+    danger: '#e03131',
+    info: '#7c6cf0',
+    disabled: '#faf0f3',
+    default: '#faf0f3'
+  },
+  bg: { color: { bottom: '#fdf1f5', middle: '#fef6f9', top: '#ffffff', hover: '#fbe4ec' } },
+  'text-color': {
+    title: '#43272f', // 樱墨
+    main: '#5f3d46',
+    second: '#92616d',
+    assist: '#dcc0c7',
+    placeholder: '#b58694',
+    disabled: '#c4a0aa'
+  },
+  border: { width: 1, color: '#f0c3d4', mutedColor: '#e09db6' },
+  radius: { small: 8, default: 12, large: 16 },
+  // 更宽松的表单控件，配合大圆角的柔和感
+  'form-component-height': { small: 26, default: 34, large: 42 },
+  shadow: {
+    color: 'rgba(173, 58, 105, 0.12)',
+    x: 0,
+    y: 4,
+    blur: 14,
+    spread: -2,
+    sm: '0 1px 2px 0 rgba(173, 58, 105, 0.08)',
+    lg: '0 8px 24px 0 rgba(173, 58, 105, 0.14), 0 2px 6px 0 rgba(173, 58, 105, 0.08)'
+  },
+  transition: { easeOut: 'cubic-bezier(0.34, 1.56, 0.64, 1)' }
+})

package/src/theme/ui-theme.ts

@@ -10,6 +10,16 @@ type RecursivePartial<T> = {
   [P in keyof T]?: T[P] extends object ? RecursivePartial<T[P]> : T[P]
 }
 
+/** 主题系列：浅色或深色。决定组件级 token 与 html[data-theme] */
+export type ThemeSeries = 'light' | 'dark'
+
+export interface UIThemeOptions {
+  /** 主题变更时是否自动重渲染，默认 true */
+  reactive?: boolean
+  /** 主题所属系列，默认 'light' */
+  series?: ThemeSeries
+}
+
 export class UITheme {
   static themeID = 'ultra-ui-theme'
 
@@ -17,26 +27,20 @@ export class UITheme {
 
   readonly theme: Theme
 
+  /** 主题所属系列：浅色 / 深色 */
+  series: ThemeSeries
+
   private readonly reactiveEnabled: boolean
 
-  constructor(theme: Theme, options?: { reactive?: boolean }) {
+  constructor(theme: Theme, options?: UIThemeOptions) {
     this.reactiveEnabled = options?.reactive !== false
+    this.series = options?.series ?? 'light'
     this.theme = reactive(theme) as Theme
     if (this.reactiveEnabled) {
       watch(this.theme, () => this.render(), { deep: true })
     }
   }
 
-  static setTheme(mode: 'light' | 'dark' | 'auto'): void {
-    if (typeof document === 'undefined') return
-    const el = document.documentElement
-    if (mode === 'auto') {
-      delete el.dataset.theme
-    } else {
-      el.dataset.theme = mode
-    }
-  }
-
   private renderBase(
     theme: Record<string, unknown>,
     themeRules: string[] = [],
@@ -267,42 +271,20 @@ export class UITheme {
     }
   }
 
-  /** 内置 light/dark：支持 data-theme 与 prefers-color-scheme */
-  static injectBuiltInThemes(light: UITheme, dark: UITheme): void {
-    const lightDecls = [
-      ...light.themeToDeclarationList(toRaw(light.theme)),
-      ...componentCssVarsLightDecls
-    ]
-    const darkDecls = [
-      ...dark.themeToDeclarationList(toRaw(dark.theme)),
-      ...componentCssVarsDarkDecls
-    ]
-    const lightBlock = UITheme.declarationBlock(lightDecls)
-    const darkBlock = UITheme.declarationBlock(darkDecls)
-
-    const css = [
-      `html { ${lightBlock} }`,
-      `@media (prefers-color-scheme: dark) {`,
-      `  html:not([data-theme="light"]) { ${darkBlock} }`,
-      `}`,
-      `html[data-theme="light"] { ${lightBlock} }`,
-      `html[data-theme="dark"] { ${darkBlock} }`
-    ].join('\n')
-
-    UITheme.applyGlobalCSS(css)
-  }
-
+  /** 注入主题：全局 token + 与主题系列匹配的组件级 token，并写入 html[data-theme] */
   render(): void {
-    const isDark =
-      typeof document !== 'undefined' && document.documentElement.dataset.theme === 'dark'
-    const componentDecls = isDark ? componentCssVarsDarkDecls : componentCssVarsLightDecls
+    const componentDecls =
+      this.series === 'dark' ? componentCssVarsDarkDecls : componentCssVarsLightDecls
     const decls = [...this.themeToDeclarationList(toRaw(this.theme)), ...componentDecls]
     const block = UITheme.declarationBlock(decls)
     const css = `html { ${block} }`
     UITheme.applyGlobalCSS(css)
+    if (typeof document !== 'undefined') {
+      document.documentElement.dataset.theme = this.series
+    }
   }
 
-  new(customTheme: RecursivePartial<Theme> = {}): UITheme {
+  new(customTheme: RecursivePartial<Theme> = {}, options?: { series?: ThemeSeries }): UITheme {
     function delEmpty(obj: Record<string, unknown>) {
       Object.keys(obj).forEach((key) => {
         const value = obj[key]
@@ -335,6 +317,9 @@ export class UITheme {
     }
 
     deepMerge(base, customTheme)
-    return new UITheme(base as Theme, { reactive: this.reactiveEnabled })
+    return new UITheme(base as Theme, {
+      reactive: this.reactiveEnabled,
+      series: options?.series ?? this.series
+    })
   }
 }

package/dist/theme/presets/shadcn.d.ts

@@ -1,8 +0,0 @@
-import { UITheme } from "../ui-theme.js";
-import "../index.js";
-//#region src/theme/presets/shadcn.d.ts
-declare const shadcnLightTheme: UITheme;
-declare const shadcnDarkTheme: UITheme;
-//#endregion
-export { shadcnDarkTheme, shadcnLightTheme };
-//# sourceMappingURL=shadcn.d.ts.map

package/dist/theme/presets/shadcn.js

@@ -1,100 +0,0 @@
-import { lightTheme } from "./light.js";
-//#region src/theme/presets/shadcn.ts
-const shadcnLightTheme = lightTheme.new({
-	color: {
-		primary: "#18181b",
-		success: "#22c55e",
-		warning: "#f59e0b",
-		danger: "#ef4444",
-		info: "#3b82f6",
-		disabled: "#f4f4f5",
-		default: "#fafafa"
-	},
-	bg: { color: {
-		bottom: "#f4f4f5",
-		middle: "#fafafa",
-		top: "#ffffff",
-		hover: "#f4f4f5",
-		black: "#000000"
-	} },
-	border: {
-		color: "#e4e4e7",
-		mutedColor: "#e4e4e7"
-	},
-	"text-color": {
-		title: "#09090b",
-		main: "#09090b",
-		second: "#71717a",
-		placeholder: "#a1a1aa",
-		assist: "#a1a1aa",
-		disabled: "#a1a1aa",
-		white: "#ffffff"
-	},
-	radius: {
-		small: 4,
-		default: 6,
-		large: 8
-	},
-	shadow: {
-		color: "#0000000d",
-		x: 0,
-		y: 1,
-		blur: 2,
-		spread: 0,
-		emboss: "none"
-	},
-	button: {
-		"primary-text-color": "#ffffff",
-		"primary-hover-bg": "#27272a",
-		"primary-hover-color": "#ffffff"
-	}
-});
-const shadcnDarkTheme = shadcnLightTheme.new({
-	color: {
-		primary: "#fafafa",
-		disabled: "#27272a",
-		default: "#18181b"
-	},
-	bg: { color: {
-		bottom: "#09090b",
-		middle: "#18181b",
-		top: "#27272a",
-		hover: "#27272a",
-		black: "#000000"
-	} },
-	border: {
-		color: "#3f3f46",
-		mutedColor: "#27272a"
-	},
-	"text-color": {
-		title: "#fafafa",
-		main: "#fafafa",
-		second: "#a1a1aa",
-		placeholder: "#71717a",
-		assist: "#71717a",
-		disabled: "#71717a",
-		white: "#ffffff"
-	},
-	shadow: {
-		color: "#00000066",
-		x: 0,
-		y: 1,
-		blur: 2,
-		spread: 0,
-		emboss: "none",
-		sm: "0 1px 2px 0 rgba(0, 0, 0, 0.4)",
-		lg: "0 8px 24px 0 rgba(0, 0, 0, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.35)"
-	},
-	button: {
-		"primary-text-color": "#000000",
-		"primary-hover-bg": "#e4e4e7",
-		"primary-hover-color": "#000000",
-		"primary-plain-color": "#fafafa"
-	},
-	checkbox: { color: "#000000" },
-	tag: { "primary-dark-color": "#000000" }
-});
-//#endregion
-export { shadcnDarkTheme, shadcnLightTheme };
-
-//# sourceMappingURL=shadcn.js.map

package/dist/theme/presets/shadcn.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"shadcn.js","names":[],"sources":["../../../src/theme/presets/shadcn.ts"],"sourcesContent":["import { lightTheme } from './light'\n\nexport const shadcnLightTheme = lightTheme.new({\n  color: {\n    primary: '#18181b', // zinc-900\n    success: '#22c55e',\n    warning: '#f59e0b',\n    danger: '#ef4444',\n    info: '#3b82f6',\n    disabled: '#f4f4f5',\n    default: '#fafafa'\n  },\n  bg: {\n    color: {\n      bottom: '#f4f4f5',\n      middle: '#fafafa',\n      top: '#ffffff',\n      hover: '#f4f4f5',\n      black: '#000000'\n    }\n  },\n  border: { color: '#e4e4e7', mutedColor: '#e4e4e7' },\n  'text-color': {\n    title: '#09090b',\n    main: '#09090b',\n    second: '#71717a',\n    placeholder: '#a1a1aa',\n    assist: '#a1a1aa',\n    disabled: '#a1a1aa',\n    white: '#ffffff'\n  },\n  radius: { small: 4, default: 6, large: 8 },\n  shadow: { color: '#0000000d', x: 0, y: 1, blur: 2, spread: 0, emboss: 'none' },\n  button: {\n    'primary-text-color': '#ffffff',\n    'primary-hover-bg': '#27272a',\n    'primary-hover-color': '#ffffff'\n  }\n})\n\nexport const shadcnDarkTheme = shadcnLightTheme.new({\n  color: {\n    primary: '#fafafa', // zinc-50\n    disabled: '#27272a',\n    default: '#18181b'\n  },\n  bg: {\n    color: {\n      bottom: '#09090b',\n      middle: '#18181b',\n      top: '#27272a',\n      hover: '#27272a',\n      black: '#000000'\n    }\n  },\n  border: { color: '#3f3f46', mutedColor: '#27272a' },\n  'text-color': {\n    title: '#fafafa',\n    main: '#fafafa',\n    second: '#a1a1aa',\n    placeholder: '#71717a',\n    assist: '#71717a',\n    disabled: '#71717a',\n    white: '#ffffff'\n  },\n  shadow: {\n    color: '#00000066',\n    x: 0,\n    y: 1,\n    blur: 2,\n    spread: 0,\n    emboss: 'none',\n    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.4)',\n    lg: '0 8px 24px 0 rgba(0, 0, 0, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.35)'\n  },\n  button: {\n    'primary-text-color': '#000000',\n    'primary-hover-bg': '#e4e4e7',\n    'primary-hover-color': '#000000',\n    'primary-plain-color': '#fafafa'\n  },\n  checkbox: { color: '#000000' },\n  tag: { 'primary-dark-color': '#000000' }\n})\n"],"mappings":";;AAEA,MAAa,mBAAmB,WAAW,IAAI;CAC7C,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,IAAI,EACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;EACP,OAAO;CACT,EACF;CACA,QAAQ;EAAE,OAAO;EAAW,YAAY;CAAU;CAClD,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CACA,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;CAAE;CACzC,QAAQ;EAAE,OAAO;EAAa,GAAG;EAAG,GAAG;EAAG,MAAM;EAAG,QAAQ;EAAG,QAAQ;CAAO;CAC7E,QAAQ;EACN,sBAAsB;EACtB,oBAAoB;EACpB,uBAAuB;CACzB;AACF,CAAC;AAED,MAAa,kBAAkB,iBAAiB,IAAI;CAClD,OAAO;EACL,SAAS;EACT,UAAU;EACV,SAAS;CACX;CACA,IAAI,EACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;EACP,OAAO;CACT,EACF;CACA,QAAQ;EAAE,OAAO;EAAW,YAAY;CAAU;CAClD,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CACA,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,IAAI;EACJ,IAAI;CACN;CACA,QAAQ;EACN,sBAAsB;EACtB,oBAAoB;EACpB,uBAAuB;EACvB,uBAAuB;CACzB;CACA,UAAU,EAAE,OAAO,UAAU;CAC7B,KAAK,EAAE,sBAAsB,UAAU;AACzC,CAAC"}