Use Bootstrap colors in syntax highlighting

4 files changed, 28 insertions, 26 deletions

diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 1e0003bcb..6bf42db64 100644
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -23,7 +23,7 @@
   padding: .5em;
   line-height: 1;
   color: var(--bs-body-color);
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bd-pre-bg);
   border: 0;
   @include border-radius(.25rem);
 
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 99bc460c1..cde77a2c9 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -344,7 +344,7 @@
   position: relative;
   padding: .75rem ($bd-gutter-x * .5);
   margin-bottom: 1rem;
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bd-pre-bg);
 
   @include media-breakpoint-up(md) {
     padding: .75rem 1.25rem;
@@ -388,7 +388,7 @@
 }
 
 .highlight-toolbar {
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bd-pre-bg);
   border: solid var(--bs-border-color);
   border-width: 1px 0;
 
diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
index 5d5f10922..0cc26d76b 100644
--- a/site/assets/scss/_syntax.scss
+++ b/site/assets/scss/_syntax.scss
@@ -1,40 +1,40 @@
 :root,
 [data-bs-theme="light"] {
-  --base00: #fff;
-  --base01: #f5f5f5;
+  // --base00: #fff;
+  // --base01: #f5f5f5;
   --base02: #c8c8fa;
   --base03: #565c64;
-  --base04: #030303;
+  --base04: #666;
   --base05: #333;
   --base06: #fff;
-  --base07: #9a6700;
-  --base08: #bc4c00;
-  --base09: #087990;
-  --base0A: #795da3;
-  --base0B: #183691;
-  --base0C: #183691;
-  --base0D: #795da3;
-  --base0E: #a71d5d;
+  --base07: #{$teal-700}; // #9a6700
+  --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
+  --base09: #{$cyan-700}; // #087990
+  --base0A: #{$purple-500}; // #795da3
+  --base0B: #{$blue-700}; // #183691
+  --base0C: #{$blue-700}; // #183691
+  --base0D: #{$purple-500}; // #795da3
+  --base0E: #{$pink-600}; // #a71d5d
   --base0F: #333;
 }
 
 @include color-mode(dark, true) {
-  --base00: #282c34;
-  --base01: #353b45;
+  // --base00: #282c34;
+  // --base01: #353b45;
   --base02: #3e4451;
   --base03: #868e96;
-  --base04: #565c64;
+  --base04: #868e96;
   --base05: #abb2bf;
   --base06: #b6bdca;
-  --base07: #d19a66;
-  --base08: #{$red-300};
-  --base09: #d19a66;
-  --base0A: #e5c07b;
-  --base0B: #98c379;
-  --base0C: #56b6c2;
-  --base0D: #61afef;
-  --base0E: #c678dd;
-  --base0F: #be5046;
+  --base07: #{$orange-300}; // #d19a66
+  --base08: #{$cyan-300};
+  --base09: #{$orange-300}; // #d19a66
+  --base0A: #{$yellow-200}; // #e5c07b
+  --base0B: #{$teal-300}; // #98c379
+  --base0C: #{$teal-300}; // #56b6c2
+  --base0D: #{$blue-300}; // #61afef
+  --base0E: #{$indigo-200}; // #c678dd
+  --base0F: #{$red-300}; // #be5046
 }
 
 .hl { background-color: var(--base02); }
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index c85639018..2be534994 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -23,6 +23,7 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
   --bd-callout-link: #{to-rgb($blue-600)};
   --bd-callout-code-color: #{$pink-600};
+  --bd-pre-bg: var(--bs-tertiary-bg);
 }
 
 @include color-mode(dark, true) {
@@ -32,4 +33,5 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
   --bd-callout-link: #{to-rgb($blue-300)};
   --bd-callout-code-color: #{$pink-300};
+  --bd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
 }