+
๐ ๅฏๅจ Copilot๏ผๅ ่ดน๏ผ โข - ๅ็บง Pro๏ผ็ป่บซ๏ผ + ๅ็บง Pro
@@ -24,7 +24,7 @@
[**็ซๅณๅ็บง Pro๏ผ็ป่บซ๏ผโ**](https://hugoblox.com/pro?utm_source=github&utm_medium=readme)
+- ๐ **Pro๏ผไป
้ $8/ๆ๏ผ** โ ่ทๅๅฏ่งๅ็ผ่พๅจไปฅๅๆๆ้ซ็บงๆจกๆฟใ็งฏๆจไธๆดๆฐใ
+
[**็ซๅณๅ็บง Pro โ**](https://hugoblox.com/pro?utm_source=github&utm_medium=readme)
- โ๏ธ **่ฏทๆไปฌๅๆฏๅๅก** โ ๆฏๆๅผๆบไธๅผๆพ็ง็ ใ
[**GitHub ่ตๅฉ โ**](https://github.com/sponsors/gcushen)
@@ -123,7 +124,7 @@ Hugo Blox ๆฏ **ๅผๆบๅ
ๆ ธ + Pro ๅขๅผบ** ็ๆจกๅผใไฝ ๅฏไปฅ็จๅผๆบ็ๆญ
- ๐ฌ [Discord](https://discord.gg/z8wNYzb)
- ๐ [ๆๆกฃไธๆๅ](https://docs.hugoblox.com/?utm_source=github&utm_medium=readme)
- ๐ฆ [X / Twitter](https://x.com/BuildLore)
-- โญ [ไธบ Hugo Blox ๅ ๆ](https://github.com/HugoBlox/hugo-blox-builder)
+- โญ [ไธบ HugoBlox ๅ ๆ](https://github.com/HugoBlox/hugo-blox-builder)
---
diff --git a/hugo-blox-builder.code-workspace b/hugo-blox-builder.code-workspace
index 11b3bfc3..3c490a1c 100644
--- a/hugo-blox-builder.code-workspace
+++ b/hugo-blox-builder.code-workspace
@@ -13,21 +13,24 @@
"**/node_modules/**": true,
"**/public/**": true,
"**/resources/**": true,
- "**/pagefind/**": true
+ "**/pagefind/**": true,
+ "**/dist/**": true
},
"search.exclude": {
"**/node_modules/**": true,
"**/public/**": true,
"**/resources/**": true,
- "**/pagefind/**": true
+ "**/pagefind/**": true,
+ "**/dist/**": true
},
"files.watcherExclude": {
"**/node_modules/**": true,
"**/public/**": true,
"**/resources/**": true,
- "**/pagefind/**": true
+ "**/pagefind/**": true,
+ "**/dist/**": true
},
- "explorer.excludeGitIgnore": true,
+ "explorer.excludeGitIgnore": false,
"workbench.editor.labelFormat": "medium",
"breadcrumbs.enabled": true,
"npm.packageManager": "pnpm",
diff --git a/modules/blox-tailwind/assets/css/components/all.css b/modules/blox-tailwind/assets/css/components/all.css
index fca96b7b..6961a79b 100644
--- a/modules/blox-tailwind/assets/css/components/all.css
+++ b/modules/blox-tailwind/assets/css/components/all.css
@@ -6,5 +6,6 @@
@import "steps.css";
@import "cards.css";
@import "math.css";
+@import "notebook.css";
@import "author-notes.css";
@import "glassmorphism.css";
diff --git a/modules/blox-tailwind/assets/css/components/notebook.css b/modules/blox-tailwind/assets/css/components/notebook.css
new file mode 100644
index 00000000..31109d23
--- /dev/null
+++ b/modules/blox-tailwind/assets/css/components/notebook.css
@@ -0,0 +1,150 @@
+.hb-notebook {
+ --hb-notebook-output-max-height: 26rem;
+ @apply relative isolate my-10 rounded-3xl border border-zinc-200/70 bg-white/90 p-6 shadow-xl shadow-primary-500/5 transition-shadow duration-300;
+ @apply dark:border-zinc-800/70 dark:bg-zinc-900/70 dark:shadow-black/30 text-zinc-800 dark:text-zinc-50;
+}
+
+.hb-notebook::after {
+ content: "";
+ @apply pointer-events-none absolute inset-0 rounded-3xl bg-gradient-to-r from-primary-500/5 via-transparent to-secondary-500/5 opacity-0 transition-opacity duration-300;
+}
+
+.hb-notebook:hover::after {
+ @apply opacity-100;
+}
+
+.hb-notebook--dense {
+ @apply p-4;
+}
+
+.hb-notebook-header {
+ @apply flex flex-wrap items-start justify-between gap-4 border-b border-zinc-200/70 pb-4 dark:border-zinc-800/70;
+}
+
+.hb-notebook-heading {
+ @apply space-y-1;
+}
+
+.hb-notebook-title {
+ @apply text-lg font-semibold text-zinc-900 dark:text-white tracking-tight;
+}
+
+.hb-notebook-subtitle {
+ @apply text-sm font-medium text-zinc-500 dark:text-zinc-400;
+}
+
+.hb-notebook-download {
+ @apply inline-flex items-center gap-2 rounded-full border border-primary-500/70 px-4 py-2 text-sm font-medium text-primary-600 no-underline transition-all duration-200;
+ @apply hover:-translate-y-0.5 hover:bg-primary-50/60 hover:text-primary-700 dark:text-primary-300 dark:border-primary-400/60 dark:hover:bg-primary-500/10;
+}
+
+.hb-notebook-download svg {
+ @apply h-4 w-4;
+}
+
+.hb-notebook-metadata {
+ @apply mt-4 grid gap-3 rounded-2xl border border-dashed border-zinc-200/70 px-4 py-3 text-sm;
+ @apply dark:border-zinc-800/70;
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+}
+
+.hb-notebook-metadata dt {
+ @apply text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400;
+}
+
+.hb-notebook-metadata dd {
+ @apply font-medium text-zinc-800 dark:text-zinc-100;
+}
+
+.hb-notebook-body {
+ @apply mt-6 flex flex-col gap-5;
+}
+
+.hb-notebook-cell {
+ @apply rounded-2xl border border-zinc-200/70 bg-white p-4 shadow-sm shadow-zinc-200/60 transition-all duration-200;
+ @apply dark:border-zinc-800/60 dark:bg-zinc-900/70 dark:shadow-none;
+}
+
+.hb-notebook-cell--markdown {
+ @apply bg-gradient-to-br from-white via-white to-primary-50/40 dark:from-zinc-900 dark:via-zinc-900 dark:to-primary-900/10;
+}
+
+.hb-notebook-cell-header {
+ @apply mb-3 flex flex-wrap items-center gap-3;
+}
+
+.hb-notebook-pill {
+ @apply inline-flex items-center rounded-full bg-zinc-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-zinc-600;
+ @apply dark:bg-zinc-800 dark:text-zinc-300;
+}
+
+.hb-notebook-tags {
+ @apply flex flex-wrap gap-1;
+}
+
+.hb-notebook-tags span {
+ @apply inline-flex items-center rounded-full bg-primary-100/80 px-2 py-0.5 text-[11px] font-medium text-primary-700;
+ @apply dark:bg-primary-400/20 dark:text-primary-200;
+}
+
+.hb-notebook-code {
+ @apply overflow-hidden rounded-2xl border border-zinc-900/10 bg-zinc-950/95 shadow-inner shadow-black/30;
+}
+
+.hb-notebook-code pre {
+ @apply m-0 overflow-auto rounded-2xl p-5 text-sm leading-relaxed;
+}
+
+.hb-notebook-markdown {
+ @apply prose-h1:text-2xl prose-h2:text-xl prose-p:leading-relaxed prose-a:text-primary-600 max-w-none;
+}
+
+.hb-notebook-raw {
+ @apply rounded-xl border border-dashed border-zinc-300/80 bg-zinc-50 p-4 font-mono text-sm text-zinc-700;
+ @apply dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 overflow-auto;
+}
+
+.hb-notebook-outputs {
+ @apply mt-4 space-y-3 rounded-2xl border border-zinc-100/80 bg-zinc-50/80 p-4;
+ @apply dark:border-zinc-800/60 dark:bg-zinc-900/50;
+}
+
+.hb-notebook-output {
+ @apply overflow-auto rounded-xl border border-transparent bg-white/90 p-3 text-sm leading-relaxed text-zinc-700;
+ @apply dark:bg-zinc-950/50 dark:text-zinc-100;
+ max-height: var(--hb-notebook-output-max-height, 26rem);
+}
+
+.hb-notebook-output--stream {
+ @apply font-mono bg-zinc-900 text-zinc-100;
+}
+
+.hb-notebook-output--error {
+ @apply border-red-200 bg-red-50/90 text-red-700 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-200;
+}
+
+.hb-notebook-output--image {
+ @apply bg-transparent p-0 border-none;
+}
+
+.hb-notebook-output--image img,
+.hb-notebook-output--image svg {
+ @apply h-auto w-full rounded-xl border border-zinc-100/80 bg-white object-contain dark:border-zinc-800/60 dark:bg-zinc-900;
+}
+
+.hb-notebook-output--markdown {
+ @apply bg-transparent p-0 border-none;
+}
+
+.hb-notebook-output pre {
+ @apply m-0;
+}
+
+.hb-notebook-output code {
+ @apply font-mono text-sm;
+}
+
+.hb-notebook-empty {
+ @apply mt-4 rounded-2xl border border-dashed border-zinc-300/70 bg-zinc-50/80 px-4 py-3 text-center text-sm text-zinc-500;
+ @apply dark:border-zinc-700 dark:bg-zinc-900/40 dark:text-zinc-300;
+}
diff --git a/modules/blox-tailwind/assets/css/framework/base.css b/modules/blox-tailwind/assets/css/framework/base.css
index aee9ea67..d666a690 100644
--- a/modules/blox-tailwind/assets/css/framework/base.css
+++ b/modules/blox-tailwind/assets/css/framework/base.css
@@ -89,4 +89,15 @@
background-color: var(--color-primary-400);
color: black;
}
+
+ /* Inline Code Styling */
+ .prose code:not(:where(pre *)) {
+ @apply rounded-md bg-neutral-100 px-1.5 py-0.5 text-[0.875em] font-normal text-primary-700;
+ @apply dark:bg-neutral-700/50 dark:text-primary-300;
+ }
+
+ .prose code:not(:where(pre *))::before,
+ .prose code:not(:where(pre *))::after {
+ content: none !important;
+ }
}
diff --git a/modules/blox-tailwind/assets/css/layout-utilities.css b/modules/blox-tailwind/assets/css/layout-utilities.css
new file mode 100644
index 00000000..23ecae57
--- /dev/null
+++ b/modules/blox-tailwind/assets/css/layout-utilities.css
@@ -0,0 +1,81 @@
+/*
+ Hugo Blox Layout Utilities
+
+ Provides CSS utilities that use the configurable layout tokens:
+ - --hb-radius: Border radius token
+ - --hb-spacing-base: Base spacing unit
+ - --hb-spacing-section: Section padding
+ - --hb-font-size-base: Base font size
+ - --hb-font-size-scale: Modular scale ratio
+*/
+
+/* Border radius utility - use instead of hardcoded rounded-* classes */
+.hb-rounded {
+ border-radius: var(--hb-radius, 0.5rem);
+}
+
+.hb-rounded-sm {
+ border-radius: calc(var(--hb-radius, 0.5rem) * 0.5);
+}
+
+.hb-rounded-lg {
+ border-radius: calc(var(--hb-radius, 0.5rem) * 1.5);
+}
+
+.hb-rounded-xl {
+ border-radius: calc(var(--hb-radius, 0.5rem) * 2);
+}
+
+/* Section spacing */
+.hb-section {
+ padding-top: var(--hb-spacing-section, 4rem);
+ padding-bottom: var(--hb-spacing-section, 4rem);
+}
+
+.hb-section-sm {
+ padding-top: calc(var(--hb-spacing-section, 4rem) * 0.5);
+ padding-bottom: calc(var(--hb-spacing-section, 4rem) * 0.5);
+}
+
+/* Component spacing */
+.hb-gap {
+ gap: var(--hb-spacing-base, 1rem);
+}
+
+.hb-gap-sm {
+ gap: calc(var(--hb-spacing-base, 1rem) * 0.5);
+}
+
+.hb-gap-lg {
+ gap: calc(var(--hb-spacing-base, 1rem) * 1.5);
+}
+
+/* Padding utilities */
+.hb-p {
+ padding: var(--hb-spacing-base, 1rem);
+}
+
+.hb-px {
+ padding-left: var(--hb-spacing-base, 1rem);
+ padding-right: var(--hb-spacing-base, 1rem);
+}
+
+.hb-py {
+ padding-top: var(--hb-spacing-base, 1rem);
+ padding-bottom: var(--hb-spacing-base, 1rem);
+}
+
+/* Margin utilities */
+.hb-m {
+ margin: var(--hb-spacing-base, 1rem);
+}
+
+.hb-mx {
+ margin-left: var(--hb-spacing-base, 1rem);
+ margin-right: var(--hb-spacing-base, 1rem);
+}
+
+.hb-my {
+ margin-top: var(--hb-spacing-base, 1rem);
+ margin-bottom: var(--hb-spacing-base, 1rem);
+}
diff --git a/modules/blox-tailwind/assets/css/main.css b/modules/blox-tailwind/assets/css/main.css
index 9e917a5e..24cac2a9 100644
--- a/modules/blox-tailwind/assets/css/main.css
+++ b/modules/blox-tailwind/assets/css/main.css
@@ -26,6 +26,9 @@
/* Hugo Blox theme system (color utilities) */
@import "color-utilities.css";
+/* Hugo Blox layout utilities (radius, spacing tokens) */
+@import "layout-utilities.css";
+
/* Hugo Blox framework components */
@import "framework/components.css";
diff --git a/modules/blox-tailwind/data/themes/americano.yaml b/modules/blox-tailwind/data/themes/americano.yaml
deleted file mode 100644
index a24333fd..00000000
--- a/modules/blox-tailwind/data/themes/americano.yaml
+++ /dev/null
@@ -1,29 +0,0 @@
-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/coffee.yaml b/modules/blox-tailwind/data/themes/coffee.yaml
new file mode 100644
index 00000000..f2f8b26e
--- /dev/null
+++ b/modules/blox-tailwind/data/themes/coffee.yaml
@@ -0,0 +1,45 @@
+# HugoBlox Theme Pack
+# https://docs.hugoblox.com
+
+hugoblox:
+ meta:
+ format: "hugoblox-theme@1"
+ name: "Coffee"
+ vendor: "hugoblox"
+ version: "1.0.0"
+ license: "MIT"
+ description: "Warm latte light mode, deep americano dark mode"
+
+ type: "dual"
+
+ light:
+ # "Latte" - Warm, creamy, 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: "#f5efe9" # Visible header band (same as footer)
+ foreground: "#3b2313"
+ footer:
+ background: "#f5efe9" # Slightly darker latte foam
+ foreground: "#5c4033"
+
+ dark:
+ # "Americano" - Deep, dark, intense
+ colors:
+ primary: "#d49255" # Warm Orange/Brown crema
+ secondary: "#395260" # Cool Slate Blue
+ neutral: "#2b262b" # Deep Espresso (Dark Neutral)
+ ui:
+ background: "#2b262b" # Deep Espresso
+ foreground: "#e0cab6" # Crema
+ header:
+ background: "#2b262b"
+ foreground: "#e0cab6"
+ footer:
+ background: "#231f23" # Darker roast
+ foreground: "#9ca3af"
diff --git a/modules/blox-tailwind/data/themes/contrast.yaml b/modules/blox-tailwind/data/themes/contrast.yaml
index e11dcc27..e5b1805e 100644
--- a/modules/blox-tailwind/data/themes/contrast.yaml
+++ b/modules/blox-tailwind/data/themes/contrast.yaml
@@ -1,30 +1,41 @@
-name: "contrast"
-type: "dual"
+# HugoBlox Theme Pack
+# https://docs.hugoblox.com
-light:
- colors:
- primary: "indigo"
- secondary: "blue"
- ui:
- background: "#ffffff"
- foreground: "#111827"
- header:
- foreground: "#ffffff"
+hugoblox:
+ meta:
+ format: "hugoblox-theme@1"
+ name: "Contrast"
+ vendor: "hugoblox"
+ version: "1.0.0"
+ license: "MIT"
+ description: "High contrast with inverted header"
+
+ 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"
- 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"
+ 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
index 725d8d00..225bf01d 100644
--- a/modules/blox-tailwind/data/themes/cupcake.yaml
+++ b/modules/blox-tailwind/data/themes/cupcake.yaml
@@ -1,29 +1,44 @@
-name: "cupcake"
-type: "light"
+# HugoBlox Theme Pack
+# https://docs.hugoblox.com
-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"
+hugoblox:
+ meta:
+ format: "hugoblox-theme@1"
+ name: "Cupcake"
+ vendor: "hugoblox"
+ version: "1.0.0"
+ license: "MIT"
+ description: "Sweet pastry pinks and berry accents"
-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"
+ type: "dual"
+
+ light:
+ colors:
+ primary: "#e779c1" # Frosting Pink
+ secondary: "#d946ef" # Deep Purple/Fuchsia
+ neutral: "#5c4033" # Chocolate/Dark Brown
+ ui:
+ background: "#faf7f5" # Vanilla/Sugar
+ foreground: "#7d1f39" # Berry Jam
+ header:
+ background: "#fff0f5" # LavenderBlush - slight pink tint
+ foreground: "#7d1f39"
+ footer:
+ background: "#f3e8e8" # Light Pink Foam
+ foreground: "#7d1f39"
+
+ dark:
+ # "Dark Berry" - Rich, vibrant, fruity
+ colors:
+ primary: "#f472b6" # Bright Icing Pink (Pink-400)
+ secondary: "#c084fc" # Purple Sprinkle (Purple-400)
+ neutral: "#831843" # Deep Berry (Pink-900)
+ ui:
+ background: "#4c0519" # Deep Red Velvet / Rose-950
+ foreground: "#fce7f3" # Sweet Cream / Pink-100
+ header:
+ background: "#831843" # Vibrant Berry Header / Pink-900
+ foreground: "#fce7f3"
+ footer:
+ background: "#881337" # Rose-900
+ foreground: "#fbcfe8" # Pink-200
diff --git a/modules/blox-tailwind/data/themes/default.yaml b/modules/blox-tailwind/data/themes/default.yaml
index 30df3451..38fbfa86 100644
--- a/modules/blox-tailwind/data/themes/default.yaml
+++ b/modules/blox-tailwind/data/themes/default.yaml
@@ -1,30 +1,40 @@
-name: "default"
-type: "dual"
+# HugoBlox Theme Pack
+# https://docs.hugoblox.com
-light:
- colors:
- primary: "indigo"
- secondary: "blue"
- ui:
- background: "#ffffff"
- foreground: "#111827"
- header:
+hugoblox:
+ meta:
+ format: "hugoblox-theme@1"
+ name: "Default"
+ vendor: "hugoblox"
+ version: "1.0.0"
+ license: "MIT"
+
+ type: "dual"
+
+ light:
+ colors:
+ primary: "indigo"
+ secondary: "blue"
+ ui:
background: "#ffffff"
- foreground: "#0f172a"
- footer:
- background: "#f3f4f6"
- foreground: "#0f172a"
+ foreground: "#111827"
+ header:
+ background: "#f1f5f9" # Slate-100 for definition against white content
+ foreground: "#0f172a"
+ footer:
+ background: "#f3f4f6"
+ foreground: "#0f172a"
-dark:
- colors:
- primary: "blue"
- secondary: "teal"
- ui:
- background: "#0f172a"
- foreground: "#f8fafc"
- header:
+ dark:
+ colors:
+ primary: "blue"
+ secondary: "teal"
+ ui:
background: "#0f172a"
foreground: "#f8fafc"
- footer:
- background: "#111827"
- foreground: "#e5e7eb"
+ 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
index d0af84ed..71a892b6 100644
--- a/modules/blox-tailwind/data/themes/dracula.yaml
+++ b/modules/blox-tailwind/data/themes/dracula.yaml
@@ -1,29 +1,45 @@
-name: "dracula"
-type: "dark"
+# HugoBlox Theme Pack
+# https://docs.hugoblox.com
-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"
+hugoblox:
+ meta:
+ format: "hugoblox-theme@1"
+ name: "Dracula"
+ vendor: "hugoblox"
+ version: "1.0.0"
+ license: "MIT"
+ description: "The iconic dark theme with a light Buffy variant"
-# 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"
+ type: "dual"
+
+ dark:
+ # Official Dracula Dark
+ colors:
+ primary: "#ff79c6" # Pink
+ secondary: "#bd93f9" # Purple
+ neutral: "#6272a4" # Comment
+ ui:
+ background: "#282a36" # Background
+ foreground: "#f8f8f2" # Foreground
+ header:
+ background: "#282a36"
+ foreground: "#f8f8f2"
+ footer:
+ background: "#21222c" # Selection
+ foreground: "#f8f8f2"
+
+ light:
+ # Dracula Light (Buffy inspired) - Inverted aesthetic
+ colors:
+ primary: "#d03282" # Darker Pink for contrast
+ secondary: "#9259d6" # Darker Purple for contrast
+ neutral: "#44475a" # Current Line (Dark Gray)
+ ui:
+ background: "#f8f8f2" # Light Gray
+ foreground: "#282a36" # Dark Gray
+ header:
+ background: "#e4e4db" # Slightly darker band
+ foreground: "#282a36"
+ footer:
+ background: "#e4e4db"
+ foreground: "#282a36"
diff --git a/modules/blox-tailwind/data/themes/latte.yaml b/modules/blox-tailwind/data/themes/latte.yaml
deleted file mode 100644
index ff8c9c8f..00000000
--- a/modules/blox-tailwind/data/themes/latte.yaml
+++ /dev/null
@@ -1,32 +0,0 @@
-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
index 16f7d3ff..3a27e524 100644
--- a/modules/blox-tailwind/data/themes/marine.yaml
+++ b/modules/blox-tailwind/data/themes/marine.yaml
@@ -1,29 +1,40 @@
-name: "marine"
-type: "dark"
+# HugoBlox Theme Pack
+# https://docs.hugoblox.com
-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"
+hugoblox:
+ meta:
+ format: "hugoblox-theme@1"
+ name: "Marine"
+ vendor: "hugoblox"
+ version: "1.0.0"
+ license: "MIT"
+ description: "Deep ocean blues with teal accents"
-light:
- # A "Beach Day" pairing
- colors:
- primary: "#2dd4bf"
- secondary: "#a855f7"
- ui:
- background: "#f0f9ff"
- foreground: "#0c4a6e"
- header:
- background: "#ffffff"
+ type: "dual"
+
+ dark:
+ colors:
+ primary: "#2dd4bf" # Teal/Cyan
+ secondary: "#a855f7" # Purple
+ neutral: "#1e3a8a" # Deep Blue
+ ui:
+ background: "#1e3a8a" # Deep Ocean Blue
+ foreground: "#e0f2fe" # Light Sky
+ 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: "#e0f2fe" # Sky-100 for visible header bar
+ foreground: "#0c4a6e"
diff --git a/modules/blox-tailwind/data/themes/matcha.yaml b/modules/blox-tailwind/data/themes/matcha.yaml
new file mode 100644
index 00000000..770cf54c
--- /dev/null
+++ b/modules/blox-tailwind/data/themes/matcha.yaml
@@ -0,0 +1,45 @@
+# HugoBlox Theme Pack
+# https://docs.hugoblox.com
+
+hugoblox:
+ meta:
+ format: "hugoblox-theme@1"
+ name: "Matcha"
+ vendor: "hugoblox"
+ version: "1.0.0"
+ license: "MIT"
+ description: "Fresh, organic greens inspired by Japanese tea"
+
+ type: "dual"
+
+ light:
+ # "Matcha Latte" - Creamy, fresh, organic
+ colors:
+ primary: "#65a30d" # Fresh Tea Leaf (Lime-600)
+ secondary: "#15803d" # Deep Herbal Green (Green-700)
+ neutral: "#3f6212" # Olive text (Lime-800)
+ ui:
+ background: "#f7fee7" # Very pale lime cream (Lime-50)
+ foreground: "#1a2e05" # Dark moss text
+ header:
+ background: "#ecfccb" # Light Matcha Foam (Lime-100)
+ foreground: "#365314" # Deep olive
+ footer:
+ background: "#d9f99d" # Stronger tea green (Lime-200)
+ foreground: "#14532d"
+
+ dark:
+ # "Ceremonial Grade" - Deep, rich, meditative
+ colors:
+ primary: "#a3e635" # Vibrant Matcha Powder (Lime-400)
+ secondary: "#4ade80" # Soft green light (Green-400)
+ neutral: "#1a2f23" # Deep Forest Background
+ ui:
+ background: "#14281d" # Deep Nori Green
+ foreground: "#ecfccb" # Pale tea green text
+ header:
+ background: "#0f1f16" # Darker leaf
+ foreground: "#d9f99d"
+ footer:
+ background: "#052e16" # Deepest green (Green-950)
+ foreground: "#86efac"
diff --git a/modules/blox-tailwind/data/themes/minimal.yaml b/modules/blox-tailwind/data/themes/minimal.yaml
new file mode 100644
index 00000000..b7c944c0
--- /dev/null
+++ b/modules/blox-tailwind/data/themes/minimal.yaml
@@ -0,0 +1,45 @@
+# HugoBlox Theme Pack
+# https://docs.hugoblox.com
+
+hugoblox:
+ meta:
+ format: "hugoblox-theme@1"
+ name: "Minimal"
+ vendor: "hugoblox"
+ version: "1.0.0"
+ license: "MIT"
+ description: "Clean, GitHub-inspired design"
+
+ type: "dual"
+
+ light:
+ # Inspired by GitHub Light
+ colors:
+ primary: "#0969da" # GitHub Blue
+ secondary: "#1f883d" # GitHub Green
+ neutral: "#24292f" # GitHub Dark Gray (Text)
+ ui:
+ background: "#ffffff"
+ foreground: "#24292f"
+ header:
+ background: "#f6f8fa" # GitHub Header Gray
+ foreground: "#24292f"
+ footer:
+ background: "#ffffff" # Clean
+ foreground: "#57606a" # Muted text
+
+ dark:
+ # Inspired by GitHub Dark
+ colors:
+ primary: "#58a6ff" # GitHub Blue (Dark Mode)
+ secondary: "#238636" # GitHub Green (Dark Mode)
+ neutral: "#c9d1d9" # GitHub Light Gray (Text)
+ ui:
+ background: "#0d1117" # GitHub Dimmed BG
+ foreground: "#c9d1d9"
+ header:
+ background: "#161b22" # GitHub Dark Header
+ foreground: "#f0f6fc"
+ footer:
+ background: "#0d1117"
+ foreground: "#8b949e" # Muted text
diff --git a/modules/blox-tailwind/data/themes/retro.yaml b/modules/blox-tailwind/data/themes/retro.yaml
index 60d6cdf2..2f598c1d 100644
--- a/modules/blox-tailwind/data/themes/retro.yaml
+++ b/modules/blox-tailwind/data/themes/retro.yaml
@@ -1,29 +1,45 @@
-name: "retro"
-type: "light"
+# HugoBlox Theme Pack
+# https://docs.hugoblox.com
-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"
+hugoblox:
+ meta:
+ format: "hugoblox-theme@1"
+ name: "Retro"
+ vendor: "hugoblox"
+ version: "1.0.0"
+ license: "MIT"
+ description: "Vintage paper meets midnight arcade"
-dark:
- # A dark "Polaroid" variant
- colors:
- primary: "#e38c89"
- secondary: "#b4e9d6"
- ui:
- background: "#292524" # Dark Stone
- foreground: "#e7e5e4" # Warm Gray
- header:
- background: "#1c1917"
- foreground: "#e7e5e4"
+ type: "dual"
+
+ light:
+ # "Vintage Paper" - Sepia, warm, nostalgic
+ colors:
+ primary: "#e38c89" # Desaturated Red/Pink
+ secondary: "#b4e9d6" # Mint Green
+ neutral: "#79726b" # Warm Stone
+ ui:
+ background: "#ebe6d9" # Vintage Paper / Beige
+ foreground: "#7d5e3c" # Sepia/Brown
+ header:
+ background: "#e3dbcd" # Slightly darker paper
+ foreground: "#7d5e3c"
+ footer:
+ background: "#dcd3c3"
+ foreground: "#5c4033"
+
+ dark:
+ # "Midnight Arcade" - Deep petrol, mustard, and neon accents
+ colors:
+ primary: "#fbbf24" # Mustard Gold (Amber-400)
+ secondary: "#f472b6" # Retro Pink (Pink-400)
+ neutral: "#134e4a" # Dark Teal (Teal-900)
+ ui:
+ background: "#042f2e" # Deep Petrol / Teal-950
+ foreground: "#ccfbf1" # Pale Mint / Teal-50
+ header:
+ background: "#115e59" # Lighter Petrol / Teal-800
+ foreground: "#ccfbf1"
+ footer:
+ background: "#0f393b" # Muted Teal
+ foreground: "#99f6e4" # Teal-200
diff --git a/modules/blox-tailwind/data/themes/solar.yaml b/modules/blox-tailwind/data/themes/solar.yaml
new file mode 100644
index 00000000..47e0625f
--- /dev/null
+++ b/modules/blox-tailwind/data/themes/solar.yaml
@@ -0,0 +1,45 @@
+# HugoBlox Theme Pack
+# https://docs.hugoblox.com
+
+hugoblox:
+ meta:
+ format: "hugoblox-theme@1"
+ name: "Solar"
+ vendor: "hugoblox"
+ version: "1.0.0"
+ license: "MIT"
+ description: "Solarized-inspired, easy on the eyes"
+
+ type: "dual"
+
+ light:
+ # Inspired by Solarized Light - Low contrast, warm, easy on the eyes
+ colors:
+ primary: "#b58900" # Yellow (Solarized)
+ secondary: "#2aa198" # Cyan (Solarized)
+ neutral: "#657b83" # Base00 (Primary Content)
+ ui:
+ background: "#fdf6e3" # Base3 (Creamy Background)
+ foreground: "#586e75" # Base01 (Optional darker text for contrast)
+ header:
+ background: "#eee8d5" # Base2 (Slightly darker highlights)
+ foreground: "#586e75"
+ footer:
+ background: "#eee8d5"
+ foreground: "#657b83"
+
+ dark:
+ # Inspired by Solarized Dark - Deep, cool, high precision
+ colors:
+ primary: "#268bd2" # Blue (Solarized)
+ secondary: "#859900" # Green (Solarized)
+ neutral: "#839496" # Base0 (Primary Content)
+ ui:
+ background: "#002b36" # Base03 (Deep Teal Background)
+ foreground: "#93a1a1" # Base1 (Light Content)
+ header:
+ background: "#073642" # Base02 (Lighter Teal Highlights)
+ foreground: "#93a1a1"
+ footer:
+ background: "#073642"
+ foreground: "#839496"
diff --git a/modules/blox-tailwind/data/themes/synthwave.yaml b/modules/blox-tailwind/data/themes/synthwave.yaml
index 670588bc..92783501 100644
--- a/modules/blox-tailwind/data/themes/synthwave.yaml
+++ b/modules/blox-tailwind/data/themes/synthwave.yaml
@@ -1,29 +1,44 @@
-name: "synthwave"
-type: "dark"
+# HugoBlox Theme Pack
+# https://docs.hugoblox.com
-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"
+hugoblox:
+ meta:
+ format: "hugoblox-theme@1"
+ name: "Synthwave"
+ vendor: "hugoblox"
+ version: "1.0.0"
+ license: "MIT"
+ description: "Neon-drenched 80s retrowave aesthetic"
-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"
+ type: "dual"
+
+ dark:
+ colors:
+ primary: "#e779c1" # Neon Pink
+ secondary: "#58c7f3" # Cyan
+ neutral: "#2a2e37" # Dark Blue-Gray
+ ui:
+ background: "#1a103d" # Deep Purple
+ foreground: "#f9f7fd" # Light Lavender
+ header:
+ background: "rgba(26, 16, 61, 0.9)" # Deep Purple
+ foreground: "#f9f7fd"
+ footer:
+ background: "#110a28" # Darker Deep Purple
+ foreground: "#b8b2cc"
+
+ light:
+ # "Vaporwave" - A bright, pastel-neon day dream
+ colors:
+ primary: "#d946ef" # Electric Fuchsia
+ secondary: "#06b6d4" # Neon Cyan
+ neutral: "#701a75" # Deep Magenta (for text utilities)
+ ui:
+ background: "#fff0f5" # Lavender Blush
+ foreground: "#2e1065" # Deep Violet Ink
+ header:
+ background: "#fae8ff" # Light Fuchsia Mist
+ foreground: "#86198f" # Vibrant Purple
+ footer:
+ background: "#f0abfc" # Sunset Pink
+ foreground: "#2e1065" # Dark Violet
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 e60b55a1..f68b9403 100644
--- a/modules/blox-tailwind/layouts/_partials/components/headers/navbar-simple.html
+++ b/modules/blox-tailwind/layouts/_partials/components/headers/navbar-simple.html
@@ -72,8 +72,8 @@
>
{{ end }}
- {{ $show_theme_chooser := site.Params.header.navbar.show_theme_chooser | default true }}
- {{ if $show_theme_chooser }}
+ {{ $show_mode_toggle := site.Params.header.navbar.show_mode_toggle | default site.Params.header.navbar.show_theme_chooser | default true }}
+ {{ if $show_mode_toggle }}
+