unocss-preset-shadcn
Version:
use shadcn ui with unocss
1,032 lines (1,024 loc) • 32.4 kB
JavaScript
import { mergeDeep } from 'unocss';
const themeCSSVarKeys = [
"background",
"foreground",
"card",
"card-foreground",
"popover",
"popover-foreground",
"primary",
"primary-foreground",
"secondary",
"secondary-foreground",
"muted",
"muted-foreground",
"accent",
"accent-foreground",
"destructive",
"destructive-foreground",
"border",
"input",
"ring",
"chart-1",
"chart-2",
"chart-3",
"chart-4",
"chart-5",
"sidebar",
"sidebar-foreground",
"sidebar-primary",
"sidebar-primary-foreground",
"sidebar-accent",
"sidebar-accent-foreground",
"sidebar-border",
"sidebar-ring"
];
const sidebarColors = {
light: {
"sidebar": "0 0% 98%",
"sidebar-foreground": "240 5.3% 26.1%",
"sidebar-primary": "240 5.9% 10%",
"sidebar-primary-foreground": "0 0% 98%",
"sidebar-accent": "240 4.8% 95.9%",
"sidebar-accent-foreground": "240 5.9% 10%",
"sidebar-border": "220 13% 91%",
"sidebar-ring": "217.2 91.2% 59.8%"
},
dark: {
"sidebar": "240 5.9% 10%",
"sidebar-foreground": "240 4.8% 95.9%",
"sidebar-primary": "0 0% 98%",
"sidebar-primary-foreground": "240 5.9% 10%",
"sidebar-accent": "240 3.7% 15.9%",
"sidebar-accent-foreground": "240 4.8% 95.9%",
"sidebar-border": "240 3.7% 15.9%",
"sidebar-ring": "217.2 91.2% 59.8%"
}
};
const themes = [
{
name: "zinc",
label: "Zinc",
activeColor: {
light: "240 5.9% 10%",
dark: "240 5.2% 33.9%"
},
cssVars: {
light: {
"background": "0 0% 100%",
"foreground": "240 10% 3.9%",
"card": "0 0% 100%",
"card-foreground": "240 10% 3.9%",
"popover": "0 0% 100%",
"popover-foreground": "240 10% 3.9%",
"primary": "240 5.9% 10%",
"primary-foreground": "0 0% 98%",
"secondary": "240 4.8% 95.9%",
"secondary-foreground": "240 5.9% 10%",
"muted": "240 4.8% 95.9%",
"muted-foreground": "240 3.8% 46.1%",
"accent": "240 4.8% 95.9%",
"accent-foreground": "240 5.9% 10%",
"destructive": "0 84.2% 60.2%",
"destructive-foreground": "0 0% 98%",
"border": "240 5.9% 90%",
"input": "240 5.9% 90%",
"ring": "240 5.9% 10%",
"radius": "0.5rem",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
...sidebarColors.light
},
dark: {
"background": "240 10% 3.9%",
"foreground": "0 0% 98%",
"card": "240 10% 3.9%",
"card-foreground": "0 0% 98%",
"popover": "240 10% 3.9%",
"popover-foreground": "0 0% 98%",
"primary": "0 0% 98%",
"primary-foreground": "240 5.9% 10%",
"secondary": "240 3.7% 15.9%",
"secondary-foreground": "0 0% 98%",
"muted": "240 3.7% 15.9%",
"muted-foreground": "240 5% 64.9%",
"accent": "240 3.7% 15.9%",
"accent-foreground": "0 0% 98%",
"destructive": "0 62.8% 30.6%",
"destructive-foreground": "0 0% 98%",
"border": "240 3.7% 15.9%",
"input": "240 3.7% 15.9%",
"ring": "240 4.9% 83.9%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
...sidebarColors.dark
}
}
},
{
name: "slate",
label: "Slate",
activeColor: {
light: "215.4 16.3% 46.9%",
dark: "215.3 19.3% 34.5%"
},
cssVars: {
light: {
"background": "0 0% 100%",
"foreground": "222.2 84% 4.9%",
"card": "0 0% 100%",
"card-foreground": "222.2 84% 4.9%",
"popover": "0 0% 100%",
"popover-foreground": "222.2 84% 4.9%",
"primary": "222.2 47.4% 11.2%",
"primary-foreground": "210 40% 98%",
"secondary": "210 40% 96.1%",
"secondary-foreground": "222.2 47.4% 11.2%",
"muted": "210 40% 96.1%",
"muted-foreground": "215.4 16.3% 46.9%",
"accent": "210 40% 96.1%",
"accent-foreground": "222.2 47.4% 11.2%",
"destructive": "0 84.2% 60.2%",
"destructive-foreground": "210 40% 98%",
"border": "214.3 31.8% 91.4%",
"input": "214.3 31.8% 91.4%",
"ring": "222.2 84% 4.9%",
"radius": "0.5rem",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
...sidebarColors.light
},
dark: {
"background": "222.2 84% 4.9%",
"foreground": "210 40% 98%",
"card": "222.2 84% 4.9%",
"card-foreground": "210 40% 98%",
"popover": "222.2 84% 4.9%",
"popover-foreground": "210 40% 98%",
"primary": "210 40% 98%",
"primary-foreground": "222.2 47.4% 11.2%",
"secondary": "217.2 32.6% 17.5%",
"secondary-foreground": "210 40% 98%",
"muted": "217.2 32.6% 17.5%",
"muted-foreground": "215 20.2% 65.1%",
"accent": "217.2 32.6% 17.5%",
"accent-foreground": "210 40% 98%",
"destructive": "0 62.8% 30.6%",
"destructive-foreground": "210 40% 98%",
"border": "217.2 32.6% 17.5%",
"input": "217.2 32.6% 17.5%",
"ring": "212.7 26.8% 83.9%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
...sidebarColors.dark
}
}
},
{
name: "stone",
label: "Stone",
activeColor: {
light: "25 5.3% 44.7%",
dark: "33.3 5.5% 32.4%"
},
cssVars: {
light: {
"background": "0 0% 100%",
"foreground": "20 14.3% 4.1%",
"card": "0 0% 100%",
"card-foreground": "20 14.3% 4.1%",
"popover": "0 0% 100%",
"popover-foreground": "20 14.3% 4.1%",
"primary": "24 9.8% 10%",
"primary-foreground": "60 9.1% 97.8%",
"secondary": "60 4.8% 95.9%",
"secondary-foreground": "24 9.8% 10%",
"muted": "60 4.8% 95.9%",
"muted-foreground": "25 5.3% 44.7%",
"accent": "60 4.8% 95.9%",
"accent-foreground": "24 9.8% 10%",
"destructive": "0 84.2% 60.2%",
"destructive-foreground": "60 9.1% 97.8%",
"border": "20 5.9% 90%",
"input": "20 5.9% 90%",
"ring": "20 14.3% 4.1%",
"radius": "0.95rem",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
...sidebarColors.light
},
dark: {
"background": "20 14.3% 4.1%",
"foreground": "60 9.1% 97.8%",
"card": "20 14.3% 4.1%",
"card-foreground": "60 9.1% 97.8%",
"popover": "20 14.3% 4.1%",
"popover-foreground": "60 9.1% 97.8%",
"primary": "60 9.1% 97.8%",
"primary-foreground": "24 9.8% 10%",
"secondary": "12 6.5% 15.1%",
"secondary-foreground": "60 9.1% 97.8%",
"muted": "12 6.5% 15.1%",
"muted-foreground": "24 5.4% 63.9%",
"accent": "12 6.5% 15.1%",
"accent-foreground": "60 9.1% 97.8%",
"destructive": "0 62.8% 30.6%",
"destructive-foreground": "60 9.1% 97.8%",
"border": "12 6.5% 15.1%",
"input": "12 6.5% 15.1%",
"ring": "24 5.7% 82.9%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
...sidebarColors.dark
}
}
},
{
name: "gray",
label: "Gray",
activeColor: {
light: "220 8.9% 46.1%",
dark: "215 13.8% 34.1%"
},
cssVars: {
light: {
"background": "0 0% 100%",
"foreground": "224 71.4% 4.1%",
"card": "0 0% 100%",
"card-foreground": "224 71.4% 4.1%",
"popover": "0 0% 100%",
"popover-foreground": "224 71.4% 4.1%",
"primary": "220.9 39.3% 11%",
"primary-foreground": "210 20% 98%",
"secondary": "220 14.3% 95.9%",
"secondary-foreground": "220.9 39.3% 11%",
"muted": "220 14.3% 95.9%",
"muted-foreground": "220 8.9% 46.1%",
"accent": "220 14.3% 95.9%",
"accent-foreground": "220.9 39.3% 11%",
"destructive": "0 84.2% 60.2%",
"destructive-foreground": "210 20% 98%",
"border": "220 13% 91%",
"input": "220 13% 91%",
"ring": "224 71.4% 4.1%",
"radius": "0.35rem",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
...sidebarColors.light
},
dark: {
"background": "224 71.4% 4.1%",
"foreground": "210 20% 98%",
"card": "224 71.4% 4.1%",
"card-foreground": "210 20% 98%",
"popover": "224 71.4% 4.1%",
"popover-foreground": "210 20% 98%",
"primary": "210 20% 98%",
"primary-foreground": "220.9 39.3% 11%",
"secondary": "215 27.9% 16.9%",
"secondary-foreground": "210 20% 98%",
"muted": "215 27.9% 16.9%",
"muted-foreground": "217.9 10.6% 64.9%",
"accent": "215 27.9% 16.9%",
"accent-foreground": "210 20% 98%",
"destructive": "0 62.8% 30.6%",
"destructive-foreground": "210 20% 98%",
"border": "215 27.9% 16.9%",
"input": "215 27.9% 16.9%",
"ring": "216 12.2% 83.9%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
...sidebarColors.dark
}
}
},
{
name: "neutral",
label: "Neutral",
activeColor: {
light: "0 0% 45.1%",
dark: "0 0% 32.2%"
},
cssVars: {
light: {
"background": "0 0% 100%",
"foreground": "0 0% 3.9%",
"card": "0 0% 100%",
"card-foreground": "0 0% 3.9%",
"popover": "0 0% 100%",
"popover-foreground": "0 0% 3.9%",
"primary": "0 0% 9%",
"primary-foreground": "0 0% 98%",
"secondary": "0 0% 96.1%",
"secondary-foreground": "0 0% 9%",
"muted": "0 0% 96.1%",
"muted-foreground": "0 0% 45.1%",
"accent": "0 0% 96.1%",
"accent-foreground": "0 0% 9%",
"destructive": "0 84.2% 60.2%",
"destructive-foreground": "0 0% 98%",
"border": "0 0% 89.8%",
"input": "0 0% 89.8%",
"ring": "0 0% 3.9%",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
...sidebarColors.light
},
dark: {
"background": "0 0% 3.9%",
"foreground": "0 0% 98%",
"card": "0 0% 3.9%",
"card-foreground": "0 0% 98%",
"popover": "0 0% 3.9%",
"popover-foreground": "0 0% 98%",
"primary": "0 0% 98%",
"primary-foreground": "0 0% 9%",
"secondary": "0 0% 14.9%",
"secondary-foreground": "0 0% 98%",
"muted": "0 0% 14.9%",
"muted-foreground": "0 0% 63.9%",
"accent": "0 0% 14.9%",
"accent-foreground": "0 0% 98%",
"destructive": "0 62.8% 30.6%",
"destructive-foreground": "0 0% 98%",
"border": "0 0% 14.9%",
"input": "0 0% 14.9%",
"ring": "0 0% 83.1%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
...sidebarColors.dark
}
}
},
{
name: "red",
label: "Red",
activeColor: {
light: "0 72.2% 50.6%",
dark: "0 72.2% 50.6%"
},
cssVars: {
light: {
"background": "0 0% 100%",
"foreground": "0 0% 3.9%",
"card": "0 0% 100%",
"card-foreground": "0 0% 3.9%",
"popover": "0 0% 100%",
"popover-foreground": "0 0% 3.9%",
"primary": "0 72.2% 50.6%",
"primary-foreground": "0 85.7% 97.3%",
"secondary": "0 0% 96.1%",
"secondary-foreground": "0 0% 9%",
"muted": "0 0% 96.1%",
"muted-foreground": "0 0% 45.1%",
"accent": "0 0% 96.1%",
"accent-foreground": "0 0% 9%",
"destructive": "0 84.2% 60.2%",
"destructive-foreground": "0 0% 98%",
"border": "0 0% 89.8%",
"input": "0 0% 89.8%",
"ring": "0 72.2% 50.6%",
"radius": "0.4rem",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
...sidebarColors.light
},
dark: {
"background": "0 0% 3.9%",
"foreground": "0 0% 98%",
"card": "0 0% 3.9%",
"card-foreground": "0 0% 98%",
"popover": "0 0% 3.9%",
"popover-foreground": "0 0% 98%",
"primary": "0 72.2% 50.6%",
"primary-foreground": "0 85.7% 97.3%",
"secondary": "0 0% 14.9%",
"secondary-foreground": "0 0% 98%",
"muted": "0 0% 14.9%",
"muted-foreground": "0 0% 63.9%",
"accent": "0 0% 14.9%",
"accent-foreground": "0 0% 98%",
"destructive": "0 62.8% 30.6%",
"destructive-foreground": "0 0% 98%",
"border": "0 0% 14.9%",
"input": "0 0% 14.9%",
"ring": "0 72.2% 50.6%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
...sidebarColors.dark
}
}
},
{
name: "rose",
label: "Rose",
activeColor: {
light: "346.8 77.2% 49.8%",
dark: "346.8 77.2% 49.8%"
},
cssVars: {
light: {
"background": "0 0% 100%",
"foreground": "240 10% 3.9%",
"card": "0 0% 100%",
"card-foreground": "240 10% 3.9%",
"popover": "0 0% 100%",
"popover-foreground": "240 10% 3.9%",
"primary": "346.8 77.2% 49.8%",
"primary-foreground": "355.7 100% 97.3%",
"secondary": "240 4.8% 95.9%",
"secondary-foreground": "240 5.9% 10%",
"muted": "240 4.8% 95.9%",
"muted-foreground": "240 3.8% 46.1%",
"accent": "240 4.8% 95.9%",
"accent-foreground": "240 5.9% 10%",
"destructive": "0 84.2% 60.2%",
"destructive-foreground": "0 0% 98%",
"border": "240 5.9% 90%",
"input": "240 5.9% 90%",
"ring": "346.8 77.2% 49.8%",
"radius": "0.5rem",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
...sidebarColors.light
},
dark: {
"background": "20 14.3% 4.1%",
"foreground": "0 0% 95%",
"popover": "0 0% 9%",
"popover-foreground": "0 0% 95%",
"card": "24 9.8% 10%",
"card-foreground": "0 0% 95%",
"primary": "346.8 77.2% 49.8%",
"primary-foreground": "355.7 100% 97.3%",
"secondary": "240 3.7% 15.9%",
"secondary-foreground": "0 0% 98%",
"muted": "0 0% 15%",
"muted-foreground": "240 5% 64.9%",
"accent": "12 6.5% 15.1%",
"accent-foreground": "0 0% 98%",
"destructive": "0 62.8% 30.6%",
"destructive-foreground": "0 85.7% 97.3%",
"border": "240 3.7% 15.9%",
"input": "240 3.7% 15.9%",
"ring": "346.8 77.2% 49.8%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
...sidebarColors.dark
}
}
},
{
name: "orange",
label: "Orange",
activeColor: {
light: "24.6 95% 53.1%",
dark: "20.5 90.2% 48.2%"
},
cssVars: {
light: {
"background": "0 0% 100%",
"foreground": "20 14.3% 4.1%",
"card": "0 0% 100%",
"card-foreground": "20 14.3% 4.1%",
"popover": "0 0% 100%",
"popover-foreground": "20 14.3% 4.1%",
"primary": "24.6 95% 53.1%",
"primary-foreground": "60 9.1% 97.8%",
"secondary": "60 4.8% 95.9%",
"secondary-foreground": "24 9.8% 10%",
"muted": "60 4.8% 95.9%",
"muted-foreground": "25 5.3% 44.7%",
"accent": "60 4.8% 95.9%",
"accent-foreground": "24 9.8% 10%",
"destructive": "0 84.2% 60.2%",
"destructive-foreground": "60 9.1% 97.8%",
"border": "20 5.9% 90%",
"input": "20 5.9% 90%",
"ring": "24.6 95% 53.1%",
"radius": "0.95rem",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
...sidebarColors.light
},
dark: {
"background": "20 14.3% 4.1%",
"foreground": "60 9.1% 97.8%",
"card": "20 14.3% 4.1%",
"card-foreground": "60 9.1% 97.8%",
"popover": "20 14.3% 4.1%",
"popover-foreground": "60 9.1% 97.8%",
"primary": "20.5 90.2% 48.2%",
"primary-foreground": "60 9.1% 97.8%",
"secondary": "12 6.5% 15.1%",
"secondary-foreground": "60 9.1% 97.8%",
"muted": "12 6.5% 15.1%",
"muted-foreground": "24 5.4% 63.9%",
"accent": "12 6.5% 15.1%",
"accent-foreground": "60 9.1% 97.8%",
"destructive": "0 72.2% 50.6%",
"destructive-foreground": "60 9.1% 97.8%",
"border": "12 6.5% 15.1%",
"input": "12 6.5% 15.1%",
"ring": "20.5 90.2% 48.2%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
...sidebarColors.dark
}
}
},
{
name: "green",
label: "Green",
activeColor: {
light: "142.1 76.2% 36.3%",
dark: "142.1 70.6% 45.3%"
},
cssVars: {
light: {
"background": "0 0% 100%",
"foreground": "240 10% 3.9%",
"card": "0 0% 100%",
"card-foreground": "240 10% 3.9%",
"popover": "0 0% 100%",
"popover-foreground": "240 10% 3.9%",
"primary": "142.1 76.2% 36.3%",
"primary-foreground": "355.7 100% 97.3%",
"secondary": "240 4.8% 95.9%",
"secondary-foreground": "240 5.9% 10%",
"muted": "240 4.8% 95.9%",
"muted-foreground": "240 3.8% 46.1%",
"accent": "240 4.8% 95.9%",
"accent-foreground": "240 5.9% 10%",
"destructive": "0 84.2% 60.2%",
"destructive-foreground": "0 0% 98%",
"border": "240 5.9% 90%",
"input": "240 5.9% 90%",
"ring": "142.1 76.2% 36.3%",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
...sidebarColors.light
},
dark: {
"background": "20 14.3% 4.1%",
"foreground": "0 0% 95%",
"popover": "0 0% 9%",
"popover-foreground": "0 0% 95%",
"card": "24 9.8% 10%",
"card-foreground": "0 0% 95%",
"primary": "142.1 70.6% 45.3%",
"primary-foreground": "144.9 80.4% 10%",
"secondary": "240 3.7% 15.9%",
"secondary-foreground": "0 0% 98%",
"muted": "0 0% 15%",
"muted-foreground": "240 5% 64.9%",
"accent": "12 6.5% 15.1%",
"accent-foreground": "0 0% 98%",
"destructive": "0 62.8% 30.6%",
"destructive-foreground": "0 85.7% 97.3%",
"border": "240 3.7% 15.9%",
"input": "240 3.7% 15.9%",
"ring": "142.4 71.8% 29.2%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
...sidebarColors.dark
}
}
},
{
name: "blue",
label: "Blue",
activeColor: {
light: "221.2 83.2% 53.3%",
dark: "217.2 91.2% 59.8%"
},
cssVars: {
light: {
"background": "0 0% 100%",
"foreground": "222.2 84% 4.9%",
"card": "0 0% 100%",
"card-foreground": "222.2 84% 4.9%",
"popover": "0 0% 100%",
"popover-foreground": "222.2 84% 4.9%",
"primary": "221.2 83.2% 53.3%",
"primary-foreground": "210 40% 98%",
"secondary": "210 40% 96.1%",
"secondary-foreground": "222.2 47.4% 11.2%",
"muted": "210 40% 96.1%",
"muted-foreground": "215.4 16.3% 46.9%",
"accent": "210 40% 96.1%",
"accent-foreground": "222.2 47.4% 11.2%",
"destructive": "0 84.2% 60.2%",
"destructive-foreground": "210 40% 98%",
"border": "214.3 31.8% 91.4%",
"input": "214.3 31.8% 91.4%",
"ring": "221.2 83.2% 53.3%",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
...sidebarColors.light
},
dark: {
"background": "222.2 84% 4.9%",
"foreground": "210 40% 98%",
"card": "222.2 84% 4.9%",
"card-foreground": "210 40% 98%",
"popover": "222.2 84% 4.9%",
"popover-foreground": "210 40% 98%",
"primary": "217.2 91.2% 59.8%",
"primary-foreground": "222.2 47.4% 11.2%",
"secondary": "217.2 32.6% 17.5%",
"secondary-foreground": "210 40% 98%",
"muted": "217.2 32.6% 17.5%",
"muted-foreground": "215 20.2% 65.1%",
"accent": "217.2 32.6% 17.5%",
"accent-foreground": "210 40% 98%",
"destructive": "0 62.8% 30.6%",
"destructive-foreground": "210 40% 98%",
"border": "217.2 32.6% 17.5%",
"input": "217.2 32.6% 17.5%",
"ring": "224.3 76.3% 48%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
...sidebarColors.dark
}
}
},
{
name: "yellow",
label: "Yellow",
activeColor: {
light: "47.9 95.8% 53.1%",
dark: "47.9 95.8% 53.1%"
},
cssVars: {
light: {
"background": "0 0% 100%",
"foreground": "20 14.3% 4.1%",
"card": "0 0% 100%",
"card-foreground": "20 14.3% 4.1%",
"popover": "0 0% 100%",
"popover-foreground": "20 14.3% 4.1%",
"primary": "47.9 95.8% 53.1%",
"primary-foreground": "26 83.3% 14.1%",
"secondary": "60 4.8% 95.9%",
"secondary-foreground": "24 9.8% 10%",
"muted": "60 4.8% 95.9%",
"muted-foreground": "25 5.3% 44.7%",
"accent": "60 4.8% 95.9%",
"accent-foreground": "24 9.8% 10%",
"destructive": "0 84.2% 60.2%",
"destructive-foreground": "60 9.1% 97.8%",
"border": "20 5.9% 90%",
"input": "20 5.9% 90%",
"ring": "20 14.3% 4.1%",
"radius": "0.95rem",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
...sidebarColors.light
},
dark: {
"background": "20 14.3% 4.1%",
"foreground": "60 9.1% 97.8%",
"card": "20 14.3% 4.1%",
"card-foreground": "60 9.1% 97.8%",
"popover": "20 14.3% 4.1%",
"popover-foreground": "60 9.1% 97.8%",
"primary": "47.9 95.8% 53.1%",
"primary-foreground": "26 83.3% 14.1%",
"secondary": "12 6.5% 15.1%",
"secondary-foreground": "60 9.1% 97.8%",
"muted": "12 6.5% 15.1%",
"muted-foreground": "24 5.4% 63.9%",
"accent": "12 6.5% 15.1%",
"accent-foreground": "60 9.1% 97.8%",
"destructive": "0 62.8% 30.6%",
"destructive-foreground": "60 9.1% 97.8%",
"border": "12 6.5% 15.1%",
"input": "12 6.5% 15.1%",
"ring": "35.5 91.7% 32.9%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
...sidebarColors.dark
}
}
},
{
name: "violet",
label: "Violet",
activeColor: {
light: "262.1 83.3% 57.8%",
dark: "263.4 70% 50.4%"
},
cssVars: {
light: {
"background": "0 0% 100%",
"foreground": "224 71.4% 4.1%",
"card": "0 0% 100%",
"card-foreground": "224 71.4% 4.1%",
"popover": "0 0% 100%",
"popover-foreground": "224 71.4% 4.1%",
"primary": "262.1 83.3% 57.8%",
"primary-foreground": "210 20% 98%",
"secondary": "220 14.3% 95.9%",
"secondary-foreground": "220.9 39.3% 11%",
"muted": "220 14.3% 95.9%",
"muted-foreground": "220 8.9% 46.1%",
"accent": "220 14.3% 95.9%",
"accent-foreground": "220.9 39.3% 11%",
"destructive": "0 84.2% 60.2%",
"destructive-foreground": "210 20% 98%",
"border": "220 13% 91%",
"input": "220 13% 91%",
"ring": "262.1 83.3% 57.8%",
"chart-1": "12 76% 61%",
"chart-2": "173 58% 39%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
...sidebarColors.light
},
dark: {
"background": "224 71.4% 4.1%",
"foreground": "210 20% 98%",
"card": "224 71.4% 4.1%",
"card-foreground": "210 20% 98%",
"popover": "224 71.4% 4.1%",
"popover-foreground": "210 20% 98%",
"primary": "263.4 70% 50.4%",
"primary-foreground": "210 20% 98%",
"secondary": "215 27.9% 16.9%",
"secondary-foreground": "210 20% 98%",
"muted": "215 27.9% 16.9%",
"muted-foreground": "217.9 10.6% 64.9%",
"accent": "215 27.9% 16.9%",
"accent-foreground": "210 20% 98%",
"destructive": "0 62.8% 30.6%",
"destructive-foreground": "210 20% 98%",
"border": "215 27.9% 16.9%",
"input": "215 27.9% 16.9%",
"ring": "263.4 70% 50.4%",
"chart-1": "220 70% 50%",
"chart-2": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-5": "340 75% 55%",
...sidebarColors.dark
}
}
}
];
function generateColorCSSVars(color) {
return Object.entries(color).map(([key, value]) => {
if (!themeCSSVarKeys.includes(key))
return "";
return ` --${key}: ${value};`;
}).filter(Boolean).join("\n");
}
function colorCSSVarsStyles(lightVars, darkVars, { radius, themeName, darkSelector }) {
return `
${themeName ? `.theme-${themeName}` : ":root"} {
${lightVars}
${radius ? generateRadiusCSSVars(radius) : ""}
}
${themeName ? `${darkSelector} .theme-${themeName}` : darkSelector} {
${darkVars}
}`;
}
function generateRadiusCSSVars(radius) {
return ` --radius: ${radius}rem;`;
}
function radiusCSSVarsStyles(radius) {
return `
:root {
${generateRadiusCSSVars(radius)}
}
`;
}
function generateGlobalStyles() {
return `
* {
border-color: hsl(var(--border));
}
body {
color: hsl(var(--foreground));
background: hsl(var(--background));
}
`;
}
function getBuiltInTheme(name) {
const theme = themes.find((t) => t.name === name);
if (!theme)
throw new Error(`Unknown color: ${name}`);
return {
name,
...theme.cssVars
};
}
function getColorTheme(color) {
let light;
let dark;
let name;
if (typeof color === "string") {
name = color;
({ light, dark } = getBuiltInTheme(color));
} else if ("base" in color) {
name = color.base;
({ light, dark } = mergeDeep(getBuiltInTheme(color.base), color));
} else {
name = color.name;
({ light, dark } = color);
}
return { light, dark, name };
}
function generateCSSVars(theme, onlyOne = true) {
if (Array.isArray(theme))
return theme.map((t) => generateCSSVars(t, false)).join("\n");
const { color = "zinc", radius = 0.5, darkSelector = ".dark" } = theme;
let cssStyle = "";
if (!color) {
if (radius)
cssStyle += radiusCSSVarsStyles(radius);
} else {
const { light, dark, name } = getColorTheme(color);
const lightVars = generateColorCSSVars(light);
const darkVars = generateColorCSSVars(dark);
cssStyle += colorCSSVarsStyles(lightVars, darkVars, { radius, themeName: !onlyOne && name, darkSelector });
}
return cssStyle;
}
const builtinColors = themes.map((theme) => theme.name);
const builtinRadiuses = [0, 0.3, 0.5, 0.75, 1];
function presetShadcn(themeOptions = {}, controlOptions = {}) {
const { globals = true, componentLibrary = "radix" } = controlOptions;
return {
name: "unocss-preset-shadcn",
preflights: [
{
getCSS: () => `
@keyframes shadcn-down { from{ height: 0 } to { height: var(--${componentLibrary}-accordion-content-height)} }
@keyframes shadcn-up { from{ height: var(--${componentLibrary}-accordion-content-height)} to { height: 0 } }
@keyframes shadcn-collapsible-down { from{ height: 0 } to { height: var(--${componentLibrary}-collapsible-content-height)} }
@keyframes shadcn-collapsible-up { from{ height: var(--${componentLibrary}-collapsible-content-height)} to { height: 0 } }
${generateCSSVars(themeOptions)}
${globals ? generateGlobalStyles() : ""}
`
}
],
rules: [
[
"animate-accordion-down",
{
animation: "shadcn-down 0.2s ease-out"
}
],
[
"animate-accordion-up",
{
animation: "shadcn-up 0.2s ease-out"
}
],
[
"animate-collapsible-down",
{
animation: "shadcn-collapsible-down 0.2s ease-out"
}
],
[
"animate-collapsible-up",
{
animation: "shadcn-collapsible-up 0.2s ease-out"
}
]
],
theme: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))"
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))"
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))"
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))"
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))"
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))"
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))"
},
chart1: "hsl(var(--chart1))",
chart2: "hsl(var(--chart2))",
chart3: "hsl(var(--chart3))",
chart4: "hsl(var(--chart4))",
chart5: "hsl(var(--chart5))",
sidebar: {
DEFAULT: "hsl(var(--sidebar-background))",
background: "hsl(var(--sidebar-background))",
foreground: "hsl(var(--sidebar-foreground))",
primary: {
DEFAULT: "hsl(var(--sidebar-primary))",
foreground: "hsl(var(--sidebar-primary-foreground))"
},
accent: {
DEFAULT: "hsl(var(--sidebar-accent))",
foreground: "hsl(var(--sidebar-accent-foreground))"
},
border: "hsl(var(--sidebar-border))",
ring: "hsl(var(--sidebar-ring))"
}
},
borderRadius: {
xl: "calc(var(--radius) + 4px)",
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)"
}
}
};
}
export { builtinColors, builtinRadiuses, presetShadcn as default, presetShadcn };