diff --git a/docs/rfcs/multi-style-architecture.md b/docs/rfcs/multi-style-architecture.md index d9518dc..ee3d8a2 100644 --- a/docs/rfcs/multi-style-architecture.md +++ b/docs/rfcs/multi-style-architecture.md @@ -420,7 +420,7 @@ The end state should support runtime switching without remounting components. Minimum contract: ```ts -type ThemeName = "morandi" | "brand"; +type ThemeName = "morandi" | "earth" | "brand"; type SkinName = "minimal" | "glass" | "pixel"; type MotionPackName = "calm" | "snappy" | "spring"; type MotionAccessibilityName = "system" | "full" | "reduced"; diff --git a/packages/tokens/src/index.ts b/packages/tokens/src/index.ts index f9624da..93cc78c 100644 --- a/packages/tokens/src/index.ts +++ b/packages/tokens/src/index.ts @@ -1,4 +1,4 @@ -export const themeNames = ["morandi", "brand"] as const; +export const themeNames = ["morandi", "earth", "brand"] as const; export type ThemeName = (typeof themeNames)[number]; export const defaultTheme: ThemeName = "morandi"; @@ -8,6 +8,10 @@ export const themeDetails = { label: "Morandi", note: "Muted dusty neutrals with a calm, understated luxury mood" }, + earth: { + label: "Earth", + note: "Organic browns, terracotta warmth, olive depth, and sandstone calm" + }, brand: { label: "Brand", note: "Verdant accent scaffold" diff --git a/packages/tokens/src/tokens.css b/packages/tokens/src/tokens.css index 06d9609..7adece7 100644 --- a/packages/tokens/src/tokens.css +++ b/packages/tokens/src/tokens.css @@ -69,6 +69,36 @@ --color-overlay: rgb(84 76 70 / 0.42); } +[data-theme="earth"] { + color-scheme: light; + --color-background: color-mix(in oklch, #d4c5a9 34%, white 66%); + --color-foreground: #4f3c27; + --color-surface: color-mix(in oklch, #d4c5a9 52%, white 48%); + --color-surface-strong: color-mix(in oklch, #c4956a 24%, white 76%); + --color-surface-contrast: #6f5437; + --color-border: color-mix(in oklch, #8b6f47 40%, white 60%); + --color-border-strong: #8b6f47; + --color-input: var(--color-border); + --color-ring: #a0522d; + --color-primary: #8b6f47; + --color-primary-foreground: #f7f1e7; + --color-secondary: #6b7c3f; + --color-secondary-foreground: #f4efe6; + --color-muted: color-mix(in oklch, #c4956a 18%, white 82%); + --color-muted-foreground: #78644a; + --color-accent: #a0522d; + --color-accent-foreground: #f8efe6; + --color-success: #72864c; + --color-success-foreground: #f5f1e8; + --color-warning: #c4956a; + --color-warning-foreground: #4a3826; + --color-destructive: #93492b; + --color-destructive-foreground: #faefe7; + --color-card: color-mix(in oklch, var(--color-surface) 84%, white 16%); + --color-card-foreground: var(--color-foreground); + --color-overlay: rgb(79 60 39 / 0.4); +} + [data-theme="brand"] { color-scheme: light; --color-background: oklch(0.972 0.016 172);