Fix off-scale spacing values flagged in #42907

scss/_reboot.scss

@@ -158,7 +158,7 @@ address {
 
 ol,
 ul {
-  padding-left: 2rem;
+  padding-left: $list-indent;
 }
 
 ol,

scss/_variables.scss

@@ -418,6 +418,19 @@ $spacers: (
 ) !default;
 // scss-docs-end spacer-variables-maps
 
+// Two additional spacing values recur across component defaults below
+// (button/navbar-toggler/pagination/toast padding-x, and hairline-adjacent
+// micro-spacing for borders and form-check alignment) but aren't steps in
+// the $spacers scale above. Naming them here keeps them intentional and
+// traceable instead of leaving them as unexplained literals.
+$spacer-tight:    $spacer * .75  !default; // 12px
+$spacer-hairline: $spacer * .125 !default; // 2px
+
+// Default list indent (ol/ul padding-left in _reboot.scss). Kept separate
+// from $spacer since it's a browser-normalization value, not a UI spacing
+// step, but still named rather than left as a literal.
+$list-indent: 2rem !default;
+
 // Position
 //
 // Define the edge positioning anchors of the position utilities.
@@ -787,7 +800,7 @@ $table-variants: (
 
 // scss-docs-start input-btn-variables
 $input-btn-padding-y:         .375rem !default;
-$input-btn-padding-x:         .75rem !default;
+$input-btn-padding-x:         $spacer-tight !default;
 $input-btn-font-family:       null !default;
 $input-btn-font-size:         $font-size-base !default;
 $input-btn-line-height:       $line-height-base !default;
@@ -939,7 +952,7 @@ $form-color-width:                      3rem !default;
 $form-check-input-width:                  1em !default;
 $form-check-min-height:                   $font-size-base * $line-height-base !default;
 $form-check-padding-start:                $form-check-input-width + .5em !default;
-$form-check-margin-bottom:                .125rem !default;
+$form-check-margin-bottom:                $spacer-hairline !default;
 $form-check-label-color:                  null !default;
 $form-check-label-cursor:                 null !default;
 $form-check-transition:                   null !default;
@@ -1200,7 +1213,7 @@ $navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) *
 $navbar-brand-margin-end:           1rem !default;
 
 $navbar-toggler-padding-y:          .25rem !default;
-$navbar-toggler-padding-x:          .75rem !default;
+$navbar-toggler-padding-x:          $spacer-tight !default;
 $navbar-toggler-font-size:          $font-size-lg !default;
 $navbar-toggler-border-radius:      $btn-border-radius !default;
 $navbar-toggler-focus-width:        $btn-focus-width !default;
@@ -1238,7 +1251,7 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
 $dropdown-min-width:                10rem !default;
 $dropdown-padding-x:                0 !default;
 $dropdown-padding-y:                .5rem !default;
-$dropdown-spacer:                   .125rem !default;
+$dropdown-spacer:                   $spacer-hairline !default;
 $dropdown-font-size:                $font-size-base !default;
 $dropdown-color:                    var(--#{$prefix}body-color) !default;
 $dropdown-bg:                       var(--#{$prefix}body-bg) !default;
@@ -1290,10 +1303,10 @@ $dropdown-dark-header-color:        $gray-500 !default;
 
 // scss-docs-start pagination-variables
 $pagination-padding-y:              .375rem !default;
-$pagination-padding-x:              .75rem !default;
+$pagination-padding-x:              $spacer-tight !default;
 $pagination-padding-y-sm:           .25rem !default;
 $pagination-padding-x-sm:           .5rem !default;
-$pagination-padding-y-lg:           .75rem !default;
+$pagination-padding-y-lg:           $spacer-tight !default;
 $pagination-padding-x-lg:           1.5rem !default;
 
 $pagination-font-size:              $font-size-base !default;
@@ -1466,7 +1479,7 @@ $popover-arrow-outer-color:         var(--#{$prefix}border-color-translucent) !d
 
 // scss-docs-start toast-variables
 $toast-max-width:                   350px !default;
-$toast-padding-x:                   .75rem !default;
+$toast-padding-x:                   $spacer-tight !default;
 $toast-padding-y:                   .5rem !default;
 $toast-font-size:                   .875rem !default;
 $toast-color:                       null !default;

site/src/scss/_ads.scss

@@ -7,7 +7,7 @@
 #carbonads {
   position: static;
   max-width: 400px;
-  padding: 15px 15px 15px 160px;
+  padding: 1rem 1rem 1rem 160px;
   margin: 1rem 0;
   overflow: hidden;
   @include font-size(.8125rem);
@@ -32,7 +32,7 @@
 
 @container (max-width: 240px) {
   #carbonads {
-    padding-left: 15px;
+    padding-left: 1rem;
   }
 
   .carbon-img {
@@ -57,6 +57,6 @@
 
 .carbon-poweredby {
   display: block;
-  margin-top: .75rem;
+  margin-top: 1rem;
   color: var(--bs-fg-3) !important;
 }

site/src/scss/_buttons.scss

@@ -48,5 +48,5 @@
 .bd-btn-lg {
   --bs-btn-border-radius: .5rem;
 
-  padding: .8125rem 2rem;
+  padding: .8125rem 1.5rem;
 }

site/src/scss/_callouts.scss

@@ -6,9 +6,9 @@
   --#{$prefix}link-color-rgb: var(--bd-callout-link);
   --#{$prefix}code-color: var(--bd-callout-code-color);
 
-  padding: 1.25rem;
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
+  padding: 1.5rem;
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
   color: var(--bd-callout-color, inherit);
   background-color: var(--bd-callout-bg, var(--bs-gray-100));
   border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));

site/src/scss/_clipboard-js.scss

@@ -39,6 +39,6 @@
 .btn-clipboard {
   position: relative;
   z-index: 2;
-  margin-top: 1.25rem;
-  margin-right: .75rem;
+  margin-top: 1.5rem;
+  margin-right: 1rem;
 }

site/src/scss/_component-examples.scss

@@ -35,7 +35,7 @@
   }
 
   + p {
-    margin-top: 2rem;
+    margin-top: 1.5rem;
   }
 
   > .form-control {
@@ -74,7 +74,7 @@
   // Buttons
   > .btn,
   > .btn-group {
-    margin: .25rem .125rem;
+    margin: .25rem .25rem;
   }
   > .btn-toolbar + .btn-toolbar {
     margin-top: .5rem;
@@ -116,8 +116,8 @@
 .bd-example-row [class^="col"],
 .bd-example-cols [class^="col"] > *,
 .bd-example-cssgrid [class*="grid"] > * {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
   background-color: rgba(var(--bd-violet-rgb), .15);
   border: 1px solid rgba(var(--bd-violet-rgb), .3);
 }
@@ -214,7 +214,7 @@
   }
 
   .btn {
-    margin: .25rem .125rem;
+    margin: .25rem .25rem;
   }
 }
 
@@ -272,7 +272,7 @@
 
 .bd-example-position-utils {
   position: relative;
-  padding: 2rem;
+  padding: 1.5rem;
 
   .position-relative {
     height: 200px;
@@ -348,11 +348,11 @@
 
 .highlight {
   position: relative;
-  padding: .75rem ($bd-gutter-x * .5);
+  padding: 1rem ($bd-gutter-x * .5);
   background-color: var(--bd-pre-bg);
 
   @include media-breakpoint-up(md) {
-    padding: .75rem 1.25rem;
+    padding: 1rem 1.5rem;
     @include border-radius(calc(var(--bs-border-radius) - 1px));
   }
 

site/src/scss/_content.scss

@@ -15,7 +15,7 @@
   }
 
   > h3 {
-    margin-top: 2rem;
+    margin-top: 1.5rem;
   }
 
   > ul li,

site/src/scss/_masthead.scss

@@ -55,7 +55,7 @@
 
   #carbonads { // stylelint-disable-line selector-max-id
     max-width: 400px;
-    margin-block: 2rem;
+    margin-block: 1.5rem;
     margin-inline: auto;
   }
 

site/src/scss/_navbar.scss

@@ -1,5 +1,5 @@
 .bd-navbar {
-  padding: .75rem 0;
+  padding: 1rem 0;
   background-color: transparent;
   box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
 
@@ -99,7 +99,7 @@
     box-shadow: $dropdown-box-shadow;
 
     li + li {
-      margin-top: .125rem;
+      margin-top: .25rem;
     }
 
     .dropdown-item {

site/src/scss/_search.scss

@@ -107,7 +107,7 @@
 
 .DocSearch-Button-Keys {
   min-width: 0;
-  padding: .125rem .25rem;
+  padding: .25rem .25rem;
   background: rgba($black, .25);
   @include border-radius(.25rem);
 }
@@ -116,8 +116,8 @@
   top: 0;
   width: auto;
   height: 1.25rem;
-  padding-right: .125rem;
-  padding-left: .125rem;
+  padding-right: .25rem;
+  padding-left: .25rem;
   margin-right: 0;
   font-size: .875rem;
   background: none;

site/src/scss/_sidebar.scss

@@ -45,7 +45,7 @@
 
 .bd-links-link {
   padding: .1875rem .5rem;
-  margin-top: .125rem;
+  margin-top: .25rem;
   margin-left: 1.125rem;
   color: var(--bs-body-color);
   text-decoration: if($link-decoration == none, null, none);

site/src/scss/_toc.scss

@@ -28,7 +28,7 @@
 
     a {
       display: block;
-      padding: .125rem 0 .125rem .75rem;
+      padding: .25rem 0 .25rem 1rem;
       color: inherit;
       text-decoration: none;
       border-left: .125rem solid transparent;
@@ -83,7 +83,7 @@
 .bd-toc-collapse {
   @include media-breakpoint-down(md) {
     nav {
-      padding: 1.25rem 1.25rem 1.25rem 1rem;
+      padding: 1.5rem 1.5rem 1.5rem 1rem;
       background-color: var(--bs-tertiary-bg);
       border: 1px solid var(--bs-border-color);
       @include border-radius(var(--bs-border-radius));