From ffc9371be5da261eddd09dd1498e81cb21283814 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 10 Dec 2020 12:59:18 -0800
Subject: [PATCH 1/3] WIP implementation of more CSS vars

---
 scss/_reboot.scss      | 10 +++++-----
 scss/_root.scss        | 22 ++++++++++++++++++++++
 scss/mixins/_grid.scss |  2 +-
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 50ba7431b..f79ff8297 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -26,7 +26,7 @@
 // null by default, thus nothing is generated.
 
 :root {
-  font-size: $font-size-root;
+  font-size: var(--root-font-size);
 
   @if $enable-smooth-scroll {
     @media (prefers-reduced-motion: no-preference) {
@@ -45,13 +45,13 @@
 
 body {
   margin: 0; // 1
-  font-family: $font-family-base;
-  @include font-size($font-size-base);
+  font-family: var(--bs-body-font);
+  @include font-size(var(--bs-body-font-size));
   font-weight: $font-weight-base;
   line-height: $line-height-base;
-  color: $body-color;
+  color: var(--bs-body-color);
   text-align: $body-text-align;
-  background-color: $body-bg; // 2
+  background-color: var(--bs-body-bg); // 2
   -webkit-text-size-adjust: 100%; // 3
   -webkit-tap-highlight-color: rgba($black, 0); // 4
 }
diff --git a/scss/_root.scss b/scss/_root.scss
index 768d6343f..aeb1b372b 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -4,6 +4,10 @@
     --#{$variable-prefix}#{$color}: #{$value};
   }
 
+  @each $color, $value in $grays {
+    --#{$variable-prefix}#{$color}: #{$value};
+  }
+
   @each $color, $value in $theme-colors {
     --#{$variable-prefix}#{$color}: #{$value};
   }
@@ -13,4 +17,22 @@
   --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
   --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
   --#{$variable-prefix}gradient: #{$gradient};
+
+  // Root and body
+  --#{$variable-prefix}root-font-size: #{$font-size-root};
+  --#{$variable-prefix}body-font: #{$font-family-base};
+  --#{$variable-prefix}body-font-size: #{$font-size-base};
+  --#{$variable-prefix}body-color: #{$body-color};
+  --#{$variable-prefix}body-bg: #{$body-bg};
+
+  // Layout
+  --#{$variable-prefix}grid-columns: #{$grid-columns};
+  --#{$variable-prefix}grid-gutter-width: #{$grid-gutter-width};
+
+  // Spacing
+  // TODO: Ideally we'd size these values based on the CSS var instead of the Sass map, so they'd be live updating, but TBD on feasibility
+  --#{$variable-prefix}spacer: #{$spacer};
+  @each $size, $value in $spacers {
+    --#{$variable-prefix}spacer-#{$size}: #{$value};
+  }
 }
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 92bb88ad4..3548cc671 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -2,7 +2,7 @@
 //
 // Generate semantic grid columns with these mixins.
 
-@mixin make-row($gutter: $grid-gutter-width) {
+@mixin make-row($gutter: var(--bs-grid-gutter-width)) {
   --#{$variable-prefix}gutter-x: #{$gutter};
   --#{$variable-prefix}gutter-y: 0;
   display: flex;

From ec6e3fba03a2b029a3d7923ec304e9705772ae30 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Sat, 12 Dec 2020 10:38:12 +0200
Subject: [PATCH 2/3] Update .bundlewatch.config.json

---
 .bundlewatch.config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 074066390..9c287aae2 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "22 kB"
+      "maxSize": "22.25 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",

From 8f6643c40f8d7e61461568f1cc7a799600d99724 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Sat, 12 Dec 2020 10:39:46 +0200
Subject: [PATCH 3/3] Update .bundlewatch.config.json

---
 .bundlewatch.config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 9c287aae2..074066390 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "22.25 kB"
+      "maxSize": "22 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",