docs hightlight fixes, dark mode improvements

Gemfile.lock

@@ -3,6 +3,7 @@ GEM
   specs:
     addressable (2.8.1)
       public_suffix (>= 2.0.2, < 6.0)
+    coderay (1.1.3)
     colorator (1.1.0)
     concurrent-ruby (1.1.10)
     em-websocket (0.5.3)
@@ -49,6 +50,9 @@ GEM
       rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
+    kramdown-syntax-coderay (1.0.1)
+      coderay (~> 1.1)
+      kramdown (~> 2.0)
     liquid (4.0.3)
     listen (3.7.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
@@ -79,6 +83,7 @@ DEPENDENCIES
   jekyll-redirect-from
   jekyll-tidy
   jekyll-timeago
+  kramdown-syntax-coderay (~> 1.0)
 
 BUNDLED WITH
    2.1.4

src/pages/_includes/example.html

@@ -33,11 +33,6 @@
 {% endcapture %}
 {% assign html = html | replace_regex: "\n\n+", new_line %}
 
-{% unless include.show-svg %}
-{% assign html = html | replace: '<svg', '<!-- SVG icon code -->
-<svg' %}
-{% endunless %}
-
 {% assign html = html | replace_regex: 'url\(([^\)]+)\)', 'url(...)' %}
 {% assign html = html | replace_regex: 'src="([^"]+)"', 'src="..."' %}
 {% assign html = html | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %}

src/pages/_layouts/docs.html

@@ -34,7 +34,7 @@ page-header: Documentation
 						</div>
 
 						{% if page.description %}
-						<p class="mb-4 text-muted">{{ page.description }}</p>
+						<p class="h3 fw-normal mb-4 text-muted">{{ page.description }}</p>
 						{% endif %}
 
 						{% if page.plugin %}

src/scss/_variables.scss

@@ -289,7 +289,8 @@ $code-line-height: 1.25rem !default;
 $code-bg: var(--#{$prefix}gray-100) !default;
 
 $pre-padding: 1rem !default;
-$pre-bg: $code-bg !default;
+$pre-bg: var(--#{$prefix}bg-surface-dark) !default;
+$pre-color: var(--#{$prefix}light) !default;
 
 $kbd-padding-y: 2px !default;
 $kbd-color: var(--#{$prefix}muted) !default;
@@ -530,7 +531,7 @@ $dropdown-link-active-bg: var(--#{$prefix}active-bg) !default;
 
 //tooltip
 $tooltip-bg: var(--#{$prefix}bg-surface-dark) !default;
-$tooltip-color: var(--#{$prefix}white) !default;
+$tooltip-color: var(--#{$prefix}light) !default;
 
 //loader
 $loader-size: 2.5rem !default;

src/scss/demo/_highlight.scss

@@ -3,7 +3,6 @@ $code-yellow: #ffe484;
 $code-purple: #d9a9ff;
 $code-red: #ff8383;
 $code-blue: #93ddfd;
-//$code-white: $white;
 $code-gray: #a0aec0;
 
 pre.highlight,
@@ -12,7 +11,7 @@ pre.highlight,
   margin: 1.5rem 0;
   overflow: auto;
   border-radius: var(--#{$prefix}border-radius);
-  @include scrollbar;
+  @include scrollbar(var(--#{$prefix}light-rgb));
 }
 
 .highlight {
@@ -23,273 +22,10 @@ pre.highlight,
     padding: 0 !important;
   }
 
-  .dl {
+  .c, .c1 { color: $code-gray; }
-    color: #4070a0
+  .na, .nx, .nl, .language-css & .na, .language-scss & .na { color: $code-yellow; }
-  }
+  .s, .dl, .s1, .s2, .mh { color: $code-green; }
-
+  .mi, .language-js .nb, .nc, .nd, .nt { color: $code-blue; }
-  .c {
+  .language-html .nt, .nb { color: $code-red; }
-    color: #727272
+  .k, .kd, .nv, .n { color: $code-purple; }
-  }
-
-  .c1 {
-    color: #727272
-  }
-
-  .ch {
-    font-style: italic;
-    color: #60a0b0
-  }
-
-  .cm {
-    color: #727272
-  }
-
-  .cp {
-    color: #008085
-  }
-
-  .cpf {
-    color: #007020
-  }
-
-  .cs {
-    color: #727272
-  }
-
-  .gd {
-    background-color: #fcc;
-    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) #c00
-  }
-
-  .ge {
-    font-style: italic
-  }
-
-  .gh {
-    color: #030
-  }
-
-  .gi {
-    background-color: #cfc;
-    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) #0c0
-  }
-
-  .gl {
-    text-decoration: underline
-  }
-
-  .go {
-    color: #aaa
-  }
-
-  .gp {
-    color: #009
-  }
-
-  .gr {
-    color: #f00
-  }
-
-  .gs {
-    font-weight: 700
-  }
-
-  .gt {
-    color: #9c6
-  }
-
-  .gu {
-    color: #030
-  }
-
-  .il {
-    color: #c24f19
-  }
-
-  .k {
-    color: #069
-  }
-
-  .kc {
-    color: #069
-  }
-
-  .kd {
-    color: #069
-  }
-
-  .kn {
-    color: #069
-  }
-
-  .kp {
-    color: #069
-  }
-
-  .kr {
-    color: #069
-  }
-
-  .kt {
-    color: #078
-  }
-
-  .m {
-    color: #c24f19
-  }
-
-  .mf {
-    color: #c24f19
-  }
-
-  .mb {
-    color: #40a070
-  }
-
-  .mh {
-    color: #c24f19
-  }
-
-  .mi {
-    color: #c24f19
-  }
-
-  .mo {
-    color: #c24f19
-  }
-
-  .na {
-    color: #006ee0
-  }
-
-  .nb {
-    color: #366
-  }
-
-  .nc {
-    color: #168174
-  }
-
-  .nd {
-    color: #6b62de
-  }
-
-  .ne {
-    color: #c00
-  }
-
-  .nf {
-    color: #b715f4
-  }
-
-  .ni {
-    color: #727272
-  }
-
-  .nl {
-    color: #6b62de
-  }
-
-  .nn {
-    color: #007ca5
-  }
-
-  .no {
-    color: #360
-  }
-
-  .nt {
-    color: #2f6f9f
-  }
-
-  .nv {
-    color: #033
-  }
-
-  .o {
-    color: #555
-  }
-
-  .ow {
-    color: #000
-  }
-
-  .s {
-    color: #d73038
-  }
-
-  .s1 {
-    color: #c30
-  }
-
-  .s2 {
-    color: #c30
-  }
-
-  .sa {
-    color: #4070a0
-  }
-
-  .sb {
-    color: #c30
-  }
-
-  .sc {
-    color: #c30
-  }
-
-  .sd {
-    font-style: italic;
-    color: #c30
-  }
-
-  .se {
-    color: #c30
-  }
-
-  .sh {
-    color: #c30
-  }
-
-  .si {
-    color: #a00
-  }
-
-  .sr {
-    color: #337e7e
-  }
-
-  .ss {
-    color: #fc3
-  }
-
-  .sx {
-    color: #c30
-  }
-
-  .w {
-    color: #bbb
-  }
-
-  .language-bash::before,.language-sh::before {
-    color: #009;
-    content: "$ ";
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none
-  }
-
-  .language-bash .m,.language-sh .m {
-    color: inherit
-  }
-
-  .language-powershell::before {
-    color: #009;
-    content: "PM> ";
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none
-  }
 }

src/scss/layout/_dark.scss

@@ -82,11 +82,6 @@ body:not(.theme-dark) .hide-theme-light {
     color: inherit;
   }
 
-  pre {
-    background-color: $dark-mode-darken;
-    border-color: $dark-mode-border-color;
-  }
-
   .card-tabs .nav-tabs .nav-link.active {
     background-color: $dark;
     color: inherit;

src/scss/mixins/_mixins.scss

@@ -13,24 +13,24 @@
   }
 }
 
-@mixin scrollbar {
+@mixin scrollbar($color: var(--#{$prefix}body-color-rgb)) {
   #{if(&, "&", "*")}::-webkit-scrollbar {
-    width: 6px;
+    width: .5rem;
-    height: 6px;
+    height: .5rem;
     @include transition(background $transition-time);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-thumb {
     border-radius: 5px;
-    background: rgba(var(--#{$prefix}body-color-rgb), .16);
+    background: rgba($color, .16);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-track {
-    background: rgba(var(--#{$prefix}body-color-rgb), .06);
+    background: rgba($color, .06);
   }
 
   #{if(&, "&", "*")}:hover::-webkit-scrollbar-thumb {
-    background: rgba(var(--#{$prefix}body-color-rgb), .32);
+    background: rgba($color, .32);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-corner {

src/scss/ui/_type.scss

@@ -107,8 +107,8 @@ dl {
 
 pre {
   padding: $pre-padding;
-  background: var(--#{$prefix}code-bg);
+  background: $pre-bg;
-  color: var(--#{$prefix}code-color);
+  color: $pre-color;
   border-radius: var(--#{$prefix}border-radius);
 
   code {
@@ -127,36 +127,6 @@ kbd {
   box-shadow: 0 0 0 1px var(--#{$prefix}border-color), 0 3px 0 0 var(--#{$prefix}bg-surface), 0 3px 0 1px var(--#{$prefix}border-color);
 }
 
-  //code {
-//  padding: 2px 4px;
-//  background: rgba($code-color, .03);
-//  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) rgba($code-color, .064);
-//  border-radius: var(--#{$prefix}border-radius);
-//  font-weight: var(--#{$prefix}font-weight-normal);
-//}
-
-
-//pre {
-//  padding: 1rem;
-//  overflow: auto;
-//  font-size: $h5-font-size;;
-//  hyphens: none;
-//  line-height: $code-line-height;
-//  tab-size: 3;
-//  border-radius: var(--#{$prefix}border-radius);
-//  white-space: pre-wrap;
-//  background: mix($light, #ffffff, 50%);
-//  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent;
-//  -webkit-font-smoothing: auto;
-//
-//  code {
-//    padding: 0;
-//    background: none;
-//    border: none;
-//    border-radius: 0;
-//  }
-//}
-
 img {
   max-width: 100%;
 }