chore: harmonize some bg colors, borders and hints (#983)

layouts/shortcodes/columns.html

@@ -5,7 +5,7 @@
 {{- end }}
 
 
-<div class="gdoc-columns gdoc-columns--{{ $size }} flex flex-gap flex-mobile-column">
+<div class="gdoc-columns gdoc-columns--{{ $size }} flex gap-16 flex-mobile-column">
   {{- range split .Inner "<--->" }}
     <div class="gdoc-columns__content gdoc-markdown--nested flex-even">
       {{ . | $.Page.RenderString -}}

layouts/shortcodes/hint.html

@@ -4,12 +4,13 @@
 
 
 <blockquote class="gdoc-hint {{ $type | lower }}">
-  <div class="gdoc-hint__title flex align-center">
+  <div class="gdoc-hint__title flex gap-8 align-center">
     {{- with $icon -}}
       <svg class="gdoc-icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg>
       <span>{{ $title }}</span>
     {{- else -}}
-      <i class="fa {{ $type | lower }}" title="{{ $title }}"></i>
+      <i class="fa {{ $type | lower }}"></i>
+      <span>{{ $title }}</span>
     {{- end -}}
   </div>
   <div class="gdoc-hint__text">{{ .Inner | $.Page.RenderString }}</div>

src/sass/_asciidoc.scss

@@ -2,20 +2,33 @@
 @use "defaults";
 
 .admonitionblock {
+  $root: &;
+
+  margin: defaults.$padding-16 0;
+  padding: 0;
+
+  border: defaults.$border-1 solid var(--accent-color);
+  border-left: defaults.$border-4 solid var(--accent-color);
+  border-radius: defaults.$border-radius;
+
   @each $name, $color in defaults.$hint-colors {
     &.#{$name} {
-      border-left-color: $color;
+      border-color: $color;
-      background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
       color: defaults.$body-font-color;
+
+      td.icon {
+        background-color: color.adjust($color, $alpha: -0.9);
+        border-start-start-radius: inherit;
+        border-start-end-radius: inherit;
+        position: relative;
+        z-index: -10;
+        outline: color.adjust($color, $alpha: -0.9);
+      }
     }
   }
 
-  & {
+  .table-wrap {
-    margin: defaults.$padding-16 0;
+    margin: 0;
-    padding: 0;
-
-    border-left: defaults.$border-4 solid var(--accent-color);
-    border-radius: defaults.$border-radius;
   }
 
   table {
@@ -35,28 +48,34 @@
         font-weight: bold;
 
         &.icon {
-          .title {
+          margin-left: -5px;
-            display: flex;
-            align-items: center;
-          }
-
-          i.fa::after {
-            content: attr(title);
-            font-style: normal;
-            padding-left: defaults.$padding-24;
-          }
-
-          i.fa {
-            color: defaults.$black;
-            background-size: auto 90%;
-            background-repeat: no-repeat;
-            filter: invert(30%);
-            margin-left: -5px;
-          }
 
           @each $name, $icon in defaults.$hint-icons {
             i.fa.icon-#{$name} {
-              background-image: url(img/geekdoc-stack.svg##{$icon});
+              width: defaults.$font-size-24;
+              height: defaults.$font-size-24;
+              position: relative;
+
+              &::before {
+                content: "";
+                position: absolute;
+                left: 0;
+                top: 50%;
+                transform: translateY(-50%);
+                width: defaults.$font-size-24;
+                height: defaults.$font-size-24;
+                mask-image: url(img/geekdoc-stack.svg##{$icon});
+                mask-repeat: no-repeat;
+                mask-size: contain;
+                background-color: var(--body-font-color);
+              }
+
+              &::after {
+                color: var(--body-font-color);
+                content: attr(title);
+                font-style: normal;
+                padding-left: defaults.$padding-32;
+              }
             }
           }
         }

src/sass/_base.scss

@@ -354,8 +354,8 @@ svg.gdoc-icon {
   background: var(--body-background);
   border-radius: defaults.$border-radius;
   box-shadow:
-    0 1px 3px 0 var(--accent-color-dark),
+    0 1px 3px 0 var(--accent-color),
-    0 1px 2px 0 var(--accent-color);
+    0 1px 2px 0 var(--accent-color-lite);
   position: absolute;
   margin: 0;
   padding: defaults.$padding-8 defaults.$padding-4 !important;
@@ -578,6 +578,10 @@ svg.gdoc-icon {
     text-decoration: underline;
     color: var(--footer-link-color);
 
+    &:hover {
+      text-decoration: none;
+    }
+
     &:visited {
       color: var(--footer-link-color-visited);
     }

src/sass/_chroma_base.scss

@@ -20,7 +20,6 @@
 
   /* LineTable */
   .chroma .lntable {
-    border: defaults.$border-1 solid var(--code-accent-color);
     border-radius: defaults.$border-radius;
     border-spacing: 0;
     padding: 0;
@@ -39,7 +38,7 @@
   .chroma .lntable td:first-child {
     code {
       background-color: var(--code-accent-color-lite);
-      border-right: defaults.$border-1 solid var(--code-accent-color);
+      font-size: defaults.$font-size-12;
       padding-left: 0;
       padding-right: 0;
       border-radius: 0;

src/sass/_color_mode.scss

@@ -19,10 +19,6 @@
   --link-color: #{defaults.$link-color};
   --link-color-visited: #{defaults.$link-color-visited};
 
-  --hint-link-color: #{defaults.$link-color};
-  --hint-link-color-visited: #{defaults.$link-color-visited};
-
-  --accent-color-dark: #{defaults.$gray-400};
   --accent-color: #{defaults.$gray-200};
   --accent-color-lite: #{defaults.$gray-100};
 
@@ -40,16 +36,10 @@
   }
 
   .gdoc-markdown {
-    .gdoc-hint,
     .gdoc-props__tag,
     .admonitionblock {
       filter: none;
     }
-
-    .gdoc-hint__title,
-    .admonitionblock table td:first-child {
-      background-color: color.scale(defaults.$gray-600, $alpha: -95%);
-    }
   }
 }
 
@@ -68,10 +58,6 @@
   --link-color: #{defaults.$link-color-dark};
   --link-color-visited: #{defaults.$link-color-visited-dark};
 
-  --hint-link-color: #{defaults.$link-color};
-  --hint-link-color-visited: #{defaults.$link-color-visited};
-
-  --accent-color-dark: #{color.scale(defaults.$body-background-dark, $lightness: -60%)};
   --accent-color: #{color.scale(defaults.$body-background-dark, $lightness: -30%)};
   --accent-color-lite: #{color.scale(defaults.$body-background-dark, $lightness: -15%)};
 
@@ -89,7 +75,6 @@
   }
 
   .gdoc-markdown {
-    .gdoc-hint,
     .gdoc-props__tag,
     .admonitionblock {
       filter: saturate(2.5) brightness(0.85);
@@ -98,22 +83,6 @@
     .gdoc-progress__bar {
       filter: saturate(0.85) brightness(0.85);
     }
-
-    .gdoc-hint,
-    .admonitionblock {
-      a {
-        color: var(--hint-link-color);
-
-        &:visited {
-          color: var(--hint-link-color-visited);
-        }
-      }
-    }
-
-    .gdoc-hint__title,
-    .admonitionblock table td:first-child {
-      background-color: color.scale(defaults.$gray-600, $alpha: -85%);
-    }
   }
 }
 
@@ -124,7 +93,7 @@
     --code-background: #{defaults.$code-background-dark};
     --code-accent-color: #{color.scale(defaults.$code-background-dark, $lightness: -30%)};
     --code-accent-color-lite: #{color.scale(defaults.$code-background-dark, $lightness: -15%)};
-    --code-font-color: #{defaults.$code-font-color-dark};
+    --code-font-color: #{defaults.$gray-300};
 
     --code-copy-background: #{defaults.$code-background-dark};
     --code-copy-font-color: #{color.scale(defaults.$code-font-color-dark, $lightness: -15%)};
@@ -140,11 +109,11 @@
     --code-background: #{defaults.$code-background};
     --code-accent-color: #{color.scale(defaults.$code-background, $lightness: -45%)};
     --code-accent-color-lite: #{color.scale(defaults.$code-background, $lightness: -15%)};
-    --code-font-color: #{defaults.$code-font-color};
+    --code-font-color: #{defaults.$gray-700};
 
     --code-copy-background: #{defaults.$code-background};
-    --code-copy-font-color: #{color.scale(defaults.$code-font-color, $lightness: 20%)};
+    --code-copy-font-color: #{defaults.$gray-500};
-    --code-copy-border-color: #{color.scale(defaults.$code-font-color, $lightness: 40%)};
+    --code-copy-border-color: #{defaults.$gray-400};
     --code-copy-success-color: #{map.get(defaults.$hint-colors, "ok")};
   }
 }

src/sass/_defaults.scss

@@ -28,19 +28,18 @@ $border-1: 1px !default;
 $border-2: 1.5px !default;
 $border-4: 3px !default;
 
-$border-radius: 0.15rem !default;
+$border-radius: 0.3rem !default;
 
 // Grayscale
 $white: rgba(255, 255, 255, 1) !default;
-$gray-100: rgba(248, 249, 250, 1) !default;
+$gray-100: rgba(244, 246, 247, 1) !default;
-$gray-200: rgba(233, 236, 239, 1) !default;
+$gray-200: rgba(217, 219, 221, 1) !default;
-$gray-300: rgba(222, 226, 230, 1) !default;
+$gray-300: rgba(189, 192, 195, 1) !default;
-$gray-400: rgba(206, 212, 218, 1) !default;
+$gray-400: rgba(162, 165, 169, 1) !default;
-$gray-500: rgba(173, 181, 189, 1) !default;
+$gray-500: rgba(134, 137, 142, 1) !default;
-$gray-600: rgba(134, 142, 150, 1) !default;
+$gray-600: rgba(107, 110, 116, 1) !default;
-$gray-700: rgba(73, 80, 87, 1) !default;
+$gray-700: rgba(79, 83, 90, 1) !default;
-$gray-800: rgba(52, 58, 64, 1) !default;
+$gray-800: rgba(52, 56, 64, 1) !default;
-$gray-900: rgba(33, 37, 41, 1) !default;
 $black: rgba(0, 0, 0, 1) !default;
 
 $link-color: rgba(10, 83, 154, 1) !default;

src/sass/_markdown.scss

@@ -38,7 +38,7 @@
     line-height: normal;
 
     &:hover {
-      text-decoration: underline;
+      text-decoration: none;
     }
   }
 
@@ -56,7 +56,7 @@
   }
 
   &__link--code {
-    text-decoration: none;
+    text-decoration: underline;
     code {
       color: inherit !important;
     }
@@ -64,7 +64,7 @@
     &:hover {
       background: none;
       color: var(--link-color) !important;
-      text-decoration: underline;
+      text-decoration: none;
     }
 
     &:visited,
@@ -120,6 +120,7 @@
     padding: defaults.$padding-8 defaults.$padding-16 defaults.$padding-8
       (defaults.$padding-16 - defaults.$padding-4); //to keep total left space 16dp
 
+    border: defaults.$border-1 solid var(--accent-color);
     border-left: defaults.$border-4 solid var(--accent-color);
     border-radius: defaults.$border-radius;
   }
@@ -174,7 +175,7 @@
   }
 
   code {
-    padding: defaults.$padding-4 defaults.$padding-8;
+    padding: defaults.$padding-2 defaults.$padding-4;
   }
 
   pre,
@@ -183,7 +184,7 @@
     border-radius: defaults.$border-radius;
     color: var(--code-font-color);
     font-size: defaults.$font-size-14;
-    line-height: defaults.$padding-16;
+    line-height: defaults.$padding-20;
   }
 
   pre code {

src/sass/_shortcodes.scss

@@ -140,51 +140,44 @@
 
 // {{< hint >}}
 .gdoc-hint {
+  $root: &;
   @each $name, $color in defaults.$hint-colors {
     &.#{$name} {
-      border-left-color: $color;
+      border-color: $color;
-      background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
-      color: defaults.$body-font-color;
       padding: 0;
 
-      code,
+      #{$root}__title {
-      pre {
+        background-color: color.adjust($color, $alpha: -0.9);
-        background-color: color.scale($color, $lightness: 80%, $saturation: -75%);
+        border-start-start-radius: inherit;
-        color: defaults.$code-font-color;
+        border-start-end-radius: inherit;
+        position: relative;
+        z-index: -10;
+        outline: color.adjust($color, $alpha: -0.9);
       }
     }
   }
 
   &__title {
     padding: defaults.$padding-4 defaults.$padding-16;
-    background-color: color.scale(defaults.$gray-600, $alpha: -95%);
     font-weight: bold;
-    color: color.scale(defaults.$body-font-color, $alpha: -15%);
+    color: var(--body-font-color);
-
+    margin-left: -5px;
-    i.fa::after {
-      content: attr(title);
-      font-style: normal;
-      padding-left: defaults.$padding-24;
-    }
-
-    i.fa {
-      color: defaults.$black;
-      background-size: auto 90%;
-      background-repeat: no-repeat;
-      filter: invert(30%);
-      margin-left: -5px;
-    }
 
     @each $name, $icon in defaults.$hint-icons {
       i.fa.#{$name} {
-        background-image: url(img/geekdoc-stack.svg##{$icon});
+        width: defaults.$font-size-24;
+        height: defaults.$font-size-24;
+
+        mask-image: url(img/geekdoc-stack.svg##{$icon});
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        background-color: var(--body-font-color);
       }
     }
 
     .gdoc-icon {
       width: defaults.$font-size-24;
       height: defaults.$font-size-24;
-      margin-left: -5px;
     }
   }
 

src/sass/_utils.scss

@@ -31,7 +31,12 @@
   background: var(--accent-color-lite);
 }
 
-.flex-gap {
+.gap-8 {
+  flex-wrap: wrap;
+  gap: defaults.$padding-8;
+}
+
+.gap-16 {
   flex-wrap: wrap;
   gap: defaults.$padding-16;
 }