fix some docs Sass

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">

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);

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);
   }
 }

site/src/scss/_colors.scss

@@ -14,9 +14,9 @@
     background-color: #{$value};
 
     &::after {
-      $contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
+      // $contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
-      $against-white: "#{contrast-ratio($value, $white)}";
+      // $against-white: "#{contrast-ratio($value, $white)}";
-      $against-black: "#{contrast-ratio($value, $black)}";
+      // $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:
+      // content:
-        str-slice($contrast-ratio, 1, 4) "\A"
+      //   str-slice($contrast-ratio, 1, 4) "\A"
-        str-slice($against-white, 1, 4) "\A"
+      //   str-slice($against-white, 1, 4) "\A"
-        str-slice($against-black, 1, 4);
+      //   str-slice($against-black, 1, 4);
       background-color: $value;
       background-image:
         linear-gradient(

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

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)),
+  // 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 left, color-mix(in srgb, var(--bs-primary), transparent)),
-                    radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent) 50%, transparent), transparent 50%),
+  //                   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) 50%, transparent), transparent 50%),
+  //                   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) 50%, transparent), transparent 50%);
+  //                   radial-gradient(ellipse at center left, color-mix(in srgb, var(--bd-pink), transparent));
   // stylelint-enable
 
   h1 {

site/src/scss/_navbar.scss

@@ -6,6 +6,7 @@
 @use "../../../scss/layout/breakpoints" as *;
 @use "../../../scss/vendor/rfs" as *;
 
+@layer custom {
   .bd-navbar {
     padding: .75rem 0;
     background-color: transparent;
@@ -21,7 +22,8 @@
       z-index: -1;
       display: block;
       content: "";
-    background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
+      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%));
     }
 
     .bd-navbar-toggle {
@@ -69,10 +71,41 @@
         color: $white;
       }
 
+<<<<<<< HEAD
+  .offcanvas-lg {
+    background-color: var(--bd-violet-bg);
+    border-left: 0;
+
+    @include media-breakpoint-down(lg) {
+      box-shadow: var(--bs-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;
+=======
       &.active {
         font-weight: 600;
         color: $white;
       }
+>>>>>>> 9c2140328 (fix some docs Sass)
     }
 
     .navbar-nav-svg {
@@ -85,7 +118,7 @@
       border-left: 0;
 
       @include media-breakpoint-down(lg) {
-      box-shadow: var(--bs-box-shadow-lg);
+        box-shadow: $box-shadow-lg;
       }
     }
 
@@ -139,3 +172,4 @@
       box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
     }
   }
+}

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

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%;

site/src/scss/_variables.scss

@@ -12,29 +12,31 @@ $bd-accent:        #ffe484;
 $bd-gutter-x: 3rem;
 $bd-callout-variants: info, warning, danger !default;
 
+@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-violet-rgb: #{to-rgb($bd-violet)};
-  --bd-accent-rgb: #{to-rgb($bd-accent)};
+    // --bd-accent-rgb: #{to-rgb($bd-accent)};
-  --bd-pink-rgb: #{to-rgb($pink-500)};
+    // --bd-pink-rgb: #{to-rgb($pink-500)};
-  --bd-teal-rgb: #{to-rgb($teal-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-sidebar-link-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
-  --bd-callout-link: #{to-rgb($blue-600)};
+    --bd-callout-link: #{$blue-600};
     --bd-callout-code-color: #{$pink-600};
-  --bd-pre-bg: var(--bs-tertiary-bg);
+    --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) {
+  // @include color-mode(dark, true) {
-  --bd-violet: #{mix($bd-violet, $white, 75%)};
+  //   --bd-violet: #{mix($bd-violet, $white, 75%)};
-  --bd-violet-bg: #{$bd-violet};
+  //   --bd-violet-bg: #{$bd-violet};
-  --bd-toc-color: var(--#{$prefix}emphasis-color);
+  //   --bd-toc-color: var(--#{$prefix}emphasis-color);
-  --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
+  //   --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
-  --bd-callout-link: #{to-rgb($blue-300)};
+  //   --bd-callout-link: #{to-rgb($blue-300)};
-  --bd-callout-code-color: #{$pink-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
+  //   --bd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
+  // }
 }