Introduce Badge shortcode

assets/_defaults.scss

@@ -22,9 +22,11 @@ $toc-width: 16rem !default;
 $mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default;
 
 $hint-colors: (
-  info: #6bf,
-  warning: #fd6,
-  danger: #f66,
+  default: #64748b,
+  info: #4486dd,
+  success: #3bad3b,
+  warning: #f59e42,
+  danger: #d84747,
 ) !default;
 
 // Themes
@@ -40,10 +42,6 @@ $hint-colors: (
   --body-font-color: black;
 
   --icon-filter: none;
-
-  --hint-color-info: #6bf;
-  --hint-color-warning: #fd6;
-  --hint-color-danger: #f66;
 }
 
 @mixin theme-dark {
@@ -58,8 +56,4 @@ $hint-colors: (
   --body-font-color: #e9ecef;
 
   --icon-filter: brightness(0) invert(1);
-
-  --hint-color-info: #6bf;
-  --hint-color-warning: #fd6;
-  --hint-color-danger: #f66;
 }

assets/_shortcodes.scss

@@ -1,4 +1,5 @@
 .markdown {
+
   // {{< expand "Label" "icon" >}}
   .book-expand {
     margin-top: $padding-16;
@@ -20,7 +21,7 @@
       padding: $padding-16;
     }
 
-    input[type="checkbox"]:checked + .book-expand-content {
+    input[type="checkbox"]:checked+.book-expand-content {
       display: block;
     }
   }
@@ -53,13 +54,15 @@
       display: none;
     }
 
-    input[type="radio"]:checked + label {
+    input[type="radio"]:checked+label {
       border-bottom: $padding-1 solid var(--color-link);
     }
-    input[type="radio"]:checked + label + .book-tabs-content {
+
+    input[type="radio"]:checked+label+.book-tabs-content {
       display: block;
     }
-    input[type="radio"]:focus + label {
+
+    input[type="radio"]:focus+label {
       @include outline;
     }
   }
@@ -69,7 +72,7 @@
     margin-left: -$padding-16;
     margin-right: -$padding-16;
 
-    > div {
+    >div {
       margin: $padding-16 0;
       min-width: $body-min-width * 0.66;
       padding: 0 $padding-16;
@@ -101,4 +104,35 @@
       }
     }
   }
-}
+
+  // {{< badge >}}
+  .book-badge {
+    display: inline-block;
+    font-size: $font-size-14;
+    vertical-align: middle;
+    border-radius: $border-radius;
+    overflow: hidden;
+    text-wrap: nowrap;
+    color: var(--color-text);
+
+    span {
+      display: inline-block;
+      padding: 0 $padding-8;
+    }
+
+    span.book-badge-title {
+      background-color: var(--body-background);
+      opacity: 0.9;
+    }
+
+    span.book-badge-value {
+      color: var(--body-background);
+    }
+
+    @each $name, $color in $hint-colors {
+      &.#{$name} {
+        background-color: $color;
+      }
+    }
+  }
+}