Backport Sass from upstream

twbs · Mar 25, 2024 · befa7b5 · befa7b5
1 parent d91b2ea
commit befa7b5
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 54 deletions.
diff --git a/src/assets/scss/_ads.scss b/src/assets/scss/_ads.scss
@@ -8,28 +8,27 @@
   position: static;
   display: block;
   max-width: 400px;
-  padding: 12px 12px 12px 154px;
-  margin: 1.5rem auto 0;
+  padding: 15px 15px 15px 160px;
+  margin: 2rem 0;
   overflow: hidden;
-  font-size: .875rem;
+  @include font-size(.8125rem);
   line-height: 1.4;
   text-align: left;
   background-color: var(--bs-tertiary-bg);
-  border-radius: .5rem;
 
   a {
     color: var(--bs-body-color);
     text-decoration: none;
   }
+
+  @include media-breakpoint-up(sm) {
+    @include border-radius(.5rem);
+  }
 }
 
 .carbon-img {
   float: left;
-  margin-left: -140px;
-
-  > img {
-    margin-bottom: 0;
-  }
+  margin-left: -145px;
 }
 
 .carbon-poweredby {

diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss
@@ -2,12 +2,12 @@
 //
 // Custom buttons for the docs.
 
+// scss-docs-start btn-css-vars-example
 .btn-bd-primary {
   --bs-btn-font-weight: 600;
   --bs-btn-color: var(--bs-white);
-  --bs-btn-bg: var(--bd-violet);
-  --bs-btn-border-color: var(--bd-violet);
-  --bs-btn-border-radius: .5rem;
+  --bs-btn-bg: var(--bd-violet-bg);
+  --bs-btn-border-color: var(--bd-violet-bg);
   --bs-btn-hover-color: var(--bs-white);
   --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
   --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
@@ -16,6 +16,7 @@
   --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
   --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
 }
+// scss-docs-end btn-css-vars-example
 
 .btn-bd-accent {
   --bs-btn-font-weight: 600;
@@ -31,13 +32,21 @@
 }
 
 .btn-bd-light {
+  --btn-custom-color: #{mix($bd-violet, $white, 75%)};
+
   --bs-btn-color: var(--bs-gray-600);
-  --bs-btn-border-color: var(--bs-gray-400);
-  --bs-btn-hover-color: var(--bd-violet);
-  --bs-btn-hover-border-color: var(--bd-violet);
-  --bs-btn-active-color: var(--bd-violet);
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-hover-color: var(--btn-custom-color);
+  --bs-btn-hover-border-color: var(--btn-custom-color);
+  --bs-btn-active-color: var(--btn-custom-color);
   --bs-btn-active-bg: var(--bs-white);
-  --bs-btn-active-border-color: var(--bd-violet);
-  --bs-btn-focus-border-color: var(--bd-violet);
+  --bs-btn-active-border-color: var(--btn-custom-color);
+  --bs-btn-focus-border-color: var(--btn-custom-color);
   --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
 }
+
+.bd-btn-lg {
+  --bs-btn-border-radius: .5rem;
+
+  padding: .8125rem 2rem;
+}
diff --git a/src/assets/scss/_component-examples.scss b/src/assets/scss/_component-examples.scss
@@ -220,15 +220,16 @@
 
 // scss-docs-start custom-tooltip
 .custom-tooltip {
-  --bs-tooltip-bg: var(--bs-primary);
+  --bs-tooltip-bg: var(--bd-violet-bg);
+  --bs-tooltip-color: var(--bs-white);
 }
 // scss-docs-end custom-tooltip
 
 // scss-docs-start custom-popovers
 .custom-popover {
   --bs-popover-max-width: 200px;
-  --bs-popover-border-color: var(--bs-primary);
-  --bs-popover-header-bg: var(--bs-primary);
+  --bs-popover-border-color: var(--bd-violet-bg);
+  --bs-popover-header-bg: var(--bd-violet-bg);
   --bs-popover-header-color: var(--bs-white);
   --bs-popover-body-padding-x: 1rem;
   --bs-popover-body-padding-y: .5rem;
@@ -378,6 +379,10 @@
   }
 }
 
+.bd-example-snippet .highlight pre {
+  margin-right: 0;
+}
+
 .highlight-toolbar {
   background-color: var(--bd-pre-bg);
 
@@ -394,6 +399,7 @@
   }
 }
 
+// Custom blog selector
 .posts .bd-code-snippet {
   margin-bottom: 1rem;
 }
diff --git a/src/assets/scss/_navbar.scss b/src/assets/scss/_navbar.scss
@@ -77,6 +77,12 @@
     }
   }
 
+  .dropdown-toggle {
+    &:focus:not(:focus-visible) {
+      outline: 0;
+    }
+  }
+
   .dropdown-menu {
     --bs-dropdown-min-width: 12rem;
     --bs-dropdown-padding-x: .25rem;
@@ -114,10 +120,6 @@
   .dropdown-menu-end {
     --bs-dropdown-min-width: 8rem;
   }
-
-  hr {
-    margin: 1rem 0;
-  }
 }
 
 @include color-mode(dark) {

diff --git a/src/assets/scss/_syntax.scss b/src/assets/scss/_syntax.scss
@@ -1,40 +1,47 @@
 :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: #e06c75;
-  --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
+
+  .language-diff .gd {
+    color: $red-400;
+  }
+  .language-diff .gi {
+    color: $green-400;
+  }
 }
 
 .hl { background-color: var(--base02); }
@@ -53,7 +60,7 @@
 .ge { font-style: italic; }
 .gh {
   font-weight: 600;
-  color: #fff;
+  color: var(--base0A);
 }
 .gi { color: var(--bs-success); }
 .gp {

diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
@@ -1,9 +1,11 @@
 // Local docs variables
-$bd-purple:       #4c0bce;
-$bd-violet:       lighten(saturate($bd-purple, 5%), 15%);
-// $bd-purple-light: lighten(saturate($bd-purple, 5%), 45%);
-$bd-accent:       #ffe484;
-$bd-gutter-x:     3rem;
+$bd-purple:        #4c0bce;
+$bd-violet:        lighten(saturate($bd-purple, 5%), 15%);
+$bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%);
+$bd-accent:        #ffe484;
+
+$bd-gutter-x: 3rem;
+$bd-callout-variants: info, warning, danger !default;
 
 :root,
 [data-bs-theme="light"] {