rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-06-26 22:26:05 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
b76f5cdbf7175cd1cb2004669cbbd4cf74ef1564
shadcn-ui/apps/www/lib/themes.ts
shadcn a7b3dbf121 feat(www): site updates (#6854) 
* feat(www): site updates

* fix: lint

* docs: add tailwind notice
2025-03-04 16:51:58 +04:00

483 lines
13 KiB
TypeScript
Raw Blame History

import { themeColorsToCssVariables } from "@/lib/charts"
const _THEMES = [
{
name: "Sapphire",
id: "default-sapphire",
colors: {
background: "0 0% 100%",
foreground: "222.2 84% 4.9%",
card: "0 0% 100%",
cardForeground: "222.2 84% 4.9%",
popover: "0 0% 100%",
popoverForeground: "222.2 84% 4.9%",
primary: "221.2 83.2% 53.3%",
primaryForeground: "210 40% 98%",
secondary: "210 40% 96.1%",
secondaryForeground: "222.2 47.4% 11.2%",
muted: "210 40% 96.1%",
mutedForeground: "215.4 16.3% 44%",
accent: "210 40% 96.1%",
accentForeground: "222.2 47.4% 11.2%",
destructive: "0 72% 51%",
destructiveForeground: "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": "221.2 83.2% 53.3%",
"chart-2": "212 95% 68%",
"chart-3": "216 92% 60%",
"chart-4": "210 98% 78%",
"chart-5": "212 97% 87%",
},
colorsDark: {
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: "221.2 83.2% 53.3%",
primaryForeground: "210 40% 98%",
secondary: "210 40% 96.1%",
secondaryForeground: "222.2 47.4% 11.2%",
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 72% 51%",
destructiveForeground: "210 40% 98%",
border: "240 3.7% 15.9%",
input: "240 3.7% 15.9%",
ring: "221.2 83.2% 53.3%",
"chart-1": "221.2 83.2% 53.3%",
"chart-2": "212 95% 68%",
"chart-3": "216 92% 60%",
"chart-4": "210 98% 78%",
"chart-5": "212 97% 87%",
},
fontFamily: {
heading: {
name: "Inter",
type: "sans-serif",
},
body: {
name: "Inter",
type: "sans-serif",
},
},
radius: 0.5,
},
{
name: "Default",
id: "default-shadcn",
colors: {
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 10% 3.9%",
"chart-1": "173 58% 39%",
"chart-2": "12 76% 61%",
"chart-3": "197 37% 24%",
"chart-4": "43 74% 66%",
"chart-5": "27 87% 67%",
},
colorsDark: {
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-5": "160 60% 45%",
"chart-3": "30 80% 55%",
"chart-4": "280 65% 60%",
"chart-2": "340 75% 55%",
},
fontFamily: {
heading: {
name: "Inter",
type: "sans-serif",
},
body: {
name: "Inter",
type: "sans-serif",
},
},
radius: 0.5,
},
{
name: "Palette",
id: "default-palette",
colors: {
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 10% 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%",
},
colorsDark: {
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%",
},
fontFamily: {
heading: {
name: "Inter",
type: "sans-serif",
},
body: {
name: "Inter",
type: "sans-serif",
},
},
radius: 0.5,
},
{
name: "Ruby",
id: "default-ruby",
colors: {
background: "0 0% 100%",
foreground: "240 10% 3.9%",
card: "0 0% 100%",
cardForeground: "240 10% 3.9%",
popover: "0 0% 100%",
popoverForeground: "240 10% 3.9%",
primary: "346.8 77.2% 49.8%",
primaryForeground: "355.7 100% 99%",
secondary: "240 4.8% 95.9%",
secondaryForeground: "240 5.9% 10%",
muted: "240 4.8% 95.9%",
mutedForeground: "240 3.8% 45%",
accent: "240 4.8% 95.9%",
accentForeground: "240 5.9% 10%",
destructive: "0 72% 51%",
destructiveForeground: "0 0% 98%",
border: "240 5.9% 90%",
input: "240 5.9% 90%",
ring: "346.8 77.2% 49.8%",
"chart-1": "347 77% 50%",
"chart-2": "352 83% 91%",
"chart-3": "350 80% 72%",
"chart-4": "351 83% 82%",
"chart-5": "349 77% 62%",
},
colorsDark: {
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: "346.8 77.2% 49.8%",
primaryForeground: "355.7 100% 99%",
secondary: "240 4.8% 95.9%",
secondaryForeground: "240 5.9% 10%",
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 72% 51%",
destructiveForeground: "0 0% 98%",
border: "240 3.7% 15.9%",
input: "240 3.7% 15.9%",
ring: "221.2 83.2% 53.3%",
"chart-1": "347 77% 50%",
"chart-2": "349 77% 62%",
"chart-3": "350 80% 72%",
"chart-4": "351 83% 82%",
"chart-5": "352 83% 91%",
},
fontFamily: {
heading: {
name: "Inter",
type: "sans-serif",
},
body: {
name: "Inter",
type: "sans-serif",
},
},
radius: 0.5,
},
{
name: "Emerald",
id: "default-emerald",
colors: {
background: "0 0% 100%",
foreground: "240 10% 3.9%",
card: "0 0% 100%",
cardForeground: "240 10% 3.9%",
popover: "0 0% 100%",
popoverForeground: "240 10% 3.9%",
primary: "142 86% 28%",
primaryForeground: "356 29% 98%",
secondary: "240 4.8% 95.9%",
secondaryForeground: "240 5.9% 10%",
muted: "240 4.8% 95.9%",
mutedForeground: "240 3.8% 45%",
accent: "240 4.8% 95.9%",
accentForeground: "240 5.9% 10%",
destructive: "0 72% 51%",
destructiveForeground: "0 0% 98%",
border: "240 5.9% 90%",
input: "240 5.9% 90%",
ring: "142 86% 28%",
"chart-1": "139 65% 20%",
"chart-2": "140 74% 44%",
"chart-3": "142 88% 28%",
"chart-4": "137 55% 15%",
"chart-5": "141 40% 9%",
},
colorsDark: {
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: "142 86% 28%",
primaryForeground: "356 29% 98%",
secondary: "240 4.8% 95.9%",
secondaryForeground: "240 5.9% 10%",
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 72% 51%",
destructiveForeground: "0 0% 98%",
border: "240 3.7% 15.9%",
input: "240 3.7% 15.9%",
ring: "142 86% 28%",
"chart-1": "142 88% 28%",
"chart-2": "139 65% 20%",
"chart-3": "140 74% 24%",
"chart-4": "137 55% 15%",
"chart-5": "141 40% 9%",
},
fontFamily: {
heading: {
name: "Inter",
type: "sans-serif",
},
body: {
name: "Inter",
type: "sans-serif",
},
},
radius: 0.5,
},
{
name: "Daylight",
id: "default-daylight",
colors: {
background: "36 39% 88%",
foreground: "36 45% 15%",
primary: "36 45% 70%",
primaryForeground: "36 45% 11%",
secondary: "40 35% 77%",
secondaryForeground: "36 45% 25%",
accent: "36 64% 57%",
accentForeground: "36 72% 17%",
destructive: "0 84% 37%",
destructiveForeground: "0 0% 98%",
muted: "36 33% 75%",
mutedForeground: "36 45% 25%",
card: "36 46% 82%",
cardForeground: "36 45% 20%",
popover: "0 0% 100%",
popoverForeground: "240 10% 3.9%",
border: "36 45% 60%",
input: "36 45% 60%",
ring: "36 45% 30%",
"chart-1": "25 34% 28%",
"chart-2": "26 36% 34%",
"chart-3": "28 40% 40%",
"chart-4": "31 41% 48%",
"chart-5": "35 43% 53%",
},
colorsDark: {
background: "36 39% 88%",
foreground: "36 45% 15%",
primary: "36 45% 70%",
primaryForeground: "36 45% 11%",
secondary: "40 35% 77%",
secondaryForeground: "36 45% 25%",
accent: "36 64% 57%",
accentForeground: "36 72% 17%",
destructive: "0 84% 37%",
destructiveForeground: "0 0% 98%",
muted: "36 33% 75%",
mutedForeground: "36 45% 25%",
card: "36 46% 82%",
cardForeground: "36 45% 20%",
popover: "0 0% 100%",
popoverForeground: "240 10% 3.9%",
border: "36 45% 60%",
input: "36 45% 60%",
ring: "36 45% 30%",
"chart-1": "25 34% 28%",
"chart-2": "26 36% 34%",
"chart-3": "28 40% 40%",
"chart-4": "31 41% 48%",
"chart-5": "35 43% 53%",
},
fontFamily: {
heading: {
name: "DM Sans",
type: "sans-serif",
},
body: {
name: "Space Mono",
type: "monospace",
},
},
},
{
name: "Midnight",
id: "default-midnight",
colors: {
background: "240 5% 6%",
foreground: "60 5% 90%",
primary: "240 0% 90%",
primaryForeground: "60 0% 0%",
secondary: "240 4% 15%",
secondaryForeground: "60 5% 85%",
accent: "240 0% 13%",
accentForeground: "60 0% 100%",
destructive: "0 60% 50%",
destructiveForeground: "0 0% 98%",
muted: "240 5% 25%",
mutedForeground: "60 5% 85%",
card: "240 4% 10%",
cardForeground: "60 5% 90%",
popover: "240 5% 15%",
popoverForeground: "60 5% 85%",
border: "240 6% 20%",
input: "240 6% 20%",
ring: "240 5% 90%",
"chart-1": "359 2% 90%",
"chart-2": "240 1% 74%",
"chart-3": "240 1% 58%",
"chart-4": "240 1% 42%",
"chart-5": "240 2% 26%",
},
colorsDark: {
background: "240 5% 6%",
foreground: "60 5% 90%",
primary: "240 0% 90%",
primaryForeground: "60 0% 0%",
secondary: "240 4% 15%",
secondaryForeground: "60 5% 85%",
accent: "240 0% 13%",
accentForeground: "60 0% 100%",
destructive: "0 60% 50%",
destructiveForeground: "0 0% 98%",
muted: "240 5% 25%",
mutedForeground: "60 5% 85%",
card: "240 4% 10%",
cardForeground: "60 5% 90%",
popover: "240 5% 15%",
popoverForeground: "60 5% 85%",
border: "240 6% 20%",
input: "240 6% 20%",
ring: "240 5% 90%",
"chart-1": "359 2% 90%",
"chart-2": "240 1% 74%",
"chart-3": "240 1% 58%",
"chart-4": "240 1% 42%",
"chart-5": "240 2% 26%",
},
fontFamily: {
heading: {
name: "Manrope",
type: "sans-serif",
},
body: {
name: "Manrope",
type: "sans-serif",
},
},
radius: 0.5,
},
] as const
export const THEMES = _THEMES.map((theme) => ({
...theme,
cssVars: {
light: themeColorsToCssVariables(theme.colors),
dark: themeColorsToCssVariables(theme.colorsDark),
},
}))
export type Theme = (typeof THEMES)[number]
Reference in New Issue View Git Blame Copy Permalink