From 9f8967d470199aedd42db6b2a9854c60ba764338 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Fri, 7 Mar 2025 09:45:15 -0800
Subject: [PATCH] fix some docs Sass

---
 site/src/layouts/DocsLayout.astro |   4 +-
 site/src/scss/_buttons.scss       |   2 +-
 site/src/scss/_callouts.scss      |   6 +-
 site/src/scss/_colors.scss        |  14 +--
 site/src/scss/_content.scss       |  16 +--
 site/src/scss/_masthead.scss      |  12 +-
 site/src/scss/_navbar.scss        | 188 ++++++++++++++++++------------
 site/src/scss/_syntax.scss        |   2 +-
 site/src/scss/_toc.scss           |   3 -
 site/src/scss/_variables.scss     |  50 ++++----
 10 files changed, 166 insertions(+), 131 deletions(-)

diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro
index 529a3c47f1..08d09764cc 100644
--- a/site/src/layouts/DocsLayout.astro
+++ b/site/src/layouts/DocsLayout.astro
@@ -85,7 +85,7 @@ if (frontmatter.toc) {
         {
           frontmatter.toc && headings && (
             <button
-              class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none"
+              class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-flex align-items-center d-md-none"
               type="button"
               data-bs-toggle="collapse"
               data-bs-target="#tocContents"
@@ -97,7 +97,7 @@ if (frontmatter.toc) {
                 <use xlink:href="#chevron-expand" />
               </svg>
             </button>
-            <strong class="d-none d-md-block h6 my-2 ms-3" id="docs-tocs">On this page</strong>
+            <div class="d-none d-md-block h6 my-2 ms-3" id="docs-tocs">On this page</div>
             <hr class="d-none d-md-block my-2 ms-3" />
             <div class="collapse bd-toc-collapse" id="tocContents">
               <nav id="TableOfContents" aria-labelledby="docs-tocs">
diff --git a/site/src/scss/_buttons.scss b/site/src/scss/_buttons.scss
index 9ce9277f68..34faf72499 100644
--- a/site/src/scss/_buttons.scss
+++ b/site/src/scss/_buttons.scss
@@ -36,7 +36,7 @@
 }
 
 .btn-bd-light {
-  --btn-custom-color: #{mix($bd-violet, $white, 75%)};
+  --btn-custom-color: color-mix(in srgb, #{$bd-violet}, #{$white} 75%);
 
   --bs-btn-color: var(--bs-gray-600);
   --bs-btn-border-color: var(--bs-border-color);
diff --git a/site/src/scss/_callouts.scss b/site/src/scss/_callouts.scss
index b5a4cfba54..1e34331ff7 100644
--- a/site/src/scss/_callouts.scss
+++ b/site/src/scss/_callouts.scss
@@ -7,7 +7,7 @@
 //
 
 .bd-callout {
-  --#{$prefix}link-color-rgb: var(--bd-callout-link);
+  --#{$prefix}link-color: var(--bd-callout-link);
   --#{$prefix}code-color: var(--bd-callout-code-color);
 
   padding: 1.25rem;
@@ -37,8 +37,8 @@
 // Variations
 @each $variant in $bd-callout-variants {
   .bd-callout-#{$variant} {
-    --bd-callout-color: var(--bs-#{$variant}-text-emphasis);
+    --bd-callout-color: var(--bs-#{$variant}-text);
     --bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
-    --bd-callout-border: var(--bs-#{$variant}-border-subtle);
+    --bd-callout-border: var(--bs-#{$variant}-border);
   }
 }
diff --git a/site/src/scss/_colors.scss b/site/src/scss/_colors.scss
index cf1177f31f..b3fadfe056 100644
--- a/site/src/scss/_colors.scss
+++ b/site/src/scss/_colors.scss
@@ -14,9 +14,9 @@
     background-color: #{$value};
 
     &::after {
-      $contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
-      $against-white: "#{contrast-ratio($value, $white)}";
-      $against-black: "#{contrast-ratio($value, $black)}";
+      // $contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
+      // $against-white: "#{contrast-ratio($value, $white)}";
+      // $against-black: "#{contrast-ratio($value, $black)}";
       position: absolute;
       top: 1rem;
       right: 1rem;
@@ -24,10 +24,10 @@
       font-size: .75rem;
       line-height: 1.35;
       white-space: pre;
-      content:
-        str-slice($contrast-ratio, 1, 4) "\A"
-        str-slice($against-white, 1, 4) "\A"
-        str-slice($against-black, 1, 4);
+      // content:
+      //   str-slice($contrast-ratio, 1, 4) "\A"
+      //   str-slice($against-white, 1, 4) "\A"
+      //   str-slice($against-black, 1, 4);
       background-color: $value;
       background-image:
         linear-gradient(
diff --git a/site/src/scss/_content.scss b/site/src/scss/_content.scss
index 671c331090..b437e123e2 100644
--- a/site/src/scss/_content.scss
+++ b/site/src/scss/_content.scss
@@ -149,25 +149,27 @@
 // scss-docs-start custom-color-mode
 [data-bs-theme="blue"] {
   --bs-body-color: var(--bs-white);
-  --bs-body-color-rgb: #{to-rgb($white)};
+  // --bs-body-color-rgb: #{to-rgb($white)};
   --bs-body-bg: var(--bs-blue);
-  --bs-body-bg-rgb: #{to-rgb($blue)};
+  // --bs-body-bg-rgb: #{to-rgb($blue)};
   --bs-tertiary-bg: #{$blue-600};
 
   .dropdown-menu {
-    --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
+    --bs-dropdown-bg: color-mix(in srgb, #{$blue-500}, #{$blue-600});
     --bs-dropdown-link-active-bg: #{$blue-700};
   }
 
   .btn-secondary {
-    --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
+    --bs-btn-bg: #{color-mix(in srgb, #{$gray-600}, #{$blue-400})};
     --bs-btn-border-color: #{rgba($white, .25)};
-    --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
+    // --bs-btn-hover-bg: #{darken(color-mix(in srgb, #{$gray-600}, #{$blue-400}, .5), 5%)};
+    --bs-btn-hover-bg: color-mix(in srgb, #{$gray-600}, #{$blue-400});
     --bs-btn-hover-border-color: #{rgba($white, .25)};
-    --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
+    // --bs-btn-active-bg: #{darken(color-mix(in srgb, #{$gray-600}, #{$blue-400}, .5), 10%)};
+    --bs-btn-active-bg: color-mix(in srgb, #{$gray-600}, #{$blue-400});
     --bs-btn-active-border-color: #{rgba($white, .5)};
     --bs-btn-focus-border-color: #{rgba($white, .5)};
-    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
+    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgb(255, 255, 255, .2);
   }
 }
 // scss-docs-end custom-color-mode
diff --git a/site/src/scss/_masthead.scss b/site/src/scss/_masthead.scss
index 15c8d5a03f..314080cb19 100644
--- a/site/src/scss/_masthead.scss
+++ b/site/src/scss/_masthead.scss
@@ -8,14 +8,14 @@
 @use "../../../scss/mixins/color-mode" as *;
 
 .bd-masthead {
-  --bd-pink: $pink;
+  // --bd-pink: #{$pink};
   padding: 3rem 0;
   // stylelint-disable
-  background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 1%, transparent), color-mix(in srgb, var(--bs-body-bg) 85%, transparent)),
-                    radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-primary) 50%, transparent), transparent 50%),
-                    radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent) 50%, transparent), transparent 50%),
-                    radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet) 50%, transparent), transparent 50%),
-                    radial-gradient(ellipse at center left, color-mix(in srgb, var(--bd-pink) 50%, transparent), transparent 50%);
+  // background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 1%, transparent), color-mix(in srgb, var(--bs-body-bg) 85%, transparent)),
+  //                   radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-primary), transparent)),
+  //                   radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent), transparent)),
+  //                   radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet), transparent)),
+  //                   radial-gradient(ellipse at center left, color-mix(in srgb, var(--bd-pink), transparent));
   // stylelint-enable
 
   h1 {
diff --git a/site/src/scss/_navbar.scss b/site/src/scss/_navbar.scss
index d82f7325d1..7c6ed299b2 100644
--- a/site/src/scss/_navbar.scss
+++ b/site/src/scss/_navbar.scss
@@ -6,80 +6,72 @@
 @use "../../../scss/layout/breakpoints" as *;
 @use "../../../scss/vendor/rfs" as *;
 
-.bd-navbar {
-  padding: .75rem 0;
-  background-color: transparent;
-  box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+@layer custom {
+  .bd-navbar {
+    padding: .75rem 0;
+    background-color: transparent;
+    box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
 
-  @media (forced-colors) {
-    background-color: Canvas;
-  }
-
-  &::after {
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    display: block;
-    content: "";
-    background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
-  }
-
-  .bd-navbar-toggle {
-    @include media-breakpoint-down(lg) {
-      width: 4.25rem;
-    }
-  }
-
-  .navbar-toggler {
-    padding: 0;
-    margin-right: -.5rem;
-    border: 0;
-
-    &:first-child {
-      margin-left: -.5rem;
+    @media (forced-colors) {
+      background-color: Canvas;
     }
 
-    .bi {
-      width: 1.5rem;
-      height: 1.5rem;
+    &::after {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      display: block;
+      content: "";
+      background-image: linear-gradient(var(--bd-violet), color-mix(in srgb, var(--bd-violet), transparent 5%));
+      // background-image: linear-gradient(color-mix(in srgb, var(--bs-gray-900), $black 10%), color-mix(in srgb, var(--bs-gray-900), $black 15%));
     }
 
-    &:focus {
-      box-shadow: none;
+    .bd-navbar-toggle {
+      @include media-breakpoint-down(lg) {
+        width: 4.25rem;
+      }
     }
-  }
 
-  .navbar-brand {
-    color: $white;
-    @include transition(transform .2s ease-in-out);
+    .navbar-toggler {
+      padding: 0;
+      margin-right: -.5rem;
+      border: 0;
 
-    &:hover {
-      transform: rotate(-5deg) scale(1.1);
+      &:first-child {
+        margin-left: -.5rem;
+      }
+
+      .bi {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      &:focus {
+        box-shadow: none;
+      }
     }
-  }
 
-  .navbar-toggler,
-  .nav-link {
-    padding-right: $spacer * .25;
-    padding-left: $spacer * .25;
-    color: rgba($white, .85);
-
-    &:hover,
-    &:focus {
+    .navbar-brand {
       color: $white;
+      @include transition(transform .2s ease-in-out);
+
+      &:hover {
+        transform: rotate(-5deg) scale(1.1);
+      }
     }
 
-    &.active {
-      font-weight: 600;
-      color: $white;
-    }
-  }
+    .navbar-toggler,
+    .nav-link {
+      padding-right: $spacer * .25;
+      padding-left: $spacer * .25;
+      color: rgba($white, .85);
 
-  .navbar-nav-svg {
-    display: inline-block;
-    vertical-align: -.125rem;
-  }
+      &:hover,
+      &:focus {
+        color: $white;
+      }
 
+<<<<<<< HEAD
   .offcanvas-lg {
     background-color: var(--bd-violet-bg);
     border-left: 0;
@@ -108,34 +100,76 @@
 
     li + li {
       margin-top: .125rem;
+=======
+      &.active {
+        font-weight: 600;
+        color: $white;
+      }
+>>>>>>> 9c2140328 (fix some docs Sass)
     }
 
-    .dropdown-item {
-      @include border-radius(.25rem);
+    .navbar-nav-svg {
+      display: inline-block;
+      vertical-align: -.125rem;
+    }
+
+    .offcanvas-lg {
+      background-color: var(--bd-violet-bg);
+      border-left: 0;
+
+      @include media-breakpoint-down(lg) {
+        box-shadow: $box-shadow-lg;
+      }
+    }
+
+    .dropdown-toggle {
+      &:focus:not(:focus-visible) {
+        outline: 0;
+      }
+    }
+
+    .dropdown-menu {
+      --bs-dropdown-min-width: 12rem;
+      --bs-dropdown-padding-x: .25rem;
+      --bs-dropdown-padding-y: .25rem;
+      --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
+      --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
+      @include rfs(.875rem, --bs-dropdown-font-size);
+      @include font-size(.875rem);
+      @include border-radius(.5rem);
+      box-shadow: $dropdown-box-shadow;
+
+      li + li {
+        margin-top: .125rem;
+      }
+
+      .dropdown-item {
+        @include border-radius(.25rem);
+
+        &:active {
+          .bi {
+            color: inherit !important; // stylelint-disable-line declaration-no-important
+          }
+        }
+      }
+
+      .active {
+        font-weight: 600;
 
-      &:active {
         .bi {
-          color: inherit !important; // stylelint-disable-line declaration-no-important
+          display: block !important; // stylelint-disable-line declaration-no-important
         }
       }
     }
 
-    .active {
-      font-weight: 600;
-
-      .bi {
-        display: block !important; // stylelint-disable-line declaration-no-important
-      }
+    .dropdown-menu-end {
+      --bs-dropdown-min-width: 8rem;
     }
   }
 
-  .dropdown-menu-end {
-    --bs-dropdown-min-width: 8rem;
-  }
-}
-
-@include color-mode(dark) {
-  .bd-navbar {
-    box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+  @include color-mode(dark) {
+    .bd-navbar {
+      box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+    }
   }
 }
diff --git a/site/src/scss/_syntax.scss b/site/src/scss/_syntax.scss
index 5f23d8a47b..d1bf33a0b2 100644
--- a/site/src/scss/_syntax.scss
+++ b/site/src/scss/_syntax.scss
@@ -14,7 +14,7 @@
   --base05: #333;
   --base06: #fff;
   --base07: #{$teal-700}; // #9a6700
-  --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
+  --base08: color-mix(in srgb, #{$red-500}, #{$red-600} 50%); // #bc4c00
   --base09: #{$cyan-700}; // #087990
   --base0A: #{$purple-500}; // #795da3
   --base0B: #{$blue-700}; // #183691
diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss
index 474e94d5c7..a4fecd4a8c 100644
--- a/site/src/scss/_toc.scss
+++ b/site/src/scss/_toc.scss
@@ -54,9 +54,6 @@
 }
 
 .bd-toc-toggle {
-  display: flex;
-  align-items: center;
-
   @include media-breakpoint-down(sm) {
     justify-content: space-between;
     width: 100%;
diff --git a/site/src/scss/_variables.scss b/site/src/scss/_variables.scss
index e6cf3742b0..370ea492ee 100644
--- a/site/src/scss/_variables.scss
+++ b/site/src/scss/_variables.scss
@@ -12,29 +12,31 @@ $bd-accent:        #ffe484;
 $bd-gutter-x: 3rem;
 $bd-callout-variants: info, warning, danger !default;
 
-:root,
-[data-bs-theme="light"] {
-  --bd-purple: #{$bd-purple};
-  --bd-violet: #{$bd-violet};
-  --bd-accent: #{$bd-accent};
-  --bd-violet-rgb: #{to-rgb($bd-violet)};
-  --bd-accent-rgb: #{to-rgb($bd-accent)};
-  --bd-pink-rgb: #{to-rgb($pink-500)};
-  --bd-teal-rgb: #{to-rgb($teal-500)};
-  --bd-violet-bg: var(--bd-violet);
-  --bd-toc-color: var(--bd-violet);
-  --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);
-}
+@layer custom {
+  :root,
+  [data-bs-theme="light"] {
+    --bd-purple: #{$bd-purple};
+    --bd-violet: #{$bd-violet};
+    --bd-accent: #{$bd-accent};
+    // --bd-violet-rgb: #{to-rgb($bd-violet)};
+    // --bd-accent-rgb: #{to-rgb($bd-accent)};
+    // --bd-pink-rgb: #{to-rgb($pink-500)};
+    // --bd-teal-rgb: #{to-rgb($teal-500)};
+    --bd-violet-bg: var(--bd-violet);
+    --bd-toc-color: var(--bd-violet);
+    --bd-sidebar-link-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
+    --bd-callout-link: #{$blue-600};
+    --bd-callout-code-color: #{$pink-600};
+    --bd-pre-bg: light-dark(var(--bs-gray-100), color-mix(in srgb, var(--bs-gray-900), var(--bs-black) 25%));
+  }
 
-@include color-mode(dark, true) {
-  --bd-violet: #{mix($bd-violet, $white, 75%)};
-  --bd-violet-bg: #{$bd-violet};
-  --bd-toc-color: var(--#{$prefix}emphasis-color);
-  --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
+  // @include color-mode(dark, true) {
+  //   --bd-violet: #{mix($bd-violet, $white, 75%)};
+  //   --bd-violet-bg: #{$bd-violet};
+  //   --bd-toc-color: var(--#{$prefix}emphasis-color);
+  //   --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
+  // }
 }