Remove most bootstrap sass variables and util usages (#6351)

Contributes to #4164
Contributes to #5251

src/_sass/_dartvm.scss

@@ -1,11 +1,9 @@
-@use 'core/bootstrap';
-
 #stable,
 #beta,
 #dev {
   tbody {
     tr {
-      @include bootstrap.transition();
+      transition: all .25s ease-in-out;
 
       &.hidden {
         display: none;

src/_sass/_site.scss

@@ -23,11 +23,6 @@
 @use 'overwrites';
 @use 'dash';
 
-// Extra variables (defined in terms of bootstrap and other defaults)
-$font-color: bootstrap.$body-color;
-$font-weight-light-bold: (bootstrap.$font-weight-normal + bootstrap.$font-weight-bold) * 0.5;
-
-
 /* -----------------------------------------
   DOM
   ----------------------------------------- */
@@ -84,7 +79,7 @@ $font-weight-light-bold: (bootstrap.$font-weight-normal + bootstrap.$font-weight
 }
 
 #site-content-title {
-  margin-bottom: bootstrap.bs-spacer(6);
+  margin-bottom: 1.5rem;
 }
 
 #page-footer {

src/_sass/components/_code.scss

@@ -2,19 +2,18 @@
 
 @use '../core/colors' as *;
 @use '../core/variables' as *;
-@use '../core/bootstrap';
 
 pre {
   margin-bottom: 1rem;
   font-size: 0.9375rem;
-  font-weight: bootstrap.$font-weight-normal;
+  font-weight: 400;
   padding: 1.25rem;
 
   a {
     font-family: inherit;
     font-weight: inherit;
   }
-  
+
   .highlight {
     background: $flutter-color-yellow-300;
     padding: 0.1em;
@@ -27,11 +26,11 @@ pre {
       padding: 0;
     }
   }
-  
+
   &:focus {
     outline: none;
   }
-  
+
   span.line {
     padding-left: 1.25rem;
     padding-right: 1.25rem;
@@ -41,11 +40,11 @@ pre {
       background: color.change($brand-primary, $alpha: 0.1);
     }
   }
-  
+
   &.show-line-numbers code {
     span.line {
       padding-left: 0.5rem;
-      
+
       &[data-line]::before {
         display: inline-block;
         content: attr(data-line) "";
@@ -139,15 +138,15 @@ pre {
 .code-block-wrapper {
   margin-bottom: 1rem;
   border: 1px solid $flutter-color-grey-500;
-  
+
   .code-block-header {
     background-color: #e9ecef;
     border-bottom: 1px solid $flutter-color-grey-500;
     font-size: 0.9375rem;
     font-weight: 500;
     padding: 0.75rem 0.5rem 0.67rem 1rem;
   }
-  
+
   .code-block-body {
     position: relative;
     background-color: $site-color-codeblock-bg;
@@ -170,16 +169,16 @@ pre {
       background-color: $alert-danger-bg;
     }
   }
-  
+
   &:has(:focus-visible) {
     border-color: #1389FD;
   }
-  
+
   pre {
     margin-bottom: 0;
     padding-right: 0;
     padding-left: 0;
-    
+
     &:not([lang="console"]) {
       line-height: 1.8;
     }

src/_sass/components/_header.scss

@@ -9,7 +9,7 @@
   z-index: $site-z-header;
 
   .navbar {
-    font-size: bootstrap.$font-size-lg;
+    font-size: 1.25rem;;
     min-height: $site-header-height;
 
     @include bootstrap.media-breakpoint-up(md) {
@@ -18,7 +18,7 @@
 
     .navbar-toggler {
       color: $site-color-body;
-      margin-right: bootstrap.bs-spacer(4);
+      margin-right: 1rem;
       padding: 0;
 
       .material-symbols {
@@ -32,11 +32,11 @@
 
     .nav-link {
       color: $site-color-nav-links;
-      padding: bootstrap.bs-spacer(5) 0;
+      padding: 1.25rem 0;
       position: relative;
 
       @include bootstrap.media-breakpoint-up(md) {
-        padding: 0 bootstrap.bs-spacer(4);
+        padding: 0 1rem;
       }
 
       &.active {
@@ -61,8 +61,8 @@
   }
 
   &__cta {
-    margin-left: bootstrap.bs-spacer(2);
-    padding: bootstrap.bs-spacer(2) bootstrap.bs-spacer(4) !important;
+    margin-left: 0.5rem;
+    padding: 0.5rem 1rem !important;
 
     @include bootstrap.media-breakpoint-down(sm) {
       display: none;
@@ -77,21 +77,21 @@
       font: $site-font-icon;
       pointer-events: none;
       position: absolute;
-      left: bootstrap.bs-spacer(1);
+      left: 0.25rem;
     }
 
     @include bootstrap.media-breakpoint-up(md) {
-      margin-left: bootstrap.bs-spacer(4);
+      margin-left: 1rem;
     }
   }
 
   &__searchfield {
     border: 0;
-    font-size: bootstrap.$font-size-sm;
-    padding-left: bootstrap.bs-spacer(8);
+    font-size: 0.875rem;
+    padding-left: 2rem;
 
     @include bootstrap.media-breakpoint-down(sm) {
-      font-size: bootstrap.$font-size-lg;
+      font-size: 1.25rem;
       height: 3rem;
       width: 100%;
     }
@@ -108,10 +108,10 @@
 
   &__social {
     .nav-item.nav-link {
-      padding: 0 bootstrap.bs-spacer(2);
+      padding: 0 0.5rem;
 
       @include bootstrap.media-breakpoint-down(sm) {
-        padding: 0 bootstrap.bs-spacer(1);
+        padding: 0 0.25rem;
         font-size: smaller;
       }
     }

src/_sass/components/_search.scss

@@ -52,7 +52,7 @@
   }
 
   #sidenav & {
-    font-size: bootstrap.$font-size-lg;
+    font-size: 1.25rem;
     height: 3rem;
     width: 100%;
 

src/_sass/components/_toc.scss

@@ -12,7 +12,7 @@
   &__title {
     font-family: $site-font-family-alt;
     font-size: 18px;
-    margin-bottom: bootstrap.bs-spacer(2);
+    margin-bottom: 0.5rem;
   }
 }
 
@@ -37,8 +37,8 @@
   }
 
   .toc-entry {
-    padding-bottom: bootstrap.bs-spacer(2);
-    font-size: bootstrap.$font-size-sm;
+    padding-bottom: 0.5rem;
+    font-size: 0.875rem;
 
     // Indent subsequent lines.
     margin-left: 1rem;

src/_sass/core/_base.scss

@@ -1,6 +1,5 @@
 @use '../core/variables' as *;
 @use '../core/mixins' as *;
-@use '../core/bootstrap';
 
 :root {
   --site-interaction-base-values: 0 0 0;
@@ -27,34 +26,34 @@ h1, h2, h3, h4, h5, h6 {
 
 h1, .h1 {
   font-family: $site-font-family-gsans-display;
-  font-size: bootstrap.$h1-font-size;
+  font-size: 3rem;
   margin-top: 0;
   margin-bottom: 0;
 }
 
 h2, .h2 {
-  font-size: bootstrap.$h2-font-size;
+  font-size: 1.5rem;
 }
 
 h3, .h3 {
-  font-size: bootstrap.$h3-font-size;
+  font-size: 1.3125rem;
 }
 
 h4, .h4 {
-  font-size: bootstrap.$h4-font-size;
+  font-size: 1.125rem;
 }
 
 h5, .h5 {
-  font-size: bootstrap.$h5-font-size;
+  font-size: 0.9375rem;
 }
 
 h6, .h6 {
-  font-size: bootstrap.$h6-font-size;
+  font-size: 0.9375rem;
 }
 
 dt {
   a {
-    font-weight: bootstrap.$font-weight-bold
+    font-weight: 500;
   }
 }
 

src/_sass/core/_bootstrap.scss

@@ -93,7 +93,3 @@
 );
 
 @use '../../../node_modules/bootstrap-scss/bootstrap';
-
-@function bs-spacer($key: 3) {
-  @return map-get(bootstrap.$spacers, $key);
-}