├── CONTRIBUTING.md
├── playground
    ├── src
    │   ├── vite-env.d.ts
    │   ├── lib
    │   │   └── utils.ts
    │   ├── main.tsx
    │   ├── app.tsx
    │   └── components
    │   │   ├── appearance-switch.tsx
    │   │   ├── theme-switch.tsx
    │   │   └── ui
    │   │       ├── button.tsx
    │   │       └── accordion.tsx
    ├── .gitignore
    ├── components.json
    ├── vite.config.ts
    ├── uno.config.ts
    ├── tsconfig.json
    ├── package.json
    └── index.html
├── pnpm-workspace.yaml
├── .npmrc
├── .gitignore
├── eslint.config.js
├── .release-it.json
├── .vscode
    └── settings.json
├── tsconfig.json
├── test
    ├── snapshot
    │   ├── presetShadcn()-disable_color_and_radius-getCSS.css
    │   ├── presetShadcn()-disable_color-getCSS.css
    │   ├── neutral-0.75.css
    │   ├── custom.css
    │   ├── zinc-0.5.css
    │   ├── dark-selector.css
    │   ├── presetShadcn()-disable_global_styles-getCSS.css
    │   ├── presetShadcn()-disable_radius-getCSS.css
    │   ├── presetShadcn()-default-getCSS.css
    │   ├── presetShadcn()-use_reka_ui-getCSS.css
    │   ├── presetShadcn()-default.json
    │   └── multiple.css
    └── generate.test.ts
├── .github
    └── workflows
    │   ├── release.yml
    │   └── ci.yml
├── src
    ├── types.ts
    ├── generate.ts
    ├── v3.ts
    ├── index.ts
    └── themes
    │   ├── v3.ts
    │   └── v4.ts
├── LICENSE
├── package.json
└── README.md


/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | Please refer to https://github.com/antfu/contribute
2 | 


--------------------------------------------------------------------------------
/playground/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 |   - playground
3 |   - examples/*
4 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | registry=https://registry.npmjs.org/
2 | ignore-workspace-root-check=true
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .cache
 2 | .DS_Store
 3 | .idea
 4 | *.log
 5 | *.tgz
 6 | coverage
 7 | dist
 8 | lib-cov
 9 | logs
10 | node_modules
11 | temp
12 | .svelte-kit
13 | 


--------------------------------------------------------------------------------
/playground/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import type { ClassValue } from 'clsx'
2 | import { clsx } from 'clsx'
3 | import { twMerge } from 'tailwind-merge'
4 | 
5 | export function cn(...inputs: ClassValue[]) {
6 |   return twMerge(clsx(inputs))
7 | }
8 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | import { defineConfig } from 'eslint-config-hyoban'
 3 | 
 4 | export default defineConfig(
 5 |   {
 6 |     ignores: [
 7 |       'test/snapshot/**/*',
 8 |     ],
 9 |     unocss: false,
10 |   },
11 | )
12 | 


--------------------------------------------------------------------------------
/.release-it.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "plugins": {
 3 |     "release-it-pnpm": {}
 4 |   },
 5 |   "git": {
 6 |     "commitMessage": "chore: release v${version}",
 7 |     "tagName": "v${version}"
 8 |   },
 9 |   "hooks": {
10 |     "before:init": [
11 |       "pnpm run lint",
12 |       "pnpm run typecheck",
13 |       "pnpm run test --run"
14 |     ]
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/playground/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import '@unocss/reset/tailwind.css'
 2 | import 'virtual:uno.css'
 3 | 
 4 | import * as React from 'react'
 5 | import ReactDOM from 'react-dom/client'
 6 | 
 7 | import App from './app'
 8 | 
 9 | ReactDOM.createRoot(document.querySelector('#root')!).render(
10 |   <React.StrictMode>
11 |     <App />
12 |   </React.StrictMode>,
13 | )
14 | 


--------------------------------------------------------------------------------
/playground/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "[javascript][javascriptreact][typescript][typescriptreact][json][jsonc]": {
 3 |     "editor.formatOnSave": false,
 4 |     "editor.codeActionsOnSave": {
 5 |       "source.fixAll.eslint": "explicit"
 6 |     }
 7 |   },
 8 | 
 9 |   // You can also silent all auto fixable rules
10 |   "eslint.rules.customizations": [
11 |     { "rule": "*", "fixable": true, "severity": "off" }
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/playground/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "tailwind": {
 5 |     "config": "tailwind.config.js",
 6 |     "css": "styles/global.css",
 7 |     "baseColor": "neutral",
 8 |     "cssVariables": true,
 9 |     "prefix": ""
10 |   },
11 |   "rsc": false,
12 |   "tsx": true,
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/playground/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import path from 'node:path'
 2 | import { fileURLToPath } from 'node:url'
 3 | 
 4 | import react from '@vitejs/plugin-react'
 5 | import UnoCSS from 'unocss/vite'
 6 | import { defineConfig } from 'vite'
 7 | 
 8 | const _dirname = fileURLToPath(new URL('.', import.meta.url))
 9 | 
10 | export default defineConfig({
11 |   plugins: [react(), UnoCSS()],
12 |   resolve: {
13 |     alias: {
14 |       '@': path.resolve(_dirname, './src'),
15 |     },
16 |   },
17 | })
18 | 


--------------------------------------------------------------------------------
/playground/uno.config.ts:
--------------------------------------------------------------------------------
 1 | import { presetWind } from '@unocss/preset-wind3'
 2 | import { defineConfig, presetIcons } from 'unocss'
 3 | import presetAnimations from 'unocss-preset-animations'
 4 | import { builtinColors, presetShadcn } from 'unocss-preset-shadcn'
 5 | 
 6 | export default defineConfig({
 7 |   presets: [
 8 |     presetWind(),
 9 |     presetIcons({
10 |       scale: 1.3,
11 |     }),
12 |     presetAnimations(),
13 |     presetShadcn(builtinColors.map(c => ({ color: c }))),
14 |   ],
15 | })
16 | 


--------------------------------------------------------------------------------
/playground/src/app.tsx:
--------------------------------------------------------------------------------
 1 | import { AppearanceSwitch } from '@/components/appearance-switch'
 2 | import { ThemeSwitch } from '@/components/theme-switch'
 3 | 
 4 | export default function ButtonDemo() {
 5 |   return (
 6 |     <div className="h-full flex flex-col justify-center items-center gap-8">
 7 |       <ThemeSwitch />
 8 |       <div className="flex gap-4">
 9 |         <AppearanceSwitch />
10 |         <a
11 |           className="i-lucide-github"
12 |           href="https://github.com/hyoban/unocss-preset-shadcn"
13 |           target="_blank"
14 |           rel="noreferrer"
15 |         />
16 |       </div>
17 |     </div>
18 |   )
19 | }
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     /* Base Options: */
 4 |     "esModuleInterop": true,
 5 |     "skipLibCheck": true,
 6 |     "target": "es2022",
 7 |     "allowJs": true,
 8 |     "resolveJsonModule": true,
 9 |     "moduleDetection": "force",
10 |     "isolatedModules": true,
11 | 
12 |     /* Strictness */
13 |     "strict": true,
14 |     "noUncheckedIndexedAccess": true,
15 | 
16 |     /* If NOT transpiling with TypeScript: */
17 |     "moduleResolution": "Bundler",
18 |     "module": "preserve",
19 |     "noEmit": true,
20 | 
21 |     /* If your code doesn't run in the DOM: */
22 |     "lib": ["es2022"]
23 |   },
24 |   "exclude": ["playground", "dist"]
25 | }
26 | 


--------------------------------------------------------------------------------
/test/snapshot/presetShadcn()-disable_color_and_radius-getCSS.css:
--------------------------------------------------------------------------------
 1 | 
 2 |           @keyframes shadcn-down { from{ height: 0 } to { height: var(--radix-accordion-content-height)} }
 3 |           @keyframes shadcn-up { from{ height: var(--radix-accordion-content-height)} to { height: 0 } }
 4 |           @keyframes shadcn-collapsible-down { from{ height: 0 } to { height: var(--radix-collapsible-content-height)} }
 5 |           @keyframes shadcn-collapsible-up { from{ height: var(--radix-collapsible-content-height)} to { height: 0 } }
 6 | 
 7 |           
 8 | 
 9 |           
10 | * {
11 |   border-color: hsl(var(--border));
12 | }
13 | 
14 | body {
15 |   color: hsl(var(--foreground));
16 |   background: hsl(var(--background));
17 | }
18 | 
19 |         


--------------------------------------------------------------------------------
/playground/src/components/appearance-switch.tsx:
--------------------------------------------------------------------------------
 1 | import { useDark } from 'jotai-dark/react'
 2 | 
 3 | export function AppearanceSwitch({ className = '' }: { className?: string }) {
 4 |   const { toggleDark } = useDark({
 5 |     disableTransition: true,
 6 |     disableTransitionExclude: ['.i-lucide-sun', '.i-lucide-moon'],
 7 |   })
 8 | 
 9 |   return (
10 |     <button type="button" onClick={toggleDark} className={`flex ${className}`}>
11 |       <div className="i-lucide-sun scale-100 dark:scale-0 transition-transform duration-500 rotate-0 dark:-rotate-90" />
12 |       <div className="i-lucide-moon absolute scale-0 dark:scale-100 transition-transform duration-500 rotate-90 dark:rotate-0" />
13 |       <span className="sr-only">Toggle theme</span>
14 |     </button>
15 |   )
16 | }
17 | 


--------------------------------------------------------------------------------
/test/snapshot/presetShadcn()-disable_color-getCSS.css:
--------------------------------------------------------------------------------
 1 | 
 2 |           @keyframes shadcn-down { from{ height: 0 } to { height: var(--radix-accordion-content-height)} }
 3 |           @keyframes shadcn-up { from{ height: var(--radix-accordion-content-height)} to { height: 0 } }
 4 |           @keyframes shadcn-collapsible-down { from{ height: 0 } to { height: var(--radix-collapsible-content-height)} }
 5 |           @keyframes shadcn-collapsible-up { from{ height: var(--radix-collapsible-content-height)} to { height: 0 } }
 6 | 
 7 |           
 8 | :root {
 9 |   --radius: 0.5rem;
10 | }
11 | 
12 | 
13 |           
14 | * {
15 |   border-color: hsl(var(--border));
16 | }
17 | 
18 | body {
19 |   color: hsl(var(--foreground));
20 |   background: hsl(var(--background));
21 | }
22 | 
23 |         


--------------------------------------------------------------------------------
/playground/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     /* Base Options: */
 4 |     "esModuleInterop": true,
 5 |     "skipLibCheck": true,
 6 |     "target": "es2022",
 7 |     "allowJs": true,
 8 |     "resolveJsonModule": true,
 9 |     "moduleDetection": "force",
10 |     "isolatedModules": true,
11 | 
12 |     /* Strictness */
13 |     "strict": true,
14 |     "noUncheckedIndexedAccess": true,
15 | 
16 |     /* If NOT transpiling with TypeScript: */
17 |     "moduleResolution": "Bundler",
18 |     "module": "ESNext",
19 |     "noEmit": true,
20 | 
21 |     /* If your code runs in the DOM: */
22 |     "lib": ["es2022", "dom", "dom.iterable"],
23 | 
24 |     "useDefineForClassFields": true,
25 |     "allowImportingTsExtensions": true,
26 |     "jsx": "react-jsx",
27 | 
28 |     /* Aliases */
29 |     "baseUrl": ".",
30 |     "paths": {
31 |       "@/*": ["./src/*"]
32 |     }
33 |   },
34 |   "exclude": ["dist"]
35 | }
36 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | on:
 4 |   push:
 5 |     tags:
 6 |       - 'v*'
 7 | 
 8 | jobs:
 9 |   release:
10 |     permissions:
11 |       id-token: write
12 |       contents: write
13 |     runs-on: ubuntu-latest
14 |     steps:
15 |       - uses: actions/checkout@v5
16 |         with:
17 |           fetch-depth: 0
18 | 
19 |       - name: Install pnpm
20 |         uses: pnpm/action-setup@v4.1.0
21 | 
22 |       - name: Set node
23 |         uses: actions/setup-node@v4
24 |         with:
25 |           node-version: lts/*
26 |           cache: pnpm
27 |           registry-url: 'https://registry.npmjs.org'
28 | 
29 |       - run: npx changelogithub
30 |         continue-on-error: true
31 |         env:
32 |           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
33 | 
34 |       - name: Install Dependencies
35 |         run: pnpm install
36 | 
37 |       - name: Publish to NPM
38 |         run: npm install -g npm@latest && pnpm publish --no-git-checks


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | import type { DeepPartial } from 'unocss'
 2 | 
 3 | import type { Theme as ShadcnTheme, ThemeCSSVarsVariant } from './themes/v3'
 4 | 
 5 | export type ShadcnThemeColor = ShadcnTheme['name']
 6 | 
 7 | type ArrayOrSingle<T> = T | T[]
 8 | 
 9 | export type ColorOptions =
10 |   | ShadcnThemeColor
11 |   | ThemeCSSVarsVariant
12 |   | ({ base: ShadcnThemeColor } & DeepPartial<ThemeCSSVarsVariant>)
13 | 
14 | export interface ThemeOptions {
15 |   /**
16 |    * @default 'zinc'
17 |    */
18 |   color?: ColorOptions | false
19 |   /**
20 |    * @default 0.5
21 |    */
22 |   radius?: number | false
23 |   /**
24 |    * @default '.dark'
25 |    */
26 |   darkSelector?: string
27 | }
28 | 
29 | export type PresetShadcnThemeOptions = ArrayOrSingle<ThemeOptions>
30 | 
31 | export interface PresetShadcnControlOptions {
32 |   /**
33 |    * @param Generates global variables, like *.border-color, body.color, body.background.
34 |    * @default true
35 |    */
36 |   globals?: boolean
37 | 
38 |   /**
39 |    * @default 'radix'
40 |    */
41 |   componentLibrary?: 'radix' | 'reka'
42 | }
43 | 


--------------------------------------------------------------------------------
/playground/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "playground",
 3 |   "type": "module",
 4 |   "version": "0.5.0",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "build": "vite build",
 8 |     "dev": "vite",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "@radix-ui/react-accordion": "^1.2.3",
13 |     "@radix-ui/react-slot": "^1.1.2",
14 |     "@unocss/reset": "^66.1.0-beta.3",
15 |     "class-variance-authority": "^0.7.1",
16 |     "clsx": "^2.1.1",
17 |     "foxact": "^0.2.44",
18 |     "jotai-dark": "^0.4.0",
19 |     "lucide-react": "^0.479.0",
20 |     "react": "^19.0.0",
21 |     "react-dom": "^19.0.0",
22 |     "tailwind-merge": "^3.0.2"
23 |   },
24 |   "devDependencies": {
25 |     "@iconify-json/lucide": "^1.2.29",
26 |     "@types/react": "^19.0.10",
27 |     "@types/react-dom": "^19.0.4",
28 |     "@unocss/preset-wind3": "66.1.0-beta.3",
29 |     "@vitejs/plugin-react": "^4.3.4",
30 |     "typescript": "^5.8.2",
31 |     "unocss": "^66.1.0-beta.3",
32 |     "unocss-preset-animations": "^1.1.1",
33 |     "unocss-preset-shadcn": "workspace:^",
34 |     "vite": "^6.2.1"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Stephen Zhou <https://github.com/hyoban>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/playground/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en" class="h-full">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React + TS + UnoCSS + shadcn</title>
 8 |     <script>
 9 |       !(function () {
10 |         var e =
11 |             window.matchMedia &&
12 |             window.matchMedia("(prefers-color-scheme: dark)").matches,
13 |           t = localStorage.getItem("use-dark") || "system";
14 |         ('"dark"' === t || (e && '"light"' !== t)) &&
15 |           document.documentElement.classList.toggle("dark", !0);
16 |       })();
17 |     </script>
18 |     <style>
19 |       html.dark {
20 |         color-scheme: dark;
21 |       }
22 |     </style>
23 |   </head>
24 |   <body class="h-full">
25 |     <div id="root" class="h-full"></div>
26 |     <script>
27 |       !(function () {
28 |         var currentColor = localStorage.getItem("currentColor") || '"neutral"';
29 |         var currentRadius = localStorage.getItem("currentRadius") || "0.5";
30 |         document.body.classList.add(`theme-${currentColor.slice(1, -1)}`);
31 |         document.body.style.setProperty("--radius", `${currentRadius}rem`);
32 |       })();
33 |     </script>
34 |     <script type="module" src="/src/main.tsx"></script>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 |   pull_request:
 9 |     branches:
10 |       - main
11 | 
12 | jobs:
13 |   test:
14 |     name: Test
15 |     strategy:
16 |       matrix:
17 |         node: [lts/*, lts/-1]
18 |         os: [ubuntu-latest, windows-latest]
19 |       fail-fast: false
20 |     runs-on: ${{ matrix.os }}
21 |     timeout-minutes: 10
22 | 
23 |     steps:
24 |       - uses: actions/checkout@v4
25 | 
26 |       - name: Set node ${{ matrix.node }}
27 |         uses: actions/setup-node@v4
28 |         with:
29 |           node-version: ${{ matrix.node }}
30 | 
31 |       - name: Install pnpm
32 |         uses: pnpm/action-setup@v4
33 |         with:
34 |           run_install: |
35 |             - args: [--frozen-lockfile]
36 | 
37 |       - name: Install Global Packages
38 |         if: ${{ matrix.os == 'ubuntu-latest' }}
39 |         run: pnpm install -g publint @arethetypeswrong/cli
40 | 
41 |       - name: Lint
42 |         if: ${{ matrix.os == 'ubuntu-latest' }}
43 |         run: pnpm run lint
44 | 
45 |       - name: Type check
46 |         if: ${{ matrix.os == 'ubuntu-latest' }}
47 |         run: pnpm run typecheck
48 | 
49 |       - name: Build
50 |         run: pnpm run build
51 | 
52 |       - name: Test
53 |         run: pnpm run test
54 | 
55 |       - name: Pub Lint
56 |         if: ${{ matrix.os == 'ubuntu-latest' }}
57 |         run: publint
58 | 
59 |       - name: Are The Types Wrong
60 |         if: ${{ matrix.os == 'ubuntu-latest' }}
61 |         run: attw --pack .
62 | 
63 |       - name: Dedupe
64 |         if: ${{ matrix.os == 'ubuntu-latest' }}
65 |         run: pnpm dedupe --check
66 | 


--------------------------------------------------------------------------------
/playground/src/components/theme-switch.tsx:
--------------------------------------------------------------------------------
 1 | import { useLocalStorage } from 'foxact/use-local-storage'
 2 | 
 3 | import { Button } from '@/components/ui/button'
 4 | 
 5 | const builtinColors = [
 6 |   'zinc',
 7 |   'slate',
 8 |   'stone',
 9 |   'gray',
10 |   'neutral',
11 |   'red',
12 |   'rose',
13 |   'orange',
14 |   'green',
15 |   'blue',
16 |   'yellow',
17 |   'violet',
18 | ] as const
19 | const builtinRadiuses = [0, 0.3, 0.5, 0.75, 1] as const
20 | 
21 | export function ThemeSwitch() {
22 |   const [currentColor, setCurrentColor] = useLocalStorage<
23 |     (typeof builtinColors)[number]
24 |   >('currentColor', 'neutral')
25 | 
26 |   const [currentRadius, setCurrentRadius] = useLocalStorage<
27 |     (typeof builtinRadiuses)[number]
28 |   >('currentRadius', 0.5)
29 | 
30 |   return (
31 |     <div className="space-y-4">
32 |       <p>Color</p>
33 |       <div className="grid grid-cols-6 gap-2">
34 |         {builtinColors.map(color => (
35 |           <Button
36 |             key={color}
37 |             onClick={() => {
38 |               document.body.classList.remove(`theme-${currentColor}`)
39 |               document.body.classList.add(`theme-${color}`)
40 |               setCurrentColor(color)
41 |             }}
42 |             variant={color === currentColor ? 'default' : 'secondary'}
43 |           >
44 |             {color}
45 |           </Button>
46 |         ))}
47 |       </div>
48 |       <p>Radius</p>
49 |       <div className="flex gap-2">
50 |         {builtinRadiuses.map(radius => (
51 |           <Button
52 |             key={radius}
53 |             onClick={() => {
54 |               document.body.style.setProperty('--radius', `${radius}rem`)
55 |               setCurrentRadius(radius)
56 |             }}
57 |             variant={radius === currentRadius ? 'default' : 'secondary'}
58 |           >
59 |             {radius}
60 |           </Button>
61 |         ))}
62 |       </div>
63 |     </div>
64 |   )
65 | }
66 | 


--------------------------------------------------------------------------------
/playground/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import { Slot } from '@radix-ui/react-slot'
 2 | import type { VariantProps } from 'class-variance-authority'
 3 | import { cva } from 'class-variance-authority'
 4 | import * as React from 'react'
 5 | 
 6 | import { cn } from '@/lib/utils'
 7 | 
 8 | const buttonVariants = cva(
 9 |   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
10 |   {
11 |     variants: {
12 |       variant: {
13 |         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
14 |         destructive:
15 |           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
16 |         outline:
17 |           'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
18 |         secondary:
19 |           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
20 |         ghost: 'hover:bg-accent hover:text-accent-foreground',
21 |         link: 'text-primary underline-offset-4 hover:underline',
22 |       },
23 |       size: {
24 |         default: 'h-10 px-4 py-2',
25 |         sm: 'h-9 rounded-md px-3',
26 |         lg: 'h-11 rounded-md px-8',
27 |         icon: 'h-10 w-10',
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: 'default',
32 |       size: 'default',
33 |     },
34 |   },
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |   VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : 'button'
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   },
54 | )
55 | Button.displayName = 'Button'
56 | 
57 | export { Button, buttonVariants }
58 | 


--------------------------------------------------------------------------------
/playground/src/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
 1 | import * as AccordionPrimitive from '@radix-ui/react-accordion'
 2 | import { ChevronDown } from 'lucide-react'
 3 | import * as React from 'react'
 4 | 
 5 | import { cn } from '@/lib/utils'
 6 | 
 7 | const Accordion = AccordionPrimitive.Root
 8 | 
 9 | const AccordionItem = React.forwardRef<
10 |   React.ElementRef<typeof AccordionPrimitive.Item>,
11 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
12 | >(({ className, ...props }, ref) => (
13 |   <AccordionPrimitive.Item
14 |     ref={ref}
15 |     className={cn('border-b', className)}
16 |     {...props}
17 |   />
18 | ))
19 | AccordionItem.displayName = 'AccordionItem'
20 | 
21 | const AccordionTrigger = React.forwardRef<
22 |   React.ElementRef<typeof AccordionPrimitive.Trigger>,
23 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
24 | >(({ className, children, ...props }, ref) => (
25 |   <AccordionPrimitive.Header className="flex">
26 |     <AccordionPrimitive.Trigger
27 |       ref={ref}
28 |       className={cn(
29 |         'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
30 |         className,
31 |       )}
32 |       {...props}
33 |     >
34 |       {children}
35 |       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
36 |     </AccordionPrimitive.Trigger>
37 |   </AccordionPrimitive.Header>
38 | ))
39 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
40 | 
41 | const AccordionContent = React.forwardRef<
42 |   React.ElementRef<typeof AccordionPrimitive.Content>,
43 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
44 | >(({ className, children, ...props }, ref) => (
45 |   <AccordionPrimitive.Content
46 |     ref={ref}
47 |     className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
48 |     {...props}
49 |   >
50 |     <div className={cn('pb-4 pt-0', className)}>{children}</div>
51 |   </AccordionPrimitive.Content>
52 | ))
53 | 
54 | AccordionContent.displayName = AccordionPrimitive.Content.displayName
55 | 
56 | export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }
57 | 


--------------------------------------------------------------------------------
/test/snapshot/neutral-0.75.css:
--------------------------------------------------------------------------------
 1 | 
 2 | :root {
 3 |   --background: 0 0% 100%;
 4 |   --foreground: 0 0% 3.9%;
 5 |   --card: 0 0% 100%;
 6 |   --card-foreground: 0 0% 3.9%;
 7 |   --popover: 0 0% 100%;
 8 |   --popover-foreground: 0 0% 3.9%;
 9 |   --primary: 0 0% 9%;
10 |   --primary-foreground: 0 0% 98%;
11 |   --secondary: 0 0% 96.1%;
12 |   --secondary-foreground: 0 0% 9%;
13 |   --muted: 0 0% 96.1%;
14 |   --muted-foreground: 0 0% 45.1%;
15 |   --accent: 0 0% 96.1%;
16 |   --accent-foreground: 0 0% 9%;
17 |   --destructive: 0 84.2% 60.2%;
18 |   --destructive-foreground: 0 0% 98%;
19 |   --border: 0 0% 89.8%;
20 |   --input: 0 0% 89.8%;
21 |   --ring: 0 0% 3.9%;
22 |   --chart-1: 12 76% 61%;
23 |   --chart-2: 173 58% 39%;
24 |   --chart-3: 197 37% 24%;
25 |   --chart-4: 43 74% 66%;
26 |   --chart-5: 27 87% 67%;
27 |   --sidebar: 0 0% 98%;
28 |   --sidebar-foreground: 240 5.3% 26.1%;
29 |   --sidebar-primary: 240 5.9% 10%;
30 |   --sidebar-primary-foreground: 0 0% 98%;
31 |   --sidebar-accent: 240 4.8% 95.9%;
32 |   --sidebar-accent-foreground: 240 5.9% 10%;
33 |   --sidebar-border: 220 13% 91%;
34 |   --sidebar-ring: 217.2 91.2% 59.8%;
35 |   --radius: 0.75rem;
36 | }
37 | .dark {
38 |   --background: 0 0% 3.9%;
39 |   --foreground: 0 0% 98%;
40 |   --card: 0 0% 3.9%;
41 |   --card-foreground: 0 0% 98%;
42 |   --popover: 0 0% 3.9%;
43 |   --popover-foreground: 0 0% 98%;
44 |   --primary: 0 0% 98%;
45 |   --primary-foreground: 0 0% 9%;
46 |   --secondary: 0 0% 14.9%;
47 |   --secondary-foreground: 0 0% 98%;
48 |   --muted: 0 0% 14.9%;
49 |   --muted-foreground: 0 0% 63.9%;
50 |   --accent: 0 0% 14.9%;
51 |   --accent-foreground: 0 0% 98%;
52 |   --destructive: 0 62.8% 30.6%;
53 |   --destructive-foreground: 0 0% 98%;
54 |   --border: 0 0% 14.9%;
55 |   --input: 0 0% 14.9%;
56 |   --ring: 0 0% 83.1%;
57 |   --chart-1: 220 70% 50%;
58 |   --chart-2: 160 60% 45%;
59 |   --chart-3: 30 80% 55%;
60 |   --chart-4: 280 65% 60%;
61 |   --chart-5: 340 75% 55%;
62 |   --sidebar: 240 5.9% 10%;
63 |   --sidebar-foreground: 240 4.8% 95.9%;
64 |   --sidebar-primary: 0 0% 98%;
65 |   --sidebar-primary-foreground: 240 5.9% 10%;
66 |   --sidebar-accent: 240 3.7% 15.9%;
67 |   --sidebar-accent-foreground: 240 4.8% 95.9%;
68 |   --sidebar-border: 240 3.7% 15.9%;
69 |   --sidebar-ring: 217.2 91.2% 59.8%;
70 | }


--------------------------------------------------------------------------------
/test/snapshot/custom.css:
--------------------------------------------------------------------------------
 1 | 
 2 | :root {
 3 |   --background: 0 1% 100%;
 4 |   --foreground: 240 10% 3.9%;
 5 |   --card: 0 0% 100%;
 6 |   --card-foreground: 240 10% 3.9%;
 7 |   --popover: 0 0% 100%;
 8 |   --popover-foreground: 240 10% 3.9%;
 9 |   --primary: 240 5.9% 10%;
10 |   --primary-foreground: 0 0% 98%;
11 |   --secondary: 240 4.8% 95.9%;
12 |   --secondary-foreground: 240 5.9% 10%;
13 |   --muted: 240 4.8% 95.9%;
14 |   --muted-foreground: 240 3.8% 46.1%;
15 |   --accent: 240 4.8% 95.9%;
16 |   --accent-foreground: 240 5.9% 10%;
17 |   --destructive: 0 84.2% 60.2%;
18 |   --destructive-foreground: 0 0% 98%;
19 |   --border: 240 5.9% 90%;
20 |   --input: 240 5.9% 90%;
21 |   --ring: 240 5.9% 10%;
22 |   --chart-1: 12 76% 61%;
23 |   --chart-2: 173 58% 39%;
24 |   --chart-3: 197 37% 24%;
25 |   --chart-4: 43 74% 66%;
26 |   --chart-5: 27 87% 67%;
27 |   --sidebar: 0 0% 98%;
28 |   --sidebar-foreground: 240 5.3% 26.1%;
29 |   --sidebar-primary: 240 5.9% 10%;
30 |   --sidebar-primary-foreground: 0 0% 98%;
31 |   --sidebar-accent: 240 4.8% 95.9%;
32 |   --sidebar-accent-foreground: 240 5.9% 10%;
33 |   --sidebar-border: 220 13% 91%;
34 |   --sidebar-ring: 217.2 91.2% 59.8%;
35 |   --radius: 1rem;
36 | }
37 | .dark {
38 |   --background: 240 10% 3.9%;
39 |   --foreground: 0 0% 98%;
40 |   --card: 240 10% 3.9%;
41 |   --card-foreground: 0 0% 98%;
42 |   --popover: 240 10% 3.9%;
43 |   --popover-foreground: 0 0% 98%;
44 |   --primary: 0 0% 98%;
45 |   --primary-foreground: 240 5.9% 10%;
46 |   --secondary: 240 3.7% 15.9%;
47 |   --secondary-foreground: 0 0% 98%;
48 |   --muted: 240 3.7% 15.9%;
49 |   --muted-foreground: 240 5% 64.9%;
50 |   --accent: 240 3.7% 15.9%;
51 |   --accent-foreground: 0 0% 98%;
52 |   --destructive: 0 62.8% 30.6%;
53 |   --destructive-foreground: 0 0% 98%;
54 |   --border: 240 3.7% 15.9%;
55 |   --input: 240 3.7% 15.9%;
56 |   --ring: 240 4.9% 83.9%;
57 |   --chart-1: 220 70% 50%;
58 |   --chart-2: 160 60% 45%;
59 |   --chart-3: 30 80% 55%;
60 |   --chart-4: 280 65% 60%;
61 |   --chart-5: 340 75% 55%;
62 |   --sidebar: 240 5.9% 10%;
63 |   --sidebar-foreground: 240 4.8% 95.9%;
64 |   --sidebar-primary: 0 0% 98%;
65 |   --sidebar-primary-foreground: 240 5.9% 10%;
66 |   --sidebar-accent: 240 3.7% 15.9%;
67 |   --sidebar-accent-foreground: 240 4.8% 95.9%;
68 |   --sidebar-border: 240 3.7% 15.9%;
69 |   --sidebar-ring: 217.2 91.2% 59.8%;
70 | }


--------------------------------------------------------------------------------
/test/snapshot/zinc-0.5.css:
--------------------------------------------------------------------------------
 1 | 
 2 | :root {
 3 |   --background: 0 0% 100%;
 4 |   --foreground: 240 10% 3.9%;
 5 |   --card: 0 0% 100%;
 6 |   --card-foreground: 240 10% 3.9%;
 7 |   --popover: 0 0% 100%;
 8 |   --popover-foreground: 240 10% 3.9%;
 9 |   --primary: 240 5.9% 10%;
10 |   --primary-foreground: 0 0% 98%;
11 |   --secondary: 240 4.8% 95.9%;
12 |   --secondary-foreground: 240 5.9% 10%;
13 |   --muted: 240 4.8% 95.9%;
14 |   --muted-foreground: 240 3.8% 46.1%;
15 |   --accent: 240 4.8% 95.9%;
16 |   --accent-foreground: 240 5.9% 10%;
17 |   --destructive: 0 84.2% 60.2%;
18 |   --destructive-foreground: 0 0% 98%;
19 |   --border: 240 5.9% 90%;
20 |   --input: 240 5.9% 90%;
21 |   --ring: 240 5.9% 10%;
22 |   --chart-1: 12 76% 61%;
23 |   --chart-2: 173 58% 39%;
24 |   --chart-3: 197 37% 24%;
25 |   --chart-4: 43 74% 66%;
26 |   --chart-5: 27 87% 67%;
27 |   --sidebar: 0 0% 98%;
28 |   --sidebar-foreground: 240 5.3% 26.1%;
29 |   --sidebar-primary: 240 5.9% 10%;
30 |   --sidebar-primary-foreground: 0 0% 98%;
31 |   --sidebar-accent: 240 4.8% 95.9%;
32 |   --sidebar-accent-foreground: 240 5.9% 10%;
33 |   --sidebar-border: 220 13% 91%;
34 |   --sidebar-ring: 217.2 91.2% 59.8%;
35 |   --radius: 0.5rem;
36 | }
37 | .dark {
38 |   --background: 240 10% 3.9%;
39 |   --foreground: 0 0% 98%;
40 |   --card: 240 10% 3.9%;
41 |   --card-foreground: 0 0% 98%;
42 |   --popover: 240 10% 3.9%;
43 |   --popover-foreground: 0 0% 98%;
44 |   --primary: 0 0% 98%;
45 |   --primary-foreground: 240 5.9% 10%;
46 |   --secondary: 240 3.7% 15.9%;
47 |   --secondary-foreground: 0 0% 98%;
48 |   --muted: 240 3.7% 15.9%;
49 |   --muted-foreground: 240 5% 64.9%;
50 |   --accent: 240 3.7% 15.9%;
51 |   --accent-foreground: 0 0% 98%;
52 |   --destructive: 0 62.8% 30.6%;
53 |   --destructive-foreground: 0 0% 98%;
54 |   --border: 240 3.7% 15.9%;
55 |   --input: 240 3.7% 15.9%;
56 |   --ring: 240 4.9% 83.9%;
57 |   --chart-1: 220 70% 50%;
58 |   --chart-2: 160 60% 45%;
59 |   --chart-3: 30 80% 55%;
60 |   --chart-4: 280 65% 60%;
61 |   --chart-5: 340 75% 55%;
62 |   --sidebar: 240 5.9% 10%;
63 |   --sidebar-foreground: 240 4.8% 95.9%;
64 |   --sidebar-primary: 0 0% 98%;
65 |   --sidebar-primary-foreground: 240 5.9% 10%;
66 |   --sidebar-accent: 240 3.7% 15.9%;
67 |   --sidebar-accent-foreground: 240 4.8% 95.9%;
68 |   --sidebar-border: 240 3.7% 15.9%;
69 |   --sidebar-ring: 217.2 91.2% 59.8%;
70 | }


--------------------------------------------------------------------------------
/test/snapshot/dark-selector.css:
--------------------------------------------------------------------------------
 1 | 
 2 | :root {
 3 |   --background: 0 0% 100%;
 4 |   --foreground: 240 10% 3.9%;
 5 |   --card: 0 0% 100%;
 6 |   --card-foreground: 240 10% 3.9%;
 7 |   --popover: 0 0% 100%;
 8 |   --popover-foreground: 240 10% 3.9%;
 9 |   --primary: 240 5.9% 10%;
10 |   --primary-foreground: 0 0% 98%;
11 |   --secondary: 240 4.8% 95.9%;
12 |   --secondary-foreground: 240 5.9% 10%;
13 |   --muted: 240 4.8% 95.9%;
14 |   --muted-foreground: 240 3.8% 46.1%;
15 |   --accent: 240 4.8% 95.9%;
16 |   --accent-foreground: 240 5.9% 10%;
17 |   --destructive: 0 84.2% 60.2%;
18 |   --destructive-foreground: 0 0% 98%;
19 |   --border: 240 5.9% 90%;
20 |   --input: 240 5.9% 90%;
21 |   --ring: 240 5.9% 10%;
22 |   --chart-1: 12 76% 61%;
23 |   --chart-2: 173 58% 39%;
24 |   --chart-3: 197 37% 24%;
25 |   --chart-4: 43 74% 66%;
26 |   --chart-5: 27 87% 67%;
27 |   --sidebar: 0 0% 98%;
28 |   --sidebar-foreground: 240 5.3% 26.1%;
29 |   --sidebar-primary: 240 5.9% 10%;
30 |   --sidebar-primary-foreground: 0 0% 98%;
31 |   --sidebar-accent: 240 4.8% 95.9%;
32 |   --sidebar-accent-foreground: 240 5.9% 10%;
33 |   --sidebar-border: 220 13% 91%;
34 |   --sidebar-ring: 217.2 91.2% 59.8%;
35 |   --radius: 0.5rem;
36 | }
37 | .custom-dark {
38 |   --background: 240 10% 3.9%;
39 |   --foreground: 0 0% 98%;
40 |   --card: 240 10% 3.9%;
41 |   --card-foreground: 0 0% 98%;
42 |   --popover: 240 10% 3.9%;
43 |   --popover-foreground: 0 0% 98%;
44 |   --primary: 0 0% 98%;
45 |   --primary-foreground: 240 5.9% 10%;
46 |   --secondary: 240 3.7% 15.9%;
47 |   --secondary-foreground: 0 0% 98%;
48 |   --muted: 240 3.7% 15.9%;
49 |   --muted-foreground: 240 5% 64.9%;
50 |   --accent: 240 3.7% 15.9%;
51 |   --accent-foreground: 0 0% 98%;
52 |   --destructive: 0 62.8% 30.6%;
53 |   --destructive-foreground: 0 0% 98%;
54 |   --border: 240 3.7% 15.9%;
55 |   --input: 240 3.7% 15.9%;
56 |   --ring: 240 4.9% 83.9%;
57 |   --chart-1: 220 70% 50%;
58 |   --chart-2: 160 60% 45%;
59 |   --chart-3: 30 80% 55%;
60 |   --chart-4: 280 65% 60%;
61 |   --chart-5: 340 75% 55%;
62 |   --sidebar: 240 5.9% 10%;
63 |   --sidebar-foreground: 240 4.8% 95.9%;
64 |   --sidebar-primary: 0 0% 98%;
65 |   --sidebar-primary-foreground: 240 5.9% 10%;
66 |   --sidebar-accent: 240 3.7% 15.9%;
67 |   --sidebar-accent-foreground: 240 4.8% 95.9%;
68 |   --sidebar-border: 240 3.7% 15.9%;
69 |   --sidebar-ring: 217.2 91.2% 59.8%;
70 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "unocss-preset-shadcn",
 3 |   "type": "module",
 4 |   "version": "1.0.1",
 5 |   "packageManager": "pnpm@10.6.2",
 6 |   "description": "use shadcn ui with unocss",
 7 |   "author": "Stephen Zhou <hi@hyoban.cc>",
 8 |   "license": "MIT",
 9 |   "homepage": "https://github.com/unocss-community/unocss-preset-shadcn#readme",
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "https://github.com/unocss-community/unocss-preset-shadcn"
13 |   },
14 |   "bugs": "https://github.com/unocss-community/unocss-preset-shadcn/issues",
15 |   "keywords": [
16 |     "unocss",
17 |     "shadcn"
18 |   ],
19 |   "sideEffects": false,
20 |   "exports": {
21 |     ".": {
22 |       "import": {
23 |         "types": "./dist/index.d.mts",
24 |         "default": "./dist/index.mjs"
25 |       },
26 |       "require": {
27 |         "types": "./dist/index.d.cts",
28 |         "default": "./dist/index.cjs"
29 |       }
30 |     },
31 |     "./v3": {
32 |       "import": {
33 |         "types": "./dist/v3.d.mts",
34 |         "default": "./dist/v3.mjs"
35 |       },
36 |       "require": {
37 |         "types": "./dist/v3.d.cts",
38 |         "default": "./dist/v3.cjs"
39 |       }
40 |     }
41 |   },
42 |   "main": "./dist/index.cjs",
43 |   "module": "./dist/index.mjs",
44 |   "types": "./dist/index.d.ts",
45 |   "typesVersions": {
46 |     "*": {
47 |       "*": [
48 |         "./dist/*",
49 |         "./dist/index.d.ts"
50 |       ]
51 |     }
52 |   },
53 |   "files": [
54 |     "dist"
55 |   ],
56 |   "scripts": {
57 |     "build": "unbuild",
58 |     "dev": "unbuild --stub",
59 |     "lint": "eslint .",
60 |     "prepare": "simple-git-hooks && nr build",
61 |     "prepublishOnly": "nr build",
62 |     "release": "release-it",
63 |     "test": "vitest",
64 |     "typecheck": "tsc --noEmit"
65 |   },
66 |   "peerDependencies": {
67 |     "unocss": ">=0.56.0 < 101",
68 |     "unocss-preset-animations": "^1.1.1"
69 |   },
70 |   "devDependencies": {
71 |     "@antfu/ni": "^24.1.0",
72 |     "@antfu/utils": "^9.1.0",
73 |     "@types/node": "^22.13.10",
74 |     "@unocss/preset-mini": "^66.5.0",
75 |     "eslint": "^9.22.0",
76 |     "eslint-config-hyoban": "^4.0.1",
77 |     "lint-staged": "^15.5.0",
78 |     "release-it": "^18.1.2",
79 |     "release-it-pnpm": "^4.6.4",
80 |     "simple-git-hooks": "^2.11.1",
81 |     "typescript": "^5.8.2",
82 |     "unbuild": "^3.5.0",
83 |     "unocss": "^66.5.0",
84 |     "vite": "^6.2.1",
85 |     "vitest": "^3.0.8"
86 |   },
87 |   "simple-git-hooks": {
88 |     "pre-commit": "pnpm lint-staged"
89 |   },
90 |   "lint-staged": {
91 |     "*": "eslint --fix"
92 |   }
93 | }
94 | 


--------------------------------------------------------------------------------
/test/snapshot/presetShadcn()-disable_global_styles-getCSS.css:
--------------------------------------------------------------------------------
 1 | 
 2 |           @keyframes shadcn-down { from{ height: 0 } to { height: var(--radix-accordion-content-height)} }
 3 |           @keyframes shadcn-up { from{ height: var(--radix-accordion-content-height)} to { height: 0 } }
 4 |           @keyframes shadcn-collapsible-down { from{ height: 0 } to { height: var(--radix-collapsible-content-height)} }
 5 |           @keyframes shadcn-collapsible-up { from{ height: var(--radix-collapsible-content-height)} to { height: 0 } }
 6 | 
 7 |           
 8 | :root {
 9 |   --background: 0 0% 100%;
10 |   --foreground: 240 10% 3.9%;
11 |   --card: 0 0% 100%;
12 |   --card-foreground: 240 10% 3.9%;
13 |   --popover: 0 0% 100%;
14 |   --popover-foreground: 240 10% 3.9%;
15 |   --primary: 240 5.9% 10%;
16 |   --primary-foreground: 0 0% 98%;
17 |   --secondary: 240 4.8% 95.9%;
18 |   --secondary-foreground: 240 5.9% 10%;
19 |   --muted: 240 4.8% 95.9%;
20 |   --muted-foreground: 240 3.8% 46.1%;
21 |   --accent: 240 4.8% 95.9%;
22 |   --accent-foreground: 240 5.9% 10%;
23 |   --destructive: 0 84.2% 60.2%;
24 |   --destructive-foreground: 0 0% 98%;
25 |   --border: 240 5.9% 90%;
26 |   --input: 240 5.9% 90%;
27 |   --ring: 240 5.9% 10%;
28 |   --chart-1: 12 76% 61%;
29 |   --chart-2: 173 58% 39%;
30 |   --chart-3: 197 37% 24%;
31 |   --chart-4: 43 74% 66%;
32 |   --chart-5: 27 87% 67%;
33 |   --sidebar: 0 0% 98%;
34 |   --sidebar-foreground: 240 5.3% 26.1%;
35 |   --sidebar-primary: 240 5.9% 10%;
36 |   --sidebar-primary-foreground: 0 0% 98%;
37 |   --sidebar-accent: 240 4.8% 95.9%;
38 |   --sidebar-accent-foreground: 240 5.9% 10%;
39 |   --sidebar-border: 220 13% 91%;
40 |   --sidebar-ring: 217.2 91.2% 59.8%;
41 |   --radius: 0.5rem;
42 | }
43 | .dark {
44 |   --background: 240 10% 3.9%;
45 |   --foreground: 0 0% 98%;
46 |   --card: 240 10% 3.9%;
47 |   --card-foreground: 0 0% 98%;
48 |   --popover: 240 10% 3.9%;
49 |   --popover-foreground: 0 0% 98%;
50 |   --primary: 0 0% 98%;
51 |   --primary-foreground: 240 5.9% 10%;
52 |   --secondary: 240 3.7% 15.9%;
53 |   --secondary-foreground: 0 0% 98%;
54 |   --muted: 240 3.7% 15.9%;
55 |   --muted-foreground: 240 5% 64.9%;
56 |   --accent: 240 3.7% 15.9%;
57 |   --accent-foreground: 0 0% 98%;
58 |   --destructive: 0 62.8% 30.6%;
59 |   --destructive-foreground: 0 0% 98%;
60 |   --border: 240 3.7% 15.9%;
61 |   --input: 240 3.7% 15.9%;
62 |   --ring: 240 4.9% 83.9%;
63 |   --chart-1: 220 70% 50%;
64 |   --chart-2: 160 60% 45%;
65 |   --chart-3: 30 80% 55%;
66 |   --chart-4: 280 65% 60%;
67 |   --chart-5: 340 75% 55%;
68 |   --sidebar: 240 5.9% 10%;
69 |   --sidebar-foreground: 240 4.8% 95.9%;
70 |   --sidebar-primary: 0 0% 98%;
71 |   --sidebar-primary-foreground: 240 5.9% 10%;
72 |   --sidebar-accent: 240 3.7% 15.9%;
73 |   --sidebar-accent-foreground: 240 4.8% 95.9%;
74 |   --sidebar-border: 240 3.7% 15.9%;
75 |   --sidebar-ring: 217.2 91.2% 59.8%;
76 | }
77 | 
78 |           
79 |         


--------------------------------------------------------------------------------
/test/snapshot/presetShadcn()-disable_radius-getCSS.css:
--------------------------------------------------------------------------------
 1 | 
 2 |           @keyframes shadcn-down { from{ height: 0 } to { height: var(--radix-accordion-content-height)} }
 3 |           @keyframes shadcn-up { from{ height: var(--radix-accordion-content-height)} to { height: 0 } }
 4 |           @keyframes shadcn-collapsible-down { from{ height: 0 } to { height: var(--radix-collapsible-content-height)} }
 5 |           @keyframes shadcn-collapsible-up { from{ height: var(--radix-collapsible-content-height)} to { height: 0 } }
 6 | 
 7 |           
 8 | :root {
 9 |   --background: 0 0% 100%;
10 |   --foreground: 240 10% 3.9%;
11 |   --card: 0 0% 100%;
12 |   --card-foreground: 240 10% 3.9%;
13 |   --popover: 0 0% 100%;
14 |   --popover-foreground: 240 10% 3.9%;
15 |   --primary: 240 5.9% 10%;
16 |   --primary-foreground: 0 0% 98%;
17 |   --secondary: 240 4.8% 95.9%;
18 |   --secondary-foreground: 240 5.9% 10%;
19 |   --muted: 240 4.8% 95.9%;
20 |   --muted-foreground: 240 3.8% 46.1%;
21 |   --accent: 240 4.8% 95.9%;
22 |   --accent-foreground: 240 5.9% 10%;
23 |   --destructive: 0 84.2% 60.2%;
24 |   --destructive-foreground: 0 0% 98%;
25 |   --border: 240 5.9% 90%;
26 |   --input: 240 5.9% 90%;
27 |   --ring: 240 5.9% 10%;
28 |   --chart-1: 12 76% 61%;
29 |   --chart-2: 173 58% 39%;
30 |   --chart-3: 197 37% 24%;
31 |   --chart-4: 43 74% 66%;
32 |   --chart-5: 27 87% 67%;
33 |   --sidebar: 0 0% 98%;
34 |   --sidebar-foreground: 240 5.3% 26.1%;
35 |   --sidebar-primary: 240 5.9% 10%;
36 |   --sidebar-primary-foreground: 0 0% 98%;
37 |   --sidebar-accent: 240 4.8% 95.9%;
38 |   --sidebar-accent-foreground: 240 5.9% 10%;
39 |   --sidebar-border: 220 13% 91%;
40 |   --sidebar-ring: 217.2 91.2% 59.8%;
41 | 
42 | }
43 | .dark {
44 |   --background: 240 10% 3.9%;
45 |   --foreground: 0 0% 98%;
46 |   --card: 240 10% 3.9%;
47 |   --card-foreground: 0 0% 98%;
48 |   --popover: 240 10% 3.9%;
49 |   --popover-foreground: 0 0% 98%;
50 |   --primary: 0 0% 98%;
51 |   --primary-foreground: 240 5.9% 10%;
52 |   --secondary: 240 3.7% 15.9%;
53 |   --secondary-foreground: 0 0% 98%;
54 |   --muted: 240 3.7% 15.9%;
55 |   --muted-foreground: 240 5% 64.9%;
56 |   --accent: 240 3.7% 15.9%;
57 |   --accent-foreground: 0 0% 98%;
58 |   --destructive: 0 62.8% 30.6%;
59 |   --destructive-foreground: 0 0% 98%;
60 |   --border: 240 3.7% 15.9%;
61 |   --input: 240 3.7% 15.9%;
62 |   --ring: 240 4.9% 83.9%;
63 |   --chart-1: 220 70% 50%;
64 |   --chart-2: 160 60% 45%;
65 |   --chart-3: 30 80% 55%;
66 |   --chart-4: 280 65% 60%;
67 |   --chart-5: 340 75% 55%;
68 |   --sidebar: 240 5.9% 10%;
69 |   --sidebar-foreground: 240 4.8% 95.9%;
70 |   --sidebar-primary: 0 0% 98%;
71 |   --sidebar-primary-foreground: 240 5.9% 10%;
72 |   --sidebar-accent: 240 3.7% 15.9%;
73 |   --sidebar-accent-foreground: 240 4.8% 95.9%;
74 |   --sidebar-border: 240 3.7% 15.9%;
75 |   --sidebar-ring: 217.2 91.2% 59.8%;
76 | }
77 | 
78 |           
79 | * {
80 |   border-color: hsl(var(--border));
81 | }
82 | 
83 | body {
84 |   color: hsl(var(--foreground));
85 |   background: hsl(var(--background));
86 | }
87 | 
88 |         


--------------------------------------------------------------------------------
/test/snapshot/presetShadcn()-default-getCSS.css:
--------------------------------------------------------------------------------
 1 | 
 2 |           @keyframes shadcn-down { from{ height: 0 } to { height: var(--radix-accordion-content-height)} }
 3 |           @keyframes shadcn-up { from{ height: var(--radix-accordion-content-height)} to { height: 0 } }
 4 |           @keyframes shadcn-collapsible-down { from{ height: 0 } to { height: var(--radix-collapsible-content-height)} }
 5 |           @keyframes shadcn-collapsible-up { from{ height: var(--radix-collapsible-content-height)} to { height: 0 } }
 6 | 
 7 |           
 8 | :root {
 9 |   --background: 0 0% 100%;
10 |   --foreground: 240 10% 3.9%;
11 |   --card: 0 0% 100%;
12 |   --card-foreground: 240 10% 3.9%;
13 |   --popover: 0 0% 100%;
14 |   --popover-foreground: 240 10% 3.9%;
15 |   --primary: 240 5.9% 10%;
16 |   --primary-foreground: 0 0% 98%;
17 |   --secondary: 240 4.8% 95.9%;
18 |   --secondary-foreground: 240 5.9% 10%;
19 |   --muted: 240 4.8% 95.9%;
20 |   --muted-foreground: 240 3.8% 46.1%;
21 |   --accent: 240 4.8% 95.9%;
22 |   --accent-foreground: 240 5.9% 10%;
23 |   --destructive: 0 84.2% 60.2%;
24 |   --destructive-foreground: 0 0% 98%;
25 |   --border: 240 5.9% 90%;
26 |   --input: 240 5.9% 90%;
27 |   --ring: 240 5.9% 10%;
28 |   --chart-1: 12 76% 61%;
29 |   --chart-2: 173 58% 39%;
30 |   --chart-3: 197 37% 24%;
31 |   --chart-4: 43 74% 66%;
32 |   --chart-5: 27 87% 67%;
33 |   --sidebar: 0 0% 98%;
34 |   --sidebar-foreground: 240 5.3% 26.1%;
35 |   --sidebar-primary: 240 5.9% 10%;
36 |   --sidebar-primary-foreground: 0 0% 98%;
37 |   --sidebar-accent: 240 4.8% 95.9%;
38 |   --sidebar-accent-foreground: 240 5.9% 10%;
39 |   --sidebar-border: 220 13% 91%;
40 |   --sidebar-ring: 217.2 91.2% 59.8%;
41 |   --radius: 0.5rem;
42 | }
43 | .dark {
44 |   --background: 240 10% 3.9%;
45 |   --foreground: 0 0% 98%;
46 |   --card: 240 10% 3.9%;
47 |   --card-foreground: 0 0% 98%;
48 |   --popover: 240 10% 3.9%;
49 |   --popover-foreground: 0 0% 98%;
50 |   --primary: 0 0% 98%;
51 |   --primary-foreground: 240 5.9% 10%;
52 |   --secondary: 240 3.7% 15.9%;
53 |   --secondary-foreground: 0 0% 98%;
54 |   --muted: 240 3.7% 15.9%;
55 |   --muted-foreground: 240 5% 64.9%;
56 |   --accent: 240 3.7% 15.9%;
57 |   --accent-foreground: 0 0% 98%;
58 |   --destructive: 0 62.8% 30.6%;
59 |   --destructive-foreground: 0 0% 98%;
60 |   --border: 240 3.7% 15.9%;
61 |   --input: 240 3.7% 15.9%;
62 |   --ring: 240 4.9% 83.9%;
63 |   --chart-1: 220 70% 50%;
64 |   --chart-2: 160 60% 45%;
65 |   --chart-3: 30 80% 55%;
66 |   --chart-4: 280 65% 60%;
67 |   --chart-5: 340 75% 55%;
68 |   --sidebar: 240 5.9% 10%;
69 |   --sidebar-foreground: 240 4.8% 95.9%;
70 |   --sidebar-primary: 0 0% 98%;
71 |   --sidebar-primary-foreground: 240 5.9% 10%;
72 |   --sidebar-accent: 240 3.7% 15.9%;
73 |   --sidebar-accent-foreground: 240 4.8% 95.9%;
74 |   --sidebar-border: 240 3.7% 15.9%;
75 |   --sidebar-ring: 217.2 91.2% 59.8%;
76 | }
77 | 
78 |           
79 | * {
80 |   border-color: hsl(var(--border));
81 | }
82 | 
83 | body {
84 |   color: hsl(var(--foreground));
85 |   background: hsl(var(--background));
86 | }
87 | 
88 |         


--------------------------------------------------------------------------------
/test/snapshot/presetShadcn()-use_reka_ui-getCSS.css:
--------------------------------------------------------------------------------
 1 | 
 2 |           @keyframes shadcn-down { from{ height: 0 } to { height: var(--reka-accordion-content-height)} }
 3 |           @keyframes shadcn-up { from{ height: var(--reka-accordion-content-height)} to { height: 0 } }
 4 |           @keyframes shadcn-collapsible-down { from{ height: 0 } to { height: var(--reka-collapsible-content-height)} }
 5 |           @keyframes shadcn-collapsible-up { from{ height: var(--reka-collapsible-content-height)} to { height: 0 } }
 6 | 
 7 |           
 8 | :root {
 9 |   --background: 0 0% 100%;
10 |   --foreground: 240 10% 3.9%;
11 |   --card: 0 0% 100%;
12 |   --card-foreground: 240 10% 3.9%;
13 |   --popover: 0 0% 100%;
14 |   --popover-foreground: 240 10% 3.9%;
15 |   --primary: 240 5.9% 10%;
16 |   --primary-foreground: 0 0% 98%;
17 |   --secondary: 240 4.8% 95.9%;
18 |   --secondary-foreground: 240 5.9% 10%;
19 |   --muted: 240 4.8% 95.9%;
20 |   --muted-foreground: 240 3.8% 46.1%;
21 |   --accent: 240 4.8% 95.9%;
22 |   --accent-foreground: 240 5.9% 10%;
23 |   --destructive: 0 84.2% 60.2%;
24 |   --destructive-foreground: 0 0% 98%;
25 |   --border: 240 5.9% 90%;
26 |   --input: 240 5.9% 90%;
27 |   --ring: 240 5.9% 10%;
28 |   --chart-1: 12 76% 61%;
29 |   --chart-2: 173 58% 39%;
30 |   --chart-3: 197 37% 24%;
31 |   --chart-4: 43 74% 66%;
32 |   --chart-5: 27 87% 67%;
33 |   --sidebar: 0 0% 98%;
34 |   --sidebar-foreground: 240 5.3% 26.1%;
35 |   --sidebar-primary: 240 5.9% 10%;
36 |   --sidebar-primary-foreground: 0 0% 98%;
37 |   --sidebar-accent: 240 4.8% 95.9%;
38 |   --sidebar-accent-foreground: 240 5.9% 10%;
39 |   --sidebar-border: 220 13% 91%;
40 |   --sidebar-ring: 217.2 91.2% 59.8%;
41 |   --radius: 0.5rem;
42 | }
43 | .dark {
44 |   --background: 240 10% 3.9%;
45 |   --foreground: 0 0% 98%;
46 |   --card: 240 10% 3.9%;
47 |   --card-foreground: 0 0% 98%;
48 |   --popover: 240 10% 3.9%;
49 |   --popover-foreground: 0 0% 98%;
50 |   --primary: 0 0% 98%;
51 |   --primary-foreground: 240 5.9% 10%;
52 |   --secondary: 240 3.7% 15.9%;
53 |   --secondary-foreground: 0 0% 98%;
54 |   --muted: 240 3.7% 15.9%;
55 |   --muted-foreground: 240 5% 64.9%;
56 |   --accent: 240 3.7% 15.9%;
57 |   --accent-foreground: 0 0% 98%;
58 |   --destructive: 0 62.8% 30.6%;
59 |   --destructive-foreground: 0 0% 98%;
60 |   --border: 240 3.7% 15.9%;
61 |   --input: 240 3.7% 15.9%;
62 |   --ring: 240 4.9% 83.9%;
63 |   --chart-1: 220 70% 50%;
64 |   --chart-2: 160 60% 45%;
65 |   --chart-3: 30 80% 55%;
66 |   --chart-4: 280 65% 60%;
67 |   --chart-5: 340 75% 55%;
68 |   --sidebar: 240 5.9% 10%;
69 |   --sidebar-foreground: 240 4.8% 95.9%;
70 |   --sidebar-primary: 0 0% 98%;
71 |   --sidebar-primary-foreground: 240 5.9% 10%;
72 |   --sidebar-accent: 240 3.7% 15.9%;
73 |   --sidebar-accent-foreground: 240 4.8% 95.9%;
74 |   --sidebar-border: 240 3.7% 15.9%;
75 |   --sidebar-ring: 217.2 91.2% 59.8%;
76 | }
77 | 
78 |           
79 | * {
80 |   border-color: hsl(var(--border));
81 | }
82 | 
83 | body {
84 |   color: hsl(var(--foreground));
85 |   background: hsl(var(--background));
86 | }
87 | 
88 |         


--------------------------------------------------------------------------------
/test/snapshot/presetShadcn()-default.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "unocss-preset-shadcn",
 3 |   "preflights": [
 4 |     {
 5 |       "getCSS": [Function],
 6 |     },
 7 |   ],
 8 |   "rules": [
 9 |     [
10 |       "animate-accordion-down",
11 |       {
12 |         "animation": "shadcn-down 0.2s ease-out",
13 |       },
14 |     ],
15 |     [
16 |       "animate-accordion-up",
17 |       {
18 |         "animation": "shadcn-up 0.2s ease-out",
19 |       },
20 |     ],
21 |     [
22 |       "animate-collapsible-down",
23 |       {
24 |         "animation": "shadcn-collapsible-down 0.2s ease-out",
25 |       },
26 |     ],
27 |     [
28 |       "animate-collapsible-up",
29 |       {
30 |         "animation": "shadcn-collapsible-up 0.2s ease-out",
31 |       },
32 |     ],
33 |   ],
34 |   "theme": {
35 |     "borderRadius": {
36 |       "lg": "var(--radius)",
37 |       "md": "calc(var(--radius) - 2px)",
38 |       "sm": "calc(var(--radius) - 4px)",
39 |       "xl": "calc(var(--radius) + 4px)",
40 |     },
41 |     "colors": {
42 |       "accent": {
43 |         "DEFAULT": "hsl(var(--accent))",
44 |         "foreground": "hsl(var(--accent-foreground))",
45 |       },
46 |       "background": "hsl(var(--background))",
47 |       "border": "hsl(var(--border))",
48 |       "card": {
49 |         "DEFAULT": "hsl(var(--card))",
50 |         "foreground": "hsl(var(--card-foreground))",
51 |       },
52 |       "chart1": "hsl(var(--chart1))",
53 |       "chart2": "hsl(var(--chart2))",
54 |       "chart3": "hsl(var(--chart3))",
55 |       "chart4": "hsl(var(--chart4))",
56 |       "chart5": "hsl(var(--chart5))",
57 |       "destructive": {
58 |         "DEFAULT": "hsl(var(--destructive))",
59 |         "foreground": "hsl(var(--destructive-foreground))",
60 |       },
61 |       "foreground": "hsl(var(--foreground))",
62 |       "input": "hsl(var(--input))",
63 |       "muted": {
64 |         "DEFAULT": "hsl(var(--muted))",
65 |         "foreground": "hsl(var(--muted-foreground))",
66 |       },
67 |       "popover": {
68 |         "DEFAULT": "hsl(var(--popover))",
69 |         "foreground": "hsl(var(--popover-foreground))",
70 |       },
71 |       "primary": {
72 |         "DEFAULT": "hsl(var(--primary))",
73 |         "foreground": "hsl(var(--primary-foreground))",
74 |       },
75 |       "ring": "hsl(var(--ring))",
76 |       "secondary": {
77 |         "DEFAULT": "hsl(var(--secondary))",
78 |         "foreground": "hsl(var(--secondary-foreground))",
79 |       },
80 |       "sidebar": {
81 |         "DEFAULT": "hsl(var(--sidebar-background))",
82 |         "accent": {
83 |           "DEFAULT": "hsl(var(--sidebar-accent))",
84 |           "foreground": "hsl(var(--sidebar-accent-foreground))",
85 |         },
86 |         "background": "hsl(var(--sidebar-background))",
87 |         "border": "hsl(var(--sidebar-border))",
88 |         "foreground": "hsl(var(--sidebar-foreground))",
89 |         "primary": {
90 |           "DEFAULT": "hsl(var(--sidebar-primary))",
91 |           "foreground": "hsl(var(--sidebar-primary-foreground))",
92 |         },
93 |         "ring": "hsl(var(--sidebar-ring))",
94 |       },
95 |     },
96 |   },
97 | }


--------------------------------------------------------------------------------
/src/generate.ts:
--------------------------------------------------------------------------------
  1 | import { mergeDeep } from 'unocss'
  2 | 
  3 | import type { ThemeCSSVarKey, ThemeCSSVars, ThemeCSSVarsVariant, themes } from './themes/v3'
  4 | import { themeCSSVarKeys } from './themes/v3'
  5 | import type { ColorOptions, PresetShadcnThemeOptions } from './types'
  6 | 
  7 | function generateColorCSSVars(color: ThemeCSSVars) {
  8 |   return Object.entries(color)
  9 |     .map(([key, value]) => {
 10 |       if (!themeCSSVarKeys.includes(key as ThemeCSSVarKey))
 11 |         return ''
 12 |       return `  --${key}: ${value};`
 13 |     })
 14 |     .filter(Boolean)
 15 |     .join('\n')
 16 | }
 17 | 
 18 | function colorCSSVarsStyles(lightVars: string, darkVars: string, { radius, themeName, darkSelector }: { radius?: number | false, themeName?: string | false, darkSelector: string }) {
 19 |   return `
 20 | ${themeName ? `.theme-${themeName}` : ':root'} {
 21 | ${lightVars}
 22 | ${radius ? generateRadiusCSSVars(radius) : ''}
 23 | }
 24 | ${themeName ? `${darkSelector} .theme-${themeName}` : darkSelector} {
 25 | ${darkVars}
 26 | }`
 27 | }
 28 | 
 29 | function generateRadiusCSSVars(radius: number) {
 30 |   return `  --radius: ${radius}rem;`
 31 | }
 32 | 
 33 | function radiusCSSVarsStyles(radius: number) {
 34 |   return `
 35 | :root {
 36 | ${generateRadiusCSSVars(radius)}
 37 | }
 38 | `
 39 | }
 40 | 
 41 | export function generateGlobalStylesV3() {
 42 |   return `
 43 | * {
 44 |   border-color: hsl(var(--border));
 45 | }
 46 | 
 47 | body {
 48 |   color: hsl(var(--foreground));
 49 |   background: hsl(var(--background));
 50 | }
 51 | `
 52 | }
 53 | 
 54 | export function generateGlobalStyles() {
 55 |   return `
 56 | * {
 57 |   border-color: oklch(var(--border));
 58 | }
 59 | 
 60 | body {
 61 |   color: oklch(var(--foreground));
 62 |   background: oklch(var(--background));
 63 | }
 64 |   `
 65 | }
 66 | 
 67 | function getBuiltInTheme(name: string, themesRaw: typeof themes): ThemeCSSVarsVariant {
 68 |   const theme = themesRaw.find(t => t.name === name)
 69 |   if (!theme)
 70 |     throw new Error(`Unknown color: ${name}`)
 71 |   return {
 72 |     name,
 73 |     ...theme.cssVars,
 74 |   }
 75 | }
 76 | 
 77 | function getColorTheme(color: ColorOptions, themesRaw: typeof themes) {
 78 |   let light: ThemeCSSVars
 79 |   let dark: ThemeCSSVars
 80 |   let name: string
 81 | 
 82 |   if (typeof color === 'string') {
 83 |     name = color
 84 |     ;({ light, dark } = getBuiltInTheme(color, themesRaw))
 85 |   }
 86 |   else if ('base' in color) {
 87 |     name = color.base
 88 |     ;({ light, dark } = mergeDeep(getBuiltInTheme(color.base, themesRaw), color))
 89 |   }
 90 |   else {
 91 |     name = color.name
 92 |     ;({ light, dark } = color)
 93 |   }
 94 |   return { light, dark, name }
 95 | }
 96 | 
 97 | export function generateCSSVars(
 98 |   theme: PresetShadcnThemeOptions,
 99 |   themesRaw: typeof themes,
100 |   onlyOne = true,
101 | ): string {
102 |   if (Array.isArray(theme))
103 |     return theme.map(t => generateCSSVars(t, themesRaw, false)).join('\n')
104 | 
105 |   const { color = 'zinc', radius = 0.5, darkSelector = '.dark' } = theme
106 | 
107 |   let cssStyle = ''
108 | 
109 |   if (!color) {
110 |     if (radius)
111 |       cssStyle += radiusCSSVarsStyles(radius)
112 |   }
113 |   else {
114 |     const { light, dark, name } = getColorTheme(color, themesRaw)
115 |     const lightVars = generateColorCSSVars(light)
116 |     const darkVars = generateColorCSSVars(dark)
117 | 
118 |     cssStyle += colorCSSVarsStyles(lightVars, darkVars, { radius, themeName: !onlyOne && name, darkSelector })
119 |   }
120 | 
121 |   return cssStyle
122 | }
123 | 


--------------------------------------------------------------------------------
/src/v3.ts:
--------------------------------------------------------------------------------
  1 | import type { Preset } from 'unocss'
  2 | import type { Theme } from 'unocss/preset-mini'
  3 | 
  4 | import { generateCSSVars, generateGlobalStylesV3 as generateGlobalStyles } from './generate'
  5 | import { themes } from './themes/v3'
  6 | import type { PresetShadcnControlOptions, PresetShadcnThemeOptions } from './types'
  7 | 
  8 | export const builtinColors = themes.map(theme => theme.name)
  9 | export const builtinRadiuses = [0, 0.3, 0.5, 0.75, 1] as const
 10 | 
 11 | export function presetShadcnV3(
 12 |   themeOptions: PresetShadcnThemeOptions = {},
 13 |   controlOptions: PresetShadcnControlOptions = {},
 14 | ): Preset<Theme> {
 15 |   const { globals = true, componentLibrary = 'radix' } = controlOptions
 16 | 
 17 |   return {
 18 |     name: 'unocss-preset-shadcn',
 19 |     preflights: [
 20 |       {
 21 |         getCSS: () => `
 22 |           @keyframes shadcn-down { from{ height: 0 } to { height: var(--${componentLibrary}-accordion-content-height)} }
 23 |           @keyframes shadcn-up { from{ height: var(--${componentLibrary}-accordion-content-height)} to { height: 0 } }
 24 |           @keyframes shadcn-collapsible-down { from{ height: 0 } to { height: var(--${componentLibrary}-collapsible-content-height)} }
 25 |           @keyframes shadcn-collapsible-up { from{ height: var(--${componentLibrary}-collapsible-content-height)} to { height: 0 } }
 26 | 
 27 |           ${generateCSSVars(themeOptions, themes)}
 28 | 
 29 |           ${globals ? generateGlobalStyles() : ''}
 30 |         `,
 31 |       },
 32 |     ],
 33 |     rules: [
 34 |       [
 35 |         'animate-accordion-down',
 36 |         {
 37 |           animation: 'shadcn-down 0.2s ease-out',
 38 |         },
 39 |       ],
 40 |       [
 41 |         'animate-accordion-up',
 42 |         {
 43 |           animation: 'shadcn-up 0.2s ease-out',
 44 |         },
 45 |       ],
 46 |       [
 47 |         'animate-collapsible-down',
 48 |         {
 49 |           animation: 'shadcn-collapsible-down 0.2s ease-out',
 50 |         },
 51 |       ],
 52 |       [
 53 |         'animate-collapsible-up',
 54 |         {
 55 |           animation: 'shadcn-collapsible-up 0.2s ease-out',
 56 |         },
 57 |       ],
 58 |     ],
 59 |     theme: {
 60 |       colors: {
 61 |         border: 'hsl(var(--border))',
 62 |         input: 'hsl(var(--input))',
 63 |         ring: 'hsl(var(--ring))',
 64 |         background: 'hsl(var(--background))',
 65 |         foreground: 'hsl(var(--foreground))',
 66 |         primary: {
 67 |           DEFAULT: 'hsl(var(--primary))',
 68 |           foreground: 'hsl(var(--primary-foreground))',
 69 |         },
 70 |         secondary: {
 71 |           DEFAULT: 'hsl(var(--secondary))',
 72 |           foreground: 'hsl(var(--secondary-foreground))',
 73 |         },
 74 |         destructive: {
 75 |           DEFAULT: 'hsl(var(--destructive))',
 76 |           foreground: 'hsl(var(--destructive-foreground))',
 77 |         },
 78 |         muted: {
 79 |           DEFAULT: 'hsl(var(--muted))',
 80 |           foreground: 'hsl(var(--muted-foreground))',
 81 |         },
 82 |         accent: {
 83 |           DEFAULT: 'hsl(var(--accent))',
 84 |           foreground: 'hsl(var(--accent-foreground))',
 85 |         },
 86 |         popover: {
 87 |           DEFAULT: 'hsl(var(--popover))',
 88 |           foreground: 'hsl(var(--popover-foreground))',
 89 |         },
 90 |         card: {
 91 |           DEFAULT: 'hsl(var(--card))',
 92 |           foreground: 'hsl(var(--card-foreground))',
 93 |         },
 94 |         chart1: 'hsl(var(--chart1))',
 95 |         chart2: 'hsl(var(--chart2))',
 96 |         chart3: 'hsl(var(--chart3))',
 97 |         chart4: 'hsl(var(--chart4))',
 98 |         chart5: 'hsl(var(--chart5))',
 99 |         sidebar: {
100 |           DEFAULT: 'hsl(var(--sidebar-background))',
101 |           background: 'hsl(var(--sidebar-background))',
102 |           foreground: 'hsl(var(--sidebar-foreground))',
103 |           primary: {
104 |             DEFAULT: 'hsl(var(--sidebar-primary))',
105 |             foreground: 'hsl(var(--sidebar-primary-foreground))',
106 |           },
107 |           accent: {
108 |             DEFAULT: 'hsl(var(--sidebar-accent))',
109 |             foreground: 'hsl(var(--sidebar-accent-foreground))',
110 |           },
111 |           border: 'hsl(var(--sidebar-border))',
112 |           ring: 'hsl(var(--sidebar-ring))',
113 |         },
114 |       },
115 |       borderRadius: {
116 |         xl: 'calc(var(--radius) + 4px)',
117 |         lg: 'var(--radius)',
118 |         md: 'calc(var(--radius) - 2px)',
119 |         sm: 'calc(var(--radius) - 4px)',
120 |       },
121 |     },
122 |   }
123 | }
124 | 
125 | export default presetShadcnV3
126 | 


--------------------------------------------------------------------------------
/test/snapshot/multiple.css:
--------------------------------------------------------------------------------
  1 | 
  2 | .theme-zinc {
  3 |   --background: 0 0% 100%;
  4 |   --foreground: 240 10% 3.9%;
  5 |   --card: 0 0% 100%;
  6 |   --card-foreground: 240 10% 3.9%;
  7 |   --popover: 0 0% 100%;
  8 |   --popover-foreground: 240 10% 3.9%;
  9 |   --primary: 240 5.9% 10%;
 10 |   --primary-foreground: 0 0% 98%;
 11 |   --secondary: 240 4.8% 95.9%;
 12 |   --secondary-foreground: 240 5.9% 10%;
 13 |   --muted: 240 4.8% 95.9%;
 14 |   --muted-foreground: 240 3.8% 46.1%;
 15 |   --accent: 240 4.8% 95.9%;
 16 |   --accent-foreground: 240 5.9% 10%;
 17 |   --destructive: 0 84.2% 60.2%;
 18 |   --destructive-foreground: 0 0% 98%;
 19 |   --border: 240 5.9% 90%;
 20 |   --input: 240 5.9% 90%;
 21 |   --ring: 240 5.9% 10%;
 22 |   --chart-1: 12 76% 61%;
 23 |   --chart-2: 173 58% 39%;
 24 |   --chart-3: 197 37% 24%;
 25 |   --chart-4: 43 74% 66%;
 26 |   --chart-5: 27 87% 67%;
 27 |   --sidebar: 0 0% 98%;
 28 |   --sidebar-foreground: 240 5.3% 26.1%;
 29 |   --sidebar-primary: 240 5.9% 10%;
 30 |   --sidebar-primary-foreground: 0 0% 98%;
 31 |   --sidebar-accent: 240 4.8% 95.9%;
 32 |   --sidebar-accent-foreground: 240 5.9% 10%;
 33 |   --sidebar-border: 220 13% 91%;
 34 |   --sidebar-ring: 217.2 91.2% 59.8%;
 35 |   --radius: 0.5rem;
 36 | }
 37 | .dark .theme-zinc {
 38 |   --background: 240 10% 3.9%;
 39 |   --foreground: 0 0% 98%;
 40 |   --card: 240 10% 3.9%;
 41 |   --card-foreground: 0 0% 98%;
 42 |   --popover: 240 10% 3.9%;
 43 |   --popover-foreground: 0 0% 98%;
 44 |   --primary: 0 0% 98%;
 45 |   --primary-foreground: 240 5.9% 10%;
 46 |   --secondary: 240 3.7% 15.9%;
 47 |   --secondary-foreground: 0 0% 98%;
 48 |   --muted: 240 3.7% 15.9%;
 49 |   --muted-foreground: 240 5% 64.9%;
 50 |   --accent: 240 3.7% 15.9%;
 51 |   --accent-foreground: 0 0% 98%;
 52 |   --destructive: 0 62.8% 30.6%;
 53 |   --destructive-foreground: 0 0% 98%;
 54 |   --border: 240 3.7% 15.9%;
 55 |   --input: 240 3.7% 15.9%;
 56 |   --ring: 240 4.9% 83.9%;
 57 |   --chart-1: 220 70% 50%;
 58 |   --chart-2: 160 60% 45%;
 59 |   --chart-3: 30 80% 55%;
 60 |   --chart-4: 280 65% 60%;
 61 |   --chart-5: 340 75% 55%;
 62 |   --sidebar: 240 5.9% 10%;
 63 |   --sidebar-foreground: 240 4.8% 95.9%;
 64 |   --sidebar-primary: 0 0% 98%;
 65 |   --sidebar-primary-foreground: 240 5.9% 10%;
 66 |   --sidebar-accent: 240 3.7% 15.9%;
 67 |   --sidebar-accent-foreground: 240 4.8% 95.9%;
 68 |   --sidebar-border: 240 3.7% 15.9%;
 69 |   --sidebar-ring: 217.2 91.2% 59.8%;
 70 | }
 71 | 
 72 | .theme-neutral {
 73 |   --background: 0 0% 100%;
 74 |   --foreground: 0 0% 3.9%;
 75 |   --card: 0 0% 100%;
 76 |   --card-foreground: 0 0% 3.9%;
 77 |   --popover: 0 0% 100%;
 78 |   --popover-foreground: 0 0% 3.9%;
 79 |   --primary: 0 0% 9%;
 80 |   --primary-foreground: 0 0% 98%;
 81 |   --secondary: 0 0% 96.1%;
 82 |   --secondary-foreground: 0 0% 9%;
 83 |   --muted: 0 0% 96.1%;
 84 |   --muted-foreground: 0 0% 45.1%;
 85 |   --accent: 0 0% 96.1%;
 86 |   --accent-foreground: 0 0% 9%;
 87 |   --destructive: 0 84.2% 60.2%;
 88 |   --destructive-foreground: 0 0% 98%;
 89 |   --border: 0 0% 89.8%;
 90 |   --input: 0 0% 89.8%;
 91 |   --ring: 0 0% 3.9%;
 92 |   --chart-1: 12 76% 61%;
 93 |   --chart-2: 173 58% 39%;
 94 |   --chart-3: 197 37% 24%;
 95 |   --chart-4: 43 74% 66%;
 96 |   --chart-5: 27 87% 67%;
 97 |   --sidebar: 0 0% 98%;
 98 |   --sidebar-foreground: 240 5.3% 26.1%;
 99 |   --sidebar-primary: 240 5.9% 10%;
100 |   --sidebar-primary-foreground: 0 0% 98%;
101 |   --sidebar-accent: 240 4.8% 95.9%;
102 |   --sidebar-accent-foreground: 240 5.9% 10%;
103 |   --sidebar-border: 220 13% 91%;
104 |   --sidebar-ring: 217.2 91.2% 59.8%;
105 |   --radius: 0.75rem;
106 | }
107 | .dark .theme-neutral {
108 |   --background: 0 0% 3.9%;
109 |   --foreground: 0 0% 98%;
110 |   --card: 0 0% 3.9%;
111 |   --card-foreground: 0 0% 98%;
112 |   --popover: 0 0% 3.9%;
113 |   --popover-foreground: 0 0% 98%;
114 |   --primary: 0 0% 98%;
115 |   --primary-foreground: 0 0% 9%;
116 |   --secondary: 0 0% 14.9%;
117 |   --secondary-foreground: 0 0% 98%;
118 |   --muted: 0 0% 14.9%;
119 |   --muted-foreground: 0 0% 63.9%;
120 |   --accent: 0 0% 14.9%;
121 |   --accent-foreground: 0 0% 98%;
122 |   --destructive: 0 62.8% 30.6%;
123 |   --destructive-foreground: 0 0% 98%;
124 |   --border: 0 0% 14.9%;
125 |   --input: 0 0% 14.9%;
126 |   --ring: 0 0% 83.1%;
127 |   --chart-1: 220 70% 50%;
128 |   --chart-2: 160 60% 45%;
129 |   --chart-3: 30 80% 55%;
130 |   --chart-4: 280 65% 60%;
131 |   --chart-5: 340 75% 55%;
132 |   --sidebar: 240 5.9% 10%;
133 |   --sidebar-foreground: 240 4.8% 95.9%;
134 |   --sidebar-primary: 0 0% 98%;
135 |   --sidebar-primary-foreground: 240 5.9% 10%;
136 |   --sidebar-accent: 240 3.7% 15.9%;
137 |   --sidebar-accent-foreground: 240 4.8% 95.9%;
138 |   --sidebar-border: 240 3.7% 15.9%;
139 |   --sidebar-ring: 217.2 91.2% 59.8%;
140 | }


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
  1 | import type { Preset } from 'unocss'
  2 | import type { Theme } from 'unocss/preset-mini'
  3 | 
  4 | import { generateCSSVars, generateGlobalStyles } from './generate'
  5 | import type { themes as themesV3 } from './themes/v3'
  6 | import { themes } from './themes/v4'
  7 | import type { PresetShadcnControlOptions, PresetShadcnThemeOptions } from './types'
  8 | 
  9 | export const builtinColors = themes.map(theme => theme.name)
 10 | export const builtinRadiuses = [0, 0.3, 0.5, 0.75, 1] as const
 11 | 
 12 | export function presetShadcn(
 13 |   themeOptions: PresetShadcnThemeOptions = {},
 14 |   controlOptions: PresetShadcnControlOptions = {},
 15 | ): Preset<Theme> {
 16 |   const { globals = true, componentLibrary = 'radix' } = controlOptions
 17 | 
 18 |   return {
 19 |     name: 'unocss-preset-shadcn',
 20 |     preflights: [
 21 |       {
 22 |         getCSS: () => `
 23 |           @keyframes shadcn-down { from{ height: 0 } to { height: var(--${componentLibrary}-accordion-content-height)} }
 24 |           @keyframes shadcn-up { from{ height: var(--${componentLibrary}-accordion-content-height)} to { height: 0 } }
 25 |           @keyframes shadcn-collapsible-down { from{ height: 0 } to { height: var(--${componentLibrary}-collapsible-content-height)} }
 26 |           @keyframes shadcn-collapsible-up { from{ height: var(--${componentLibrary}-collapsible-content-height)} to { height: 0 } }
 27 | 
 28 |           ${generateCSSVars(themeOptions, themes as unknown as typeof themesV3)}
 29 | 
 30 |           ${globals ? generateGlobalStyles() : ''}
 31 |         `,
 32 |       },
 33 |     ],
 34 |     rules: [
 35 |       [
 36 |         'animate-accordion-down',
 37 |         {
 38 |           animation: 'shadcn-down 0.2s ease-out',
 39 |         },
 40 |       ],
 41 |       [
 42 |         'animate-accordion-up',
 43 |         {
 44 |           animation: 'shadcn-up 0.2s ease-out',
 45 |         },
 46 |       ],
 47 |       [
 48 |         'animate-collapsible-down',
 49 |         {
 50 |           animation: 'shadcn-collapsible-down 0.2s ease-out',
 51 |         },
 52 |       ],
 53 |       [
 54 |         'animate-collapsible-up',
 55 |         {
 56 |           animation: 'shadcn-collapsible-up 0.2s ease-out',
 57 |         },
 58 |       ],
 59 |     ],
 60 |     theme: {
 61 |       colors: {
 62 |         border: 'oklch(var(--border))',
 63 |         input: 'oklch(var(--input))',
 64 |         ring: 'oklch(var(--ring))',
 65 |         background: 'oklch(var(--background))',
 66 |         foreground: 'oklch(var(--foreground))',
 67 |         primary: {
 68 |           DEFAULT: 'oklch(var(--primary))',
 69 |           foreground: 'oklch(var(--primary-foreground))',
 70 |         },
 71 |         secondary: {
 72 |           DEFAULT: 'oklch(var(--secondary))',
 73 |           foreground: 'oklch(var(--secondary-foreground))',
 74 |         },
 75 |         destructive: {
 76 |           DEFAULT: 'oklch(var(--destructive))',
 77 |           foreground: 'oklch(var(--destructive-foreground))',
 78 |         },
 79 |         muted: {
 80 |           DEFAULT: 'oklch(var(--muted))',
 81 |           foreground: 'oklch(var(--muted-foreground))',
 82 |         },
 83 |         accent: {
 84 |           DEFAULT: 'oklch(var(--accent))',
 85 |           foreground: 'oklch(var(--accent-foreground))',
 86 |         },
 87 |         popover: {
 88 |           DEFAULT: 'oklch(var(--popover))',
 89 |           foreground: 'oklch(var(--popover-foreground))',
 90 |         },
 91 |         card: {
 92 |           DEFAULT: 'oklch(var(--card))',
 93 |           foreground: 'oklch(var(--card-foreground))',
 94 |         },
 95 |         chart1: 'oklch(var(--chart1))',
 96 |         chart2: 'oklch(var(--chart2))',
 97 |         chart3: 'oklch(var(--chart3))',
 98 |         chart4: 'oklch(var(--chart4))',
 99 |         chart5: 'oklch(var(--chart5))',
100 |         sidebar: {
101 |           DEFAULT: 'oklch(var(--sidebar-background))',
102 |           background: 'oklch(var(--sidebar-background))',
103 |           foreground: 'oklch(var(--sidebar-foreground))',
104 |           primary: {
105 |             DEFAULT: 'oklch(var(--sidebar-primary))',
106 |             foreground: 'oklch(var(--sidebar-primary-foreground))',
107 |           },
108 |           accent: {
109 |             DEFAULT: 'oklch(var(--sidebar-accent))',
110 |             foreground: 'oklch(var(--sidebar-accent-foreground))',
111 |           },
112 |           border: 'oklch(var(--sidebar-border))',
113 |           ring: 'oklch(var(--sidebar-ring))',
114 |         },
115 |       },
116 |       borderRadius: {
117 |         xl: 'calc(var(--radius) + 4px)',
118 |         lg: 'var(--radius)',
119 |         md: 'calc(var(--radius) - 2px)',
120 |         sm: 'calc(var(--radius) - 4px)',
121 |       },
122 |     },
123 |   }
124 | }
125 | 
126 | export default presetShadcn
127 | 


--------------------------------------------------------------------------------
/test/generate.test.ts:
--------------------------------------------------------------------------------
  1 | import { createGenerator } from 'unocss'
  2 | import { describe, expect, it } from 'vitest'
  3 | 
  4 | import { generateCSSVars } from '../src/generate'
  5 | import { themes as themesV3 } from '../src/themes/v3'
  6 | import presetShadcn from '../src/v3'
  7 | 
  8 | const unoGenerator = await createGenerator()
  9 | 
 10 | describe('presetShadcn()-execute-getCSS', () => {
 11 |   it('default options', async () => {
 12 |     const presetReturn = presetShadcn()
 13 |     await expect(presetReturn).toMatchFileSnapshot('snapshot/presetShadcn()-default.json')
 14 | 
 15 |     await expect(
 16 |       presetReturn.preflights![0]?.getCSS({ generator: unoGenerator, theme: {} }),
 17 |     ).toMatchFileSnapshot('snapshot/presetShadcn()-default-getCSS.css')
 18 |   })
 19 | 
 20 |   it('disable color', async () => {
 21 |     const presetReturn = presetShadcn({ color: false })
 22 |     // Don't think this is needed for now
 23 |     // await expect(presetReturn).toMatchFileSnapshot('snapshot/presetShadcn()-disable_color.json')
 24 | 
 25 |     await expect(
 26 |       presetReturn.preflights![0]?.getCSS({ generator: unoGenerator, theme: {} }),
 27 |     ).toMatchFileSnapshot('snapshot/presetShadcn()-disable_color-getCSS.css')
 28 |   })
 29 | 
 30 |   it('disable radius', async () => {
 31 |     const presetReturn = presetShadcn({ radius: false })
 32 |     // Don't think this is needed for now
 33 |     // await expect(presetReturn).toMatchFileSnapshot('snapshot/presetShadcn()-disable_radius.json')
 34 | 
 35 |     await expect(
 36 |       presetReturn.preflights![0]?.getCSS({ generator: unoGenerator, theme: {} }),
 37 |     ).toMatchFileSnapshot('snapshot/presetShadcn()-disable_radius-getCSS.css')
 38 |   })
 39 | 
 40 |   it('disable color and radius', async () => {
 41 |     const presetReturn = presetShadcn({ color: false, radius: false })
 42 |     // Don't think this is needed for now
 43 |     // await expect(presetReturn).toMatchFileSnapshot('snapshot/presetShadcn()-disable_color_and_radius.json')
 44 | 
 45 |     await expect(
 46 |       presetReturn.preflights![0]?.getCSS({ generator: unoGenerator, theme: {} }),
 47 |     ).toMatchFileSnapshot('snapshot/presetShadcn()-disable_color_and_radius-getCSS.css')
 48 |   })
 49 | 
 50 |   it('disable global styles', async () => {
 51 |     const presetReturn = presetShadcn(undefined, { globals: false })
 52 |     // Don't think this is needed for now
 53 |     // await expect(presetReturn).toMatchFileSnapshot('snapshot/presetShadcn()-disable_global_styles.json')
 54 | 
 55 |     await expect(
 56 |       presetReturn.preflights![0]?.getCSS({ generator: unoGenerator, theme: {} }),
 57 |     ).toMatchFileSnapshot('snapshot/presetShadcn()-disable_global_styles-getCSS.css')
 58 |   })
 59 | 
 60 |   it('use reka ui', async () => {
 61 |     const presetReturn = presetShadcn(undefined, { componentLibrary: 'reka' })
 62 |     // Don't think this is needed for now
 63 |     // await expect(presetReturn).toMatchFileSnapshot('snapshot/presetShadcn()-disable_global_styles.json')
 64 | 
 65 |     await expect(
 66 |       presetReturn.preflights![0]?.getCSS({ generator: unoGenerator, theme: {} }),
 67 |     ).toMatchFileSnapshot('snapshot/presetShadcn()-use_reka_ui-getCSS.css')
 68 |   })
 69 | })
 70 | 
 71 | describe('generate-theme-css-var', () => {
 72 |   it('built in themes', async () => {
 73 |     await expect(
 74 |       generateCSSVars({
 75 |         color: 'zinc',
 76 |         radius: 0.5,
 77 |       }, themesV3),
 78 |     ).toMatchFileSnapshot('snapshot/zinc-0.5.css')
 79 |     await expect(
 80 |       generateCSSVars({
 81 |         color: 'neutral',
 82 |         radius: 0.75,
 83 |       }, themesV3),
 84 |     ).toMatchFileSnapshot('snapshot/neutral-0.75.css')
 85 |   })
 86 | 
 87 |   it('custom theme', async () => {
 88 |     await expect(
 89 |       generateCSSVars({
 90 |         color: {
 91 |           name: 'custom',
 92 |           light: {
 93 |             'background': '0 1% 100%',
 94 |             'foreground': '240 10% 3.9%',
 95 |             'card': '0 0% 100%',
 96 |             'card-foreground': '240 10% 3.9%',
 97 |             'popover': '0 0% 100%',
 98 |             'popover-foreground': '240 10% 3.9%',
 99 |             'primary': '240 5.9% 10%',
100 |             'primary-foreground': '0 0% 98%',
101 |             'secondary': '240 4.8% 95.9%',
102 |             'secondary-foreground': '240 5.9% 10%',
103 |             'muted': '240 4.8% 95.9%',
104 |             'muted-foreground': '240 3.8% 46.1%',
105 |             'accent': '240 4.8% 95.9%',
106 |             'accent-foreground': '240 5.9% 10%',
107 |             'destructive': '0 84.2% 60.2%',
108 |             'destructive-foreground': '0 0% 98%',
109 |             'border': '240 5.9% 90%',
110 |             'input': '240 5.9% 90%',
111 |             'ring': '240 5.9% 10%',
112 |             'chart-1': '12 76% 61%',
113 |             'chart-2': '173 58% 39%',
114 |             'chart-3': '197 37% 24%',
115 |             'chart-4': '43 74% 66%',
116 |             'chart-5': '27 87% 67%',
117 |             'sidebar': '0 0% 98%',
118 |             'sidebar-foreground': '240 5.3% 26.1%',
119 |             'sidebar-primary': '240 5.9% 10%',
120 |             'sidebar-primary-foreground': '0 0% 98%',
121 |             'sidebar-accent': '240 4.8% 95.9%',
122 |             'sidebar-accent-foreground': '240 5.9% 10%',
123 |             'sidebar-border': '220 13% 91%',
124 |             'sidebar-ring': '217.2 91.2% 59.8%',
125 |           },
126 |           dark: {
127 |             'background': '240 10% 3.9%',
128 |             'foreground': '0 0% 98%',
129 |             'card': '240 10% 3.9%',
130 |             'card-foreground': '0 0% 98%',
131 |             'popover': '240 10% 3.9%',
132 |             'popover-foreground': '0 0% 98%',
133 |             'primary': '0 0% 98%',
134 |             'primary-foreground': '240 5.9% 10%',
135 |             'secondary': '240 3.7% 15.9%',
136 |             'secondary-foreground': '0 0% 98%',
137 |             'muted': '240 3.7% 15.9%',
138 |             'muted-foreground': '240 5% 64.9%',
139 |             'accent': '240 3.7% 15.9%',
140 |             'accent-foreground': '0 0% 98%',
141 |             'destructive': '0 62.8% 30.6%',
142 |             'destructive-foreground': '0 0% 98%',
143 |             'border': '240 3.7% 15.9%',
144 |             'input': '240 3.7% 15.9%',
145 |             'ring': '240 4.9% 83.9%',
146 |             'chart-1': '220 70% 50%',
147 |             'chart-2': '160 60% 45%',
148 |             'chart-3': '30 80% 55%',
149 |             'chart-4': '280 65% 60%',
150 |             'chart-5': '340 75% 55%',
151 |             'sidebar': '240 5.9% 10%',
152 |             'sidebar-foreground': '240 4.8% 95.9%',
153 |             'sidebar-primary': '0 0% 98%',
154 |             'sidebar-primary-foreground': '240 5.9% 10%',
155 |             'sidebar-accent': '240 3.7% 15.9%',
156 |             'sidebar-accent-foreground': '240 4.8% 95.9%',
157 |             'sidebar-border': '240 3.7% 15.9%',
158 |             'sidebar-ring': '217.2 91.2% 59.8%',
159 |           },
160 |         },
161 |         radius: 1,
162 |       }, themesV3),
163 |     ).toMatchFileSnapshot('snapshot/custom.css')
164 |   })
165 | 
166 |   it('custom theme based on built in theme', async () => {
167 |     await expect(
168 |       generateCSSVars({
169 |         color: {
170 |           base: 'zinc',
171 |           light: {
172 |             background: '0 1% 100%',
173 |           },
174 |         },
175 |         radius: 1,
176 |       }, themesV3),
177 |     ).toMatchFileSnapshot('snapshot/custom.css')
178 |   })
179 | 
180 |   it('generate multiple themes', async () => {
181 |     await expect(
182 |       generateCSSVars([
183 |         {
184 |           color: 'zinc',
185 |           radius: 0.5,
186 |         },
187 |         {
188 |           color: 'neutral',
189 |           radius: 0.75,
190 |         },
191 |       ], themesV3),
192 |     ).toMatchFileSnapshot('snapshot/multiple.css')
193 |   })
194 | 
195 |   it('custom dark selector', async () => {
196 |     await expect(
197 |       generateCSSVars({
198 |         darkSelector: '.custom-dark',
199 |       }, themesV3),
200 |     ).toMatchFileSnapshot('snapshot/dark-selector.css')
201 |   })
202 | })
203 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="left">
  2 |   <img align="center" with="80" height="80" src="https://raw.githubusercontent.com/fisand/unocss-preset-shadcn/refs/heads/main/public/logo.svg" />
  3 | </p>
  4 | 
  5 | # unocss-preset-shadcn
  6 | 
  7 | [![npm version][npm-version-src]][npm-version-href]
  8 | [![npm downloads][npm-downloads-src]][npm-downloads-href]
  9 | [![bundle][bundle-src]][bundle-href]
 10 | [![JSDocs][jsdocs-src]][jsdocs-href]
 11 | [![License][license-src]][license-href]
 12 | 
 13 | Use [shadcn/ui](https://ui.shadcn.com) or [shadcn-vue](https://shadcn-vue.com) or [shadcn-svelte](https://www.shadcn-svelte.com) or [SolidUI](https://www.solid-ui.com) with [UnoCSS](https://unocss.dev).
 14 | 
 15 | 1. Based on [fisand/unocss-preset-shadcn](https://github.com/fisand/unocss-preset-shadcn)
 16 | 1. Theme can be easily customized
 17 | 
 18 | ## Usage
 19 | 
 20 | > 🌈 Starting from v1.0, unocss-preset-shadcn supports presetWind4 v4 by default. If you are using presetWind3, you can import the legacy preset from `unocss-preset-shadcn/v3`
 21 | 
 22 | Follow the official guide to set up [shadcn/ui](https://ui.shadcn.com/docs/installation/vite), [shadcn-vue](https://www.shadcn-vue.com/docs/installation/vite.html), or [shadcn-svelte](https://www.shadcn-svelte.com/docs/installation), or [SolidUI](https://www.solid-ui.com/docs/installation/manual). Replace the step to set up Tailwind CSS with [UnoCSS](https://unocss.dev/integrations/vite).
 23 | 
 24 | Install the [Tailwind Browser Style Reset](https://unocss.dev/guide/style-reset#tailwind).
 25 | 
 26 | Then install `unocss-preset-shadcn` and `unocss-preset-animations`, and update your `unocss.config.ts`:
 27 | 
 28 | ```bash
 29 | ni @unocss/reset
 30 | ni -D unocss @unocss/preset-wind3 unocss-preset-animations unocss-preset-shadcn
 31 | ```
 32 | 
 33 | ```ts
 34 | // unocss.config.ts
 35 | import { presetWind } from "@unocss/preset-wind3";
 36 | import { defineConfig } from "unocss";
 37 | import presetAnimations from "unocss-preset-animations";
 38 | import { presetShadcn } from "unocss-preset-shadcn";
 39 | 
 40 | export default defineConfig({
 41 |   presets: [
 42 |     presetWind(),
 43 |     presetAnimations(),
 44 |     presetShadcn(
 45 |       {
 46 |         color: "red",
 47 |         // With default setting for SolidUI, you need to set the darkSelector option.
 48 |         darkSelector: '[data-kb-theme="dark"]',
 49 |       },
 50 |       {
 51 |         // If you are using reka ui.
 52 |         componentLibrary: "reka",
 53 |       }
 54 |     ),
 55 |   ],
 56 |   // By default, `.ts` and `.js` files are NOT extracted.
 57 |   // If you want to extract them, use the following configuration.
 58 |   // It's necessary to add the following configuration if you use shadcn-vue or shadcn-svelte.
 59 |   content: {
 60 |     pipeline: {
 61 |       include: [
 62 |         // the default
 63 |         /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
 64 |         // include js/ts files
 65 |         "(components|src)/**/*.{js,ts}",
 66 |       ],
 67 |     },
 68 |   },
 69 | });
 70 | ```
 71 | 
 72 | > [!IMPORTANT]
 73 | > Do not run `npx shadcn-ui@latest init` or `npx shadcn-vue@latest init` or `npx shadcn-svelte@latest init` or `npx solidui-cli@latest init` to initialize your project.
 74 | 
 75 | 1. `ni lucide-react class-variance-authority clsx tailwind-merge`
 76 |    - `ni lucide-vue-next radix-vue class-variance-authority clsx tailwind-merge` for shadcn-vue.
 77 |    - `ni lucide-svelte tailwind-variants clsx tailwind-merge` for shadcn-svelte.
 78 |    - `ni tailwindcss-animate class-variance-authority clsx tailwind-merge` for SolidUI.
 79 | 1. copy `utils.ts` into your project at `src/lib`
 80 | 1. create `components.json` or `ui.config.json` (for SolidUI) in your project root and modify as needed
 81 | 1. `npx shadcn-ui@latest add button`
 82 |    - `npx shadcn-vue@latest add button` for shadcn-vue.
 83 |    - `npx shadcn-svelte@latest add button` for shadcn-svelte.
 84 |    - `npx solidui-cli@latest add button` for SolidUI.
 85 | 
 86 | > [!WARNING]
 87 | > You may need an empty `tailwind.config.js` file in your project root to make cli commands happy.
 88 | >
 89 | > If you encounter problems adjusting animation property, this may be because [tailwind-animate](https://github.com/jamiebuilds/tailwindcss-animate) has [duplicate rules about animation and transition](https://github.com/jamiebuilds/tailwindcss-animate/pull/46). You can refer to [Migration Guide from Animations Preset for UnoCSS](https://unocss-preset-animations.aelita.me/guide/migration.html) to solve this problem.
 90 | 
 91 | ## Code to copy
 92 | 
 93 | `utils.ts`: this file usually under `src/lib` folder.
 94 | 
 95 | ```ts
 96 | import type { ClassValue } from "clsx";
 97 | import { clsx } from "clsx";
 98 | import { twMerge } from "tailwind-merge";
 99 | 
100 | export function cn(...inputs: ClassValue[]) {
101 |   return twMerge(clsx(inputs));
102 | }
103 | ```
104 | 
105 | `components.json`: this file should under your project root.
106 | 
107 | React + shadcn-ui
108 | 
109 | ```json
110 | {
111 |   "$schema": "https://ui.shadcn.com/schema.json",
112 |   "style": "default",
113 |   "tailwind": {
114 |     "config": "tailwind.config.js",
115 |     "css": "styles/global.css",
116 |     "baseColor": "neutral",
117 |     "cssVariables": true,
118 |     "prefix": ""
119 |   },
120 |   "rsc": false,
121 |   "tsx": true,
122 |   "aliases": {
123 |     "components": "@/components",
124 |     "utils": "@/lib/utils",
125 |     "ui": "@/components/ui"
126 |   }
127 | }
128 | ```
129 | 
130 | Vue + shadcn-vue
131 | 
132 | ```json
133 | {
134 |   "$schema": "https://shadcn-vue.com/schema.json",
135 |   "style": "new-york",
136 |   "typescript": true,
137 |   "tailwind": {
138 |     "config": "tailwind.config.js",
139 |     "css": "src/assets/index.css",
140 |     "baseColor": "neutral",
141 |     "cssVariables": true,
142 |     "prefix": ""
143 |   },
144 |   "aliases": {
145 |     "components": "@/components",
146 |     "composables": "@/composables",
147 |     "utils": "@/lib/utils",
148 |     "ui": "@/components/ui",
149 |     "lib": "@/lib"
150 |   },
151 |   "iconLibrary": "lucide"
152 | }
153 | ```
154 | 
155 | Svelte + shadcn-svelte
156 | 
157 | ```json
158 | {
159 |   "$schema": "https://shadcn-svelte.com/schema.json",
160 |   "style": "default",
161 |   "tailwind": {
162 |     "config": "tailwind.config.js",
163 |     "css": "src/app.pcss",
164 |     "baseColor": "neutral"
165 |   },
166 |   "aliases": {
167 |     "components": "$lib/components",
168 |     "utils": "$lib/utils"
169 |   }
170 | }
171 | ```
172 | 
173 | `ui.config.json`: this file should under your project root. This file is for SolidUI.
174 | 
175 | ```json
176 | {
177 |   "tsx": true,
178 |   "componentDir": "./src/components/ui",
179 |   "tailwind": {
180 |     "config": "tailwind.config.js",
181 |     "css": "src/App.css"
182 |   },
183 |   "aliases": {
184 |     "path": "~/*"
185 |   }
186 | }
187 | ```
188 | 
189 | ## Dynamic Theme
190 | 
191 | Preview the [demo](https://unocss-preset-shadcn.vercel.app).
192 | 
193 | If you want to use a dynamic theme, you can pass an array of theme objects to `presetShadcn`:
194 | 
195 | ```ts
196 | import { defineConfig, presetUno, UserConfig } from "unocss";
197 | import presetAnimations from "unocss-preset-animations";
198 | import { builtinColors, presetShadcn } from "unocss-preset-shadcn";
199 | 
200 | export default defineConfig({
201 |   presets: [
202 |     presetUno(),
203 |     presetAnimations(),
204 |     presetShadcn(builtinColors.map((c) => ({ color: c }))),
205 |   ],
206 | });
207 | ```
208 | 
209 | Add a theme sync script to your [index.html](./playground/index.html).
210 | To dynamically change the theme, you can create a [theme switch component](./playground/src/components/theme-switch.tsx).
211 | 
212 | ## See also
213 | 
214 | - [fisand/unocss-preset-shadcn](https://github.com/fisand/unocss-preset-shadcn)
215 | - [tobiasfoerg/tailwindcss-shadcn-ui](https://github.com/tobiasfoerg/tailwindcss-shadcn-ui)
216 | 
217 | <!-- Badges -->
218 | 
219 | [npm-version-src]: https://img.shields.io/npm/v/unocss-preset-shadcn?style=flat&colorA=080f12&colorB=1fa669
220 | [npm-version-href]: https://npmjs.com/package/unocss-preset-shadcn
221 | [npm-downloads-src]: https://img.shields.io/npm/dm/unocss-preset-shadcn?style=flat&colorA=080f12&colorB=1fa669
222 | [npm-downloads-href]: https://npmjs.com/package/unocss-preset-shadcn
223 | [bundle-src]: https://img.shields.io/bundlephobia/minzip/unocss-preset-shadcn?style=flat&colorA=080f12&colorB=1fa669&label=minzip
224 | [bundle-href]: https://bundlephobia.com/result?p=unocss-preset-shadcn
225 | [license-src]: https://img.shields.io/github/license/hyoban/unocss-preset-shadcn.svg?style=flat&colorA=080f12&colorB=1fa669
226 | [license-href]: https://github.com/hyoban/unocss-preset-shadcn/blob/main/LICENSE
227 | [jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
228 | [jsdocs-href]: https://www.jsdocs.io/package/unocss-preset-shadcn
229 | 


--------------------------------------------------------------------------------
/src/themes/v3.ts:
--------------------------------------------------------------------------------
  1 | type ThemeColorString = `${number} ${number}% ${number}%`
  2 | export const themeCSSVarKeys = [
  3 |   'background',
  4 |   'foreground',
  5 |   'card',
  6 |   'card-foreground',
  7 |   'popover',
  8 |   'popover-foreground',
  9 |   'primary',
 10 |   'primary-foreground',
 11 |   'secondary',
 12 |   'secondary-foreground',
 13 |   'muted',
 14 |   'muted-foreground',
 15 |   'accent',
 16 |   'accent-foreground',
 17 |   'destructive',
 18 |   'destructive-foreground',
 19 |   'border',
 20 |   'input',
 21 |   'ring',
 22 |   'chart-1',
 23 |   'chart-2',
 24 |   'chart-3',
 25 |   'chart-4',
 26 |   'chart-5',
 27 |   'sidebar',
 28 |   'sidebar-foreground',
 29 |   'sidebar-primary',
 30 |   'sidebar-primary-foreground',
 31 |   'sidebar-accent',
 32 |   'sidebar-accent-foreground',
 33 |   'sidebar-border',
 34 |   'sidebar-ring',
 35 | ] as const
 36 | export type ThemeCSSVarKey = (typeof themeCSSVarKeys)[number]
 37 | 
 38 | export type ThemeCSSVars = Record<ThemeCSSVarKey, ThemeColorString>
 39 | 
 40 | export interface ThemeCSSVarsVariant {
 41 |   name: string
 42 |   light: ThemeCSSVars
 43 |   dark: ThemeCSSVars
 44 | }
 45 | 
 46 | const sidebarColors = {
 47 |   light: {
 48 |     'sidebar': '0 0% 98%',
 49 |     'sidebar-foreground': '240 5.3% 26.1%',
 50 |     'sidebar-primary': '240 5.9% 10%',
 51 |     'sidebar-primary-foreground': '0 0% 98%',
 52 |     'sidebar-accent': '240 4.8% 95.9%',
 53 |     'sidebar-accent-foreground': '240 5.9% 10%',
 54 |     'sidebar-border': '220 13% 91%',
 55 |     'sidebar-ring': '217.2 91.2% 59.8%',
 56 |   },
 57 |   dark: {
 58 |     'sidebar': '240 5.9% 10%',
 59 |     'sidebar-foreground': '240 4.8% 95.9%',
 60 |     'sidebar-primary': '0 0% 98%',
 61 |     'sidebar-primary-foreground': '240 5.9% 10%',
 62 |     'sidebar-accent': '240 3.7% 15.9%',
 63 |     'sidebar-accent-foreground': '240 4.8% 95.9%',
 64 |     'sidebar-border': '240 3.7% 15.9%',
 65 |     'sidebar-ring': '217.2 91.2% 59.8%',
 66 |   },
 67 | } as const
 68 | 
 69 | export const themes = [
 70 |   {
 71 |     name: 'zinc',
 72 |     label: 'Zinc',
 73 |     activeColor: {
 74 |       light: '240 5.9% 10%',
 75 |       dark: '240 5.2% 33.9%',
 76 |     },
 77 |     cssVars: {
 78 |       light: {
 79 |         'background': '0 0% 100%',
 80 |         'foreground': '240 10% 3.9%',
 81 |         'card': '0 0% 100%',
 82 |         'card-foreground': '240 10% 3.9%',
 83 |         'popover': '0 0% 100%',
 84 |         'popover-foreground': '240 10% 3.9%',
 85 |         'primary': '240 5.9% 10%',
 86 |         'primary-foreground': '0 0% 98%',
 87 |         'secondary': '240 4.8% 95.9%',
 88 |         'secondary-foreground': '240 5.9% 10%',
 89 |         'muted': '240 4.8% 95.9%',
 90 |         'muted-foreground': '240 3.8% 46.1%',
 91 |         'accent': '240 4.8% 95.9%',
 92 |         'accent-foreground': '240 5.9% 10%',
 93 |         'destructive': '0 84.2% 60.2%',
 94 |         'destructive-foreground': '0 0% 98%',
 95 |         'border': '240 5.9% 90%',
 96 |         'input': '240 5.9% 90%',
 97 |         'ring': '240 5.9% 10%',
 98 |         'radius': '0.5rem',
 99 |         'chart-1': '12 76% 61%',
100 |         'chart-2': '173 58% 39%',
101 |         'chart-3': '197 37% 24%',
102 |         'chart-4': '43 74% 66%',
103 |         'chart-5': '27 87% 67%',
104 |         ...sidebarColors.light,
105 |       },
106 |       dark: {
107 |         'background': '240 10% 3.9%',
108 |         'foreground': '0 0% 98%',
109 |         'card': '240 10% 3.9%',
110 |         'card-foreground': '0 0% 98%',
111 |         'popover': '240 10% 3.9%',
112 |         'popover-foreground': '0 0% 98%',
113 |         'primary': '0 0% 98%',
114 |         'primary-foreground': '240 5.9% 10%',
115 |         'secondary': '240 3.7% 15.9%',
116 |         'secondary-foreground': '0 0% 98%',
117 |         'muted': '240 3.7% 15.9%',
118 |         'muted-foreground': '240 5% 64.9%',
119 |         'accent': '240 3.7% 15.9%',
120 |         'accent-foreground': '0 0% 98%',
121 |         'destructive': '0 62.8% 30.6%',
122 |         'destructive-foreground': '0 0% 98%',
123 |         'border': '240 3.7% 15.9%',
124 |         'input': '240 3.7% 15.9%',
125 |         'ring': '240 4.9% 83.9%',
126 |         'chart-1': '220 70% 50%',
127 |         'chart-2': '160 60% 45%',
128 |         'chart-3': '30 80% 55%',
129 |         'chart-4': '280 65% 60%',
130 |         'chart-5': '340 75% 55%',
131 |         ...sidebarColors.dark,
132 |       },
133 |     },
134 |   },
135 |   {
136 |     name: 'slate',
137 |     label: 'Slate',
138 |     activeColor: {
139 |       light: '215.4 16.3% 46.9%',
140 |       dark: '215.3 19.3% 34.5%',
141 |     },
142 |     cssVars: {
143 |       light: {
144 |         'background': '0 0% 100%',
145 |         'foreground': '222.2 84% 4.9%',
146 |         'card': '0 0% 100%',
147 |         'card-foreground': '222.2 84% 4.9%',
148 |         'popover': '0 0% 100%',
149 |         'popover-foreground': '222.2 84% 4.9%',
150 |         'primary': '222.2 47.4% 11.2%',
151 |         'primary-foreground': '210 40% 98%',
152 |         'secondary': '210 40% 96.1%',
153 |         'secondary-foreground': '222.2 47.4% 11.2%',
154 |         'muted': '210 40% 96.1%',
155 |         'muted-foreground': '215.4 16.3% 46.9%',
156 |         'accent': '210 40% 96.1%',
157 |         'accent-foreground': '222.2 47.4% 11.2%',
158 |         'destructive': '0 84.2% 60.2%',
159 |         'destructive-foreground': '210 40% 98%',
160 |         'border': '214.3 31.8% 91.4%',
161 |         'input': '214.3 31.8% 91.4%',
162 |         'ring': '222.2 84% 4.9%',
163 |         'radius': '0.5rem',
164 |         'chart-1': '12 76% 61%',
165 |         'chart-2': '173 58% 39%',
166 |         'chart-3': '197 37% 24%',
167 |         'chart-4': '43 74% 66%',
168 |         'chart-5': '27 87% 67%',
169 |         ...sidebarColors.light,
170 |       },
171 |       dark: {
172 |         'background': '222.2 84% 4.9%',
173 |         'foreground': '210 40% 98%',
174 |         'card': '222.2 84% 4.9%',
175 |         'card-foreground': '210 40% 98%',
176 |         'popover': '222.2 84% 4.9%',
177 |         'popover-foreground': '210 40% 98%',
178 |         'primary': '210 40% 98%',
179 |         'primary-foreground': '222.2 47.4% 11.2%',
180 |         'secondary': '217.2 32.6% 17.5%',
181 |         'secondary-foreground': '210 40% 98%',
182 |         'muted': '217.2 32.6% 17.5%',
183 |         'muted-foreground': '215 20.2% 65.1%',
184 |         'accent': '217.2 32.6% 17.5%',
185 |         'accent-foreground': '210 40% 98%',
186 |         'destructive': '0 62.8% 30.6%',
187 |         'destructive-foreground': '210 40% 98%',
188 |         'border': '217.2 32.6% 17.5%',
189 |         'input': '217.2 32.6% 17.5%',
190 |         'ring': '212.7 26.8% 83.9%',
191 |         'chart-1': '220 70% 50%',
192 |         'chart-2': '160 60% 45%',
193 |         'chart-3': '30 80% 55%',
194 |         'chart-4': '280 65% 60%',
195 |         'chart-5': '340 75% 55%',
196 |         ...sidebarColors.dark,
197 |       },
198 |     },
199 |   },
200 |   {
201 |     name: 'stone',
202 |     label: 'Stone',
203 |     activeColor: {
204 |       light: '25 5.3% 44.7%',
205 |       dark: '33.3 5.5% 32.4%',
206 |     },
207 |     cssVars: {
208 |       light: {
209 |         'background': '0 0% 100%',
210 |         'foreground': '20 14.3% 4.1%',
211 |         'card': '0 0% 100%',
212 |         'card-foreground': '20 14.3% 4.1%',
213 |         'popover': '0 0% 100%',
214 |         'popover-foreground': '20 14.3% 4.1%',
215 |         'primary': '24 9.8% 10%',
216 |         'primary-foreground': '60 9.1% 97.8%',
217 |         'secondary': '60 4.8% 95.9%',
218 |         'secondary-foreground': '24 9.8% 10%',
219 |         'muted': '60 4.8% 95.9%',
220 |         'muted-foreground': '25 5.3% 44.7%',
221 |         'accent': '60 4.8% 95.9%',
222 |         'accent-foreground': '24 9.8% 10%',
223 |         'destructive': '0 84.2% 60.2%',
224 |         'destructive-foreground': '60 9.1% 97.8%',
225 |         'border': '20 5.9% 90%',
226 |         'input': '20 5.9% 90%',
227 |         'ring': '20 14.3% 4.1%',
228 |         'radius': '0.95rem',
229 |         'chart-1': '12 76% 61%',
230 |         'chart-2': '173 58% 39%',
231 |         'chart-3': '197 37% 24%',
232 |         'chart-4': '43 74% 66%',
233 |         'chart-5': '27 87% 67%',
234 |         ...sidebarColors.light,
235 |       },
236 |       dark: {
237 |         'background': '20 14.3% 4.1%',
238 |         'foreground': '60 9.1% 97.8%',
239 |         'card': '20 14.3% 4.1%',
240 |         'card-foreground': '60 9.1% 97.8%',
241 |         'popover': '20 14.3% 4.1%',
242 |         'popover-foreground': '60 9.1% 97.8%',
243 |         'primary': '60 9.1% 97.8%',
244 |         'primary-foreground': '24 9.8% 10%',
245 |         'secondary': '12 6.5% 15.1%',
246 |         'secondary-foreground': '60 9.1% 97.8%',
247 |         'muted': '12 6.5% 15.1%',
248 |         'muted-foreground': '24 5.4% 63.9%',
249 |         'accent': '12 6.5% 15.1%',
250 |         'accent-foreground': '60 9.1% 97.8%',
251 |         'destructive': '0 62.8% 30.6%',
252 |         'destructive-foreground': '60 9.1% 97.8%',
253 |         'border': '12 6.5% 15.1%',
254 |         'input': '12 6.5% 15.1%',
255 |         'ring': '24 5.7% 82.9%',
256 |         'chart-1': '220 70% 50%',
257 |         'chart-2': '160 60% 45%',
258 |         'chart-3': '30 80% 55%',
259 |         'chart-4': '280 65% 60%',
260 |         'chart-5': '340 75% 55%',
261 |         ...sidebarColors.dark,
262 |       },
263 |     },
264 |   },
265 |   {
266 |     name: 'gray',
267 |     label: 'Gray',
268 |     activeColor: {
269 |       light: '220 8.9% 46.1%',
270 |       dark: '215 13.8% 34.1%',
271 |     },
272 |     cssVars: {
273 |       light: {
274 |         'background': '0 0% 100%',
275 |         'foreground': '224 71.4% 4.1%',
276 |         'card': '0 0% 100%',
277 |         'card-foreground': '224 71.4% 4.1%',
278 |         'popover': '0 0% 100%',
279 |         'popover-foreground': '224 71.4% 4.1%',
280 |         'primary': '220.9 39.3% 11%',
281 |         'primary-foreground': '210 20% 98%',
282 |         'secondary': '220 14.3% 95.9%',
283 |         'secondary-foreground': '220.9 39.3% 11%',
284 |         'muted': '220 14.3% 95.9%',
285 |         'muted-foreground': '220 8.9% 46.1%',
286 |         'accent': '220 14.3% 95.9%',
287 |         'accent-foreground': '220.9 39.3% 11%',
288 |         'destructive': '0 84.2% 60.2%',
289 |         'destructive-foreground': '210 20% 98%',
290 |         'border': '220 13% 91%',
291 |         'input': '220 13% 91%',
292 |         'ring': '224 71.4% 4.1%',
293 |         'radius': '0.35rem',
294 |         'chart-1': '12 76% 61%',
295 |         'chart-2': '173 58% 39%',
296 |         'chart-3': '197 37% 24%',
297 |         'chart-4': '43 74% 66%',
298 |         'chart-5': '27 87% 67%',
299 |         ...sidebarColors.light,
300 |       },
301 |       dark: {
302 |         'background': '224 71.4% 4.1%',
303 |         'foreground': '210 20% 98%',
304 |         'card': '224 71.4% 4.1%',
305 |         'card-foreground': '210 20% 98%',
306 |         'popover': '224 71.4% 4.1%',
307 |         'popover-foreground': '210 20% 98%',
308 |         'primary': '210 20% 98%',
309 |         'primary-foreground': '220.9 39.3% 11%',
310 |         'secondary': '215 27.9% 16.9%',
311 |         'secondary-foreground': '210 20% 98%',
312 |         'muted': '215 27.9% 16.9%',
313 |         'muted-foreground': '217.9 10.6% 64.9%',
314 |         'accent': '215 27.9% 16.9%',
315 |         'accent-foreground': '210 20% 98%',
316 |         'destructive': '0 62.8% 30.6%',
317 |         'destructive-foreground': '210 20% 98%',
318 |         'border': '215 27.9% 16.9%',
319 |         'input': '215 27.9% 16.9%',
320 |         'ring': '216 12.2% 83.9%',
321 |         'chart-1': '220 70% 50%',
322 |         'chart-2': '160 60% 45%',
323 |         'chart-3': '30 80% 55%',
324 |         'chart-4': '280 65% 60%',
325 |         'chart-5': '340 75% 55%',
326 |         ...sidebarColors.dark,
327 |       },
328 |     },
329 |   },
330 |   {
331 |     name: 'neutral',
332 |     label: 'Neutral',
333 |     activeColor: {
334 |       light: '0 0% 45.1%',
335 |       dark: '0 0% 32.2%',
336 |     },
337 |     cssVars: {
338 |       light: {
339 |         'background': '0 0% 100%',
340 |         'foreground': '0 0% 3.9%',
341 |         'card': '0 0% 100%',
342 |         'card-foreground': '0 0% 3.9%',
343 |         'popover': '0 0% 100%',
344 |         'popover-foreground': '0 0% 3.9%',
345 |         'primary': '0 0% 9%',
346 |         'primary-foreground': '0 0% 98%',
347 |         'secondary': '0 0% 96.1%',
348 |         'secondary-foreground': '0 0% 9%',
349 |         'muted': '0 0% 96.1%',
350 |         'muted-foreground': '0 0% 45.1%',
351 |         'accent': '0 0% 96.1%',
352 |         'accent-foreground': '0 0% 9%',
353 |         'destructive': '0 84.2% 60.2%',
354 |         'destructive-foreground': '0 0% 98%',
355 |         'border': '0 0% 89.8%',
356 |         'input': '0 0% 89.8%',
357 |         'ring': '0 0% 3.9%',
358 |         'chart-1': '12 76% 61%',
359 |         'chart-2': '173 58% 39%',
360 |         'chart-3': '197 37% 24%',
361 |         'chart-4': '43 74% 66%',
362 |         'chart-5': '27 87% 67%',
363 |         ...sidebarColors.light,
364 |       },
365 |       dark: {
366 |         'background': '0 0% 3.9%',
367 |         'foreground': '0 0% 98%',
368 |         'card': '0 0% 3.9%',
369 |         'card-foreground': '0 0% 98%',
370 |         'popover': '0 0% 3.9%',
371 |         'popover-foreground': '0 0% 98%',
372 |         'primary': '0 0% 98%',
373 |         'primary-foreground': '0 0% 9%',
374 |         'secondary': '0 0% 14.9%',
375 |         'secondary-foreground': '0 0% 98%',
376 |         'muted': '0 0% 14.9%',
377 |         'muted-foreground': '0 0% 63.9%',
378 |         'accent': '0 0% 14.9%',
379 |         'accent-foreground': '0 0% 98%',
380 |         'destructive': '0 62.8% 30.6%',
381 |         'destructive-foreground': '0 0% 98%',
382 |         'border': '0 0% 14.9%',
383 |         'input': '0 0% 14.9%',
384 |         'ring': '0 0% 83.1%',
385 |         'chart-1': '220 70% 50%',
386 |         'chart-2': '160 60% 45%',
387 |         'chart-3': '30 80% 55%',
388 |         'chart-4': '280 65% 60%',
389 |         'chart-5': '340 75% 55%',
390 |         ...sidebarColors.dark,
391 |       },
392 |     },
393 |   },
394 |   {
395 |     name: 'red',
396 |     label: 'Red',
397 |     activeColor: {
398 |       light: '0 72.2% 50.6%',
399 |       dark: '0 72.2% 50.6%',
400 |     },
401 |     cssVars: {
402 |       light: {
403 |         'background': '0 0% 100%',
404 |         'foreground': '0 0% 3.9%',
405 |         'card': '0 0% 100%',
406 |         'card-foreground': '0 0% 3.9%',
407 |         'popover': '0 0% 100%',
408 |         'popover-foreground': '0 0% 3.9%',
409 |         'primary': '0 72.2% 50.6%',
410 |         'primary-foreground': '0 85.7% 97.3%',
411 |         'secondary': '0 0% 96.1%',
412 |         'secondary-foreground': '0 0% 9%',
413 |         'muted': '0 0% 96.1%',
414 |         'muted-foreground': '0 0% 45.1%',
415 |         'accent': '0 0% 96.1%',
416 |         'accent-foreground': '0 0% 9%',
417 |         'destructive': '0 84.2% 60.2%',
418 |         'destructive-foreground': '0 0% 98%',
419 |         'border': '0 0% 89.8%',
420 |         'input': '0 0% 89.8%',
421 |         'ring': '0 72.2% 50.6%',
422 |         'radius': '0.4rem',
423 |         'chart-1': '12 76% 61%',
424 |         'chart-2': '173 58% 39%',
425 |         'chart-3': '197 37% 24%',
426 |         'chart-4': '43 74% 66%',
427 |         'chart-5': '27 87% 67%',
428 |         ...sidebarColors.light,
429 |       },
430 |       dark: {
431 |         'background': '0 0% 3.9%',
432 |         'foreground': '0 0% 98%',
433 |         'card': '0 0% 3.9%',
434 |         'card-foreground': '0 0% 98%',
435 |         'popover': '0 0% 3.9%',
436 |         'popover-foreground': '0 0% 98%',
437 |         'primary': '0 72.2% 50.6%',
438 |         'primary-foreground': '0 85.7% 97.3%',
439 |         'secondary': '0 0% 14.9%',
440 |         'secondary-foreground': '0 0% 98%',
441 |         'muted': '0 0% 14.9%',
442 |         'muted-foreground': '0 0% 63.9%',
443 |         'accent': '0 0% 14.9%',
444 |         'accent-foreground': '0 0% 98%',
445 |         'destructive': '0 62.8% 30.6%',
446 |         'destructive-foreground': '0 0% 98%',
447 |         'border': '0 0% 14.9%',
448 |         'input': '0 0% 14.9%',
449 |         'ring': '0 72.2% 50.6%',
450 |         'chart-1': '220 70% 50%',
451 |         'chart-2': '160 60% 45%',
452 |         'chart-3': '30 80% 55%',
453 |         'chart-4': '280 65% 60%',
454 |         'chart-5': '340 75% 55%',
455 |         ...sidebarColors.dark,
456 |       },
457 |     },
458 |   },
459 |   {
460 |     name: 'rose',
461 |     label: 'Rose',
462 |     activeColor: {
463 |       light: '346.8 77.2% 49.8%',
464 |       dark: '346.8 77.2% 49.8%',
465 |     },
466 |     cssVars: {
467 |       light: {
468 |         'background': '0 0% 100%',
469 |         'foreground': '240 10% 3.9%',
470 |         'card': '0 0% 100%',
471 |         'card-foreground': '240 10% 3.9%',
472 |         'popover': '0 0% 100%',
473 |         'popover-foreground': '240 10% 3.9%',
474 |         'primary': '346.8 77.2% 49.8%',
475 |         'primary-foreground': '355.7 100% 97.3%',
476 |         'secondary': '240 4.8% 95.9%',
477 |         'secondary-foreground': '240 5.9% 10%',
478 |         'muted': '240 4.8% 95.9%',
479 |         'muted-foreground': '240 3.8% 46.1%',
480 |         'accent': '240 4.8% 95.9%',
481 |         'accent-foreground': '240 5.9% 10%',
482 |         'destructive': '0 84.2% 60.2%',
483 |         'destructive-foreground': '0 0% 98%',
484 |         'border': '240 5.9% 90%',
485 |         'input': '240 5.9% 90%',
486 |         'ring': '346.8 77.2% 49.8%',
487 |         'radius': '0.5rem',
488 |         'chart-1': '12 76% 61%',
489 |         'chart-2': '173 58% 39%',
490 |         'chart-3': '197 37% 24%',
491 |         'chart-4': '43 74% 66%',
492 |         'chart-5': '27 87% 67%',
493 |         ...sidebarColors.light,
494 |       },
495 |       dark: {
496 |         'background': '20 14.3% 4.1%',
497 |         'foreground': '0 0% 95%',
498 |         'popover': '0 0% 9%',
499 |         'popover-foreground': '0 0% 95%',
500 |         'card': '24 9.8% 10%',
501 |         'card-foreground': '0 0% 95%',
502 |         'primary': '346.8 77.2% 49.8%',
503 |         'primary-foreground': '355.7 100% 97.3%',
504 |         'secondary': '240 3.7% 15.9%',
505 |         'secondary-foreground': '0 0% 98%',
506 |         'muted': '0 0% 15%',
507 |         'muted-foreground': '240 5% 64.9%',
508 |         'accent': '12 6.5% 15.1%',
509 |         'accent-foreground': '0 0% 98%',
510 |         'destructive': '0 62.8% 30.6%',
511 |         'destructive-foreground': '0 85.7% 97.3%',
512 |         'border': '240 3.7% 15.9%',
513 |         'input': '240 3.7% 15.9%',
514 |         'ring': '346.8 77.2% 49.8%',
515 |         'chart-1': '220 70% 50%',
516 |         'chart-2': '160 60% 45%',
517 |         'chart-3': '30 80% 55%',
518 |         'chart-4': '280 65% 60%',
519 |         'chart-5': '340 75% 55%',
520 |         ...sidebarColors.dark,
521 |       },
522 |     },
523 |   },
524 |   {
525 |     name: 'orange',
526 |     label: 'Orange',
527 |     activeColor: {
528 |       light: '24.6 95% 53.1%',
529 |       dark: '20.5 90.2% 48.2%',
530 |     },
531 |     cssVars: {
532 |       light: {
533 |         'background': '0 0% 100%',
534 |         'foreground': '20 14.3% 4.1%',
535 |         'card': '0 0% 100%',
536 |         'card-foreground': '20 14.3% 4.1%',
537 |         'popover': '0 0% 100%',
538 |         'popover-foreground': '20 14.3% 4.1%',
539 |         'primary': '24.6 95% 53.1%',
540 |         'primary-foreground': '60 9.1% 97.8%',
541 |         'secondary': '60 4.8% 95.9%',
542 |         'secondary-foreground': '24 9.8% 10%',
543 |         'muted': '60 4.8% 95.9%',
544 |         'muted-foreground': '25 5.3% 44.7%',
545 |         'accent': '60 4.8% 95.9%',
546 |         'accent-foreground': '24 9.8% 10%',
547 |         'destructive': '0 84.2% 60.2%',
548 |         'destructive-foreground': '60 9.1% 97.8%',
549 |         'border': '20 5.9% 90%',
550 |         'input': '20 5.9% 90%',
551 |         'ring': '24.6 95% 53.1%',
552 |         'radius': '0.95rem',
553 |         'chart-1': '12 76% 61%',
554 |         'chart-2': '173 58% 39%',
555 |         'chart-3': '197 37% 24%',
556 |         'chart-4': '43 74% 66%',
557 |         'chart-5': '27 87% 67%',
558 |         ...sidebarColors.light,
559 |       },
560 |       dark: {
561 |         'background': '20 14.3% 4.1%',
562 |         'foreground': '60 9.1% 97.8%',
563 |         'card': '20 14.3% 4.1%',
564 |         'card-foreground': '60 9.1% 97.8%',
565 |         'popover': '20 14.3% 4.1%',
566 |         'popover-foreground': '60 9.1% 97.8%',
567 |         'primary': '20.5 90.2% 48.2%',
568 |         'primary-foreground': '60 9.1% 97.8%',
569 |         'secondary': '12 6.5% 15.1%',
570 |         'secondary-foreground': '60 9.1% 97.8%',
571 |         'muted': '12 6.5% 15.1%',
572 |         'muted-foreground': '24 5.4% 63.9%',
573 |         'accent': '12 6.5% 15.1%',
574 |         'accent-foreground': '60 9.1% 97.8%',
575 |         'destructive': '0 72.2% 50.6%',
576 |         'destructive-foreground': '60 9.1% 97.8%',
577 |         'border': '12 6.5% 15.1%',
578 |         'input': '12 6.5% 15.1%',
579 |         'ring': '20.5 90.2% 48.2%',
580 |         'chart-1': '220 70% 50%',
581 |         'chart-2': '160 60% 45%',
582 |         'chart-3': '30 80% 55%',
583 |         'chart-4': '280 65% 60%',
584 |         'chart-5': '340 75% 55%',
585 |         ...sidebarColors.dark,
586 |       },
587 |     },
588 |   },
589 |   {
590 |     name: 'green',
591 |     label: 'Green',
592 |     activeColor: {
593 |       light: '142.1 76.2% 36.3%',
594 |       dark: '142.1 70.6% 45.3%',
595 |     },
596 |     cssVars: {
597 |       light: {
598 |         'background': '0 0% 100%',
599 |         'foreground': '240 10% 3.9%',
600 |         'card': '0 0% 100%',
601 |         'card-foreground': '240 10% 3.9%',
602 |         'popover': '0 0% 100%',
603 |         'popover-foreground': '240 10% 3.9%',
604 |         'primary': '142.1 76.2% 36.3%',
605 |         'primary-foreground': '355.7 100% 97.3%',
606 |         'secondary': '240 4.8% 95.9%',
607 |         'secondary-foreground': '240 5.9% 10%',
608 |         'muted': '240 4.8% 95.9%',
609 |         'muted-foreground': '240 3.8% 46.1%',
610 |         'accent': '240 4.8% 95.9%',
611 |         'accent-foreground': '240 5.9% 10%',
612 |         'destructive': '0 84.2% 60.2%',
613 |         'destructive-foreground': '0 0% 98%',
614 |         'border': '240 5.9% 90%',
615 |         'input': '240 5.9% 90%',
616 |         'ring': '142.1 76.2% 36.3%',
617 |         'chart-1': '12 76% 61%',
618 |         'chart-2': '173 58% 39%',
619 |         'chart-3': '197 37% 24%',
620 |         'chart-4': '43 74% 66%',
621 |         'chart-5': '27 87% 67%',
622 |         ...sidebarColors.light,
623 |       },
624 |       dark: {
625 |         'background': '20 14.3% 4.1%',
626 |         'foreground': '0 0% 95%',
627 |         'popover': '0 0% 9%',
628 |         'popover-foreground': '0 0% 95%',
629 |         'card': '24 9.8% 10%',
630 |         'card-foreground': '0 0% 95%',
631 |         'primary': '142.1 70.6% 45.3%',
632 |         'primary-foreground': '144.9 80.4% 10%',
633 |         'secondary': '240 3.7% 15.9%',
634 |         'secondary-foreground': '0 0% 98%',
635 |         'muted': '0 0% 15%',
636 |         'muted-foreground': '240 5% 64.9%',
637 |         'accent': '12 6.5% 15.1%',
638 |         'accent-foreground': '0 0% 98%',
639 |         'destructive': '0 62.8% 30.6%',
640 |         'destructive-foreground': '0 85.7% 97.3%',
641 |         'border': '240 3.7% 15.9%',
642 |         'input': '240 3.7% 15.9%',
643 |         'ring': '142.4 71.8% 29.2%',
644 |         'chart-1': '220 70% 50%',
645 |         'chart-2': '160 60% 45%',
646 |         'chart-3': '30 80% 55%',
647 |         'chart-4': '280 65% 60%',
648 |         'chart-5': '340 75% 55%',
649 |         ...sidebarColors.dark,
650 |       },
651 |     },
652 |   },
653 |   {
654 |     name: 'blue',
655 |     label: 'Blue',
656 |     activeColor: {
657 |       light: '221.2 83.2% 53.3%',
658 |       dark: '217.2 91.2% 59.8%',
659 |     },
660 |     cssVars: {
661 |       light: {
662 |         'background': '0 0% 100%',
663 |         'foreground': '222.2 84% 4.9%',
664 |         'card': '0 0% 100%',
665 |         'card-foreground': '222.2 84% 4.9%',
666 |         'popover': '0 0% 100%',
667 |         'popover-foreground': '222.2 84% 4.9%',
668 |         'primary': '221.2 83.2% 53.3%',
669 |         'primary-foreground': '210 40% 98%',
670 |         'secondary': '210 40% 96.1%',
671 |         'secondary-foreground': '222.2 47.4% 11.2%',
672 |         'muted': '210 40% 96.1%',
673 |         'muted-foreground': '215.4 16.3% 46.9%',
674 |         'accent': '210 40% 96.1%',
675 |         'accent-foreground': '222.2 47.4% 11.2%',
676 |         'destructive': '0 84.2% 60.2%',
677 |         'destructive-foreground': '210 40% 98%',
678 |         'border': '214.3 31.8% 91.4%',
679 |         'input': '214.3 31.8% 91.4%',
680 |         'ring': '221.2 83.2% 53.3%',
681 |         'chart-1': '12 76% 61%',
682 |         'chart-2': '173 58% 39%',
683 |         'chart-3': '197 37% 24%',
684 |         'chart-4': '43 74% 66%',
685 |         'chart-5': '27 87% 67%',
686 |         ...sidebarColors.light,
687 |       },
688 |       dark: {
689 |         'background': '222.2 84% 4.9%',
690 |         'foreground': '210 40% 98%',
691 |         'card': '222.2 84% 4.9%',
692 |         'card-foreground': '210 40% 98%',
693 |         'popover': '222.2 84% 4.9%',
694 |         'popover-foreground': '210 40% 98%',
695 |         'primary': '217.2 91.2% 59.8%',
696 |         'primary-foreground': '222.2 47.4% 11.2%',
697 |         'secondary': '217.2 32.6% 17.5%',
698 |         'secondary-foreground': '210 40% 98%',
699 |         'muted': '217.2 32.6% 17.5%',
700 |         'muted-foreground': '215 20.2% 65.1%',
701 |         'accent': '217.2 32.6% 17.5%',
702 |         'accent-foreground': '210 40% 98%',
703 |         'destructive': '0 62.8% 30.6%',
704 |         'destructive-foreground': '210 40% 98%',
705 |         'border': '217.2 32.6% 17.5%',
706 |         'input': '217.2 32.6% 17.5%',
707 |         'ring': '224.3 76.3% 48%',
708 |         'chart-1': '220 70% 50%',
709 |         'chart-2': '160 60% 45%',
710 |         'chart-3': '30 80% 55%',
711 |         'chart-4': '280 65% 60%',
712 |         'chart-5': '340 75% 55%',
713 |         ...sidebarColors.dark,
714 |       },
715 |     },
716 |   },
717 |   {
718 |     name: 'yellow',
719 |     label: 'Yellow',
720 |     activeColor: {
721 |       light: '47.9 95.8% 53.1%',
722 |       dark: '47.9 95.8% 53.1%',
723 |     },
724 |     cssVars: {
725 |       light: {
726 |         'background': '0 0% 100%',
727 |         'foreground': '20 14.3% 4.1%',
728 |         'card': '0 0% 100%',
729 |         'card-foreground': '20 14.3% 4.1%',
730 |         'popover': '0 0% 100%',
731 |         'popover-foreground': '20 14.3% 4.1%',
732 |         'primary': '47.9 95.8% 53.1%',
733 |         'primary-foreground': '26 83.3% 14.1%',
734 |         'secondary': '60 4.8% 95.9%',
735 |         'secondary-foreground': '24 9.8% 10%',
736 |         'muted': '60 4.8% 95.9%',
737 |         'muted-foreground': '25 5.3% 44.7%',
738 |         'accent': '60 4.8% 95.9%',
739 |         'accent-foreground': '24 9.8% 10%',
740 |         'destructive': '0 84.2% 60.2%',
741 |         'destructive-foreground': '60 9.1% 97.8%',
742 |         'border': '20 5.9% 90%',
743 |         'input': '20 5.9% 90%',
744 |         'ring': '20 14.3% 4.1%',
745 |         'radius': '0.95rem',
746 |         'chart-1': '12 76% 61%',
747 |         'chart-2': '173 58% 39%',
748 |         'chart-3': '197 37% 24%',
749 |         'chart-4': '43 74% 66%',
750 |         'chart-5': '27 87% 67%',
751 |         ...sidebarColors.light,
752 |       },
753 |       dark: {
754 |         'background': '20 14.3% 4.1%',
755 |         'foreground': '60 9.1% 97.8%',
756 |         'card': '20 14.3% 4.1%',
757 |         'card-foreground': '60 9.1% 97.8%',
758 |         'popover': '20 14.3% 4.1%',
759 |         'popover-foreground': '60 9.1% 97.8%',
760 |         'primary': '47.9 95.8% 53.1%',
761 |         'primary-foreground': '26 83.3% 14.1%',
762 |         'secondary': '12 6.5% 15.1%',
763 |         'secondary-foreground': '60 9.1% 97.8%',
764 |         'muted': '12 6.5% 15.1%',
765 |         'muted-foreground': '24 5.4% 63.9%',
766 |         'accent': '12 6.5% 15.1%',
767 |         'accent-foreground': '60 9.1% 97.8%',
768 |         'destructive': '0 62.8% 30.6%',
769 |         'destructive-foreground': '60 9.1% 97.8%',
770 |         'border': '12 6.5% 15.1%',
771 |         'input': '12 6.5% 15.1%',
772 |         'ring': '35.5 91.7% 32.9%',
773 |         'chart-1': '220 70% 50%',
774 |         'chart-2': '160 60% 45%',
775 |         'chart-3': '30 80% 55%',
776 |         'chart-4': '280 65% 60%',
777 |         'chart-5': '340 75% 55%',
778 |         ...sidebarColors.dark,
779 |       },
780 |     },
781 |   },
782 |   {
783 |     name: 'violet',
784 |     label: 'Violet',
785 |     activeColor: {
786 |       light: '262.1 83.3% 57.8%',
787 |       dark: '263.4 70% 50.4%',
788 |     },
789 |     cssVars: {
790 |       light: {
791 |         'background': '0 0% 100%',
792 |         'foreground': '224 71.4% 4.1%',
793 |         'card': '0 0% 100%',
794 |         'card-foreground': '224 71.4% 4.1%',
795 |         'popover': '0 0% 100%',
796 |         'popover-foreground': '224 71.4% 4.1%',
797 |         'primary': '262.1 83.3% 57.8%',
798 |         'primary-foreground': '210 20% 98%',
799 |         'secondary': '220 14.3% 95.9%',
800 |         'secondary-foreground': '220.9 39.3% 11%',
801 |         'muted': '220 14.3% 95.9%',
802 |         'muted-foreground': '220 8.9% 46.1%',
803 |         'accent': '220 14.3% 95.9%',
804 |         'accent-foreground': '220.9 39.3% 11%',
805 |         'destructive': '0 84.2% 60.2%',
806 |         'destructive-foreground': '210 20% 98%',
807 |         'border': '220 13% 91%',
808 |         'input': '220 13% 91%',
809 |         'ring': '262.1 83.3% 57.8%',
810 |         'chart-1': '12 76% 61%',
811 |         'chart-2': '173 58% 39%',
812 |         'chart-3': '197 37% 24%',
813 |         'chart-4': '43 74% 66%',
814 |         'chart-5': '27 87% 67%',
815 |         ...sidebarColors.light,
816 |       },
817 |       dark: {
818 |         'background': '224 71.4% 4.1%',
819 |         'foreground': '210 20% 98%',
820 |         'card': '224 71.4% 4.1%',
821 |         'card-foreground': '210 20% 98%',
822 |         'popover': '224 71.4% 4.1%',
823 |         'popover-foreground': '210 20% 98%',
824 |         'primary': '263.4 70% 50.4%',
825 |         'primary-foreground': '210 20% 98%',
826 |         'secondary': '215 27.9% 16.9%',
827 |         'secondary-foreground': '210 20% 98%',
828 |         'muted': '215 27.9% 16.9%',
829 |         'muted-foreground': '217.9 10.6% 64.9%',
830 |         'accent': '215 27.9% 16.9%',
831 |         'accent-foreground': '210 20% 98%',
832 |         'destructive': '0 62.8% 30.6%',
833 |         'destructive-foreground': '210 20% 98%',
834 |         'border': '215 27.9% 16.9%',
835 |         'input': '215 27.9% 16.9%',
836 |         'ring': '263.4 70% 50.4%',
837 |         'chart-1': '220 70% 50%',
838 |         'chart-2': '160 60% 45%',
839 |         'chart-3': '30 80% 55%',
840 |         'chart-4': '280 65% 60%',
841 |         'chart-5': '340 75% 55%',
842 |         ...sidebarColors.dark,
843 |       },
844 |     },
845 |   },
846 | ] as const
847 | 
848 | export type Theme = (typeof themes)[number]
849 | 


--------------------------------------------------------------------------------
/src/themes/v4.ts:
--------------------------------------------------------------------------------
  1 | import type { ThemeCSSVarKey } from './v3'
  2 | 
  3 | type ThemeColorString = `${number} ${number} ${number}` | `${number} ${number} ${number} / ${number}%`
  4 | 
  5 | export type ThemeCSSVars = Record<ThemeCSSVarKey, ThemeColorString>
  6 | 
  7 | export interface ThemeCSSVarsVariant {
  8 |   name: string
  9 |   light: ThemeCSSVars
 10 |   dark: ThemeCSSVars
 11 | }
 12 | 
 13 | export const themes = [
 14 |   {
 15 |     name: 'zinc',
 16 |     label: 'Zinc',
 17 |     cssVars: {
 18 |       light: {
 19 |         'background': '1 0 0',
 20 |         'foreground': '0.141 0.005 285.823',
 21 |         'card': '1 0 0',
 22 |         'card-foreground': '0.141 0.005 285.823',
 23 |         'popover': '1 0 0',
 24 |         'popover-foreground': '0.141 0.005 285.823',
 25 |         'primary': '0.21 0.006 285.885',
 26 |         'primary-foreground': '0.985 0 0',
 27 |         'secondary': '0.967 0.001 286.375',
 28 |         'secondary-foreground': '0.21 0.006 285.885',
 29 |         'muted': '0.967 0.001 286.375',
 30 |         'muted-foreground': '0.552 0.016 285.938',
 31 |         'accent': '0.967 0.001 286.375',
 32 |         'accent-foreground': '0.21 0.006 285.885',
 33 |         'destructive': '0.577 0.245 27.325',
 34 |         'destructive-foreground': '0.985 0 0',
 35 |         'border': '0.92 0.004 286.32',
 36 |         'input': '0.92 0.004 286.32',
 37 |         'ring': '0.705 0.015 286.067',
 38 |         'radius': '0.625rem',
 39 |         'chart-1': '0.646 0.222 41.116',
 40 |         'chart-2': '0.6 0.118 184.704',
 41 |         'chart-3': '0.398 0.07 227.392',
 42 |         'chart-4': '0.828 0.189 84.429',
 43 |         'chart-5': '0.769 0.188 70.08',
 44 |         'sidebar': '0.985 0 0',
 45 |         'sidebar-foreground': '0.141 0.005 285.823',
 46 |         'sidebar-primary': '0.21 0.006 285.885',
 47 |         'sidebar-primary-foreground': '0.985 0 0',
 48 |         'sidebar-accent': '0.967 0.001 286.375',
 49 |         'sidebar-accent-foreground': '0.21 0.006 285.885',
 50 |         'sidebar-border': '0.92 0.004 286.32',
 51 |         'sidebar-ring': '0.705 0.015 286.067',
 52 |       },
 53 |       dark: {
 54 |         'background': '0.141 0.005 285.823',
 55 |         'foreground': '0.985 0 0',
 56 |         'card': '0.21 0.006 285.885',
 57 |         'card-foreground': '0.985 0 0',
 58 |         'popover': '0.21 0.006 285.885',
 59 |         'popover-foreground': '0.985 0 0',
 60 |         'primary': '0.92 0.004 286.32',
 61 |         'primary-foreground': '0.21 0.006 285.885',
 62 |         'secondary': '0.274 0.006 286.033',
 63 |         'secondary-foreground': '0.985 0 0',
 64 |         'muted': '0.274 0.006 286.033',
 65 |         'muted-foreground': '0.705 0.015 286.067',
 66 |         'accent': '0.274 0.006 286.033',
 67 |         'accent-foreground': '0.985 0 0',
 68 |         'destructive': '0.704 0.191 22.216',
 69 |         'destructive-foreground': '0.985 0 0',
 70 |         'border': '1 0 0 / 10%',
 71 |         'input': '1 0 0 / 15%',
 72 |         'ring': '0.552 0.016 285.938',
 73 |         'chart-1': '0.488 0.243 264.376',
 74 |         'chart-2': '0.696 0.17 162.48',
 75 |         'chart-3': '0.769 0.188 70.08',
 76 |         'chart-4': '0.627 0.265 303.9',
 77 |         'chart-5': '0.645 0.246 16.439',
 78 |         'sidebar': '0.21 0.006 285.885',
 79 |         'sidebar-foreground': '0.985 0 0',
 80 |         'sidebar-primary': '0.488 0.243 264.376',
 81 |         'sidebar-primary-foreground': '0.985 0 0',
 82 |         'sidebar-accent': '0.274 0.006 286.033',
 83 |         'sidebar-accent-foreground': '0.985 0 0',
 84 |         'sidebar-border': '1 0 0 / 10%',
 85 |         'sidebar-ring': '0.552 0.016 285.938',
 86 |       },
 87 |     },
 88 |   },
 89 |   {
 90 |     name: 'slate',
 91 |     label: 'Slate',
 92 |     cssVars: {
 93 |       light: {
 94 |         'background': '1 0 0',
 95 |         'foreground': '0.129 0.042 264.695',
 96 |         'card': '1 0 0',
 97 |         'card-foreground': '0.129 0.042 264.695',
 98 |         'popover': '1 0 0',
 99 |         'popover-foreground': '0.129 0.042 264.695',
100 |         'primary': '0.208 0.042 265.755',
101 |         'primary-foreground': '0.984 0.003 247.858',
102 |         'secondary': '0.968 0.007 247.896',
103 |         'secondary-foreground': '0.208 0.042 265.755',
104 |         'muted': '0.968 0.007 247.896',
105 |         'muted-foreground': '0.554 0.046 257.417',
106 |         'accent': '0.968 0.007 247.896',
107 |         'accent-foreground': '0.208 0.042 265.755',
108 |         'destructive': '0.577 0.245 27.325',
109 |         'destructive-foreground': '0.984 0.003 247.858',
110 |         'border': '0.929 0.013 255.508',
111 |         'input': '0.929 0.013 255.508',
112 |         'ring': '0.704 0.04 256.788',
113 |         'radius': '0.625rem',
114 |         'chart-1': '0.646 0.222 41.116',
115 |         'chart-2': '0.6 0.118 184.704',
116 |         'chart-3': '0.398 0.07 227.392',
117 |         'chart-4': '0.828 0.189 84.429',
118 |         'chart-5': '0.769 0.188 70.08',
119 |         'sidebar': '0.984 0.003 247.858',
120 |         'sidebar-foreground': '0.129 0.042 264.695',
121 |         'sidebar-primary': '0.208 0.042 265.755',
122 |         'sidebar-primary-foreground': '0.984 0.003 247.858',
123 |         'sidebar-accent': '0.968 0.007 247.896',
124 |         'sidebar-accent-foreground': '0.208 0.042 265.755',
125 |         'sidebar-border': '0.929 0.013 255.508',
126 |         'sidebar-ring': '0.704 0.04 256.788',
127 |       },
128 |       dark: {
129 |         'background': '0.129 0.042 264.695',
130 |         'foreground': '0.984 0.003 247.858',
131 |         'card': '0.208 0.042 265.755',
132 |         'card-foreground': '0.984 0.003 247.858',
133 |         'popover': '0.208 0.042 265.755',
134 |         'popover-foreground': '0.984 0.003 247.858',
135 |         'primary': '0.929 0.013 255.508',
136 |         'primary-foreground': '0.208 0.042 265.755',
137 |         'secondary': '0.279 0.041 260.031',
138 |         'secondary-foreground': '0.984 0.003 247.858',
139 |         'muted': '0.279 0.041 260.031',
140 |         'muted-foreground': '0.704 0.04 256.788',
141 |         'accent': '0.279 0.041 260.031',
142 |         'accent-foreground': '0.984 0.003 247.858',
143 |         'destructive': '0.704 0.191 22.216',
144 |         'destructive-foreground': '0.984 0.003 247.858',
145 |         'border': '1 0 0 / 10%',
146 |         'input': '1 0 0 / 15%',
147 |         'ring': '0.551 0.027 264.364',
148 |         'chart-1': '0.488 0.243 264.376',
149 |         'chart-2': '0.696 0.17 162.48',
150 |         'chart-3': '0.769 0.188 70.08',
151 |         'chart-4': '0.627 0.265 303.9',
152 |         'chart-5': '0.645 0.246 16.439',
153 |         'sidebar': '0.208 0.042 265.755',
154 |         'sidebar-foreground': '0.984 0.003 247.858',
155 |         'sidebar-primary': '0.488 0.243 264.376',
156 |         'sidebar-primary-foreground': '0.984 0.003 247.858',
157 |         'sidebar-accent': '0.279 0.041 260.031',
158 |         'sidebar-accent-foreground': '0.984 0.003 247.858',
159 |         'sidebar-border': '1 0 0 / 10%',
160 |         'sidebar-ring': '0.551 0.027 264.364',
161 |       },
162 |     },
163 |   },
164 |   {
165 |     name: 'stone',
166 |     label: 'Stone',
167 |     cssVars: {
168 |       light: {
169 |         'background': '1 0 0',
170 |         'foreground': '0.147 0.004 49.25',
171 |         'card': '1 0 0',
172 |         'card-foreground': '0.147 0.004 49.25',
173 |         'popover': '1 0 0',
174 |         'popover-foreground': '0.147 0.004 49.25',
175 |         'primary': '0.216 0.006 56.043',
176 |         'primary-foreground': '0.985 0.001 106.423',
177 |         'secondary': '0.97 0.001 106.424',
178 |         'secondary-foreground': '0.216 0.006 56.043',
179 |         'muted': '0.97 0.001 106.424',
180 |         'muted-foreground': '0.553 0.013 58.071',
181 |         'accent': '0.97 0.001 106.424',
182 |         'accent-foreground': '0.216 0.006 56.043',
183 |         'destructive': '0.577 0.245 27.325',
184 |         'destructive-foreground': '0.985 0.001 106.423',
185 |         'border': '0.923 0.003 48.717',
186 |         'input': '0.923 0.003 48.717',
187 |         'ring': '0.709 0.01 56.259',
188 |         'radius': '0.625rem',
189 |         'chart-1': '0.646 0.222 41.116',
190 |         'chart-2': '0.6 0.118 184.704',
191 |         'chart-3': '0.398 0.07 227.392',
192 |         'chart-4': '0.828 0.189 84.429',
193 |         'chart-5': '0.769 0.188 70.08',
194 |         'sidebar': '0.985 0.001 106.423',
195 |         'sidebar-foreground': '0.147 0.004 49.25',
196 |         'sidebar-primary': '0.216 0.006 56.043',
197 |         'sidebar-primary-foreground': '0.985 0.001 106.423',
198 |         'sidebar-accent': '0.97 0.001 106.424',
199 |         'sidebar-accent-foreground': '0.216 0.006 56.043',
200 |         'sidebar-border': '0.923 0.003 48.717',
201 |         'sidebar-ring': '0.709 0.01 56.259',
202 |       },
203 |       dark: {
204 |         'background': '0.147 0.004 49.25',
205 |         'foreground': '0.985 0.001 106.423',
206 |         'card': '0.216 0.006 56.043',
207 |         'card-foreground': '0.985 0.001 106.423',
208 |         'popover': '0.216 0.006 56.043',
209 |         'popover-foreground': '0.985 0.001 106.423',
210 |         'primary': '0.923 0.003 48.717',
211 |         'primary-foreground': '0.216 0.006 56.043',
212 |         'secondary': '0.268 0.007 34.298',
213 |         'secondary-foreground': '0.985 0.001 106.423',
214 |         'muted': '0.268 0.007 34.298',
215 |         'muted-foreground': '0.709 0.01 56.259',
216 |         'accent': '0.268 0.007 34.298',
217 |         'accent-foreground': '0.985 0.001 106.423',
218 |         'destructive': '0.704 0.191 22.216',
219 |         'destructive-foreground': '0.985 0.001 106.423',
220 |         'border': '1 0 0 / 10%',
221 |         'input': '1 0 0 / 15%',
222 |         'ring': '0.553 0.013 58.071',
223 |         'chart-1': '0.488 0.243 264.376',
224 |         'chart-2': '0.696 0.17 162.48',
225 |         'chart-3': '0.769 0.188 70.08',
226 |         'chart-4': '0.627 0.265 303.9',
227 |         'chart-5': '0.645 0.246 16.439',
228 |         'sidebar': '0.216 0.006 56.043',
229 |         'sidebar-foreground': '0.985 0.001 106.423',
230 |         'sidebar-primary': '0.488 0.243 264.376',
231 |         'sidebar-primary-foreground': '0.985 0.001 106.423',
232 |         'sidebar-accent': '0.268 0.007 34.298',
233 |         'sidebar-accent-foreground': '0.985 0.001 106.423',
234 |         'sidebar-border': '1 0 0 / 10%',
235 |         'sidebar-ring': '0.553 0.013 58.071',
236 |       },
237 |     },
238 |   },
239 |   {
240 |     name: 'gray',
241 |     label: 'Gray',
242 |     cssVars: {
243 |       light: {
244 |         'background': '1 0 0',
245 |         'foreground': '0.13 0.028 261.692',
246 |         'card': '1 0 0',
247 |         'card-foreground': '0.13 0.028 261.692',
248 |         'popover': '1 0 0',
249 |         'popover-foreground': '0.13 0.028 261.692',
250 |         'primary': '0.21 0.034 264.665',
251 |         'primary-foreground': '0.985 0.002 247.839',
252 |         'secondary': '0.967 0.003 264.542',
253 |         'secondary-foreground': '0.21 0.034 264.665',
254 |         'muted': '0.967 0.003 264.542',
255 |         'muted-foreground': '0.551 0.027 264.364',
256 |         'accent': '0.967 0.003 264.542',
257 |         'accent-foreground': '0.21 0.034 264.665',
258 |         'destructive': '0.577 0.245 27.325',
259 |         'destructive-foreground': '0.985 0.002 247.839',
260 |         'border': '0.928 0.006 264.531',
261 |         'input': '0.928 0.006 264.531',
262 |         'ring': '0.707 0.022 261.325',
263 |         'radius': '0.625rem',
264 |         'chart-1': '0.646 0.222 41.116',
265 |         'chart-2': '0.6 0.118 184.704',
266 |         'chart-3': '0.398 0.07 227.392',
267 |         'chart-4': '0.828 0.189 84.429',
268 |         'chart-5': '0.769 0.188 70.08',
269 |         'sidebar': '0.985 0.002 247.839',
270 |         'sidebar-foreground': '0.13 0.028 261.692',
271 |         'sidebar-primary': '0.21 0.034 264.665',
272 |         'sidebar-primary-foreground': '0.985 0.002 247.839',
273 |         'sidebar-accent': '0.967 0.003 264.542',
274 |         'sidebar-accent-foreground': '0.21 0.034 264.665',
275 |         'sidebar-border': '0.928 0.006 264.531',
276 |         'sidebar-ring': '0.707 0.022 261.325',
277 |       },
278 |       dark: {
279 |         'background': '0.13 0.028 261.692',
280 |         'foreground': '0.985 0.002 247.839',
281 |         'card': '0.21 0.034 264.665',
282 |         'card-foreground': '0.985 0.002 247.839',
283 |         'popover': '0.21 0.034 264.665',
284 |         'popover-foreground': '0.985 0.002 247.839',
285 |         'primary': '0.928 0.006 264.531',
286 |         'primary-foreground': '0.21 0.034 264.665',
287 |         'secondary': '0.278 0.033 256.848',
288 |         'secondary-foreground': '0.985 0.002 247.839',
289 |         'muted': '0.278 0.033 256.848',
290 |         'muted-foreground': '0.707 0.022 261.325',
291 |         'accent': '0.278 0.033 256.848',
292 |         'accent-foreground': '0.985 0.002 247.839',
293 |         'destructive': '0.704 0.191 22.216',
294 |         'destructive-foreground': '0.985 0.002 247.839',
295 |         'border': '1 0 0 / 10%',
296 |         'input': '1 0 0 / 15%',
297 |         'ring': '0.551 0.027 264.364',
298 |         'chart-1': '0.488 0.243 264.376',
299 |         'chart-2': '0.696 0.17 162.48',
300 |         'chart-3': '0.769 0.188 70.08',
301 |         'chart-4': '0.627 0.265 303.9',
302 |         'chart-5': '0.645 0.246 16.439',
303 |         'sidebar': '0.21 0.034 264.665',
304 |         'sidebar-foreground': '0.985 0.002 247.839',
305 |         'sidebar-primary': '0.488 0.243 264.376',
306 |         'sidebar-primary-foreground': '0.985 0.002 247.839',
307 |         'sidebar-accent': '0.278 0.033 256.848',
308 |         'sidebar-accent-foreground': '0.985 0.002 247.839',
309 |         'sidebar-border': '1 0 0 / 10%',
310 |         'sidebar-ring': '0.551 0.027 264.364',
311 |       },
312 |     },
313 |   },
314 |   {
315 |     name: 'neutral',
316 |     label: 'Neutral',
317 |     cssVars: {
318 |       light: {
319 |         'background': '1 0 0',
320 |         'foreground': '0.145 0 0',
321 |         'card': '1 0 0',
322 |         'card-foreground': '0.145 0 0',
323 |         'popover': '1 0 0',
324 |         'popover-foreground': '0.145 0 0',
325 |         'primary': '0.205 0 0',
326 |         'primary-foreground': '0.985 0 0',
327 |         'secondary': '0.97 0 0',
328 |         'secondary-foreground': '0.205 0 0',
329 |         'muted': '0.97 0 0',
330 |         'muted-foreground': '0.556 0 0',
331 |         'accent': '0.97 0 0',
332 |         'accent-foreground': '0.205 0 0',
333 |         'destructive': '0.577 0.245 27.325',
334 |         'destructive-foreground': '0.985 0 0',
335 |         'border': '0.922 0 0',
336 |         'input': '0.922 0 0',
337 |         'ring': '0.708 0 0',
338 |         'chart-1': '0.646 0.222 41.116',
339 |         'chart-2': '0.6 0.118 184.704',
340 |         'chart-3': '0.398 0.07 227.392',
341 |         'chart-4': '0.828 0.189 84.429',
342 |         'chart-5': '0.769 0.188 70.08',
343 |         'sidebar': '0.985 0 0',
344 |         'sidebar-foreground': '0.145 0 0',
345 |         'sidebar-primary': '0.205 0 0',
346 |         'sidebar-primary-foreground': '0.985 0 0',
347 |         'sidebar-accent': '0.97 0 0',
348 |         'sidebar-accent-foreground': '0.205 0 0',
349 |         'sidebar-border': '0.922 0 0',
350 |         'sidebar-ring': '0.708 0 0',
351 |       },
352 |       dark: {
353 |         'background': '0.145 0 0',
354 |         'foreground': '0.985 0 0',
355 |         'card': '0.205 0 0',
356 |         'card-foreground': '0.985 0 0',
357 |         'popover': '0.205 0 0',
358 |         'popover-foreground': '0.985 0 0',
359 |         'primary': '0.922 0 0',
360 |         'primary-foreground': '0.205 0 0',
361 |         'secondary': '0.269 0 0',
362 |         'secondary-foreground': '0.985 0 0',
363 |         'muted': '0.269 0 0',
364 |         'muted-foreground': '0.708 0 0',
365 |         'accent': '0.269 0 0',
366 |         'accent-foreground': '0.985 0 0',
367 |         'destructive': '0.704 0.191 22.216',
368 |         'destructive-foreground': '0.985 0 0',
369 |         'border': '1 0 0 / 10%',
370 |         'input': '1 0 0 / 15%',
371 |         'ring': '0.556 0 0',
372 |         'chart-1': '0.488 0.243 264.376',
373 |         'chart-2': '0.696 0.17 162.48',
374 |         'chart-3': '0.769 0.188 70.08',
375 |         'chart-4': '0.627 0.265 303.9',
376 |         'chart-5': '0.645 0.246 16.439',
377 |         'sidebar': '0.205 0 0',
378 |         'sidebar-foreground': '0.985 0 0',
379 |         'sidebar-primary': '0.488 0.243 264.376',
380 |         'sidebar-primary-foreground': '0.985 0 0',
381 |         'sidebar-accent': '0.269 0 0',
382 |         'sidebar-accent-foreground': '0.985 0 0',
383 |         'sidebar-border': '1 0 0 / 10%',
384 |         'sidebar-ring': '0.556 0 0',
385 |       },
386 |     },
387 |   },
388 |   {
389 |     name: 'red',
390 |     label: 'Red',
391 |     cssVars: {
392 |       light: {
393 |         'background': '1 0 0',
394 |         'foreground': '0.141 0.005 285.823',
395 |         'card': '1 0 0',
396 |         'card-foreground': '0.141 0.005 285.823',
397 |         'popover': '1 0 0',
398 |         'popover-foreground': '0.141 0.005 285.823',
399 |         'primary': '0.637 0.237 25.331',
400 |         'primary-foreground': '0.971 0.013 17.38',
401 |         'secondary': '0.967 0.001 286.375',
402 |         'secondary-foreground': '0.21 0.006 285.885',
403 |         'muted': '0.967 0.001 286.375',
404 |         'muted-foreground': '0.552 0.016 285.938',
405 |         'accent': '0.967 0.001 286.375',
406 |         'accent-foreground': '0.21 0.006 285.885',
407 |         'destructive': '0.577 0.245 27.325',
408 |         'destructive-foreground': '0.971 0.013 17.38',
409 |         'border': '0.92 0.004 286.32',
410 |         'input': '0.92 0.004 286.32',
411 |         'ring': '0.637 0.237 25.331',
412 |         'radius': '0.65rem',
413 |         'chart-1': '0.646 0.222 41.116',
414 |         'chart-2': '0.6 0.118 184.704',
415 |         'chart-3': '0.398 0.07 227.392',
416 |         'chart-4': '0.828 0.189 84.429',
417 |         'chart-5': '0.769 0.188 70.08',
418 |         'sidebar': '0.985 0 0',
419 |         'sidebar-foreground': '0.141 0.005 285.823',
420 |         'sidebar-primary': '0.637 0.237 25.331',
421 |         'sidebar-primary-foreground': '0.971 0.013 17.38',
422 |         'sidebar-accent': '0.967 0.001 286.375',
423 |         'sidebar-accent-foreground': '0.21 0.006 285.885',
424 |         'sidebar-border': '0.92 0.004 286.32',
425 |         'sidebar-ring': '0.637 0.237 25.331',
426 |       },
427 |       dark: {
428 |         'background': '0.141 0.005 285.823',
429 |         'foreground': '0.985 0 0',
430 |         'card': '0.21 0.006 285.885',
431 |         'card-foreground': '0.985 0 0',
432 |         'popover': '0.21 0.006 285.885',
433 |         'popover-foreground': '0.985 0 0',
434 |         'primary': '0.637 0.237 25.331',
435 |         'primary-foreground': '0.971 0.013 17.38',
436 |         'secondary': '0.274 0.006 286.033',
437 |         'secondary-foreground': '0.985 0 0',
438 |         'muted': '0.274 0.006 286.033',
439 |         'muted-foreground': '0.705 0.015 286.067',
440 |         'accent': '0.274 0.006 286.033',
441 |         'accent-foreground': '0.985 0 0',
442 |         'destructive': '0.704 0.191 22.216',
443 |         'destructive-foreground': '0.985 0 0',
444 |         'border': '1 0 0 / 10%',
445 |         'input': '1 0 0 / 15%',
446 |         'ring': '0.637 0.237 25.331',
447 |         'chart-1': '0.488 0.243 264.376',
448 |         'chart-2': '0.696 0.17 162.48',
449 |         'chart-3': '0.769 0.188 70.08',
450 |         'chart-4': '0.627 0.265 303.9',
451 |         'chart-5': '0.645 0.246 16.439',
452 |         'sidebar': '0.21 0.006 285.885',
453 |         'sidebar-foreground': '0.985 0 0',
454 |         'sidebar-primary': '0.637 0.237 25.331',
455 |         'sidebar-primary-foreground': '0.971 0.013 17.38',
456 |         'sidebar-accent': '0.274 0.006 286.033',
457 |         'sidebar-accent-foreground': '0.985 0 0',
458 |         'sidebar-border': '1 0 0 / 10%',
459 |         'sidebar-ring': '0.637 0.237 25.331',
460 |       },
461 |     },
462 |   },
463 |   {
464 |     name: 'rose',
465 |     label: 'Rose',
466 |     cssVars: {
467 |       light: {
468 |         'background': '1 0 0',
469 |         'foreground': '0.141 0.005 285.823',
470 |         'card': '1 0 0',
471 |         'card-foreground': '0.141 0.005 285.823',
472 |         'popover': '1 0 0',
473 |         'popover-foreground': '0.141 0.005 285.823',
474 |         'primary': '0.645 0.246 16.439',
475 |         'primary-foreground': '0.969 0.015 12.422',
476 |         'secondary': '0.967 0.001 286.375',
477 |         'secondary-foreground': '0.21 0.006 285.885',
478 |         'muted': '0.967 0.001 286.375',
479 |         'muted-foreground': '0.552 0.016 285.938',
480 |         'accent': '0.967 0.001 286.375',
481 |         'accent-foreground': '0.21 0.006 285.885',
482 |         'destructive': '0.577 0.245 27.325',
483 |         'destructive-foreground': '0.969 0.015 12.422',
484 |         'border': '0.92 0.004 286.32',
485 |         'input': '0.92 0.004 286.32',
486 |         'ring': '0.645 0.246 16.439',
487 |         'radius': '0.65rem',
488 |         'chart-1': '0.646 0.222 41.116',
489 |         'chart-2': '0.6 0.118 184.704',
490 |         'chart-3': '0.398 0.07 227.392',
491 |         'chart-4': '0.828 0.189 84.429',
492 |         'chart-5': '0.769 0.188 70.08',
493 |         'sidebar': '0.985 0 0',
494 |         'sidebar-foreground': '0.141 0.005 285.823',
495 |         'sidebar-primary': '0.645 0.246 16.439',
496 |         'sidebar-primary-foreground': '0.969 0.015 12.422',
497 |         'sidebar-accent': '0.967 0.001 286.375',
498 |         'sidebar-accent-foreground': '0.21 0.006 285.885',
499 |         'sidebar-border': '0.92 0.004 286.32',
500 |         'sidebar-ring': '0.645 0.246 16.439',
501 |       },
502 |       dark: {
503 |         'background': '0.141 0.005 285.823',
504 |         'foreground': '0.985 0 0',
505 |         'card': '0.21 0.006 285.885',
506 |         'card-foreground': '0.985 0 0',
507 |         'popover': '0.21 0.006 285.885',
508 |         'popover-foreground': '0.985 0 0',
509 |         'primary': '0.645 0.246 16.439',
510 |         'primary-foreground': '0.969 0.015 12.422',
511 |         'secondary': '0.274 0.006 286.033',
512 |         'secondary-foreground': '0.985 0 0',
513 |         'muted': '0.274 0.006 286.033',
514 |         'muted-foreground': '0.705 0.015 286.067',
515 |         'accent': '0.274 0.006 286.033',
516 |         'accent-foreground': '0.985 0 0',
517 |         'destructive': '0.704 0.191 22.216',
518 |         'destructive-foreground': '0.985 0 0',
519 |         'border': '1 0 0 / 10%',
520 |         'input': '1 0 0 / 15%',
521 |         'ring': '0.645 0.246 16.439',
522 |         'chart-1': '0.488 0.243 264.376',
523 |         'chart-2': '0.696 0.17 162.48',
524 |         'chart-3': '0.769 0.188 70.08',
525 |         'chart-4': '0.627 0.265 303.9',
526 |         'chart-5': '0.645 0.246 16.439',
527 |         'sidebar': '0.21 0.006 285.885',
528 |         'sidebar-foreground': '0.985 0 0',
529 |         'sidebar-primary': '0.645 0.246 16.439',
530 |         'sidebar-primary-foreground': '0.969 0.015 12.422',
531 |         'sidebar-accent': '0.274 0.006 286.033',
532 |         'sidebar-accent-foreground': '0.985 0 0',
533 |         'sidebar-border': '1 0 0 / 10%',
534 |         'sidebar-ring': '0.645 0.246 16.439',
535 |       },
536 |     },
537 |   },
538 |   {
539 |     name: 'orange',
540 |     label: 'Orange',
541 |     cssVars: {
542 |       light: {
543 |         'background': '1 0 0',
544 |         'foreground': '0.141 0.005 285.823',
545 |         'card': '1 0 0',
546 |         'card-foreground': '0.141 0.005 285.823',
547 |         'popover': '1 0 0',
548 |         'popover-foreground': '0.141 0.005 285.823',
549 |         'primary': '0.705 0.213 47.604',
550 |         'primary-foreground': '0.98 0.016 73.684',
551 |         'secondary': '0.967 0.001 286.375',
552 |         'secondary-foreground': '0.21 0.006 285.885',
553 |         'muted': '0.967 0.001 286.375',
554 |         'muted-foreground': '0.552 0.016 285.938',
555 |         'accent': '0.967 0.001 286.375',
556 |         'accent-foreground': '0.21 0.006 285.885',
557 |         'destructive': '0.577 0.245 27.325',
558 |         'destructive-foreground': '0.98 0.016 73.684',
559 |         'border': '0.92 0.004 286.32',
560 |         'input': '0.92 0.004 286.32',
561 |         'ring': '0.705 0.213 47.604',
562 |         'radius': '0.65rem',
563 |         'chart-1': '0.646 0.222 41.116',
564 |         'chart-2': '0.6 0.118 184.704',
565 |         'chart-3': '0.398 0.07 227.392',
566 |         'chart-4': '0.828 0.189 84.429',
567 |         'chart-5': '0.769 0.188 70.08',
568 |         'sidebar': '0.985 0 0',
569 |         'sidebar-foreground': '0.141 0.005 285.823',
570 |         'sidebar-primary': '0.705 0.213 47.604',
571 |         'sidebar-primary-foreground': '0.98 0.016 73.684',
572 |         'sidebar-accent': '0.967 0.001 286.375',
573 |         'sidebar-accent-foreground': '0.21 0.006 285.885',
574 |         'sidebar-border': '0.92 0.004 286.32',
575 |         'sidebar-ring': '0.705 0.213 47.604',
576 |       },
577 |       dark: {
578 |         'background': '0.141 0.005 285.823',
579 |         'foreground': '0.985 0 0',
580 |         'card': '0.21 0.006 285.885',
581 |         'card-foreground': '0.985 0 0',
582 |         'popover': '0.21 0.006 285.885',
583 |         'popover-foreground': '0.985 0 0',
584 |         'primary': '0.646 0.222 41.116',
585 |         'primary-foreground': '0.98 0.016 73.684',
586 |         'secondary': '0.274 0.006 286.033',
587 |         'secondary-foreground': '0.985 0 0',
588 |         'muted': '0.274 0.006 286.033',
589 |         'muted-foreground': '0.705 0.015 286.067',
590 |         'accent': '0.274 0.006 286.033',
591 |         'accent-foreground': '0.985 0 0',
592 |         'destructive': '0.704 0.191 22.216',
593 |         'destructive-foreground': '0.985 0 0',
594 |         'border': '1 0 0 / 10%',
595 |         'input': '1 0 0 / 15%',
596 |         'ring': '0.646 0.222 41.116',
597 |         'chart-1': '0.488 0.243 264.376',
598 |         'chart-2': '0.696 0.17 162.48',
599 |         'chart-3': '0.769 0.188 70.08',
600 |         'chart-4': '0.627 0.265 303.9',
601 |         'chart-5': '0.645 0.246 16.439',
602 |         'sidebar': '0.21 0.006 285.885',
603 |         'sidebar-foreground': '0.985 0 0',
604 |         'sidebar-primary': '0.646 0.222 41.116',
605 |         'sidebar-primary-foreground': '0.98 0.016 73.684',
606 |         'sidebar-accent': '0.274 0.006 286.033',
607 |         'sidebar-accent-foreground': '0.985 0 0',
608 |         'sidebar-border': '1 0 0 / 10%',
609 |         'sidebar-ring': '0.646 0.222 41.116',
610 |       },
611 |     },
612 |   },
613 |   {
614 |     name: 'green',
615 |     label: 'Green',
616 |     cssVars: {
617 |       light: {
618 |         'background': '1 0 0',
619 |         'foreground': '0.141 0.005 285.823',
620 |         'card': '1 0 0',
621 |         'card-foreground': '0.141 0.005 285.823',
622 |         'popover': '1 0 0',
623 |         'popover-foreground': '0.141 0.005 285.823',
624 |         'primary': '0.723 0.219 149.579',
625 |         'primary-foreground': '0.982 0.018 155.826',
626 |         'secondary': '0.967 0.001 286.375',
627 |         'secondary-foreground': '0.21 0.006 285.885',
628 |         'muted': '0.967 0.001 286.375',
629 |         'muted-foreground': '0.552 0.016 285.938',
630 |         'accent': '0.967 0.001 286.375',
631 |         'accent-foreground': '0.21 0.006 285.885',
632 |         'destructive': '0.577 0.245 27.325',
633 |         'destructive-foreground': '0.982 0.018 155.826',
634 |         'border': '0.92 0.004 286.32',
635 |         'input': '0.92 0.004 286.32',
636 |         'ring': '0.723 0.219 149.579',
637 |         'radius': '0.65rem',
638 |         'chart-1': '0.646 0.222 41.116',
639 |         'chart-2': '0.6 0.118 184.704',
640 |         'chart-3': '0.398 0.07 227.392',
641 |         'chart-4': '0.828 0.189 84.429',
642 |         'chart-5': '0.769 0.188 70.08',
643 |         'sidebar': '0.985 0 0',
644 |         'sidebar-foreground': '0.141 0.005 285.823',
645 |         'sidebar-primary': '0.723 0.219 149.579',
646 |         'sidebar-primary-foreground': '0.982 0.018 155.826',
647 |         'sidebar-accent': '0.967 0.001 286.375',
648 |         'sidebar-accent-foreground': '0.21 0.006 285.885',
649 |         'sidebar-border': '0.92 0.004 286.32',
650 |         'sidebar-ring': '0.723 0.219 149.579',
651 |       },
652 |       dark: {
653 |         'background': '0.141 0.005 285.823',
654 |         'foreground': '0.985 0 0',
655 |         'card': '0.21 0.006 285.885',
656 |         'card-foreground': '0.985 0 0',
657 |         'popover': '0.21 0.006 285.885',
658 |         'popover-foreground': '0.985 0 0',
659 |         'primary': '0.696 0.17 162.48',
660 |         'primary-foreground': '0.986 0.031 120.757',
661 |         'secondary': '0.274 0.006 286.033',
662 |         'secondary-foreground': '0.985 0 0',
663 |         'muted': '0.274 0.006 286.033',
664 |         'muted-foreground': '0.705 0.015 286.067',
665 |         'accent': '0.274 0.006 286.033',
666 |         'accent-foreground': '0.985 0 0',
667 |         'destructive': '0.704 0.191 22.216',
668 |         'destructive-foreground': '0.985 0 0',
669 |         'border': '1 0 0 / 10%',
670 |         'input': '1 0 0 / 15%',
671 |         'ring': '0.527 0.154 150.069',
672 |         'chart-1': '0.488 0.243 264.376',
673 |         'chart-2': '0.696 0.17 162.48',
674 |         'chart-3': '0.769 0.188 70.08',
675 |         'chart-4': '0.627 0.265 303.9',
676 |         'chart-5': '0.645 0.246 16.439',
677 |         'sidebar': '0.21 0.006 285.885',
678 |         'sidebar-foreground': '0.985 0 0',
679 |         'sidebar-primary': '0.696 0.17 162.48',
680 |         'sidebar-primary-foreground': '0.986 0.031 120.757',
681 |         'sidebar-accent': '0.274 0.006 286.033',
682 |         'sidebar-accent-foreground': '0.985 0 0',
683 |         'sidebar-border': '1 0 0 / 10%',
684 |         'sidebar-ring': '0.527 0.154 150.069',
685 |       },
686 |     },
687 |   },
688 |   {
689 |     name: 'blue',
690 |     label: 'Blue',
691 |     cssVars: {
692 |       light: {
693 |         'background': '1 0 0',
694 |         'foreground': '0.141 0.005 285.823',
695 |         'card': '1 0 0',
696 |         'card-foreground': '0.141 0.005 285.823',
697 |         'popover': '1 0 0',
698 |         'popover-foreground': '0.141 0.005 285.823',
699 |         'primary': '0.623 0.214 259.815',
700 |         'primary-foreground': '0.97 0.014 254.604',
701 |         'secondary': '0.967 0.001 286.375',
702 |         'secondary-foreground': '0.21 0.006 285.885',
703 |         'muted': '0.967 0.001 286.375',
704 |         'muted-foreground': '0.552 0.016 285.938',
705 |         'accent': '0.967 0.001 286.375',
706 |         'accent-foreground': '0.21 0.006 285.885',
707 |         'destructive': '0.577 0.245 27.325',
708 |         'destructive-foreground': '0.97 0.014 254.604',
709 |         'border': '0.92 0.004 286.32',
710 |         'input': '0.92 0.004 286.32',
711 |         'ring': '0.623 0.214 259.815',
712 |         'radius': '0.65rem',
713 |         'chart-1': '0.646 0.222 41.116',
714 |         'chart-2': '0.6 0.118 184.704',
715 |         'chart-3': '0.398 0.07 227.392',
716 |         'chart-4': '0.828 0.189 84.429',
717 |         'chart-5': '0.769 0.188 70.08',
718 |         'sidebar': '0.985 0 0',
719 |         'sidebar-foreground': '0.141 0.005 285.823',
720 |         'sidebar-primary': '0.623 0.214 259.815',
721 |         'sidebar-primary-foreground': '0.97 0.014 254.604',
722 |         'sidebar-accent': '0.967 0.001 286.375',
723 |         'sidebar-accent-foreground': '0.21 0.006 285.885',
724 |         'sidebar-border': '0.92 0.004 286.32',
725 |         'sidebar-ring': '0.623 0.214 259.815',
726 |       },
727 |       dark: {
728 |         'background': '0.141 0.005 285.823',
729 |         'foreground': '0.985 0 0',
730 |         'card': '0.21 0.006 285.885',
731 |         'card-foreground': '0.985 0 0',
732 |         'popover': '0.21 0.006 285.885',
733 |         'popover-foreground': '0.985 0 0',
734 |         'primary': '0.546 0.245 262.881',
735 |         'primary-foreground': '0.97 0.014 254.604',
736 |         'secondary': '0.274 0.006 286.033',
737 |         'secondary-foreground': '0.985 0 0',
738 |         'muted': '0.274 0.006 286.033',
739 |         'muted-foreground': '0.705 0.015 286.067',
740 |         'accent': '0.274 0.006 286.033',
741 |         'accent-foreground': '0.985 0 0',
742 |         'destructive': '0.704 0.191 22.216',
743 |         'destructive-foreground': '0.985 0 0',
744 |         'border': '1 0 0 / 10%',
745 |         'input': '1 0 0 / 15%',
746 |         'ring': '0.488 0.243 264.376',
747 |         'chart-1': '0.488 0.243 264.376',
748 |         'chart-2': '0.696 0.17 162.48',
749 |         'chart-3': '0.769 0.188 70.08',
750 |         'chart-4': '0.627 0.265 303.9',
751 |         'chart-5': '0.645 0.246 16.439',
752 |         'sidebar': '0.21 0.006 285.885',
753 |         'sidebar-foreground': '0.985 0 0',
754 |         'sidebar-primary': '0.546 0.245 262.881',
755 |         'sidebar-primary-foreground': '0.97 0.014 254.604',
756 |         'sidebar-accent': '0.274 0.006 286.033',
757 |         'sidebar-accent-foreground': '0.985 0 0',
758 |         'sidebar-border': '1 0 0 / 10%',
759 |         'sidebar-ring': '0.488 0.243 264.376',
760 |       },
761 |     },
762 |   },
763 |   {
764 |     name: 'yellow',
765 |     label: 'Yellow',
766 |     cssVars: {
767 |       light: {
768 |         'background': '1 0 0',
769 |         'foreground': '0.141 0.005 285.823',
770 |         'card': '1 0 0',
771 |         'card-foreground': '0.141 0.005 285.823',
772 |         'popover': '1 0 0',
773 |         'popover-foreground': '0.141 0.005 285.823',
774 |         'primary': '0.795 0.184 86.047',
775 |         'primary-foreground': '0.421 0.095 57.708',
776 |         'secondary': '0.967 0.001 286.375',
777 |         'secondary-foreground': '0.21 0.006 285.885',
778 |         'muted': '0.967 0.001 286.375',
779 |         'muted-foreground': '0.552 0.016 285.938',
780 |         'accent': '0.967 0.001 286.375',
781 |         'accent-foreground': '0.21 0.006 285.885',
782 |         'destructive': '0.577 0.245 27.325',
783 |         'destructive-foreground': '0.421 0.095 57.708',
784 |         'border': '0.92 0.004 286.32',
785 |         'input': '0.92 0.004 286.32',
786 |         'ring': '0.795 0.184 86.047',
787 |         'radius': '0.65rem',
788 |         'chart-1': '0.646 0.222 41.116',
789 |         'chart-2': '0.6 0.118 184.704',
790 |         'chart-3': '0.398 0.07 227.392',
791 |         'chart-4': '0.828 0.189 84.429',
792 |         'chart-5': '0.769 0.188 70.08',
793 |         'sidebar': '0.985 0 0',
794 |         'sidebar-foreground': '0.141 0.005 285.823',
795 |         'sidebar-primary': '0.795 0.184 86.047',
796 |         'sidebar-primary-foreground': '0.421 0.095 57.708',
797 |         'sidebar-accent': '0.967 0.001 286.375',
798 |         'sidebar-accent-foreground': '0.21 0.006 285.885',
799 |         'sidebar-border': '0.92 0.004 286.32',
800 |         'sidebar-ring': '0.795 0.184 86.047',
801 |       },
802 |       dark: {
803 |         'background': '0.141 0.005 285.823',
804 |         'foreground': '0.985 0 0',
805 |         'card': '0.21 0.006 285.885',
806 |         'card-foreground': '0.985 0 0',
807 |         'popover': '0.21 0.006 285.885',
808 |         'popover-foreground': '0.985 0 0',
809 |         'primary': '0.795 0.184 86.047',
810 |         'primary-foreground': '0.421 0.095 57.708',
811 |         'secondary': '0.274 0.006 286.033',
812 |         'secondary-foreground': '0.985 0 0',
813 |         'muted': '0.274 0.006 286.033',
814 |         'muted-foreground': '0.705 0.015 286.067',
815 |         'accent': '0.274 0.006 286.033',
816 |         'accent-foreground': '0.985 0 0',
817 |         'destructive': '0.704 0.191 22.216',
818 |         'destructive-foreground': '0.985 0 0',
819 |         'border': '1 0 0 / 10%',
820 |         'input': '1 0 0 / 15%',
821 |         'ring': '0.554 0.135 66.442',
822 |         'chart-1': '0.488 0.243 264.376',
823 |         'chart-2': '0.696 0.17 162.48',
824 |         'chart-3': '0.769 0.188 70.08',
825 |         'chart-4': '0.627 0.265 303.9',
826 |         'chart-5': '0.645 0.246 16.439',
827 |         'sidebar': '0.21 0.006 285.885',
828 |         'sidebar-foreground': '0.985 0 0',
829 |         'sidebar-primary': '0.795 0.184 86.047',
830 |         'sidebar-primary-foreground': '0.421 0.095 57.708',
831 |         'sidebar-accent': '0.274 0.006 286.033',
832 |         'sidebar-accent-foreground': '0.985 0 0',
833 |         'sidebar-border': '1 0 0 / 10%',
834 |         'sidebar-ring': '0.554 0.135 66.442',
835 |       },
836 |     },
837 |   },
838 |   {
839 |     name: 'violet',
840 |     label: 'Violet',
841 |     cssVars: {
842 |       light: {
843 |         'background': '1 0 0',
844 |         'foreground': '0.141 0.005 285.823',
845 |         'card': '1 0 0',
846 |         'card-foreground': '0.141 0.005 285.823',
847 |         'popover': '1 0 0',
848 |         'popover-foreground': '0.141 0.005 285.823',
849 |         'primary': '0.606 0.25 292.717',
850 |         'primary-foreground': '0.969 0.016 293.756',
851 |         'secondary': '0.967 0.001 286.375',
852 |         'secondary-foreground': '0.21 0.006 285.885',
853 |         'muted': '0.967 0.001 286.375',
854 |         'muted-foreground': '0.552 0.016 285.938',
855 |         'accent': '0.967 0.001 286.375',
856 |         'accent-foreground': '0.21 0.006 285.885',
857 |         'destructive': '0.577 0.245 27.325',
858 |         'destructive-foreground': '0.969 0.016 293.756',
859 |         'border': '0.92 0.004 286.32',
860 |         'input': '0.92 0.004 286.32',
861 |         'ring': '0.606 0.25 292.717',
862 |         'radius': '0.65rem',
863 |         'chart-1': '0.646 0.222 41.116',
864 |         'chart-2': '0.6 0.118 184.704',
865 |         'chart-3': '0.398 0.07 227.392',
866 |         'chart-4': '0.828 0.189 84.429',
867 |         'chart-5': '0.769 0.188 70.08',
868 |         'sidebar': '0.985 0 0',
869 |         'sidebar-foreground': '0.141 0.005 285.823',
870 |         'sidebar-primary': '0.606 0.25 292.717',
871 |         'sidebar-primary-foreground': '0.969 0.016 293.756',
872 |         'sidebar-accent': '0.967 0.001 286.375',
873 |         'sidebar-accent-foreground': '0.21 0.006 285.885',
874 |         'sidebar-border': '0.92 0.004 286.32',
875 |         'sidebar-ring': '0.606 0.25 292.717',
876 |       },
877 |       dark: {
878 |         'background': '0.141 0.005 285.823',
879 |         'foreground': '0.985 0 0',
880 |         'card': '0.21 0.006 285.885',
881 |         'card-foreground': '0.985 0 0',
882 |         'popover': '0.21 0.006 285.885',
883 |         'popover-foreground': '0.985 0 0',
884 |         'primary': '0.541 0.281 293.009',
885 |         'primary-foreground': '0.969 0.016 293.756',
886 |         'secondary': '0.274 0.006 286.033',
887 |         'secondary-foreground': '0.985 0 0',
888 |         'muted': '0.274 0.006 286.033',
889 |         'muted-foreground': '0.705 0.015 286.067',
890 |         'accent': '0.274 0.006 286.033',
891 |         'accent-foreground': '0.985 0 0',
892 |         'destructive': '0.704 0.191 22.216',
893 |         'destructive-foreground': '0.985 0 0',
894 |         'border': '1 0 0 / 10%',
895 |         'input': '1 0 0 / 15%',
896 |         'ring': '0.541 0.281 293.009',
897 |         'chart-1': '0.488 0.243 264.376',
898 |         'chart-2': '0.696 0.17 162.48',
899 |         'chart-3': '0.769 0.188 70.08',
900 |         'chart-4': '0.627 0.265 303.9',
901 |         'chart-5': '0.645 0.246 16.439',
902 |         'sidebar': '0.21 0.006 285.885',
903 |         'sidebar-foreground': '0.985 0 0',
904 |         'sidebar-primary': '0.541 0.281 293.009',
905 |         'sidebar-primary-foreground': '0.969 0.016 293.756',
906 |         'sidebar-accent': '0.274 0.006 286.033',
907 |         'sidebar-accent-foreground': '0.985 0 0',
908 |         'sidebar-border': '1 0 0 / 10%',
909 |         'sidebar-ring': '0.541 0.281 293.009',
910 |       },
911 |     },
912 |   },
913 | ] as const
914 | 
915 | export type Theme = (typeof themes)[number]
916 | 


--------------------------------------------------------------------------------