mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
313 lines
11 KiB
TypeScript
313 lines
11 KiB
TypeScript
/**
|
|
* Hanzo UI - Theme Definitions
|
|
*
|
|
* Color themes using OKLCH color space for perceptually uniform colors.
|
|
* Compatible with shadcn v4 theming system.
|
|
*/
|
|
|
|
import { type RegistryItem } from "./schema"
|
|
|
|
export const THEMES: RegistryItem[] = [
|
|
{
|
|
name: "neutral",
|
|
title: "Neutral",
|
|
type: "registry:theme",
|
|
cssVars: {
|
|
light: {
|
|
background: "oklch(1 0 0)",
|
|
foreground: "oklch(0.145 0 0)",
|
|
card: "oklch(1 0 0)",
|
|
"card-foreground": "oklch(0.145 0 0)",
|
|
popover: "oklch(1 0 0)",
|
|
"popover-foreground": "oklch(0.145 0 0)",
|
|
primary: "oklch(0.205 0 0)",
|
|
"primary-foreground": "oklch(0.985 0 0)",
|
|
secondary: "oklch(0.97 0 0)",
|
|
"secondary-foreground": "oklch(0.205 0 0)",
|
|
muted: "oklch(0.97 0 0)",
|
|
"muted-foreground": "oklch(0.556 0 0)",
|
|
accent: "oklch(0.97 0 0)",
|
|
"accent-foreground": "oklch(0.205 0 0)",
|
|
destructive: "oklch(0.58 0.22 27)",
|
|
border: "oklch(0.922 0 0)",
|
|
input: "oklch(0.922 0 0)",
|
|
ring: "oklch(0.708 0 0)",
|
|
"chart-1": "oklch(0.809 0.105 251.813)",
|
|
"chart-2": "oklch(0.623 0.214 259.815)",
|
|
"chart-3": "oklch(0.546 0.245 262.881)",
|
|
"chart-4": "oklch(0.488 0.243 264.376)",
|
|
"chart-5": "oklch(0.424 0.199 265.638)",
|
|
radius: "0.625rem",
|
|
sidebar: "oklch(0.985 0 0)",
|
|
"sidebar-foreground": "oklch(0.145 0 0)",
|
|
"sidebar-primary": "oklch(0.205 0 0)",
|
|
"sidebar-primary-foreground": "oklch(0.985 0 0)",
|
|
"sidebar-accent": "oklch(0.97 0 0)",
|
|
"sidebar-accent-foreground": "oklch(0.205 0 0)",
|
|
"sidebar-border": "oklch(0.922 0 0)",
|
|
"sidebar-ring": "oklch(0.708 0 0)",
|
|
},
|
|
dark: {
|
|
background: "oklch(0.145 0 0)",
|
|
foreground: "oklch(0.985 0 0)",
|
|
card: "oklch(0.205 0 0)",
|
|
"card-foreground": "oklch(0.985 0 0)",
|
|
popover: "oklch(0.205 0 0)",
|
|
"popover-foreground": "oklch(0.985 0 0)",
|
|
primary: "oklch(0.87 0.00 0)",
|
|
"primary-foreground": "oklch(0.205 0 0)",
|
|
secondary: "oklch(0.269 0 0)",
|
|
"secondary-foreground": "oklch(0.985 0 0)",
|
|
muted: "oklch(0.269 0 0)",
|
|
"muted-foreground": "oklch(0.708 0 0)",
|
|
accent: "oklch(0.371 0 0)",
|
|
"accent-foreground": "oklch(0.985 0 0)",
|
|
destructive: "oklch(0.704 0.191 22.216)",
|
|
border: "oklch(1 0 0 / 10%)",
|
|
input: "oklch(1 0 0 / 15%)",
|
|
ring: "oklch(0.556 0 0)",
|
|
"chart-1": "oklch(0.809 0.105 251.813)",
|
|
"chart-2": "oklch(0.623 0.214 259.815)",
|
|
"chart-3": "oklch(0.546 0.245 262.881)",
|
|
"chart-4": "oklch(0.488 0.243 264.376)",
|
|
"chart-5": "oklch(0.424 0.199 265.638)",
|
|
sidebar: "oklch(0.205 0 0)",
|
|
"sidebar-foreground": "oklch(0.985 0 0)",
|
|
"sidebar-primary": "oklch(0.488 0.243 264.376)",
|
|
"sidebar-primary-foreground": "oklch(0.985 0 0)",
|
|
"sidebar-accent": "oklch(0.269 0 0)",
|
|
"sidebar-accent-foreground": "oklch(0.985 0 0)",
|
|
"sidebar-border": "oklch(1 0 0 / 10%)",
|
|
"sidebar-ring": "oklch(0.556 0 0)",
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "zinc",
|
|
title: "Zinc",
|
|
type: "registry:theme",
|
|
cssVars: {
|
|
light: {
|
|
background: "oklch(1 0 0)",
|
|
foreground: "oklch(0.141 0.005 285.823)",
|
|
card: "oklch(1 0 0)",
|
|
"card-foreground": "oklch(0.141 0.005 285.823)",
|
|
popover: "oklch(1 0 0)",
|
|
"popover-foreground": "oklch(0.141 0.005 285.823)",
|
|
primary: "oklch(0.21 0.006 285.885)",
|
|
"primary-foreground": "oklch(0.985 0 0)",
|
|
secondary: "oklch(0.967 0.001 286.375)",
|
|
"secondary-foreground": "oklch(0.21 0.006 285.885)",
|
|
muted: "oklch(0.967 0.001 286.375)",
|
|
"muted-foreground": "oklch(0.552 0.016 285.938)",
|
|
accent: "oklch(0.967 0.001 286.375)",
|
|
"accent-foreground": "oklch(0.21 0.006 285.885)",
|
|
destructive: "oklch(0.577 0.245 27.325)",
|
|
border: "oklch(0.92 0.004 286.32)",
|
|
input: "oklch(0.92 0.004 286.32)",
|
|
ring: "oklch(0.705 0.015 286.067)",
|
|
radius: "0.625rem",
|
|
sidebar: "oklch(0.985 0 0)",
|
|
"sidebar-foreground": "oklch(0.141 0.005 285.823)",
|
|
"sidebar-primary": "oklch(0.21 0.006 285.885)",
|
|
"sidebar-primary-foreground": "oklch(0.985 0 0)",
|
|
"sidebar-accent": "oklch(0.967 0.001 286.375)",
|
|
"sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
|
|
"sidebar-border": "oklch(0.92 0.004 286.32)",
|
|
"sidebar-ring": "oklch(0.705 0.015 286.067)",
|
|
},
|
|
dark: {
|
|
background: "oklch(0.141 0.005 285.823)",
|
|
foreground: "oklch(0.985 0 0)",
|
|
card: "oklch(0.21 0.006 285.885)",
|
|
"card-foreground": "oklch(0.985 0 0)",
|
|
popover: "oklch(0.21 0.006 285.885)",
|
|
"popover-foreground": "oklch(0.985 0 0)",
|
|
primary: "oklch(0.92 0.004 286.32)",
|
|
"primary-foreground": "oklch(0.21 0.006 285.885)",
|
|
secondary: "oklch(0.274 0.006 286.033)",
|
|
"secondary-foreground": "oklch(0.985 0 0)",
|
|
muted: "oklch(0.274 0.006 286.033)",
|
|
"muted-foreground": "oklch(0.705 0.015 286.067)",
|
|
accent: "oklch(0.274 0.006 286.033)",
|
|
"accent-foreground": "oklch(0.985 0 0)",
|
|
destructive: "oklch(0.704 0.191 22.216)",
|
|
border: "oklch(1 0 0 / 10%)",
|
|
input: "oklch(1 0 0 / 15%)",
|
|
ring: "oklch(0.552 0.016 285.938)",
|
|
sidebar: "oklch(0.21 0.006 285.885)",
|
|
"sidebar-foreground": "oklch(0.985 0 0)",
|
|
"sidebar-primary": "oklch(0.488 0.243 264.376)",
|
|
"sidebar-primary-foreground": "oklch(0.985 0 0)",
|
|
"sidebar-accent": "oklch(0.274 0.006 286.033)",
|
|
"sidebar-accent-foreground": "oklch(0.985 0 0)",
|
|
"sidebar-border": "oklch(1 0 0 / 10%)",
|
|
"sidebar-ring": "oklch(0.552 0.016 285.938)",
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "blue",
|
|
title: "Blue",
|
|
type: "registry:theme",
|
|
cssVars: {
|
|
light: {
|
|
primary: "oklch(0.488 0.243 264.376)",
|
|
"primary-foreground": "oklch(0.97 0.014 254.604)",
|
|
"sidebar-primary": "oklch(0.546 0.245 262.881)",
|
|
"sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
|
|
},
|
|
dark: {
|
|
primary: "oklch(0.42 0.18 266)",
|
|
"primary-foreground": "oklch(0.97 0.014 254.604)",
|
|
"sidebar-primary": "oklch(0.623 0.214 259.815)",
|
|
"sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "green",
|
|
title: "Green",
|
|
type: "registry:theme",
|
|
cssVars: {
|
|
light: {
|
|
primary: "oklch(0.648 0.2 131.684)",
|
|
"primary-foreground": "oklch(0.986 0.031 120.757)",
|
|
"sidebar-primary": "oklch(0.648 0.2 131.684)",
|
|
"sidebar-primary-foreground": "oklch(0.986 0.031 120.757)",
|
|
},
|
|
dark: {
|
|
primary: "oklch(0.648 0.2 131.684)",
|
|
"primary-foreground": "oklch(0.986 0.031 120.757)",
|
|
"sidebar-primary": "oklch(0.768 0.233 130.85)",
|
|
"sidebar-primary-foreground": "oklch(0.986 0.031 120.757)",
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "violet",
|
|
title: "Violet",
|
|
type: "registry:theme",
|
|
cssVars: {
|
|
light: {
|
|
primary: "oklch(0.541 0.281 293.009)",
|
|
"primary-foreground": "oklch(0.969 0.016 293.756)",
|
|
"sidebar-primary": "oklch(0.541 0.281 293.009)",
|
|
"sidebar-primary-foreground": "oklch(0.969 0.016 293.756)",
|
|
},
|
|
dark: {
|
|
primary: "oklch(0.606 0.25 292.717)",
|
|
"primary-foreground": "oklch(0.969 0.016 293.756)",
|
|
"sidebar-primary": "oklch(0.606 0.25 292.717)",
|
|
"sidebar-primary-foreground": "oklch(0.969 0.016 293.756)",
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "orange",
|
|
title: "Orange",
|
|
type: "registry:theme",
|
|
cssVars: {
|
|
light: {
|
|
primary: "oklch(0.646 0.222 41.116)",
|
|
"primary-foreground": "oklch(0.98 0.016 73.684)",
|
|
"sidebar-primary": "oklch(0.646 0.222 41.116)",
|
|
"sidebar-primary-foreground": "oklch(0.98 0.016 73.684)",
|
|
},
|
|
dark: {
|
|
primary: "oklch(0.705 0.213 47.604)",
|
|
"primary-foreground": "oklch(0.98 0.016 73.684)",
|
|
"sidebar-primary": "oklch(0.705 0.213 47.604)",
|
|
"sidebar-primary-foreground": "oklch(0.98 0.016 73.684)",
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "red",
|
|
title: "Red",
|
|
type: "registry:theme",
|
|
cssVars: {
|
|
light: {
|
|
primary: "oklch(0.577 0.245 27.325)",
|
|
"primary-foreground": "oklch(0.971 0.013 17.38)",
|
|
"sidebar-primary": "oklch(0.577 0.245 27.325)",
|
|
"sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
|
|
},
|
|
dark: {
|
|
primary: "oklch(0.637 0.237 25.331)",
|
|
"primary-foreground": "oklch(0.971 0.013 17.38)",
|
|
"sidebar-primary": "oklch(0.637 0.237 25.331)",
|
|
"sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
|
|
},
|
|
},
|
|
},
|
|
// Hanzo brand theme
|
|
{
|
|
name: "hanzo",
|
|
title: "Hanzo",
|
|
type: "registry:theme",
|
|
cssVars: {
|
|
light: {
|
|
background: "oklch(0.985 0 0)",
|
|
foreground: "oklch(0.145 0 0)",
|
|
card: "oklch(1 0 0)",
|
|
"card-foreground": "oklch(0.145 0 0)",
|
|
popover: "oklch(1 0 0)",
|
|
"popover-foreground": "oklch(0.145 0 0)",
|
|
primary: "oklch(0.145 0 0)",
|
|
"primary-foreground": "oklch(0.985 0 0)",
|
|
secondary: "oklch(0.97 0 0)",
|
|
"secondary-foreground": "oklch(0.145 0 0)",
|
|
muted: "oklch(0.97 0 0)",
|
|
"muted-foreground": "oklch(0.556 0 0)",
|
|
accent: "oklch(0.541 0.281 293.009)",
|
|
"accent-foreground": "oklch(0.985 0 0)",
|
|
destructive: "oklch(0.58 0.22 27)",
|
|
border: "oklch(0.922 0 0)",
|
|
input: "oklch(0.922 0 0)",
|
|
ring: "oklch(0.541 0.281 293.009)",
|
|
radius: "0.5rem",
|
|
sidebar: "oklch(0.985 0 0)",
|
|
"sidebar-foreground": "oklch(0.145 0 0)",
|
|
"sidebar-primary": "oklch(0.541 0.281 293.009)",
|
|
"sidebar-primary-foreground": "oklch(0.985 0 0)",
|
|
"sidebar-accent": "oklch(0.97 0 0)",
|
|
"sidebar-accent-foreground": "oklch(0.145 0 0)",
|
|
"sidebar-border": "oklch(0.922 0 0)",
|
|
"sidebar-ring": "oklch(0.541 0.281 293.009)",
|
|
},
|
|
dark: {
|
|
background: "oklch(0.1 0 0)",
|
|
foreground: "oklch(0.985 0 0)",
|
|
card: "oklch(0.145 0 0)",
|
|
"card-foreground": "oklch(0.985 0 0)",
|
|
popover: "oklch(0.145 0 0)",
|
|
"popover-foreground": "oklch(0.985 0 0)",
|
|
primary: "oklch(0.985 0 0)",
|
|
"primary-foreground": "oklch(0.1 0 0)",
|
|
secondary: "oklch(0.205 0 0)",
|
|
"secondary-foreground": "oklch(0.985 0 0)",
|
|
muted: "oklch(0.205 0 0)",
|
|
"muted-foreground": "oklch(0.708 0 0)",
|
|
accent: "oklch(0.606 0.25 292.717)",
|
|
"accent-foreground": "oklch(0.985 0 0)",
|
|
destructive: "oklch(0.704 0.191 22.216)",
|
|
border: "oklch(1 0 0 / 10%)",
|
|
input: "oklch(1 0 0 / 15%)",
|
|
ring: "oklch(0.606 0.25 292.717)",
|
|
sidebar: "oklch(0.145 0 0)",
|
|
"sidebar-foreground": "oklch(0.985 0 0)",
|
|
"sidebar-primary": "oklch(0.606 0.25 292.717)",
|
|
"sidebar-primary-foreground": "oklch(0.985 0 0)",
|
|
"sidebar-accent": "oklch(0.205 0 0)",
|
|
"sidebar-accent-foreground": "oklch(0.985 0 0)",
|
|
"sidebar-border": "oklch(1 0 0 / 10%)",
|
|
"sidebar-ring": "oklch(0.606 0.25 292.717)",
|
|
},
|
|
},
|
|
},
|
|
] as const satisfies RegistryItem[]
|
|
|
|
export type Theme = (typeof THEMES)[number]
|
|
export type ThemeName = Theme["name"]
|