From 51efdcd098b94281d7439f92e822fce20c8d9717 Mon Sep 17 00:00:00 2001 From: George Cushen Date: Thu, 27 Nov 2025 22:36:11 +0000 Subject: [PATCH] =?UTF-8?q?feat(themes):=20new=20color=20theme=20engine=20?= =?UTF-8?q?&=20packs=20=F0=9F=8E=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - **New Hybrid Engine:** Fully data-driven theming using YAML (`modules/blox-tailwind/data/themes/`). Supports: - **Palette Mode:** `primary: "indigo"` loads exact Tailwind 50-950 scales (OKLCH) for perfect utility matching. - **Hex Mode:** `primary: "#brand"` auto-generates accessible 50-950 tint/shade scales. - **Semantic Overrides:** `ui.header.background` accepts gradients, transparency, and images. - **Neutral Mapping:** Themes can retarget the gray scale (e.g. `neutral: "stone"` warms up the entire UI). - **New Theme Packs:** - `default` (Blue/Sky + Dark) - `contrast` (High Contrast Light) - `latte` (Warm Coffee/Stone) - `dracula` (Dark Purple/Pink) - `americano` (Dark Espresso) - `marine` (Deep Ocean/Teal) - `retro` (Vintage Paper) - `synthwave` (Neon/Purple) - `cupcake` (Light Pink/Fuchsia) - **Architecture:** - Standardized on `appearance.theme.light` / `appearance.theme.dark` config. - Legacy `appearance.color` remains as a primary color override. This overhaul enables colored backgrounds/navbars, enables mix-and-match themes, and future-proofs the styling system for Tailwind v4. --- .../blox-tailwind/assets/css/blox/navbar.css | 12 +- .../blox-tailwind/assets/css/config/theme.css | 3 + .../blox-tailwind/data/themes/americano.yaml | 29 +++++ .../blox-tailwind/data/themes/contrast.yaml | 30 +++++ .../blox-tailwind/data/themes/cupcake.yaml | 29 +++++ .../blox-tailwind/data/themes/default.yaml | 30 +++++ .../blox-tailwind/data/themes/dracula.yaml | 29 +++++ modules/blox-tailwind/data/themes/latte.yaml | 32 +++++ modules/blox-tailwind/data/themes/marine.yaml | 29 +++++ modules/blox-tailwind/data/themes/retro.yaml | 29 +++++ .../blox-tailwind/data/themes/synthwave.yaml | 29 +++++ .../components/headers/navbar-simple.html | 18 +-- .../_partials/components/headers/navbar.html | 12 +- .../functions/generate_color_scale.html | 121 ++++++++++++++++++ .../_partials/functions/theme_generator.html | 80 ++++++++++++ .../_partials/functions/theme_variables.html | 26 ++++ .../layouts/_partials/site_head.html | 17 ++- modules/blox-tailwind/layouts/baseof.html | 2 +- .../academic-cv/config/_default/params.yaml | 4 +- templates/blog/config/_default/params.yaml | 4 +- .../documentation/config/_default/params.yaml | 4 +- .../landing-page/config/_default/params.yaml | 4 +- .../link-in-bio/config/_default/params.yaml | 4 +- templates/resume/config/_default/params.yaml | 4 +- 24 files changed, 550 insertions(+), 31 deletions(-) create mode 100644 modules/blox-tailwind/data/themes/americano.yaml create mode 100644 modules/blox-tailwind/data/themes/contrast.yaml create mode 100644 modules/blox-tailwind/data/themes/cupcake.yaml create mode 100644 modules/blox-tailwind/data/themes/default.yaml create mode 100644 modules/blox-tailwind/data/themes/dracula.yaml create mode 100644 modules/blox-tailwind/data/themes/latte.yaml create mode 100644 modules/blox-tailwind/data/themes/marine.yaml create mode 100644 modules/blox-tailwind/data/themes/retro.yaml create mode 100644 modules/blox-tailwind/data/themes/synthwave.yaml create mode 100644 modules/blox-tailwind/layouts/_partials/functions/generate_color_scale.html create mode 100644 modules/blox-tailwind/layouts/_partials/functions/theme_generator.html create mode 100644 modules/blox-tailwind/layouts/_partials/functions/theme_variables.html diff --git a/modules/blox-tailwind/assets/css/blox/navbar.css b/modules/blox-tailwind/assets/css/blox/navbar.css index 30c38411..278f7391 100644 --- a/modules/blox-tailwind/assets/css/blox/navbar.css +++ b/modules/blox-tailwind/assets/css/blox/navbar.css @@ -5,7 +5,9 @@ } .navbar-brand { - @apply text-black dark:text-white text-xl font-semibold; + /* @apply text-black dark:text-white text-xl font-semibold; */ + color: var(--color-header-fg); + @apply text-xl font-semibold; } .navbar-brand svg { @@ -40,7 +42,9 @@ input#nav-toggle:checked ~ #nav-menu { } #site-header.header { - @apply bg-white dark:bg-zinc-800 py-3 shadow; + background-color: var(--color-header-bg); + color: var(--color-header-fg); + @apply py-3 shadow; } /* navbar items */ @@ -50,7 +54,9 @@ input#nav-toggle:checked ~ #nav-menu { } .nav-link { - @apply dark:text-white block p-3 font-semibold transition lg:px-2 lg:py-3; + /* @apply dark:text-white block p-3 font-semibold transition lg:px-2 lg:py-3; */ + color: var(--color-header-fg); + @apply block p-3 font-semibold transition lg:px-2 lg:py-3; } .nav-link:hover { diff --git a/modules/blox-tailwind/assets/css/config/theme.css b/modules/blox-tailwind/assets/css/config/theme.css index b33585d5..371313b0 100644 --- a/modules/blox-tailwind/assets/css/config/theme.css +++ b/modules/blox-tailwind/assets/css/config/theme.css @@ -305,6 +305,9 @@ --color-primary-900: rgb(var(--hb-primary-900-rgb, 30 58 138)); --color-primary-950: rgb(var(--hb-primary-950-rgb, 23 37 84)); + /* Semantic UI Colors - Defined in theme_generator.html */ + /* Do not redeclare them here to avoid circular references */ + --color-secondary-50: rgb(var(--hb-secondary-50-rgb, 236 254 255)); --color-secondary-100: rgb(var(--hb-secondary-100-rgb, 207 250 254)); --color-secondary-200: rgb(var(--hb-secondary-200-rgb, 165 243 252)); diff --git a/modules/blox-tailwind/data/themes/americano.yaml b/modules/blox-tailwind/data/themes/americano.yaml new file mode 100644 index 00000000..a24333fd --- /dev/null +++ b/modules/blox-tailwind/data/themes/americano.yaml @@ -0,0 +1,29 @@ +name: "americano" +type: "dark" + +dark: + colors: + primary: "#d49255" # Warm Orange/Brown (approximated from oklch(71.996% 0.123 62.756)) + secondary: "#395260" # Cool Slate Blue (approximated from oklch(34.465% 0.029 199.194)) + neutral: "#2b262b" # Deep Purple/Black (approximated from oklch(16.51% 0.015 326.261)) + ui: + background: "#2b262b" # Deep Espresso + foreground: "#e0cab6" # Crema (approximated from oklch(72.354% 0.092 79.129)) + header: + background: "#2b262b" + foreground: "#e0cab6" + footer: + background: "#231f23" # Darker roast + foreground: "#9ca3af" + +light: + # A light "Cortado" pairing for day mode if needed + colors: + primary: "#d49255" + secondary: "#395260" + ui: + background: "#f5f5f4" + foreground: "#292524" + header: + background: "#ffffff" + foreground: "#292524" diff --git a/modules/blox-tailwind/data/themes/contrast.yaml b/modules/blox-tailwind/data/themes/contrast.yaml new file mode 100644 index 00000000..e11dcc27 --- /dev/null +++ b/modules/blox-tailwind/data/themes/contrast.yaml @@ -0,0 +1,30 @@ +name: "contrast" +type: "dual" + +light: + colors: + primary: "indigo" + secondary: "blue" + ui: + background: "#ffffff" + foreground: "#111827" + header: + foreground: "#ffffff" + background: "#0f172a" + footer: + background: "#f3f4f6" + foreground: "#0f172a" + +dark: + colors: + primary: "blue" + secondary: "teal" + ui: + background: "#0f172a" + foreground: "#f8fafc" + header: + foreground: "#0f172a" + background: "#f8fafc" + footer: + background: "#111827" + foreground: "#e5e7eb" diff --git a/modules/blox-tailwind/data/themes/cupcake.yaml b/modules/blox-tailwind/data/themes/cupcake.yaml new file mode 100644 index 00000000..725d8d00 --- /dev/null +++ b/modules/blox-tailwind/data/themes/cupcake.yaml @@ -0,0 +1,29 @@ +name: "cupcake" +type: "light" + +light: + colors: + primary: "#e779c1" # Frosting Pink (approximated from oklch(65% 0.241 354.308)) + secondary: "#d946ef" # Deep Purple/Fuchsia (approximated from oklch(62% 0.265 303.9)) + neutral: "#5c4033" # Chocolate/Dark Brown (approximated from oklch(40% 0.153 2.432)) + ui: + background: "#faf7f5" # Vanilla/Sugar (approximated from oklch(97% 0.014 343.198)) + foreground: "#7d1f39" # Berry Jam (approximated from oklch(52% 0.223 3.958)) + header: + background: "#ffffff" + foreground: "#7d1f39" + footer: + background: "#f3e8e8" # Light Pink Foam + foreground: "#7d1f39" + +dark: + # A darker "Red Velvet" variant + colors: + primary: "#e779c1" + secondary: "#d946ef" + ui: + background: "#2a1b20" # Dark Chocolate + foreground: "#f8e7e7" # Pale Pink Cream + header: + background: "#1f1216" + foreground: "#f8e7e7" diff --git a/modules/blox-tailwind/data/themes/default.yaml b/modules/blox-tailwind/data/themes/default.yaml new file mode 100644 index 00000000..30df3451 --- /dev/null +++ b/modules/blox-tailwind/data/themes/default.yaml @@ -0,0 +1,30 @@ +name: "default" +type: "dual" + +light: + colors: + primary: "indigo" + secondary: "blue" + ui: + background: "#ffffff" + foreground: "#111827" + header: + background: "#ffffff" + foreground: "#0f172a" + footer: + background: "#f3f4f6" + foreground: "#0f172a" + +dark: + colors: + primary: "blue" + secondary: "teal" + ui: + background: "#0f172a" + foreground: "#f8fafc" + header: + background: "#0f172a" + foreground: "#f8fafc" + footer: + background: "#111827" + foreground: "#e5e7eb" diff --git a/modules/blox-tailwind/data/themes/dracula.yaml b/modules/blox-tailwind/data/themes/dracula.yaml new file mode 100644 index 00000000..d0af84ed --- /dev/null +++ b/modules/blox-tailwind/data/themes/dracula.yaml @@ -0,0 +1,29 @@ +name: "dracula" +type: "dark" + +dark: + colors: + primary: "#ff79c6" # Dracula Pink + secondary: "#bd93f9" # Dracula Purple + neutral: "#6272a4" # Dracula Comment (Blue-Gray) + ui: + background: "#282a36" # Dracula Background + foreground: "#f8f8f2" # Dracula Foreground + header: + background: "#282a36" + foreground: "#f8f8f2" + footer: + background: "#21222c" # Slightly darker selection color + foreground: "#f8f8f2" + +# Optional light variant (Dracula usually doesn't have one, but we can provide a high contrast or soft variant) +light: + colors: + primary: "#ff79c6" + secondary: "#bd93f9" + ui: + background: "#f8f8f2" + foreground: "#282a36" + header: + background: "#ffffff" + foreground: "#282a36" diff --git a/modules/blox-tailwind/data/themes/latte.yaml b/modules/blox-tailwind/data/themes/latte.yaml new file mode 100644 index 00000000..ff8c9c8f --- /dev/null +++ b/modules/blox-tailwind/data/themes/latte.yaml @@ -0,0 +1,32 @@ +name: "latte" +type: "light" + +light: + colors: + primary: "#3b2313" # Mocha/Coffee bean + secondary: "#d97706" # Caramel/Amber + neutral: "#78716c" # Stone + ui: + background: "#fffaf5" # Warm cream/milk foam + foreground: "#3b2313" # Espresso text + header: + background: "rgba(255, 250, 245, 0.85)" # Frothy semi-transparent + foreground: "#3b2313" + footer: + background: "#f5efe9" # Slightly darker latte foam + foreground: "#5c4033" + +dark: + # A rich "Espresso Martini" dark mode partner + colors: + primary: "#d97706" # Caramel highlights + secondary: "#f59e0b" # Gold foam + ui: + background: "#1c1917" # Dark roasted bean + foreground: "#e7e5e4" # Steam + header: + background: "#1c1917" + foreground: "#e7e5e4" + footer: + background: "#292524" + foreground: "#a8a29e" diff --git a/modules/blox-tailwind/data/themes/marine.yaml b/modules/blox-tailwind/data/themes/marine.yaml new file mode 100644 index 00000000..16f7d3ff --- /dev/null +++ b/modules/blox-tailwind/data/themes/marine.yaml @@ -0,0 +1,29 @@ +name: "marine" +type: "dark" + +dark: + colors: + primary: "#2dd4bf" # Teal/Cyan (approximated from oklch(85.661% 0.144 198.645)) + secondary: "#a855f7" # Purple (approximated from oklch(60.682% 0.108 309.782)) + neutral: "#1e3a8a" # Deep Blue (approximated from oklch(27% 0.146 265.522)) + ui: + background: "#1e3a8a" # Deep Ocean Blue (from oklch(37% 0.146 265.522)) + foreground: "#e0f2fe" # Light Sky (approximated from oklch(90% 0.058 230.902)) + header: + background: "#1e3a8a" + foreground: "#e0f2fe" + footer: + background: "#172554" # Darker depth + foreground: "#93c5fd" + +light: + # A "Beach Day" pairing + colors: + primary: "#2dd4bf" + secondary: "#a855f7" + ui: + background: "#f0f9ff" + foreground: "#0c4a6e" + header: + background: "#ffffff" + foreground: "#0c4a6e" diff --git a/modules/blox-tailwind/data/themes/retro.yaml b/modules/blox-tailwind/data/themes/retro.yaml new file mode 100644 index 00000000..60d6cdf2 --- /dev/null +++ b/modules/blox-tailwind/data/themes/retro.yaml @@ -0,0 +1,29 @@ +name: "retro" +type: "light" + +light: + colors: + primary: "#e38c89" # Desaturated Red/Pink (approximated from oklch(80% 0.114 19.571)) + secondary: "#b4e9d6" # Mint Green (approximated from oklch(92% 0.084 155.995)) + neutral: "#79726b" # Warm Stone (approximated from oklch(44% 0.011 73.639)) + ui: + background: "#ebe6d9" # Vintage Paper / Beige (approximated from oklch(91.637% 0.034 90.515)) + foreground: "#7d5e3c" # Sepia/Brown (approximated from oklch(41% 0.112 45.904)) + header: + background: "#e3dbcd" # Slightly darker paper + foreground: "#7d5e3c" + footer: + background: "#dcd3c3" + foreground: "#5c4033" + +dark: + # A dark "Polaroid" variant + colors: + primary: "#e38c89" + secondary: "#b4e9d6" + ui: + background: "#292524" # Dark Stone + foreground: "#e7e5e4" # Warm Gray + header: + background: "#1c1917" + foreground: "#e7e5e4" diff --git a/modules/blox-tailwind/data/themes/synthwave.yaml b/modules/blox-tailwind/data/themes/synthwave.yaml new file mode 100644 index 00000000..670588bc --- /dev/null +++ b/modules/blox-tailwind/data/themes/synthwave.yaml @@ -0,0 +1,29 @@ +name: "synthwave" +type: "dark" + +dark: + colors: + primary: "#e779c1" # Neon Pink (approx oklch(71% 0.202 349.761)) + secondary: "#58c7f3" # Cyan (approx oklch(82% 0.111 230.318)) + neutral: "#2a2e37" # Dark Blue-Gray (approx oklch(45% 0.24 277.023) adjusted for readability) + ui: + background: "#1a103d" # Deep Purple (approx oklch(15% 0.09 281.288)) + foreground: "#f9f7fd" # Light Lavender (approx oklch(78% 0.115 274.713)) + header: + background: "rgba(26, 16, 61, 0.9)" # Deep Purple + foreground: "#f9f7fd" + footer: + background: "#110a28" # Darker Deep Purple + foreground: "#b8b2cc" + +light: + # Synthwave usually doesn't have a light mode, providing a high contrast fallback + colors: + primary: "#e779c1" + secondary: "#58c7f3" + ui: + background: "#f9f7fd" + foreground: "#1a103d" + header: + background: "#ffffff" + foreground: "#1a103d" diff --git a/modules/blox-tailwind/layouts/_partials/components/headers/navbar-simple.html b/modules/blox-tailwind/layouts/_partials/components/headers/navbar-simple.html index d040e4bc..e60b55a1 100644 --- a/modules/blox-tailwind/layouts/_partials/components/headers/navbar-simple.html +++ b/modules/blox-tailwind/layouts/_partials/components/headers/navbar-simple.html @@ -9,7 +9,7 @@