Replace rgba(), remove *-rgb variables

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index 911c51e656e90a53e0bb5b5df9f4ec5edcf1cd35..9b9dc82e83c26b9bd5b7a30bd4a8a6a1003c0fe3 100644 (file)
--- 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
index 51502dce4791600d2d33e6cfa87af014f338a1e1..b716edfb5ac15ce96faa17ea4a913480f6e1d653 100644 (file)
--- 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
index 5d96a9d32c48aa09d1b00e33220611ab049d8d8d..e724c9d8abe3f8d916b96c7e1cd4990ab4521b44 100644 (file)
--- 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
index 7d6c74753edd5e4dcf8a9a5057461a155b15fa79..c208f50329934261a5c70296169120efe3f3d3d2 100644 (file)
--- 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
index fa849b19da5e9e2b826a2732d28f41f73cb050a6..743010296f5b121e655e2c3c938b6adfe747cd21 100644 (file)
--- 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
index cc0a332a1aaf0e4980d85a178b3ae6edc91e27ee..80f53720d85af770d882b33554b0f64c08b331b6 100644 (file)
--- 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
index 63365d587ee98cba2346ef5e54f933a3700f8dd3..39a3b9b2bd750633a24c59df8672e5f679cb0ed6 100644 (file)
--- 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
index 1d63d105f30b39ddaf1325776e1581db5b226827..6b4bcbf58fb9567c627c337cee777a6878e6cd99 100644 (file)
--- 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
index 2cfd707919f8bc0e36168aea5f45b7f5e50ad1fe..db2bfed732b337aa4490d178794f0f4c68158766 100644 (file)
--- 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
index 0ccdcb09a028738392d40d3f1e649ef8592a5330..53a93d287e245a264deaab06310dd90c096e49ba 100644 (file)
--- 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
index c9761539c344dfe7c17f2d66e52b91c6fa80a41f..5a97e67e9b04bfa313381e8a6faa8767942df48c 100644 (file)
--- 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
index 57716ba192f16203b14e75684845047aace7808d..3e50e68f6205c392703dcf7a17359d57088f420b 100644 (file)
--- 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
index 76d4fddff19aba2d7d033ad71fab7c2729f70014..b4927460fed1677403de8e3403383cf32c5c1dbd 100644 (file)
--- 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
index e5b3c12d81f67c9c611289dad02f86c3b1ade9ec..b5c3109424f92819e1c64d9abd8b10469440a51a 100644 (file)
--- 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
index 2ad552d4e15c1c93669c8be89227f759ba462f23..ec53eec687cae8da7f06d3845c7a95e654896e8b 100644 (file)
--- 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
index c1fb1b7cacb3abfb517215e6ef96580571f53022..354db6aa0027933d72cc960236e3943568f396da 100644 (file)
--- 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
-  // }
 }