From 7fe158c8ed084557a7d194c915a093a86256515d Mon Sep 17 00:00:00 2001
From: Alex Shpak <alex-shpak@users.noreply.github.com>
Date: Mon, 6 Oct 2025 00:36:32 +0200
Subject: [PATCH] Rewrite color scheme mixins, move more parameters into
 schemes, update badge shortcode

---
 archetypes/docs.md        |  1 +
 archetypes/posts.md       |  1 +
 assets/_custom.scss       | 17 +++++--
 assets/_defaults.scss     | 96 ++++++++++++++++++++++++++-------------
 assets/_fonts.scss        |  5 ++
 assets/_main.scss         | 21 +++++----
 assets/_markdown.scss     | 24 +++++-----
 assets/_shortcodes.scss   | 56 +++++++++++------------
 assets/_utils.scss        |  6 ---
 assets/_variables.scss    |  4 +-
 assets/book.scss          |  8 +++-
 assets/themes/_auto.scss  |  9 ----
 assets/themes/_dark.scss  |  3 --
 assets/themes/_light.scss |  3 --
 layouts/baseof.html       |  2 +-
 15 files changed, 142 insertions(+), 114 deletions(-)
 delete mode 100644 assets/themes/_auto.scss
 delete mode 100644 assets/themes/_dark.scss
 delete mode 100644 assets/themes/_light.scss

diff --git a/archetypes/docs.md b/archetypes/docs.md
index 5a09ba1..3070c0f 100644
--- a/archetypes/docs.md
+++ b/archetypes/docs.md
@@ -8,4 +8,5 @@ weight: 1
 # bookComments: false
 # bookSearchExclude: false
 # bookHref: ''
+# bookIcon: ''
 ---
diff --git a/archetypes/posts.md b/archetypes/posts.md
index f897e95..18b7542 100644
--- a/archetypes/posts.md
+++ b/archetypes/posts.md
@@ -3,4 +3,5 @@ title: "{{ .Name | humanize | title }}"
 date: {{ .Date }}
 # bookComments: false
 # bookSearchExclude: false
+# bookPostThumbnail: thumbnail.*
 ---
diff --git a/assets/_custom.scss b/assets/_custom.scss
index 0de9ae1..17af8ac 100644
--- a/assets/_custom.scss
+++ b/assets/_custom.scss
@@ -1,3 +1,14 @@
-/* You can add custom styles here. */
-
-// @import "plugins/numbered";
+/*
+  You can add custom styles here.
+  It could be plugins:
+    @import "plugins/numbered";
+    @import "plugins/scrollbars";
+  Or custom styles:
+    body { background: white; }
+  Or even theme mixins:
+    @mixin theme-light {
+      --body-background: white;
+      --body-font-color: black;
+      ...
+    }
+*/
diff --git a/assets/_defaults.scss b/assets/_defaults.scss
index ff7ecb9..7b4a01a 100644
--- a/assets/_defaults.scss
+++ b/assets/_defaults.scss
@@ -4,15 +4,6 @@ $padding-4: 0.25rem !default;
 $padding-8: 0.5rem !default;
 $padding-16: 1rem !default;
 
-$font-size-base: 16px !default;
-$font-size-12: 0.75rem !default;
-$font-size-14: 0.875rem !default;
-$font-size-16: 1rem !default;
-
-$border-radius: $padding-4 !default;
-
-$body-font-weight: normal !default;
-
 $body-min-width: 20rem !default;
 $container-max-width: 80rem !default;
 
@@ -21,44 +12,85 @@ $toc-width: 16rem !default;
 
 $mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default;
 
-$hint-colors: (
-  default: #64748b,
-  info: #4486dd,
-  success: #3bad3b,
-  warning: #f59e42,
-  danger: #d84747,
+:root {
+  --font-size: 16px;
+  --font-size-smaller: 0.875rem;
+  --font-size-smallest: 0.75rem;
 
-  note: #4486dd,
-  tip: #3bad3b,
-  important: #8144dd,
-  caution: #d84747
-) !default;
+  --body-font-weight: 400;
+  --body-background: white;
+  --body-background-tint: transparent;
+  --body-font-color: black;
+
+  --border-radius: 0.25rem;
+}
 
 // Themes
 @mixin theme-light {
-  --gray-100: #f8f9fa;
-  --gray-200: #e9ecef;
-  --gray-500: #adb5bd;
+  --body-background: white;
+  --body-background-tint: none;
+  --body-font-color: black;
 
   --color-link: #0055bb;
   --color-visited-link: #5500bb;
 
-  --body-background: white;
-  --body-font-color: black;
-
   --icon-filter: none;
+
+  --gray-100: #f8f9fa;
+  --gray-200: #e9ecef;
+  --gray-500: #adb5bd;
+
+  @include accent("default", #64748b);
+  @include accent("note", #4486dd);
+  @include accent("tip", #3bad3b);
+  @include accent("important", #8144dd);
+  @include accent("warning", #f59e42);
+  @include accent("caution", #d84747);
+
+  // Fallback for {{< hint >}} shortcodes
+  @include accent("info", #4486dd);
+  @include accent("success", #3bad3b);
+  @include accent("danger", #d84747);
 }
 
 @mixin theme-dark {
-  --gray-100: #494e54;
-  --gray-200: #5c6165;
-  --gray-500: #999d9f;
+  --body-background: #343a40;
+  --body-background-tint: none;
+
+  --body-font-color: #e9ecef;
 
   --color-link: #84b2ff;
   --color-visited-link: #b88dff;
 
-  --body-background: #343a40;
-  --body-font-color: #e9ecef;
-
   --icon-filter: brightness(0) invert(1);
+
+  --gray-100: #494e54;
+  --gray-200: #5c6165;
+  --gray-500: #999d9f;
+
+  @include accent("default", #64748b);
+  @include accent("note", #4486dd);
+  @include accent("tip", #3bad3b);
+  @include accent("important", #8144dd);
+  @include accent("warning", #f59e42);
+  @include accent("caution", #d84747);
+
+  // Fallback for {{< hint >}} shortcodes
+  @include accent("info", #4486dd);
+  @include accent("success", #3bad3b);
+  @include accent("danger", #d84747);
 }
+
+@mixin theme-auto {
+  @include theme-light;
+
+  @media (prefers-color-scheme: dark) {
+    @include theme-dark;
+  }
+}
+
+// Convenience mixing to declare a color and a transparent tint
+@mixin accent($name, $color, $tint: 0.1) {
+  --color-accent-#{$name}: #{$color};
+  --color-accent-#{$name}-tint: #{rgba($color, $tint)};
+}
\ No newline at end of file
diff --git a/assets/_fonts.scss b/assets/_fonts.scss
index e69de29..488ae24 100644
--- a/assets/_fonts.scss
+++ b/assets/_fonts.scss
@@ -0,0 +1,5 @@
+/*
+  This is an empty file for backward compatibility.
+  Custom font used to be defined here.
+  It will be removed eventually.
+*/
diff --git a/assets/_main.scss b/assets/_main.scss
index 3517a45..4f13f5e 100644
--- a/assets/_main.scss
+++ b/assets/_main.scss
@@ -1,5 +1,5 @@
 html {
-  font-size: $font-size-base;
+  font-size: var(--font-size);
   scroll-behavior: smooth;
   touch-action: manipulation;
   scrollbar-gutter: stable;
@@ -8,9 +8,9 @@ html {
 body {
   min-width: $body-min-width;
   color: var(--body-font-color);
-  background: var(--body-background);
+  background: var(--body-background) var(--body-background-tint);
 
-  font-weight: $body-font-weight;
+  font-weight: var(--body-font-weight);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -22,7 +22,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: $body-font-weight;
+  font-weight: inherit;
 }
 
 a {
@@ -59,6 +59,7 @@ nav ul {
   a {
     padding: .5em 0;
     display: flex;
+    transition: opacity 0.1s ease-in-out;
   }
 
   a[href]:hover, a[role=button]:hover {
@@ -107,7 +108,7 @@ a .book-icon {
 
 .book-menu {
   flex: 0 0 $menu-width;
-  font-size: $font-size-14;
+  font-size: var(--font-size-smaller);
 
   .book-menu-content {
     width: $menu-width;
@@ -140,7 +141,7 @@ a .book-icon {
     display: none;
   }
 
-  input.toggle:checked + label{
+  input.toggle:checked + label {
     > img:last-child {
       transform: rotate(90deg);
     }
@@ -257,7 +258,7 @@ body[dir="rtl"] .book-menu {
     padding: $padding-8;
 
     border: 0;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
 
     background: var(--gray-100);
     color: var(--body-font-color);
@@ -294,7 +295,7 @@ body[dir="rtl"] .book-menu {
 
 .book-toc {
   flex: 0 0 $toc-width;
-  font-size: $font-size-12;
+  font-size: var(--font-size-smallest);
 
   .book-toc-content {
     width: $toc-width;
@@ -319,7 +320,7 @@ body[dir="rtl"] .book-menu {
 
 .book-footer {
   padding-top: $padding-16;
-  font-size: $font-size-14;
+  font-size: var(--font-size-smaller);
 
   a {
     margin: $padding-4 0;
@@ -436,4 +437,4 @@ body[dir="rtl"] .book-menu {
   .book-toc .book-toc-content {
     padding: $padding-16 * 2 $padding-16;
   }
-}
+}
\ No newline at end of file
diff --git a/assets/_markdown.scss b/assets/_markdown.scss
index e3528f9..9d745ea 100644
--- a/assets/_markdown.scss
+++ b/assets/_markdown.scss
@@ -14,7 +14,7 @@
   h4,
   h5,
   h6 {
-    font-weight: $body-font-weight;
+    font-weight: inherit;
     line-height: 1;
     margin-top: 1.5em;
     margin-bottom: $padding-16;
@@ -32,12 +32,12 @@
     }
   }
 
-  h1 { font-size: $font-size-16 * 2; }
-  h2 { font-size: $font-size-16 * 1.5; }
-  h3 { font-size: $font-size-16 * 1.25; }
-  h4 { font-size: $font-size-16 * 1.125; }
-  h5 { font-size: $font-size-16 * 1; }
-  h6 { font-size: $font-size-16 * 0.875; }
+  h1 { font-size: 2rem; }
+  h2 { font-size: 1.5rem; }
+  h3 { font-size: 1.25rem; }
+  h4 { font-size: 1.125rem; }
+  h5 { font-size: 1rem; }
+  h6 { font-size: 0.875rem; }
 
   b,
   optgroup,
@@ -66,14 +66,14 @@
     unicode-bidi: embed;
     padding: 0 $padding-4;
     background: var(--gray-200);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     font-size: 0.875em;
   }
 
   pre {
     padding: $padding-16;
     background: var(--gray-100);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     overflow-x: auto;
 
     code {
@@ -91,7 +91,7 @@
     padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
 
     border-inline-start: $padding-4 solid var(--gray-200);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
 
     :first-child {
       margin-top: 0;
@@ -149,7 +149,7 @@
   .highlight {
     direction: ltr;
     unicode-bidi: embed;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
 
     table tr {
       td pre code > span {
@@ -171,7 +171,7 @@
     padding: $padding-16;
     margin: $padding-16 0;
     border: $padding-1 solid var(--gray-200);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
 
     summary {
       line-height: 1;
diff --git a/assets/_shortcodes.scss b/assets/_shortcodes.scss
index 7916168..acdaeca 100644
--- a/assets/_shortcodes.scss
+++ b/assets/_shortcodes.scss
@@ -6,7 +6,7 @@
     margin-bottom: $padding-16;
 
     border: $padding-1 solid var(--gray-200);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
 
     overflow: hidden;
 
@@ -67,12 +67,12 @@
   // {{< button >}}
   a.book-btn[href] {
     display: inline-block;
-    font-size: $font-size-14;
+    font-size: var(--font-size-smaller);
     color: var(--color-link);
     line-height: $padding-16 * 2;
     padding: 0 $padding-16;
     border: $padding-1 solid var(--color-link);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     cursor: pointer;
 
     &:hover {
@@ -80,23 +80,29 @@
     }
   }
 
-  // {{< hint >}}
   .book-hint {
-    @each $name, $color in $hint-colors {
+    @each $name in (note, tip, important, warning, caution, default, info, success, danger) {
       &.#{$name} {
-        border-color: $color;
-        background-color: rgba($color, 0.1);
+        border-color: var(--color-accent-#{$name});
+        background-color: var(--color-accent-#{$name}-tint);
       }
     }
   }
 
   // {{< badge >}}
   .book-badge {
+    @each $name in (note, tip, important, warning, caution, default, info, success, danger) {
+      &.#{$name} {
+        --accent-color: var(--color-accent-#{$name});
+      }
+    }
+
     display: inline-block;
-    font-size: $font-size-14;
-    font-weight: $body-font-weight;
+    font-size: var(--font-size-smaller);
+    font-weight: var(body-font-weight);
     vertical-align: middle;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
+    border: $padding-1 solid var(--accent-color);
     overflow: hidden;
     text-wrap: nowrap;
     color: var(--body-font-color);
@@ -106,19 +112,9 @@
       padding: 0 $padding-8;
     }
 
-    span.book-badge-title {
-      --background-opacity: 0.1;
-    }
-
     span.book-badge-value {
-      --background-opacity: 1;
       color: var(--body-background);
-    }
-
-    @each $name, $color in $hint-colors {
-      &.#{$name} span {
-        background-color: rgba($color, var(--background-opacity));
-      }
+      background-color: var(--accent-color);
     }
   }
 
@@ -158,7 +154,6 @@
         @extend .markdown-inner;
         border-inline-start: $padding-1 solid var(--gray-500);
         padding-inline-start: $padding-16 * 3;
-        
         padding-bottom: $padding-16 * 2;
       }
 
@@ -173,9 +168,9 @@
     display: block;
     overflow: hidden;
     height: 100%;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     border: $padding-1 solid var(--gray-200);
-    
+
     > a {
       display: block;
       height: 100%;
@@ -183,12 +178,13 @@
       &[href], &[href]:visited {
         color: var(--body-font-color);
       }
+
       &[href]:hover {
         text-decoration: none;
         background: var(--gray-100);
       }
     }
-    
+
     > a > img, > img {
       width: 100%;
       display: block;
@@ -215,12 +211,12 @@
       left: 0;
       right: 0;
       bottom: 0;
-      
+
       background: var(--body-background);
       object-fit: contain;
       width: 100%;
       height: 100%;
-      
+
       z-index: 1;
       cursor: zoom-out;
       padding: $padding-16;
@@ -243,11 +239,11 @@
 
   .book-codeblock-filename {
     background: var(--gray-200);
-    font-size: $font-size-14;
+    font-size: var(--font-size-smaller);
     margin-top: $padding-16;
     padding: $padding-4 $padding-16;
-    border-start-start-radius: $border-radius;
-    border-start-end-radius: $border-radius;
+    border-start-start-radius: var(--border-radius);
+    border-start-end-radius: var(--border-radius);
 
     a {
       color: var(--body-font-color);
diff --git a/assets/_utils.scss b/assets/_utils.scss
index 52f97f3..5191927 100644
--- a/assets/_utils.scss
+++ b/assets/_utils.scss
@@ -70,12 +70,6 @@ input.toggle {
   position: absolute;
 }
 
-.clearfix::after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
 @mixin spin($duration) {
   animation: spin $duration ease infinite;
   @keyframes spin {
diff --git a/assets/_variables.scss b/assets/_variables.scss
index 6e34d16..7705b06 100644
--- a/assets/_variables.scss
+++ b/assets/_variables.scss
@@ -1,3 +1 @@
-/* You can override SASS variables here. */
-
-// @import "plugins/dark";
+/* You can override SCSS variables here. */
diff --git a/assets/book.scss b/assets/book.scss
index 59369fa..2ceb447 100644
--- a/assets/book.scss
+++ b/assets/book.scss
@@ -1,6 +1,5 @@
 @import "defaults";
 @import "variables";
-@import "themes/{{ default "light" .Site.Params.BookTheme }}";
 
 @import "normalize";
 @import "utils";
@@ -11,5 +10,10 @@
 @import "markdown";
 @import "shortcodes";
 
-// Custom defined styles
+// Custom defined styles, theme mixins also placed there
 @import "custom";
+
+// Select theme mixing based on site parameter
+:root {
+  @include theme-{{ default "light" .Site.Params.BookTheme }};
+}
diff --git a/assets/themes/_auto.scss b/assets/themes/_auto.scss
deleted file mode 100644
index 31d7f9a..0000000
--- a/assets/themes/_auto.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-:root {
-  @include theme-light;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    @include theme-dark;
-  }
-}
diff --git a/assets/themes/_dark.scss b/assets/themes/_dark.scss
deleted file mode 100644
index e00e38e..0000000
--- a/assets/themes/_dark.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:root {
-  @include theme-dark;
-}
diff --git a/assets/themes/_light.scss b/assets/themes/_light.scss
deleted file mode 100644
index 8c0e346..0000000
--- a/assets/themes/_light.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:root {
-  @include theme-light;
-}
diff --git a/layouts/baseof.html b/layouts/baseof.html
index d21881d..a8b11f7 100644
--- a/layouts/baseof.html
+++ b/layouts/baseof.html
@@ -52,7 +52,7 @@
   {{ partial "docs/header" . }}
 
   {{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
-  <aside class="hidden clearfix">
+  <aside class="hidden">
     {{ template "toc" . }}
   </aside>
   {{ end }}