mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-02 13:07:46 +00:00
179 lines
6.3 KiB
TypeScript
179 lines
6.3 KiB
TypeScript
/**
|
|
* Hanzo UI - Base Color Definitions
|
|
*
|
|
* Neutral base colors that themes build upon.
|
|
* Uses OKLCH for perceptually uniform color scales.
|
|
*/
|
|
|
|
import { type RegistryItem } from "./schema"
|
|
|
|
export const BASE_COLORS: 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)",
|
|
muted: "oklch(0.97 0 0)",
|
|
"muted-foreground": "oklch(0.556 0 0)",
|
|
border: "oklch(0.922 0 0)",
|
|
input: "oklch(0.922 0 0)",
|
|
ring: "oklch(0.708 0 0)",
|
|
sidebar: "oklch(0.985 0 0)",
|
|
"sidebar-foreground": "oklch(0.145 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)",
|
|
muted: "oklch(0.269 0 0)",
|
|
"muted-foreground": "oklch(0.708 0 0)",
|
|
border: "oklch(1 0 0 / 10%)",
|
|
input: "oklch(1 0 0 / 15%)",
|
|
ring: "oklch(0.556 0 0)",
|
|
sidebar: "oklch(0.205 0 0)",
|
|
"sidebar-foreground": "oklch(0.985 0 0)",
|
|
"sidebar-border": "oklch(1 0 0 / 10%)",
|
|
"sidebar-ring": "oklch(0.556 0 0)",
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "stone",
|
|
title: "Stone",
|
|
type: "registry:theme",
|
|
cssVars: {
|
|
light: {
|
|
background: "oklch(1 0 0)",
|
|
foreground: "oklch(0.147 0.004 49.25)",
|
|
card: "oklch(1 0 0)",
|
|
"card-foreground": "oklch(0.147 0.004 49.25)",
|
|
popover: "oklch(1 0 0)",
|
|
"popover-foreground": "oklch(0.147 0.004 49.25)",
|
|
muted: "oklch(0.97 0.001 106.424)",
|
|
"muted-foreground": "oklch(0.553 0.013 58.071)",
|
|
border: "oklch(0.923 0.003 48.717)",
|
|
input: "oklch(0.923 0.003 48.717)",
|
|
ring: "oklch(0.709 0.01 56.259)",
|
|
sidebar: "oklch(0.985 0.001 106.423)",
|
|
"sidebar-foreground": "oklch(0.147 0.004 49.25)",
|
|
"sidebar-border": "oklch(0.923 0.003 48.717)",
|
|
"sidebar-ring": "oklch(0.709 0.01 56.259)",
|
|
},
|
|
dark: {
|
|
background: "oklch(0.147 0.004 49.25)",
|
|
foreground: "oklch(0.985 0.001 106.423)",
|
|
card: "oklch(0.216 0.006 56.043)",
|
|
"card-foreground": "oklch(0.985 0.001 106.423)",
|
|
popover: "oklch(0.216 0.006 56.043)",
|
|
"popover-foreground": "oklch(0.985 0.001 106.423)",
|
|
muted: "oklch(0.268 0.007 34.298)",
|
|
"muted-foreground": "oklch(0.709 0.01 56.259)",
|
|
border: "oklch(1 0 0 / 10%)",
|
|
input: "oklch(1 0 0 / 15%)",
|
|
ring: "oklch(0.553 0.013 58.071)",
|
|
sidebar: "oklch(0.216 0.006 56.043)",
|
|
"sidebar-foreground": "oklch(0.985 0.001 106.423)",
|
|
"sidebar-border": "oklch(1 0 0 / 10%)",
|
|
"sidebar-ring": "oklch(0.553 0.013 58.071)",
|
|
},
|
|
},
|
|
},
|
|
{
|
|
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)",
|
|
muted: "oklch(0.967 0.001 286.375)",
|
|
"muted-foreground": "oklch(0.552 0.016 285.938)",
|
|
border: "oklch(0.92 0.004 286.32)",
|
|
input: "oklch(0.92 0.004 286.32)",
|
|
ring: "oklch(0.705 0.015 286.067)",
|
|
sidebar: "oklch(0.985 0 0)",
|
|
"sidebar-foreground": "oklch(0.141 0.005 285.823)",
|
|
"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)",
|
|
muted: "oklch(0.274 0.006 286.033)",
|
|
"muted-foreground": "oklch(0.705 0.015 286.067)",
|
|
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-border": "oklch(1 0 0 / 10%)",
|
|
"sidebar-ring": "oklch(0.552 0.016 285.938)",
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "gray",
|
|
title: "Gray",
|
|
type: "registry:theme",
|
|
cssVars: {
|
|
light: {
|
|
background: "oklch(1 0 0)",
|
|
foreground: "oklch(0.13 0.028 261.692)",
|
|
card: "oklch(1 0 0)",
|
|
"card-foreground": "oklch(0.13 0.028 261.692)",
|
|
popover: "oklch(1 0 0)",
|
|
"popover-foreground": "oklch(0.13 0.028 261.692)",
|
|
muted: "oklch(0.967 0.003 264.542)",
|
|
"muted-foreground": "oklch(0.551 0.027 264.364)",
|
|
border: "oklch(0.928 0.006 264.531)",
|
|
input: "oklch(0.928 0.006 264.531)",
|
|
ring: "oklch(0.707 0.022 261.325)",
|
|
sidebar: "oklch(0.985 0.002 247.839)",
|
|
"sidebar-foreground": "oklch(0.13 0.028 261.692)",
|
|
"sidebar-border": "oklch(0.928 0.006 264.531)",
|
|
"sidebar-ring": "oklch(0.707 0.022 261.325)",
|
|
},
|
|
dark: {
|
|
background: "oklch(0.13 0.028 261.692)",
|
|
foreground: "oklch(0.985 0.002 247.839)",
|
|
card: "oklch(0.21 0.034 264.665)",
|
|
"card-foreground": "oklch(0.985 0.002 247.839)",
|
|
popover: "oklch(0.21 0.034 264.665)",
|
|
"popover-foreground": "oklch(0.985 0.002 247.839)",
|
|
muted: "oklch(0.278 0.033 256.848)",
|
|
"muted-foreground": "oklch(0.707 0.022 261.325)",
|
|
border: "oklch(1 0 0 / 10%)",
|
|
input: "oklch(1 0 0 / 15%)",
|
|
ring: "oklch(0.551 0.027 264.364)",
|
|
sidebar: "oklch(0.21 0.034 264.665)",
|
|
"sidebar-foreground": "oklch(0.985 0.002 247.839)",
|
|
"sidebar-border": "oklch(1 0 0 / 10%)",
|
|
"sidebar-ring": "oklch(0.551 0.027 264.364)",
|
|
},
|
|
},
|
|
},
|
|
] as const satisfies RegistryItem[]
|
|
|
|
export type BaseColor = (typeof BASE_COLORS)[number]
|
|
export type BaseColorName = BaseColor["name"]
|