From 4d1cc70cff487389b4a79333003160814f91e430 Mon Sep 17 00:00:00 2001 From: Val Alexander Date: Fri, 10 Apr 2026 03:56:11 -0500 Subject: [PATCH] Refresh cotton candy theme tokens and typography - Replace the theme palette with warmer light and neon dark values - Add sidebar, chart, spacing, shadow, and font token mappings - Load Oxanium and Space Grotesk for the updated theme --- apps/web/index.html | 2 +- apps/web/src/index.css | 68 +++++++++++++++--- apps/web/src/themes.css | 154 +++++++++++++++++++++++++++------------- 3 files changed, 163 insertions(+), 61 deletions(-) diff --git a/apps/web/index.html b/apps/web/index.html index 117f29509..407d3c93b 100644 --- a/apps/web/index.html +++ b/apps/web/index.html @@ -10,7 +10,7 @@ OK Code diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 767203025..a88ee907a 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -11,8 +11,11 @@ --color-success: var(--success); --color-info-foreground: var(--info-foreground); --color-info: var(--info); - --color-button-destructive-foreground: var(--button-destructive-foreground); - --color-button-primary-foreground: var(--button-primary-foreground); + --color-button-destructive-foreground: var( + --button-destructive-foreground, + var(--destructive-foreground) + ); + --color-button-primary-foreground: var(--button-primary-foreground, var(--primary-foreground)); --color-destructive-foreground: var(--destructive-foreground); --color-ring: var(--ring); --color-input: var(--input); @@ -32,6 +35,19 @@ --color-card: var(--card); --color-foreground: var(--foreground); --color-background: var(--background); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); @@ -96,6 +112,24 @@ --success-foreground: var(--color-emerald-700); --warning: var(--color-amber-500); --warning-foreground: var(--color-amber-700); + --chart-1: var(--primary); + --chart-2: var(--info); + --chart-3: var(--success); + --chart-4: var(--warning); + --chart-5: var(--destructive); + --sidebar: var(--card); + --sidebar-foreground: var(--foreground); + --sidebar-primary: var(--primary); + --sidebar-primary-foreground: var(--primary-foreground); + --sidebar-accent: var(--accent); + --sidebar-accent-foreground: var(--accent-foreground); + --sidebar-border: var(--border); + --sidebar-ring: var(--ring); + --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; + --font-serif: Georgia, Cambria, "Times New Roman", Times, serif; + --font-mono: "SF Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; + --spacing: 0.25rem; + --tracking-normal: 0em; @variant dark { color-scheme: dark; @@ -126,18 +160,26 @@ --success-foreground: var(--color-emerald-400); --warning: var(--color-amber-500); --warning-foreground: var(--color-amber-400); + --chart-1: var(--primary); + --chart-2: var(--info); + --chart-3: var(--success); + --chart-4: var(--warning); + --chart-5: var(--destructive); + --sidebar: var(--card); + --sidebar-foreground: var(--foreground); + --sidebar-primary: var(--primary); + --sidebar-primary-foreground: var(--primary-foreground); + --sidebar-accent: var(--accent); + --sidebar-accent-foreground: var(--accent-foreground); + --sidebar-border: var(--border); + --sidebar-ring: var(--ring); } } body { font-family: var( --font-ui, - "Inter", - -apple-system, - BlinkMacSystemFont, - "Segoe UI", - system-ui, - sans-serif + var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif) ); margin: 0; padding: 0; @@ -172,7 +214,15 @@ pre, code, textarea, input { - font-family: "SF Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; + font-family: var( + --font-mono, + "SF Mono", + "SFMono-Regular", + Consolas, + "Liberation Mono", + Menlo, + monospace + ); } /* Window drag region (frameless titlebar) */ diff --git a/apps/web/src/themes.css b/apps/web/src/themes.css index e0235c003..16412bd16 100644 --- a/apps/web/src/themes.css +++ b/apps/web/src/themes.css @@ -243,64 +243,116 @@ --warning-foreground: #e8b830; } -/* ─── Cotton Candy ─── sweet, dreamy pink & blue ─── */ +/* ─── Cotton Candy ─── warm paper light, neon candy dark ─── */ :root.theme-cotton-candy { color-scheme: light; - --background: #fdf6f9; - --foreground: #2a1f2e; - --card: #fceef5; - --card-foreground: #2a1f2e; - --popover: #fceef5; - --popover-foreground: #2a1f2e; - --primary: oklch(0.72 0.14 350); - --primary-foreground: #ffffff; - --secondary: rgba(248, 185, 215, 0.12); - --secondary-foreground: #2a1f2e; - --muted: rgba(160, 210, 248, 0.1); - --muted-foreground: #8a7e94; - --accent: rgba(150, 212, 252, 0.14); - --accent-foreground: #2a1f2e; - --destructive: #e85475; - --destructive-foreground: #d03058; - --border: rgba(248, 180, 215, 0.2); - --input: rgba(248, 180, 215, 0.22); - --ring: oklch(0.72 0.14 350); - --info: #7ec8ee; - --info-foreground: #5aaedb; - --success: #6cc4a0; - --success-foreground: #4aaa82; - --warning: #f5baca; - --warning-foreground: #d8929e; + --background: rgb(249, 249, 249); + --foreground: rgb(32, 32, 32); + --card: rgb(252, 252, 252); + --card-foreground: rgb(32, 32, 32); + --popover: rgb(252, 252, 252); + --popover-foreground: rgb(32, 32, 32); + --primary: rgb(107, 71, 57); + --primary-foreground: rgb(255, 255, 255); + --secondary: rgb(255, 223, 181); + --secondary-foreground: rgb(100, 40, 17); + --muted: rgb(239, 239, 239); + --muted-foreground: rgb(100, 100, 100); + --accent: rgb(232, 232, 232); + --accent-foreground: rgb(32, 32, 32); + --destructive: rgb(255, 60, 20); + --destructive-foreground: rgb(255, 255, 255); + --border: rgb(216, 216, 216); + --input: rgb(216, 216, 216); + --ring: rgb(107, 71, 57); + --chart-1: rgb(107, 71, 57); + --chart-2: rgb(255, 223, 181); + --chart-3: rgb(232, 232, 232); + --chart-4: rgb(255, 230, 196); + --chart-5: rgb(110, 69, 54); + --sidebar: rgb(251, 251, 251); + --sidebar-foreground: rgb(37, 37, 37); + --sidebar-primary: rgb(52, 52, 52); + --sidebar-primary-foreground: rgb(251, 251, 251); + --sidebar-accent: rgb(247, 247, 247); + --sidebar-accent-foreground: rgb(52, 52, 52); + --sidebar-border: rgb(235, 235, 235); + --sidebar-ring: rgb(181, 181, 181); + --font-sans: Oxanium, sans-serif; + --font-serif: "Space Grotesk", serif; + --font-mono: Oxanium, sans-serif; + --radius: 0.6rem; + --shadow-x: 0; + --shadow-y: 1px; + --shadow-blur: 3px; + --shadow-spread: 0px; + --shadow-opacity: 0.1; + --shadow-color: oklch(0 0 0); + --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); + --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); + --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); + --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); + --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1); + --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1); + --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1); + --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25); + --tracking-normal: 0em; + --spacing: 0.2rem; } :root.theme-cotton-candy.dark { color-scheme: dark; - --background: #170e1a; - --foreground: #f4e8f2; - --card: #1e1222; - --card-foreground: #f4e8f2; - --popover: #1e1222; - --popover-foreground: #f4e8f2; - --primary: oklch(0.75 0.14 350); - --primary-foreground: #170e1a; - --secondary: rgba(250, 170, 210, 0.08); - --secondary-foreground: #f4e8f2; - --muted: rgba(150, 210, 250, 0.08); - --muted-foreground: #a090aa; - --accent: rgba(150, 215, 255, 0.1); - --accent-foreground: #f4e8f2; - --destructive: #ff6b8a; - --destructive-foreground: #ff95aa; - --border: rgba(250, 170, 215, 0.1); - --input: rgba(250, 170, 215, 0.12); - --ring: oklch(0.75 0.14 350); - --info: #8ed4f5; - --info-foreground: #aee0f8; - --success: #7dd4b0; - --success-foreground: #90e0c0; - --warning: #f5bfcc; - --warning-foreground: #f8cdd8; + --background: rgb(13, 13, 13); + --foreground: rgb(237, 237, 237); + --card: rgb(28, 28, 28); + --card-foreground: rgb(238, 238, 238); + --popover: rgb(26, 26, 26); + --popover-foreground: rgb(238, 238, 238); + --primary: rgb(255, 178, 238); + --primary-foreground: rgb(45, 6, 45); + --secondary: rgb(60, 37, 55); + --secondary-foreground: rgb(254, 194, 255); + --muted: rgb(28, 28, 28); + --muted-foreground: rgb(181, 181, 181); + --accent: rgb(13, 13, 13); + --accent-foreground: rgb(237, 237, 237); + --destructive: rgb(255, 60, 20); + --destructive-foreground: rgb(255, 255, 255); + --border: rgb(34, 22, 33); + --input: rgb(71, 71, 71); + --ring: rgb(255, 194, 244); + --chart-1: rgb(255, 194, 244); + --chart-2: rgb(60, 37, 56); + --chart-3: rgb(41, 41, 41); + --chart-4: rgb(70, 42, 65); + --chart-5: rgb(255, 194, 247); + --sidebar: rgb(23, 23, 28); + --sidebar-foreground: rgb(245, 244, 245); + --sidebar-primary: rgb(245, 0, 143); + --sidebar-primary-foreground: rgb(255, 255, 255); + --sidebar-accent: rgb(43, 38, 43); + --sidebar-accent-foreground: rgb(245, 244, 245); + --sidebar-border: rgb(43, 38, 43); + --sidebar-ring: rgb(217, 211, 216); + --font-sans: Oxanium, sans-serif; + --font-serif: "Space Grotesk", serif; + --font-mono: Oxanium, sans-serif; + --radius: 0.6rem; + --shadow-x: 0; + --shadow-y: 1px; + --shadow-blur: 3px; + --shadow-spread: 0px; + --shadow-opacity: 0.1; + --shadow-color: oklch(0 0 0); + --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); + --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); + --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); + --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); + --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1); + --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1); + --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1); + --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25); } /* ─── Cathedral Circuit ─── sacred machine, techno-gothic ─── */