style: theme color, prompt style, code/syntax block

_sass/abstracts/_mixins.scss

@@ -52,6 +52,7 @@
 @mixin prompt($type, $fa-content, $fa-style: 'solid', $rotate: 0) {
   &.prompt-#{$type} {
     background-color: var(--prompt-#{$type}-bg);
+    border-left: 0.25rem solid var(--prompt-#{$type}-border-color);
 
     &::before {
       content: $fa-content;

_sass/abstracts/_variables.scss

@@ -20,7 +20,7 @@ $back2top-size: 2.75rem !default;
 
 $code-font-size: 0.85rem !default;
 $code-header-height: 2.25rem !default;
-$code-dot-size: 0.75rem !default;
+$code-dot-size: 0rem !default;
 $code-dot-gap: 0.5rem !default;
 $code-icon-width: 1.75rem !default;
 

_sass/base/_syntax.scss

@@ -218,7 +218,7 @@ div {
     @extend %cursor-pointer;
     @extend %rounded;
 
-    border: 1px solid transparent;
+    border: 0px solid transparent;
     height: v.$code-header-height;
     width: v.$code-header-height;
     padding: 0;
@@ -243,10 +243,10 @@ div {
     }
 
     &:not([timeout]):hover {
-      background-color: rgba(128, 128, 128, 0.37);
+      background-color: rgba(128, 128, 128, 0);
 
       i {
-        color: white;
+        color: var(--sidebar-active-color);
       }
     }
   }

_sass/base/_typography.scss

@@ -55,7 +55,7 @@ img {
 }
 
 blockquote {
-  border-left: 0.125rem solid var(--blockquote-border-color);
+  border-left: 0.25rem solid var(--blockquote-border-color);
   padding-left: 1rem;
   color: var(--blockquote-text-color);
   margin-top: 0.5rem;
@@ -65,17 +65,15 @@ blockquote {
   }
 
   &[class^='prompt-'] {
-    border-left: 0;
+    border-left: .25rem;
+    border-radius: 0 8px 8px 0;
     position: relative;
-    padding: 1rem 1rem 1rem 3rem;
+    padding: 0.5rem 1rem 0.75rem 1rem;
     color: var(--prompt-text-color);
 
-    @extend %rounded;
 
     &::before {
-      text-align: center;
       width: 3rem;
-      position: absolute;
       left: 0.25rem;
       margin-top: 0.4rem;
       text-rendering: auto;
@@ -85,12 +83,13 @@ blockquote {
 
   @include mx.prompt('tip', '\f0eb', $fa-style: 'regular');
   @include mx.prompt('info', '\f06a', $rotate: 180);
-  @include mx.prompt('warning', '\f06a');
+  @include mx.prompt('important','\f06a');
+  @include mx.prompt('warning', '\f071');
   @include mx.prompt('danger', '\f071');
 }
 
 kbd {
-  font-family: Lato, sans-serif;
+  font-family: Inter, sans-serif;
   display: inline-block;
   vertical-align: middle;
   line-height: 1.3rem;

_sass/components/_popups.scss

@@ -25,7 +25,7 @@
   }
 
   .toast-body {
-    font-family: Lato, sans-serif;
+    font-family: Inter, sans-serif;
     line-height: 1.25rem;
 
     button {

_sass/layout/_sidebar.scss

@@ -138,7 +138,7 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
 
         display: flex;
         align-items: center;
-        border-radius: 0.75rem;
+        border-radius: 0.35rem;
         font-weight: 600;
 
         &:hover {

_sass/layout/_topbar.scss

@@ -4,6 +4,7 @@
 @use '../abstracts/placeholders';
 
 #topbar-wrapper {
+  padding-top: 30px;
   height: v.$topbar-height;
   background-color: var(--topbar-bg);
 

_sass/themes/_light.scss

@@ -38,7 +38,7 @@
   --sidebar-bg: #f6f8fa;
   --sidebar-border-color: #efefef;
   --sidebar-muted-color: #545454;
-  --sidebar-active-color: #1d1d1d;
+  --sidebar-active-color: #0d6efd;
   --sidebar-hover-bg: rgb(223, 233, 241, 0.64);
   --sidebar-btn-bg: white;
   --sidebar-btn-color: #8e8e8e;
@@ -73,14 +73,21 @@
   --kbd-text-color: var(--text-color);
   --kbd-bg-color: white;
   --prompt-text-color: rgb(46, 46, 46, 0.77);
-  --prompt-tip-bg: rgb(123, 247, 144, 0.2);
+  --prompt-tip-bg: rgb(123, 247, 144, 0.1);
   --prompt-tip-icon-color: #03b303;
-  --prompt-info-bg: #e1f5fe;
+  --prompt-tip-border-color: #238636;
+  --prompt-info-bg: rgb(225, 245, 254, 0.3);
   --prompt-info-icon-color: #0070cb;
-  --prompt-warning-bg: rgb(255, 243, 205);
-  --prompt-warning-icon-color: #ef9c03;
-  --prompt-danger-bg: rgb(248, 215, 218, 0.56);
+  --prompt-info-border-color: #1f6feb;
+  --prompt-important-bg: rgb(233, 231, 255, 0.3);
+  --prompt-important-icon-color: #8957e5;
+  --prompt-important-border-color: #8957e5;
+  --prompt-warning-bg: rgb(255, 243, 205, 0.3);
+  --prompt-warning-icon-color: #ffa500;
+  --prompt-warning-border-color: #ef9c03;
+  --prompt-danger-bg: rgb(248, 215, 218, 0.3);
   --prompt-danger-icon-color: #df3c30;
+  --prompt-danger-border-color: #da3633;
 
   /* Tags */
   --tag-border: #dee2e6;