Rewrite color scheme mixins, move more parameters into schemes, update badge shortcode

archetypes/docs.md

@@ -8,4 +8,5 @@ weight: 1
 # bookComments: false
 # bookSearchExclude: false
 # bookHref: ''
+# bookIcon: ''
 ---

archetypes/posts.md

@@ -3,4 +3,5 @@ title: "{{ .Name | humanize | title }}"
 date: {{ .Date }}
 # bookComments: false
 # bookSearchExclude: false
+# bookPostThumbnail: thumbnail.*
 ---

assets/_custom.scss

@@ -1,3 +1,14 @@
-/* You can add custom styles here. */
+/*
-
+  You can add custom styles here.
-// @import "plugins/numbered";
+  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;
+      ...
+    }
+*/

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: (
+:root {
-  default: #64748b,
+  --font-size: 16px;
-  info: #4486dd,
+  --font-size-smaller: 0.875rem;
-  success: #3bad3b,
+  --font-size-smallest: 0.75rem;
-  warning: #f59e42,
-  danger: #d84747,
 
-  note: #4486dd,
+  --body-font-weight: 400;
-  tip: #3bad3b,
+  --body-background: white;
-  important: #8144dd,
+  --body-background-tint: transparent;
-  caution: #d84747
+  --body-font-color: black;
-) !default;
+
+  --border-radius: 0.25rem;
+}
 
 // Themes
 @mixin theme-light {
-  --gray-100: #f8f9fa;
+  --body-background: white;
-  --gray-200: #e9ecef;
+  --body-background-tint: none;
-  --gray-500: #adb5bd;
+  --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;
+  --body-background: #343a40;
-  --gray-200: #5c6165;
+  --body-background-tint: none;
-  --gray-500: #999d9f;
+
+  --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)};
 }

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.
+*/

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;
@@ -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;

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; }
+  h1 { font-size: 2rem; }
-  h2 { font-size: $font-size-16 * 1.5; }
+  h2 { font-size: 1.5rem; }
-  h3 { font-size: $font-size-16 * 1.25; }
+  h3 { font-size: 1.25rem; }
-  h4 { font-size: $font-size-16 * 1.125; }
+  h4 { font-size: 1.125rem; }
-  h5 { font-size: $font-size-16 * 1; }
+  h5 { font-size: 1rem; }
-  h6 { font-size: $font-size-16 * 0.875; }
+  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;

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;
+        border-color: var(--color-accent-#{$name});
-        background-color: rgba($color, 0.1);
+        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-size: var(--font-size-smaller);
-    font-weight: $body-font-weight;
+    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);
-    }
+      background-color: var(--accent-color);
-
-    @each $name, $color in $hint-colors {
-      &.#{$name} span {
-        background-color: rgba($color, var(--background-opacity));
-      }
     }
   }
 
@@ -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,7 +168,7 @@
     display: block;
     overflow: hidden;
     height: 100%;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     border: $padding-1 solid var(--gray-200);
 
     > a {
@@ -183,6 +178,7 @@
       &[href], &[href]:visited {
         color: var(--body-font-color);
       }
+
       &[href]:hover {
         text-decoration: none;
         background: var(--gray-100);
@@ -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-start-radius: var(--border-radius);
-    border-start-end-radius: $border-radius;
+    border-start-end-radius: var(--border-radius);
 
     a {
       color: var(--body-font-color);

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 {

assets/_variables.scss

@@ -1,3 +1 @@
-/* You can override SASS variables here. */
+/* You can override SCSS variables here. */
-
-// @import "plugins/dark";

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 }};
+}

assets/themes/_auto.scss

@@ -1,9 +0,0 @@
-:root {
-  @include theme-light;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    @include theme-dark;
-  }
-}

assets/themes/_dark.scss

@@ -1,3 +0,0 @@
-:root {
-  @include theme-dark;
-}

assets/themes/_light.scss

@@ -1,3 +0,0 @@
-:root {
-  @include theme-light;
-}

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 }}