@admin-core/design 0.1.0 → 0.2.1

package/src/tokens/dark.css

@@ -0,0 +1,406 @@
+/**
+ * 暗色主题 CSS 变量定义 - 2026流行色系列
+ */
+.dark {
+  --background: 222.34deg 10.43% 12.27%;
+  --background-deep: 220deg 13.06% 9%;
+  --foreground: 0 0% 95%;
+  --card: 222.34deg 10.43% 12.27%;
+  --card-foreground: 210 40% 98%;
+  --popover: 0 0% 14.2%;
+  --popover-foreground: 210 40% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --primary: 212 100% 50%;
+  --primary-foreground: 0 0% 98%;
+  --destructive: 359.21 68.47% 56.47%;
+  --destructive-foreground: 0 0% 98%;
+  --info: 180 1.54% 12.75%;
+  --info-foreground: 220 4% 58%;
+  --success: 144 57% 58%;
+  --success-foreground: 0 0% 98%;
+  --warning: 42 84% 61%;
+  --warning-foreground: 0 0% 98%;
+  --secondary: 240 5% 17%;
+  --secondary-foreground: 0 0% 98%;
+  --accent: 216 5% 19%;
+  --accent-foreground: 0 0% 98%;
+  --border: 240 3.7% 22%;
+  --input: 0 0% 100% / 10%;
+  --input-placeholder: 218 11% 65%;
+  --input-background: 0 0% 100% / 5%;
+  --ring: 222.2 84% 4.9%;
+  --radius: 0.5rem;
+  --overlay: 0 0% 0% / 40%;
+  --overlay-content: 0 0% 0% / 40%;
+  --font-size-base: 16px;
+  --sidebar: 222.34deg 10.43% 12.27%;
+  --sidebar-deep: 220deg 13.06% 9%;
+  --menu: var(--sidebar);
+  --header: 222.34deg 10.43% 12.27%;
+  color-scheme: dark;
+}
+
+.dark[data-theme='slate'],
+[data-theme='slate'] .dark {
+  --background: 215 25% 10%;
+  --background-deep: 215 30% 8%;
+  --foreground: 215 10% 92%;
+  --card: 215 25% 12%;
+  --card-foreground: 215 10% 92%;
+  --popover: 215 25% 14%;
+  --popover-foreground: 215 10% 92%;
+  --primary: 215 25% 50%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 215 20% 20%;
+  --secondary-foreground: 215 10% 92%;
+  --muted: 215 20% 20%;
+  --muted-foreground: 215 10% 65%;
+  --accent: 215 20% 22%;
+  --accent-foreground: 215 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 215 20% 22%;
+  --input: 215 20% 22%;
+  --ring: 215 25% 50%;
+  --sidebar: 215 25% 10%;
+  --sidebar-deep: 215 30% 8%;
+  --header: 215 25% 10%;
+}
+
+.dark[data-theme='burnished-lilac'],
+[data-theme='burnished-lilac'] .dark {
+  --background: 280 25% 10%;
+  --background-deep: 280 30% 8%;
+  --foreground: 280 10% 92%;
+  --card: 280 25% 12%;
+  --card-foreground: 280 10% 92%;
+  --popover: 280 25% 14%;
+  --popover-foreground: 280 10% 92%;
+  --primary: 280 40% 65%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 280 20% 20%;
+  --secondary-foreground: 280 10% 92%;
+  --muted: 280 20% 20%;
+  --muted-foreground: 280 10% 65%;
+  --accent: 280 20% 22%;
+  --accent-foreground: 280 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 280 20% 22%;
+  --input: 280 20% 22%;
+  --ring: 280 40% 65%;
+  --sidebar: 280 25% 10%;
+  --sidebar-deep: 280 30% 8%;
+  --header: 280 25% 10%;
+}
+
+.dark[data-theme='teaberry'],
+[data-theme='teaberry'] .dark {
+  --background: 345 30% 10%;
+  --background-deep: 345 35% 8%;
+  --foreground: 345 10% 92%;
+  --card: 345 30% 12%;
+  --card-foreground: 345 10% 92%;
+  --popover: 345 30% 14%;
+  --popover-foreground: 345 10% 92%;
+  --primary: 345 75% 60%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 345 25% 20%;
+  --secondary-foreground: 345 10% 92%;
+  --muted: 345 25% 20%;
+  --muted-foreground: 345 10% 65%;
+  --accent: 345 25% 22%;
+  --accent-foreground: 345 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 345 25% 22%;
+  --input: 345 25% 22%;
+  --ring: 345 75% 60%;
+  --sidebar: 345 30% 10%;
+  --sidebar-deep: 345 35% 8%;
+  --header: 345 30% 10%;
+}
+
+.dark[data-theme='amaranth'],
+[data-theme='amaranth'] .dark {
+  --background: 310 30% 10%;
+  --background-deep: 310 35% 8%;
+  --foreground: 310 10% 92%;
+  --card: 310 30% 12%;
+  --card-foreground: 310 10% 92%;
+  --popover: 310 30% 14%;
+  --popover-foreground: 310 10% 92%;
+  --primary: 310 65% 50%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 310 25% 20%;
+  --secondary-foreground: 310 10% 92%;
+  --muted: 310 25% 20%;
+  --muted-foreground: 310 10% 65%;
+  --accent: 310 25% 22%;
+  --accent-foreground: 310 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 310 25% 22%;
+  --input: 310 25% 22%;
+  --ring: 310 65% 50%;
+  --sidebar: 310 30% 10%;
+  --sidebar-deep: 310 35% 8%;
+  --header: 310 30% 10%;
+}
+
+.dark[data-theme='pulse-blue'],
+[data-theme='pulse-blue'] .dark {
+  --background: 200 30% 10%;
+  --background-deep: 200 35% 8%;
+  --foreground: 200 10% 92%;
+  --card: 200 30% 12%;
+  --card-foreground: 200 10% 92%;
+  --popover: 200 30% 14%;
+  --popover-foreground: 200 10% 92%;
+  --primary: 200 85% 55%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 200 25% 20%;
+  --secondary-foreground: 200 10% 92%;
+  --muted: 200 25% 20%;
+  --muted-foreground: 200 10% 65%;
+  --accent: 200 25% 22%;
+  --accent-foreground: 200 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 200 25% 22%;
+  --input: 200 25% 22%;
+  --ring: 200 85% 55%;
+  --sidebar: 200 30% 10%;
+  --sidebar-deep: 200 35% 8%;
+  --header: 200 30% 10%;
+}
+
+.dark[data-theme='deep-teal'],
+[data-theme='deep-teal'] .dark {
+  --background: 180 30% 10%;
+  --background-deep: 180 35% 8%;
+  --foreground: 180 10% 92%;
+  --card: 180 30% 12%;
+  --card-foreground: 180 10% 92%;
+  --popover: 180 30% 14%;
+  --popover-foreground: 180 10% 92%;
+  --primary: 180 70% 40%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 180 25% 20%;
+  --secondary-foreground: 180 10% 92%;
+  --muted: 180 25% 20%;
+  --muted-foreground: 180 10% 65%;
+  --accent: 180 25% 22%;
+  --accent-foreground: 180 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 180 25% 22%;
+  --input: 180 25% 22%;
+  --ring: 180 70% 40%;
+  --sidebar: 180 30% 10%;
+  --sidebar-deep: 180 35% 8%;
+  --header: 180 30% 10%;
+}
+
+.dark[data-theme='mermaid-aqua'],
+[data-theme='mermaid-aqua'] .dark {
+  --background: 185 30% 10%;
+  --background-deep: 185 35% 8%;
+  --foreground: 185 10% 92%;
+  --card: 185 30% 12%;
+  --card-foreground: 185 10% 92%;
+  --popover: 185 30% 14%;
+  --popover-foreground: 185 10% 92%;
+  --primary: 185 75% 60%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 185 25% 20%;
+  --secondary-foreground: 185 10% 92%;
+  --muted: 185 25% 20%;
+  --muted-foreground: 185 10% 65%;
+  --accent: 185 25% 22%;
+  --accent-foreground: 185 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 185 25% 22%;
+  --input: 185 25% 22%;
+  --ring: 185 75% 60%;
+  --sidebar: 185 30% 10%;
+  --sidebar-deep: 185 35% 8%;
+  --header: 185 30% 10%;
+}
+
+.dark[data-theme='pearl-purple'],
+[data-theme='pearl-purple'] .dark {
+  --background: 270 25% 10%;
+  --background-deep: 270 30% 8%;
+  --foreground: 270 10% 92%;
+  --card: 270 25% 12%;
+  --card-foreground: 270 10% 92%;
+  --popover: 270 25% 14%;
+  --popover-foreground: 270 10% 92%;
+  --primary: 270 50% 70%;
+  --primary-foreground: 270 30% 20%;
+  --secondary: 270 20% 20%;
+  --secondary-foreground: 270 10% 92%;
+  --muted: 270 20% 20%;
+  --muted-foreground: 270 10% 65%;
+  --accent: 270 20% 22%;
+  --accent-foreground: 270 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 270 20% 22%;
+  --input: 270 20% 22%;
+  --ring: 270 50% 70%;
+  --sidebar: 270 25% 10%;
+  --sidebar-deep: 270 30% 8%;
+  --header: 270 25% 10%;
+}
+
+.dark[data-theme='burgundy'],
+[data-theme='burgundy'] .dark {
+  --background: 345 30% 10%;
+  --background-deep: 345 35% 8%;
+  --foreground: 345 10% 92%;
+  --card: 345 30% 12%;
+  --card-foreground: 345 10% 92%;
+  --popover: 345 30% 14%;
+  --popover-foreground: 345 10% 92%;
+  --primary: 345 70% 45%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 345 25% 20%;
+  --secondary-foreground: 345 10% 92%;
+  --muted: 345 25% 20%;
+  --muted-foreground: 345 10% 65%;
+  --accent: 345 25% 22%;
+  --accent-foreground: 345 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 345 25% 22%;
+  --input: 345 25% 22%;
+  --ring: 345 70% 45%;
+  --sidebar: 345 30% 10%;
+  --sidebar-deep: 345 35% 8%;
+  --header: 345 30% 10%;
+}
+
+.dark[data-theme='burnt-sienna'],
+[data-theme='burnt-sienna'] .dark {
+  --background: 15 30% 10%;
+  --background-deep: 15 35% 8%;
+  --foreground: 15 10% 92%;
+  --card: 15 30% 12%;
+  --card-foreground: 15 10% 92%;
+  --popover: 15 30% 14%;
+  --popover-foreground: 15 10% 92%;
+  --primary: 15 65% 55%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 15 25% 20%;
+  --secondary-foreground: 15 10% 92%;
+  --muted: 15 25% 20%;
+  --muted-foreground: 15 10% 65%;
+  --accent: 15 25% 22%;
+  --accent-foreground: 15 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 15 25% 22%;
+  --input: 15 25% 22%;
+  --ring: 15 65% 55%;
+  --sidebar: 15 30% 10%;
+  --sidebar-deep: 15 35% 8%;
+  --header: 15 30% 10%;
+}
+
+.dark[data-theme='olive-sage'],
+[data-theme='olive-sage'] .dark {
+  --background: 80 25% 10%;
+  --background-deep: 80 30% 8%;
+  --foreground: 80 10% 92%;
+  --card: 80 25% 12%;
+  --card-foreground: 80 10% 92%;
+  --popover: 80 25% 14%;
+  --popover-foreground: 80 10% 92%;
+  --primary: 80 35% 50%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 80 20% 20%;
+  --secondary-foreground: 80 10% 92%;
+  --muted: 80 20% 20%;
+  --muted-foreground: 80 10% 65%;
+  --accent: 80 20% 22%;
+  --accent-foreground: 80 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 80 20% 22%;
+  --input: 80 20% 22%;
+  --ring: 80 35% 50%;
+  --sidebar: 80 25% 10%;
+  --sidebar-deep: 80 30% 8%;
+  --header: 80 25% 10%;
+}
+
+.dark[data-theme='champagne-gold'],
+[data-theme='champagne-gold'] .dark {
+  --background: 45 30% 10%;
+  --background-deep: 45 35% 8%;
+  --foreground: 45 10% 92%;
+  --card: 45 30% 12%;
+  --card-foreground: 45 10% 92%;
+  --popover: 45 30% 14%;
+  --popover-foreground: 45 10% 92%;
+  --primary: 45 60% 65%;
+  --primary-foreground: 45 30% 20%;
+  --secondary: 45 25% 20%;
+  --secondary-foreground: 45 10% 92%;
+  --muted: 45 25% 20%;
+  --muted-foreground: 45 10% 65%;
+  --accent: 45 25% 22%;
+  --accent-foreground: 45 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 45 25% 22%;
+  --input: 45 25% 22%;
+  --ring: 45 60% 65%;
+  --sidebar: 45 30% 10%;
+  --sidebar-deep: 45 35% 8%;
+  --header: 45 30% 10%;
+}
+
+.dark[data-theme='dusty-rose'],
+[data-theme='dusty-rose'] .dark {
+  --background: 350 25% 10%;
+  --background-deep: 350 30% 8%;
+  --foreground: 350 10% 92%;
+  --card: 350 25% 12%;
+  --card-foreground: 350 10% 92%;
+  --popover: 350 25% 14%;
+  --popover-foreground: 350 10% 92%;
+  --primary: 350 45% 70%;
+  --primary-foreground: 350 25% 20%;
+  --secondary: 350 20% 20%;
+  --secondary-foreground: 350 10% 92%;
+  --muted: 350 20% 20%;
+  --muted-foreground: 350 10% 65%;
+  --accent: 350 20% 22%;
+  --accent-foreground: 350 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 350 20% 22%;
+  --input: 350 20% 22%;
+  --ring: 350 45% 70%;
+  --sidebar: 350 25% 10%;
+  --sidebar-deep: 350 30% 8%;
+  --header: 350 25% 10%;
+}
+
+.dark[data-theme='citrus-green'],
+[data-theme='citrus-green'] .dark {
+  --background: 75 30% 10%;
+  --background-deep: 75 35% 8%;
+  --foreground: 75 10% 92%;
+  --card: 75 30% 12%;
+  --card-foreground: 75 10% 92%;
+  --popover: 75 30% 14%;
+  --popover-foreground: 75 10% 92%;
+  --primary: 75 75% 55%;
+  --primary-foreground: 75 30% 15%;
+  --secondary: 75 25% 20%;
+  --secondary-foreground: 75 10% 92%;
+  --muted: 75 25% 20%;
+  --muted-foreground: 75 10% 65%;
+  --accent: 75 25% 22%;
+  --accent-foreground: 75 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 75 25% 22%;
+  --input: 75 25% 22%;
+  --ring: 75 75% 55%;
+  --sidebar: 75 30% 10%;
+  --sidebar-deep: 75 35% 8%;
+  --header: 75 30% 10%;
+}

package/src/tokens/index.ts

@@ -0,0 +1,6 @@
+/**
+ * 设计令牌
+ * 导入浅色主题和暗色主题的 CSS 变量
+ */
+import './light.css';
+import './dark.css';

package/src/tokens/light.css

@@ -0,0 +1,297 @@
+/**
+ * 浅色主题 CSS 变量定义 - 2026流行色系列
+ */
+:root {
+  --popup-z-index: 2000;
+  --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --background: 0 0% 100%;
+  --background-deep: 216 20.11% 95.47%;
+  --foreground: 210 6% 21%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --primary: 212 100% 48%;
+  --primary-foreground: 0 0% 98%;
+  --destructive: 359.33 100% 65.1%;
+  --destructive-foreground: 0 0% 98%;
+  --info: 240 5% 96%;
+  --info-foreground: 220 4% 58%;
+  --success: 144 57% 58%;
+  --success-foreground: 0 0% 98%;
+  --warning: 42 84% 61%;
+  --warning-foreground: 0 0% 98%;
+  --secondary: 240 5% 96%;
+  --secondary-foreground: 240 6% 10%;
+  --accent: 240 5% 96%;
+  --accent-foreground: 240 6% 10%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.88% 90%;
+  --input-placeholder: 217 10.6% 65%;
+  --input-background: 0 0% 100%;
+  --ring: 222.2 84% 4.9%;
+  --radius: 0.5rem;
+  --overlay: 0 0% 0% / 45%;
+  --overlay-content: 0 0% 95% / 45%;
+  --font-size-base: 16px;
+  --sidebar: 0 0% 100%;
+  --sidebar-deep: 0 0% 100%;
+  --menu: var(--sidebar);
+  --header: 0 0% 100%;
+  accent-color: var(--primary);
+  color-scheme: light;
+}
+
+[data-theme='slate'] {
+  --primary: 215 20% 40%;
+  --foreground: 215 25% 15%;
+  --card-foreground: 215 25% 15%;
+  --popover-foreground: 215 25% 15%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 215 15% 92%;
+  --secondary-foreground: 215 25% 20%;
+  --muted: 215 15% 92%;
+  --muted-foreground: 215 10% 45%;
+  --accent: 215 15% 88%;
+  --accent-foreground: 215 25% 20%;
+  --destructive: 0 84.2% 60.2%;
+  --border: 215 15% 85%;
+  --input: 215 15% 85%;
+  --ring: 215 20% 40%;
+}
+
+[data-theme='burnished-lilac'] {
+  --primary: 280 35% 65%;
+  --foreground: 280 20% 15%;
+  --card-foreground: 280 20% 15%;
+  --popover-foreground: 280 20% 15%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 280 25% 92%;
+  --secondary-foreground: 280 30% 20%;
+  --muted: 280 25% 92%;
+  --muted-foreground: 280 15% 45%;
+  --accent: 280 25% 88%;
+  --accent-foreground: 280 30% 20%;
+  --destructive: 0 84.2% 60.2%;
+  --border: 280 20% 85%;
+  --input: 280 20% 85%;
+  --ring: 280 35% 65%;
+}
+
+[data-theme='teaberry'] {
+  --primary: 345 75% 55%;
+  --foreground: 345 30% 15%;
+  --card-foreground: 345 30% 15%;
+  --popover-foreground: 345 30% 15%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 345 40% 92%;
+  --secondary-foreground: 345 40% 20%;
+  --muted: 345 40% 92%;
+  --muted-foreground: 345 20% 45%;
+  --accent: 345 40% 88%;
+  --accent-foreground: 345 40% 20%;
+  --destructive: 0 84.2% 60.2%;
+  --border: 345 30% 85%;
+  --input: 345 30% 85%;
+  --ring: 345 75% 55%;
+}
+
+[data-theme='amaranth'] {
+  --primary: 310 60% 45%;
+  --foreground: 310 25% 15%;
+  --card-foreground: 310 25% 15%;
+  --popover-foreground: 310 25% 15%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 310 35% 92%;
+  --secondary-foreground: 310 35% 20%;
+  --muted: 310 35% 92%;
+  --muted-foreground: 310 20% 45%;
+  --accent: 310 35% 88%;
+  --accent-foreground: 310 35% 20%;
+  --destructive: 0 84.2% 60.2%;
+  --border: 310 25% 85%;
+  --input: 310 25% 85%;
+  --ring: 310 60% 45%;
+}
+
+[data-theme='pulse-blue'] {
+  --primary: 200 85% 50%;
+  --foreground: 200 30% 15%;
+  --card-foreground: 200 30% 15%;
+  --popover-foreground: 200 30% 15%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 200 40% 92%;
+  --secondary-foreground: 200 40% 20%;
+  --muted: 200 40% 92%;
+  --muted-foreground: 200 20% 45%;
+  --accent: 200 40% 88%;
+  --accent-foreground: 200 40% 20%;
+  --destructive: 0 84.2% 60.2%;
+  --border: 200 30% 85%;
+  --input: 200 30% 85%;
+  --ring: 200 85% 50%;
+}
+
+[data-theme='deep-teal'] {
+  --primary: 180 65% 35%;
+  --foreground: 180 25% 15%;
+  --card-foreground: 180 25% 15%;
+  --popover-foreground: 180 25% 15%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 180 30% 92%;
+  --secondary-foreground: 180 35% 20%;
+  --muted: 180 30% 92%;
+  --muted-foreground: 180 15% 45%;
+  --accent: 180 30% 88%;
+  --accent-foreground: 180 35% 20%;
+  --destructive: 0 84.2% 60.2%;
+  --border: 180 25% 85%;
+  --input: 180 25% 85%;
+  --ring: 180 65% 35%;
+}
+
+[data-theme='mermaid-aqua'] {
+  --primary: 185 70% 55%;
+  --foreground: 185 30% 15%;
+  --card-foreground: 185 30% 15%;
+  --popover-foreground: 185 30% 15%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 185 40% 92%;
+  --secondary-foreground: 185 40% 20%;
+  --muted: 185 40% 92%;
+  --muted-foreground: 185 20% 45%;
+  --accent: 185 40% 88%;
+  --accent-foreground: 185 40% 20%;
+  --destructive: 0 84.2% 60.2%;
+  --border: 185 30% 85%;
+  --input: 185 30% 85%;
+  --ring: 185 70% 55%;
+}
+
+[data-theme='pearl-purple'] {
+  --primary: 270 45% 70%;
+  --foreground: 270 20% 15%;
+  --card-foreground: 270 20% 15%;
+  --popover-foreground: 270 20% 15%;
+  --primary-foreground: 270 30% 20%;
+  --secondary: 270 30% 92%;
+  --secondary-foreground: 270 30% 20%;
+  --muted: 270 30% 92%;
+  --muted-foreground: 270 15% 45%;
+  --accent: 270 30% 88%;
+  --accent-foreground: 270 30% 20%;
+  --destructive: 0 84.2% 60.2%;
+  --border: 270 25% 85%;
+  --input: 270 25% 85%;
+  --ring: 270 45% 70%;
+}
+
+[data-theme='burgundy'] {
+  --primary: 345 65% 40%;
+  --foreground: 345 25% 15%;
+  --card-foreground: 345 25% 15%;
+  --popover-foreground: 345 25% 15%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 345 30% 92%;
+  --secondary-foreground: 345 35% 20%;
+  --muted: 345 30% 92%;
+  --muted-foreground: 345 15% 45%;
+  --accent: 345 30% 88%;
+  --accent-foreground: 345 35% 20%;
+  --destructive: 0 84.2% 60.2%;
+  --border: 345 25% 85%;
+  --input: 345 25% 85%;
+  --ring: 345 65% 40%;
+}
+
+[data-theme='burnt-sienna'] {
+  --primary: 15 60% 50%;
+  --foreground: 15 25% 15%;
+  --card-foreground: 15 25% 15%;
+  --popover-foreground: 15 25% 15%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 15 30% 92%;
+  --secondary-foreground: 15 35% 20%;
+  --muted: 15 30% 92%;
+  --muted-foreground: 15 15% 45%;
+  --accent: 15 30% 88%;
+  --accent-foreground: 15 35% 20%;
+  --destructive: 0 84.2% 60.2%;
+  --border: 15 25% 85%;
+  --input: 15 25% 85%;
+  --ring: 15 60% 50%;
+}
+
+[data-theme='olive-sage'] {
+  --primary: 80 30% 45%;
+  --foreground: 80 20% 15%;
+  --card-foreground: 80 20% 15%;
+  --popover-foreground: 80 20% 15%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 80 20% 92%;
+  --secondary-foreground: 80 25% 20%;
+  --muted: 80 20% 92%;
+  --muted-foreground: 80 10% 45%;
+  --accent: 80 20% 88%;
+  --accent-foreground: 80 25% 20%;
+  --destructive: 0 84.2% 60.2%;
+  --border: 80 15% 85%;
+  --input: 80 15% 85%;
+  --ring: 80 30% 45%;
+}
+
+[data-theme='champagne-gold'] {
+  --primary: 45 55% 60%;
+  --foreground: 45 25% 15%;
+  --card-foreground: 45 25% 15%;
+  --popover-foreground: 45 25% 15%;
+  --primary-foreground: 45 30% 20%;
+  --secondary: 45 35% 92%;
+  --secondary-foreground: 45 30% 20%;
+  --muted: 45 35% 92%;
+  --muted-foreground: 45 15% 45%;
+  --accent: 45 35% 88%;
+  --accent-foreground: 45 30% 20%;
+  --destructive: 0 84.2% 60.2%;
+  --border: 45 25% 85%;
+  --input: 45 25% 85%;
+  --ring: 45 55% 60%;
+}
+
+[data-theme='dusty-rose'] {
+  --primary: 350 40% 65%;
+  --foreground: 350 20% 15%;
+  --card-foreground: 350 20% 15%;
+  --popover-foreground: 350 20% 15%;
+  --primary-foreground: 350 25% 20%;
+  --secondary: 350 25% 92%;
+  --secondary-foreground: 350 25% 20%;
+  --muted: 350 25% 92%;
+  --muted-foreground: 350 15% 45%;
+  --accent: 350 25% 88%;
+  --accent-foreground: 350 25% 20%;
+  --destructive: 0 84.2% 60.2%;
+  --border: 350 20% 85%;
+  --input: 350 20% 85%;
+  --ring: 350 40% 65%;
+}
+
+[data-theme='citrus-green'] {
+  --primary: 75 70% 50%;
+  --foreground: 75 25% 15%;
+  --card-foreground: 75 25% 15%;
+  --popover-foreground: 75 25% 15%;
+  --primary-foreground: 75 30% 15%;
+  --secondary: 75 40% 92%;
+  --secondary-foreground: 75 35% 20%;
+  --muted: 75 40% 92%;
+  --muted-foreground: 75 20% 45%;
+  --accent: 75 40% 88%;
+  --accent-foreground: 75 35% 20%;
+  --destructive: 0 84.2% 60.2%;
+  --border: 75 30% 85%;
+  --input: 75 30% 85%;
+  --ring: 75 70% 50%;
+}