Backport Sass from upstream (#443)

* Backport Sass from upstream * Fix ads horizontal centering at some breakpoints * Delete the unused _buttons.scss * Move comment * Update _ads.scss --------- Co-authored-by: Julien Déramond <[email protected]>
twbs · Apr 24, 2024 · 54e7e29 · 54e7e29
1 parent 37ae94c
commit 54e7e29
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 85 deletions.
diff --git a/src/assets/scss/_ads.scss b/src/assets/scss/_ads.scss
@@ -8,28 +8,30 @@
   position: static;
   display: block;
   max-width: 400px;
-  padding: 12px 12px 12px 154px;
-  margin: 1.5rem auto 0;
+  padding: 15px 15px 15px 160px;
+  // Custom blog property
+  // `auto` is some extra code compared to the upstream rule
+  // to center horizontally the ads at small breakpoints
+  margin: 2rem auto 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
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;
@@ -115,6 +121,7 @@
     --bs-dropdown-min-width: 8rem;
   }
 
+  // Custom blog selector
   hr {
     margin: 1rem 0;
   }

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,10 @@
 // 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"] {

diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
@@ -1,7 +1,6 @@
 @import "bootstrap";
 @import "variables";
 @import "ads";
-@import "buttons";
 @import "component-examples";
 @import "clipboard-js";
 @import "footer";