feat: add more color themes

also
- rename theme_default to mode
- port feedback comp

modules/blox-tailwind/assets/css/main.css

@@ -1,3 +1,31 @@
+:root {
+  /* TW Neutral */
+  --color-neutral-50: 250 250 250;
+  --color-neutral-100: 245 245 245;
+  --color-neutral-200: 229 229 229;
+  --color-neutral-300: 212 212 212;
+  --color-neutral-400: 163 163 163;
+  --color-neutral-500: 115 115 115;
+  --color-neutral-600: 82 82 82;
+  --color-neutral-700: 64 64 64;
+  --color-neutral-800: 38 38 38;
+  --color-neutral-900: 23 23 23;
+  --color-neutral-950: 10 10 10;
+
+  /* TW Zinc */
+  --color-secondary-50: 250 250 250;
+  --color-secondary-100: 244 244 245;
+  --color-secondary-200: 228 228 231;
+  --color-secondary-300: 212 212 216;
+  --color-secondary-400: 161 161 170;
+  --color-secondary-500: 113 113 122;
+  --color-secondary-600: 82 82 91;
+  --color-secondary-700: 63 63 70;
+  --color-secondary-800: 39 39 42;
+  --color-secondary-900: 24 24 27;
+  --color-secondary-950: 9 9 11;
+}
+
 .hbb-section {
   @apply mb-10 last:mb-0;
 }

modules/blox-tailwind/assets/css/styles.css

@@ -5,4 +5,3 @@
 @import "main.css";
 @import "./components/all.css";
 @import "./blox/all.css";
-@import "themes/default.css";

modules/blox-tailwind/assets/css/themes/blue.css

@@ -0,0 +1,27 @@
+/* Hugo Blox color theme: BLUE */
+:root {
+  /* TW Blue Palette */
+  --color-primary-50: 239 246 255;
+  --color-primary-100: 219 234 254;
+  --color-primary-200: 191 219 254;
+  --color-primary-300: 147 197 253;
+  --color-primary-400: 96 165 250;
+  --color-primary-500: 59 130 246;
+  --color-primary-600: 37 99 235;
+  --color-primary-700: 29 78 216;
+  --color-primary-800: 30 64 175;
+  --color-primary-900: 30 58 138;
+  --color-primary-950: 23 37 84;
+  /* TW Cyan Palette */
+  --color-secondary-50: 236 254 255;
+  --color-secondary-100: 207 250 254;
+  --color-secondary-200: 165 243 252;
+  --color-secondary-300: 103 232 249;
+  --color-secondary-400: 34 211 238;
+  --color-secondary-500: 6 182 212;
+  --color-secondary-600: 8 145 178;
+  --color-secondary-700: 14 116 144;
+  --color-secondary-800: 21 94 117;
+  --color-secondary-900: 22 78 99;
+  --color-secondary-950: 8 51 68;
+}

modules/blox-tailwind/assets/css/themes/cyan.css

@@ -0,0 +1,14 @@
+/* Hugo Blox color theme: CYAN */
+:root {
+  --color-primary-50: 236 254 255;
+  --color-primary-100: 207 250 254;
+  --color-primary-200: 165 243 252;
+  --color-primary-300: 103 232 249;
+  --color-primary-400: 34 211 238;
+  --color-primary-500: 6 182 212;
+  --color-primary-600: 8 145 178;
+  --color-primary-700: 14 116 144;
+  --color-primary-800: 21 94 117;
+  --color-primary-900: 22 78 99;
+  --color-primary-950: 8 51 68;
+}

modules/blox-tailwind/assets/css/themes/green.css

@@ -0,0 +1,14 @@
+/* Hugo Blox color theme: GREEN */
+:root {
+  --color-primary-50: 240 253 244;
+  --color-primary-100: 220 252 231;
+  --color-primary-200: 187 247 208;
+  --color-primary-300: 134 239 172;
+  --color-primary-400: 74 222 128;
+  --color-primary-500: 34 197 94;
+  --color-primary-600: 22 163 74;
+  --color-primary-700: 21 128 61;
+  --color-primary-800: 22 101 52;
+  --color-primary-900: 20 83 45;
+  --color-primary-950: 5 46 22;
+}

modules/blox-tailwind/assets/css/themes/indigo.css

@@ -0,0 +1,14 @@
+/* Hugo Blox color theme: INDIGO */
+:root {
+  --color-primary-50: 238 242 255;
+  --color-primary-100: 224 231 255;
+  --color-primary-200: 199 210 254;
+  --color-primary-300: 165 180 252;
+  --color-primary-400: 129 140 248;
+  --color-primary-500: 99 102 241;
+  --color-primary-600: 79 70 229;
+  --color-primary-700: 67 56 202;
+  --color-primary-800: 55 48 163;
+  --color-primary-900: 49 46 129;
+  --color-primary-950: 30 27 75;
+}

modules/blox-tailwind/assets/css/themes/purple.css

@@ -0,0 +1,14 @@
+/* Hugo Blox color theme: PURPLE */
+:root {
+  --color-primary-50: 250 245 255;
+  --color-primary-100: 243 232 255;
+  --color-primary-200: 233 213 255;
+  --color-primary-300: 216 180 254;
+  --color-primary-400: 192 132 252;
+  --color-primary-500: 168 85 247;
+  --color-primary-600: 147 51 234;
+  --color-primary-700: 126 34 206;
+  --color-primary-800: 107 33 168;
+  --color-primary-900: 88 28 135;
+  --color-primary-950: 59 7 100;
+}

modules/blox-tailwind/assets/css/themes/red.css

@@ -0,0 +1,14 @@
+/* Hugo Blox color theme: RED */
+:root {
+  --color-primary-50: 254 242 242;
+  --color-primary-100: 254 226 226;
+  --color-primary-200: 254 202 202;
+  --color-primary-300: 252 165 165;
+  --color-primary-400: 248 113 113;
+  --color-primary-500: 239 68 68;
+  --color-primary-600: 220 38 38;
+  --color-primary-700: 185 28 28;
+  --color-primary-800: 153 27 27;
+  --color-primary-900: 127 29 29;
+  --color-primary-950: 69 10 10;
+}

modules/blox-tailwind/assets/css/themes/rose.css

@@ -0,0 +1,14 @@
+/* Hugo Blox color theme: ROSE */
+:root {
+  --color-primary-50: 255 241 242;
+  --color-primary-100: 255 228 230;
+  --color-primary-200: 254 205 211;
+  --color-primary-300: 253 164 175;
+  --color-primary-400: 251 113 133;
+  --color-primary-500: 244 63 94;
+  --color-primary-600: 225 29 72;
+  --color-primary-700: 190 18 60;
+  --color-primary-800: 159 18 57;
+  --color-primary-900: 136 19 55;
+  --color-primary-950: 76 5 25;
+}

modules/blox-tailwind/assets/css/themes/sky.css

@@ -0,0 +1,14 @@
+/* Hugo Blox color theme: SKY */
+:root {
+  --color-primary-50: 240 249 255;
+  --color-primary-100: 224 242 254;
+  --color-primary-200: 186 230 253;
+  --color-primary-300: 125 211 252;
+  --color-primary-400: 56 189 248;
+  --color-primary-500: 14 165 233;
+  --color-primary-600: 2 132 199;
+  --color-primary-700: 3 105 161;
+  --color-primary-800: 7 89 133;
+  --color-primary-900: 12 74 110;
+  --color-primary-950: 8 47 73;
+}

modules/blox-tailwind/assets/css/themes/teal.css

@@ -0,0 +1,14 @@
+/* Hugo Blox color theme: TEAL */
+:root {
+  --color-primary-50: 240 253 250;
+  --color-primary-100: 204 251 241;
+  --color-primary-200: 153 246 228;
+  --color-primary-300: 94 234 212;
+  --color-primary-400: 45 212 191;
+  --color-primary-500: 20 184 166;
+  --color-primary-600: 13 148 136;
+  --color-primary-700: 15 118 110;
+  --color-primary-800: 17 94 89;
+  --color-primary-900: 19 78 74;
+  --color-primary-950: 4 47 46;
+}

modules/blox-tailwind/assets/css/themes/zinc.css

@@ -0,0 +1,14 @@
+/* Hugo Blox color theme: ZINC */
+:root {
+  --color-primary-50: 250 250 250;
+  --color-primary-100: 244 244 245;
+  --color-primary-200: 228 228 231;
+  --color-primary-300: 212 212 216;
+  --color-primary-400: 161 161 170;
+  --color-primary-500: 113 113 122;
+  --color-primary-600: 82 82 91;
+  --color-primary-700: 63 63 70;
+  --color-primary-800: 39 39 42;
+  --color-primary-900: 24 24 27;
+  --color-primary-950: 9 9 11;
+}

modules/blox-tailwind/layouts/_default/baseof.html

@@ -3,7 +3,7 @@
 {{ printf "<!-- Last Published: %s -->" (now | time.Format ":date_long") | safeHTML }}
 {{- $language_code := site.LanguageCode | default "en-us" -}}
 <html lang="{{$language_code}}" {{ if in site.Data.i18n.rtl.rtl $language_code }}dir="rtl"{{else}}dir="ltr"{{end}}
-      data-wc-theme-default="{{ site.Params.appearance.theme_default | default "system" }}">
+      data-wc-theme-default="{{ (lower site.Params.appearance.mode) | default "system" }}">
   {{ partial "site_head" . }}
   <body class="dark:bg-gray-800 dark:text-white-800 page-wrapper">
     <div id="page-bg"></div>

modules/blox-tailwind/layouts/_default/terms.html

@@ -18,7 +18,7 @@ <h1 class="lg:text-6xl !mb-4">{{ .Title }}</h1>
 
         <a href="{{ .RelPermalink }}" class="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
           {{ .Name }}
-          <span class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">
+          <span class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-primary-800 bg-primary-200 rounded-full">
             {{ $count }}
           </span>
         </a>

modules/blox-tailwind/layouts/partials/components/feedback.html

@@ -0,0 +1,36 @@
+{{/* TODO: port JS & response text from Bootstrap module. Re-integrate with GA plus Fathom/Plausible */}}
+{{/* $ga := site.Params.marketing.analytics.google_analytics | default site.GoogleAnalytics | default "" */}}
+{{ $show_feedback := .Params.feedback | default true }}
+
+{{ if hugo.IsProduction | and $show_feedback }}{{/*  | and $ga */}}
+<div class="
+          mt-3
+          bg-[#EAEEF6]
+          dark:bg-[#1F2938] dark:text-[#e2e8f0]
+          shadow-sm
+          pt-5
+          pb-5
+          flex
+          justify-center
+          items-center
+          flex-col
+          rounded-md
+        ">
+  <div class="contents">
+    <div class="opacity-60">
+      {{ i18n "feedback_widget_question" | default "Was this page helpful?" }}
+    </div>
+    <div class="flex items-center justify-around mt-3">
+      <div class="px-3 py-2 mr-1 text-2xl transition transform rounded-md cursor-pointer hover:opacity-100 hover:bg-gray-200 dark:hover:bg-gray-700">
+              😞
+      </div>
+      <div class="px-3 py-2 mr-1 text-2xl transition transform rounded-md cursor-pointer hover:opacity-100 hover:bg-gray-200 dark:hover:bg-gray-700">
+              😐
+      </div>
+      <div class="px-3 py-2 mr-1 text-2xl transition transform rounded-md cursor-pointer hover:opacity-100 hover:bg-gray-200 dark:hover:bg-gray-700">
+              🤩
+      </div>
+    </div>
+  </div>
+</div>
+{{ end }}

modules/blox-tailwind/layouts/partials/site_head.html

@@ -45,6 +45,16 @@
   {{ end }}
   <link rel="alternate" hreflang="{{ site.LanguageCode | default "en-us" }}" href="{{ .Permalink }}" />
 
+  {{/* Hugo Blox Color Theme Initialization */}}
+  {{ $theme_name := (lower site.Params.appearance.color) | default "blue" }}
+  {{ $theme_path := printf "css/themes/%s.css" $theme_name }}
+  {{ if not (fileExists (printf "assets/%s" $theme_path)) }}
+    {{ errorf "The specified color theme `%s.css` was not found in `assets/css/themes/`. Either install your custom color theme in the folder or set the `color` theme value in `params.yaml` to an existing theme such as `blue`." }}
+  {{ else }}
+    {{ $theme_css := resources.Get $theme_path | minify }}
+    <link rel="stylesheet" href="{{ $theme_css.RelPermalink }}" />
+  {{ end }}
+
   {{/* Style */}}
   {{ if fileExists "assets/dist/wc.css" }}
     {{ $styles := resources.Get "dist/wc.css" }}

modules/blox-tailwind/layouts/partials/tags.html

@@ -2,7 +2,7 @@
 {{ if .Param $taxonomy }}
 <div class="flex justify-center">
   {{ range $index, $value := (.GetTerms $taxonomy) }}
-  <a class="no-underline bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 lg:px-5 lg:py-2 rounded dark:bg-blue-900 dark:text-blue-300" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+  <a class="no-underline bg-primary-100 text-primary-800 text-xs font-medium mr-2 px-2.5 py-0.5 lg:px-5 lg:py-2 rounded dark:bg-primary-900 dark:text-primary-300" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
   {{ end }}
 </div>
 {{ end }}

modules/blox-tailwind/tailwind.config.js

@@ -13,41 +13,41 @@ module.exports = {
     extend: {
       colors: {
         neutral: {
-          DEFAULT: "rgba(var(--color-neutral), <alpha-value>)",
-          50: "rgba(var(--color-neutral-50), <alpha-value>)",
-          100: "rgba(var(--color-neutral-100), <alpha-value>)",
-          200: "rgba(var(--color-neutral-200), <alpha-value>)",
-          300: "rgba(var(--color-neutral-300), <alpha-value>)",
-          400: "rgba(var(--color-neutral-400), <alpha-value>)",
-          500: "rgba(var(--color-neutral-500), <alpha-value>)",
-          600: "rgba(var(--color-neutral-600), <alpha-value>)",
-          700: "rgba(var(--color-neutral-700), <alpha-value>)",
-          800: "rgba(var(--color-neutral-800), <alpha-value>)",
-          900: "rgba(var(--color-neutral-900), <alpha-value>)",
+          DEFAULT: "rgb(var(--color-neutral) / <alpha-value>)",
+          50: "rgb(var(--color-neutral-50) / <alpha-value>)",
+          100: "rgb(var(--color-neutral-100) / <alpha-value>)",
+          200: "rgb(var(--color-neutral-200) / <alpha-value>)",
+          300: "rgb(var(--color-neutral-300) / <alpha-value>)",
+          400: "rgb(var(--color-neutral-400) / <alpha-value>)",
+          500: "rgb(var(--color-neutral-500) / <alpha-value>)",
+          600: "rgb(var(--color-neutral-600) / <alpha-value>)",
+          700: "rgb(var(--color-neutral-700) / <alpha-value>)",
+          800: "rgb(var(--color-neutral-800) / <alpha-value>)",
+          900: "rgb(var(--color-neutral-900) / <alpha-value>)",
         },
         primary: {
-          50: "rgba(var(--color-primary-50), <alpha-value>)",
-          100: "rgba(var(--color-primary-100), <alpha-value>)",
-          200: "rgba(var(--color-primary-200), <alpha-value>)",
-          300: "rgba(var(--color-primary-300), <alpha-value>)",
-          400: "rgba(var(--color-primary-400), <alpha-value>)",
-          500: "rgba(var(--color-primary-500), <alpha-value>)",
-          600: "rgba(var(--color-primary-600), <alpha-value>)",
-          700: "rgba(var(--color-primary-700), <alpha-value>)",
-          800: "rgba(var(--color-primary-800), <alpha-value>)",
-          900: "rgba(var(--color-primary-900), <alpha-value>)",
+          50: "rgb(var(--color-primary-50) / <alpha-value>)",
+          100: "rgb(var(--color-primary-100) / <alpha-value>)",
+          200: "rgb(var(--color-primary-200) / <alpha-value>)",
+          300: "rgb(var(--color-primary-300) / <alpha-value>)",
+          400: "rgb(var(--color-primary-400) / <alpha-value>)",
+          500: "rgb(var(--color-primary-500) / <alpha-value>)",
+          600: "rgb(var(--color-primary-600) / <alpha-value>)",
+          700: "rgb(var(--color-primary-700) / <alpha-value>)",
+          800: "rgb(var(--color-primary-800) / <alpha-value>)",
+          900: "rgb(var(--color-primary-900) / <alpha-value>)",
         },
         secondary: {
-          50: "rgba(var(--color-secondary-50), <alpha-value>)",
-          100: "rgba(var(--color-secondary-100), <alpha-value>)",
-          200: "rgba(var(--color-secondary-200), <alpha-value>)",
-          300: "rgba(var(--color-secondary-300), <alpha-value>)",
-          400: "rgba(var(--color-secondary-400), <alpha-value>)",
-          500: "rgba(var(--color-secondary-500), <alpha-value>)",
-          600: "rgba(var(--color-secondary-600), <alpha-value>)",
-          700: "rgba(var(--color-secondary-700), <alpha-value>)",
-          800: "rgba(var(--color-secondary-800), <alpha-value>)",
-          900: "rgba(var(--color-secondary-900), <alpha-value>)",
+          50: "rgb(var(--color-secondary-50) / <alpha-value>)",
+          100: "rgb(var(--color-secondary-100) / <alpha-value>)",
+          200: "rgb(var(--color-secondary-200) / <alpha-value>)",
+          300: "rgb(var(--color-secondary-300) / <alpha-value>)",
+          400: "rgb(var(--color-secondary-400) / <alpha-value>)",
+          500: "rgb(var(--color-secondary-500) / <alpha-value>)",
+          600: "rgb(var(--color-secondary-600) / <alpha-value>)",
+          700: "rgb(var(--color-secondary-700) / <alpha-value>)",
+          800: "rgb(var(--color-secondary-800) / <alpha-value>)",
+          900: "rgb(var(--color-secondary-900) / <alpha-value>)",
         },
       },
       fontFamily: {