Replace rgba(), remove *-rgb variables

mdo · mdo · commit d6f09c6e27e6 · 2026-01-09T09:09:00.000-08:00
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
@@ -8,7 +8,7 @@
 // scss-docs-start accordion-variables
 $accordion-padding-y:                     1rem !default;
 $accordion-padding-x:                     1.25rem !default;
-$accordion-color:                         var(--color-body) !default;
+$accordion-color:                         var(--fg-body) !default;
 $accordion-bg:                            var(--bg-body) !default;
 $accordion-border-width:                  var(--border-width) !default;
 $accordion-border-color:                  var(--border-color) !default;
diff --git a/scss/_avatar.scss b/scss/_avatar.scss
@@ -12,7 +12,7 @@ $avatar-border-radius:        50% !default;
 $avatar-border-width:         2px !default;
 $avatar-border-color:         var(--bg-body) !default;
 $avatar-bg:                   var(--bg-2) !default;
-$avatar-color:                var(--color-body) !default;
+$avatar-color:                var(--fg-body) !default;
 
 $avatar-status-size:          .75rem !default;
 $avatar-status-border-width:  2px !default;
diff --git a/scss/_card.scss b/scss/_card.scss
@@ -54,7 +54,7 @@ $card-body-gap:                     $card-spacer-y * .5 !default;
     flex-direction: column;
     min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
     height: var(--card-height);
-    color: var(--color-body);
+    color: var(--fg-body);
     word-wrap: break-word;
     background-color: var(--card-bg);
     // border: var(--card-border-width) solid var(--card-border-color);
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
@@ -7,7 +7,7 @@
 @use "layout/breakpoints" as *;
 
 // scss-docs-start list-group-variables
-$list-group-color:                  var(--color-body) !default;
+$list-group-color:                  var(--fg-body) !default;
 $list-group-bg:                     var(--bg-body) !default;
 $list-group-border-color:           var(--border-color) !default;
 $list-group-border-width:           var(--border-width) !default;
@@ -25,9 +25,9 @@ $list-group-disabled-color:         var(--secondary-color) !default;
 $list-group-disabled-bg:            $list-group-bg !default;
 
 $list-group-action-color:           var(--secondary-color) !default;
-$list-group-action-hover-color:     var(--emphasis-color) !default;
+$list-group-action-hover-color:     var(--fg-color) !default;
 
-$list-group-action-active-color:    var(--color-body) !default;
+$list-group-action-active-color:    var(--fg-body) !default;
 $list-group-action-active-bg:       var(--secondary-bg) !default;
 // scss-docs-end list-group-variables
 
diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -22,7 +22,7 @@ $nav-tabs-border-color:             var(--border-color) !default;
 $nav-tabs-border-width:             var(--border-width) !default;
 $nav-tabs-border-radius:            var(--border-radius) !default;
 $nav-tabs-link-hover-border-color:  var(--border-subtle) !default;
-$nav-tabs-link-active-color:        var(--emphasis-color) !default;
+$nav-tabs-link-active-color:        var(--fg-color) !default;
 $nav-tabs-link-active-bg:           var(--bg-body) !default;
 $nav-tabs-link-active-border-color: var(--border-color) var(--border-color) $nav-tabs-link-active-bg !default;
 
@@ -31,7 +31,7 @@ $nav-pills-link-active-bg:          $component-active-bg !default;
 
 $nav-underline-gap:                 1rem !default;
 $nav-underline-border-width:        .125rem !default;
-$nav-underline-link-active-color:   var(--emphasis-color) !default;
+$nav-underline-link-active-color:   var(--fg-color) !default;
 // scss-docs-end nav-variables
 
 // Base class
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -36,9 +36,9 @@ $navbar-light-color:                var(--fg-2) !default;
 $navbar-light-hover-color:          var(--fg-1) !default;
 $navbar-light-active-color:         var(--fg) !default;
 $navbar-light-disabled-color:       var(--fg-3) !default;
-$navbar-light-icon-color:           rgba($body-color, .75) !default;
+$navbar-light-icon-color:           color-mix(in oklch, var(--body-color) 75%, transparent) !default;
 $navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-light-toggler-border-color: rgba(var(--emphasis-color-rgb), .15) !default;
+$navbar-light-toggler-border-color: color-mix(in oklch, var(--fg-body) 15%, transparent) !default;
 $navbar-light-brand-color:          $navbar-light-active-color !default;
 $navbar-light-brand-hover-color:    $navbar-light-active-color !default;
 // scss-docs-end navbar-variables
diff --git a/scss/_popover.scss b/scss/_popover.scss
@@ -20,7 +20,7 @@ $popover-header-color:              $headings-color !default;
 $popover-header-padding-y:          $spacer * .75 !default;
 $popover-header-padding-x:          $spacer !default;
 
-$popover-body-color:                var(--color-body) !default;
+$popover-body-color:                var(--fg-body) !default;
 $popover-body-padding-y:            $spacer * .75 !default;
 $popover-body-padding-x:            $spacer !default;
 
diff --git a/scss/_root.scss b/scss/_root.scss
@@ -43,9 +43,6 @@
 
   // Note: Custom variable values only support SassScript inside `#{}`.
 
-  --white-rgb: #{to-rgb($white)};
-  --black-rgb: #{to-rgb($black)};
-
   // Fonts
 
   // Note: Use `inspect` for lists so that quoted items keep the quotes.
@@ -85,9 +82,6 @@
   --body-font-weight: #{$font-weight-base};
   --body-line-height: #{$line-height-base};
 
-  --body-color-rgb: #{to-rgb($body-color)};
-  --body-bg-rgb: #{to-rgb($body-bg)};
-
   --heading-color: #{$headings-color};
 
   --hr-border-color: var(--border-color);
@@ -150,12 +144,9 @@
   @include color-mode(dark, true) {
 
     // scss-docs-start root-dark-mode-vars
-    --emphasis-color: #{$body-emphasis-color-dark};
-    --emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
     --heading-color: #{$headings-color-dark};
 
     --border-color: #{$border-color-dark};
-    --border-color-translucent: #{$border-color-translucent-dark};
 
     --form-valid-color: #{$form-valid-color-dark};
     --form-valid-border-color: #{$form-valid-border-color-dark};
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -117,8 +117,6 @@ $position-values: (
 // Settings for the `<body>` element.
 
 $body-text-align:           null !default;
-$body-color:                var(--color-body) !default;
-$body-bg:                   var(--bg-body) !default;
 
 // Links
 //
@@ -165,7 +163,7 @@ $border-widths: (
 ) !default;
 $border-style:                solid !default;
 $border-color:                color-mix(in oklch, var(--gray-100), var(--gray-200)) !default;
-$border-color-translucent:    rgba($black, .175) !default;
+$border-color-translucent:    color-mix(in oklch, var(--fg-body) 15%, transparent) !default;
 // scss-docs-end border-variables
 
 // scss-docs-start border-radius-variables
@@ -333,8 +331,8 @@ $dt-font-weight:              $font-weight-bold !default;
 $list-inline-padding:         .5rem !default;
 
 $mark-padding:                .1875em !default;
-$mark-color:                  $body-color !default;
-$mark-bg:                     var(--yellow-100) !default;
+$mark-color:                  var(--fg-body) !default;
+$mark-bg:                     light-dark(var(--yellow-100), var(--yellow-900)) !default;
 // scss-docs-end type-variables
 
 // Z-index master list
@@ -377,7 +375,7 @@ $offcanvas-border-color:            var(--border-color-translucent) !default;
 $offcanvas-border-width:            var(--border-width) !default;
 $offcanvas-title-line-height:       $line-height-base !default;
 $offcanvas-bg-color:                var(--bg-body) !default;
-$offcanvas-color:                   var(--color-body) !default;
+$offcanvas-color:                   var(--fg-body) !default;
 $offcanvas-box-shadow:              var(--box-shadow-sm) !default;
 $offcanvas-backdrop-bg:             $black !default;
 $offcanvas-backdrop-opacity:        .5 !default;
@@ -411,9 +409,7 @@ $pre-color:                         null !default;
 // $body-secondary-bg-dark:            var(--gray-800) !default;
 // $body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
 // $body-tertiary-bg-dark:             color-mix(in srgb, var(--gray-800), var(--gray-900)) !default;
-$body-emphasis-color-dark:          $white !default;
 $border-color-dark:                 var(--gray-700) !default;
-$border-color-translucent-dark:     rgba($white, .15) !default;
 $headings-color-dark:               inherit !default;
 // $mark-color-dark:                   $body-color-dark !default;
 // $mark-bg-dark:                      var(--yellow-800) !default;
diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss
@@ -60,7 +60,7 @@
     font-size: var(--body-font-size);
     font-weight: var(--body-font-weight);
     line-height: var(--body-line-height);
-    color: var(--color-body);
+    color: var(--fg-body);
     text-align: var(--body-text-align);
     background-color: var(--bg-body); // 2
     -webkit-text-size-adjust: 100%; // 3
diff --git a/scss/content/_tables.scss b/scss/content/_tables.scss
@@ -16,7 +16,7 @@ $table-cell-padding-x-sm:     .25rem !default;
 
 $table-cell-vertical-align:   top !default;
 
-$table-color:                 var(--color-body) !default;
+$table-color:                 var(--fg-body) !default;
 $table-bg:                    var(--bg-body) !default;
 $table-accent-bg:             transparent !default;
 
diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
@@ -1,3 +1,4 @@
+@use "sass:math";
 @use "../config" as *;
 @use "../colors" as *;
 @use "../variables" as *;
@@ -40,7 +41,7 @@ $form-floating-transition:              opacity .1s ease-in-out, transform .1s e
       height: 100%; // allow textareas
       padding: $form-floating-padding-y $form-floating-padding-x;
       overflow: hidden;
-      color: rgba(var(--body-color-rgb), #{$form-floating-label-opacity});
+      color: color-mix(in oklch, var(--body-color) #{math.percentage($form-floating-label-opacity)}, transparent);
       text-align: start;
       text-overflow: ellipsis;
       white-space: nowrap;
diff --git a/scss/forms/_form-variables.scss b/scss/forms/_form-variables.scss
@@ -9,7 +9,7 @@ $control-padding-y: .375rem !default;
 $control-padding-x: .75rem !default;
 $control-font-size: $font-size-base !default;
 $control-line-height: $line-height-base !default;
-$control-color: var(--color-body) !default;
+$control-color: var(--fg-body) !default;
 $control-bg: var(--bg-body) !default;
 $control-border-width: var(--border-width) !default;
 $control-border-color: var(--border-color) !default;
@@ -81,7 +81,7 @@ $input-disabled-color:                  null !default;
 $input-disabled-bg:                     var(--secondary-bg) !default;
 $input-disabled-border-color:           null !default;
 
-$input-color:                           var(--color-body) !default;
+$input-color:                           var(--fg-body) !default;
 $input-border-color:                    var(--border-color) !default;
 $input-border-width:                    var(--border-width) !default;
 $input-box-shadow:                      var(--box-shadow-inset) !default;
@@ -95,7 +95,7 @@ $input-focus-border-color:              var(--primary-border) !default;
 $input-focus-color:                     $input-color !default;
 
 $input-placeholder-color:               var(--secondary-color) !default;
-$input-plaintext-color:                 var(--color-body) !default;
+$input-plaintext-color:                 var(--fg-body) !default;
 
 $input-height-border:                   calc(#{$input-border-width} * 2) !default;
 
diff --git a/site/src/scss/_content.scss b/site/src/scss/_content.scss
@@ -163,11 +163,9 @@
 
   // scss-docs-start custom-color-mode
   // [data-bs-theme="blue"] {
-  //   --bs-body-color: var(--bs-white);
-  //   --bs-body-color-rgb: #{to-rgb($white)};
-  //   --bs-body-bg: var(--bs-blue);
-  //   --bs-body-bg-rgb: #{to-rgb($blue)};
-  //   --bs-tertiary-bg: #{$blue-600};
+  //   --bs-fg-body: var(--bs-white);
+  //   --bs-bg-body: var(--bs-blue);
+  //   --bs-bg-3: #{$blue-600};
 
   //   .dropdown-menu {
   //     --bs-dropdown-bg: #{color.mix($blue-500, $blue-600)};
diff --git a/site/src/scss/_masthead.scss b/site/src/scss/_masthead.scss
@@ -1,3 +1,4 @@
+@use "sass:math";
 @use "../../../scss/config" as *;
 @use "../../../scss/colors" as *;
 @use "../../../scss/variables" as *;
@@ -41,7 +42,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      background-color: rgba(var(--bs-body-color-rgb), .075);
+      background-color: color-mix(in oklch, var(--body-color) #{math.percentage(.075)}, transparent);
       @include border-radius(calc(.5rem - 1px));
 
       @include media-breakpoint-up(lg) {
@@ -107,7 +108,7 @@
 
   .masthead-notice {
     background-color: var(--bd-accent);
-    box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75);
+    box-shadow: inset 0 -1px 1px color-mix(in oklch, var(--body-color) #{math.percentage(.15)}, transparent), 0 .25rem 1.5rem color-mix(in oklch, var(--body-bg) #{math.percentage(.75)}, transparent);
   }
 
   .animate-img {
diff --git a/site/src/scss/_variables.scss b/site/src/scss/_variables.scss
@@ -18,10 +18,6 @@ $bd-callout-variants: info, warning, danger !default;
     --bd-purple: #{$bd-purple};
     --bd-violet: #{$bd-violet};
     --bd-accent: #{$bd-accent};
-    // --bd-violet-rgb: #{to-rgb($bd-violet)};
-    // --bd-accent-rgb: #{to-rgb($bd-accent)};
-    // --bd-pink-rgb: #{to-rgb($pink-500)};
-    // --bd-teal-rgb: #{to-rgb($teal-500)};
     --bd-violet-bg: var(--bd-violet);
     --bd-toc-color: light-dark(var(--bd-violet), var(--bs-indigo-300));
     --bd-sidebar-link-bg: light-dark(color-mix(in srgb, var(--bd-violet), transparent 90%), color-mix(in srgb, var(--bd-violet), transparent 70%));
@@ -30,14 +26,4 @@ $bd-callout-variants: info, warning, danger !default;
     --bd-pre-bg: var(--bs-bg-body);
     --bd-swatch-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .1));
   }
-
-  // @include color-mode(dark, true) {
-  //   --bd-violet: #{mix($bd-violet, $white, 75%)};
-  //   --bd-violet-bg: #{$bd-violet};
-  //   --bd-toc-color: var(--emphasis-color);
-  //   --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
-  //   --bd-callout-link: #{to-rgb($blue-300)};
-  //   --bd-callout-code-color: #{$pink-300};
-  //   --bd-pre-bg: #{color.adjust(var(--gray-900), $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
-  // }
 }
