Update remaining `rgba()`/`rgb()` syntax (#42267)

* Use modern rgb() syntax

* more

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 99bd8e9c14ff1c7457422414afbea65023657b9f..10bfdbad0cfcfe2414dfcc75ed1f14e0a76356fb 100644 (file)
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -170,12 +170,12 @@ $carousel-dark-tokens: defaults(
   .carousel-control-prev {
     inset-inline-start: 0;
     // stylelint-disable-next-line scss/at-function-named-arguments, @stylistic/function-whitespace-after
-    background-image: if(sass($enable-gradients): linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); else: null);
+    background-image: if(sass($enable-gradients): linear-gradient(90deg, rgb(0 0 0 / .25), rgb(0 0 0 / .001)); else: null);
   }
   .carousel-control-next {
     inset-inline-end: 0;
     // stylelint-disable-next-line scss/at-function-named-arguments, @stylistic/function-whitespace-after
-    background-image: if(sass($enable-gradients): linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); else: null);
+    background-image: if(sass($enable-gradients): linear-gradient(270deg, rgb(0 0 0 / .25), rgb(0 0 0 / .001)); else: null);
   }
 
   // Icons for within

diff --git a/scss/_functions.scss b/scss/_functions.scss
index 78eeb74fea9e8431e342ec4798c8834f72449671..a610d61468090d77e375fbbcd8a27a68f6d029a4 100644 (file)
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -182,7 +182,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 }
 
 // Return opaque color
-// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+// opaque(#fff, rgb(0 0 0 / .5)) => #808080
 @function opaque($background, $foreground) {
   @return color-mix(in srgb, rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
 }

diff --git a/scss/_placeholder.scss b/scss/_placeholder.scss
index d15e984618038589af2e9c754a32ed9c6a8019c8..7242dcb04b704b45902f99bdd5c22e161e03907e 100644 (file)
--- a/scss/_placeholder.scss
+++ b/scss/_placeholder.scss
@@ -59,7 +59,7 @@ $placeholder-tokens: defaults(
   }
 
   .placeholder-wave {
-    mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, calc(1 - var(--placeholder-opacity-min))) 75%, $black 95%);
+    mask-image: linear-gradient(130deg, $black 55%, rgb(0 0 0 / calc(1 - var(--placeholder-opacity-min))) 75%, $black 95%);
     mask-size: 200% 100%;
     animation: placeholder-wave 2s linear infinite;
   }

diff --git a/scss/buttons/_button.scss b/scss/buttons/_button.scss
index 3826471bb5a9ff8ea69519e70336ad4b6b206e66..8acf19f8792cc2f97ae7ef83bb9514d8d601226a 100644 (file)
--- a/scss/buttons/_button.scss
+++ b/scss/buttons/_button.scss
@@ -72,7 +72,7 @@ $button-styled-tokens: defaults(
     --btn-border-hover-mix-amount: 12.5%,
     --btn-border-active-mix-amount: 20%,
     --btn-shadow: "0 1px 2px rgb(0 0 0 / 15%), inset 0 1px 0 rgb(255 255 255 / 10%)",
-    --btn-active-shadow: inset 0 2px 4px rgba(0, 0, 0, .15) ,
+    --btn-active-shadow: inset 0 2px 4px rgb(0 0 0 / .15) ,
   ),
   $button-styled-tokens
 );

diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss
index b43a05089fe3b926ae9c0f24090fa6d5b1b79cc2..e70f50dfca4dd067206634b1de59f57b95b6ea8a 100644 (file)
--- a/scss/content/_reboot.scss
+++ b/scss/content/_reboot.scss
@@ -1,4 +1,3 @@
-@use "../colors" as *;
 @use "../config" as *;
 @use "../functions" as *;
 @use "../mixins/border-radius" as *;
@@ -88,7 +87,7 @@ $reboot-mark-tokens: defaults(
     text-align: var(--body-text-align);
     background-color: var(--bg-body); // 2
     -webkit-text-size-adjust: 100%; // 3
-    -webkit-tap-highlight-color: rgba($black, 0); // 4
+    -webkit-tap-highlight-color: transparent; // 4
   }
   // scss-docs-end reboot-body-rules
 

diff --git a/scss/forms/_switch.scss b/scss/forms/_switch.scss
index 50d07d82e35e6f8c16908a9954fe74fdcc3adb7b..8697454144e0fe421831dd50f9db8f8be7f68cc9 100644 (file)
--- a/scss/forms/_switch.scss
+++ b/scss/forms/_switch.scss
@@ -1,4 +1,3 @@
-@use "../colors" as *;
 @use "../functions" as *;
 @use "../mixins/focus-ring" as *;
 @use "../mixins/tokens" as *;
@@ -46,7 +45,7 @@ $switch-tokens: defaults(
     border: var(--switch-border-width) solid var(--switch-border-color);
     // stylelint-disable-next-line property-disallowed-list
     border-radius: 10rem;
-    box-shadow: inset 0 1px 2px rgba($black, .05);
+    box-shadow: inset 0 1px 2px rgb(0 0 0 / .05);
     // stylelint-disable-next-line property-disallowed-list
     transition: .15s ease-in-out;
     transition-property: padding-inline-start, background-color;
@@ -59,7 +58,7 @@ $switch-tokens: defaults(
       background-color: var(--theme-contrast, var(--switch-indicator-bg));
       // stylelint-disable-next-line property-disallowed-list
       border-radius: 50%;
-      box-shadow: 0 1px 2px rgba($black, .1);
+      box-shadow: 0 1px 2px rgb(0 0 0 / .1);
     }
 
     input {

diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss
index 228c5c9876cfa9cbf4859d09a8a86bb4b34b4924..5a0a9e0a3dcbe2607127b55f141addb073dcc539 100644 (file)
--- a/scss/forms/_validation.scss
+++ b/scss/forms/_validation.scss
@@ -34,7 +34,7 @@
   $color,
   $icon,
   $tooltip-color: color-contrast($color),
-  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
+  $tooltip-bg-color: color-mix(in oklch, #{$color #form-feedback-tooltip-opacity}, transparent),
   $focus-ring-color: null, // mdo-do: fix
   $border-color: $color
 ) {

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 8924a53e181d72bdb5d53ae97dd637459aabe908..f50b359a90ee14a31e035ad73f77eede6523f250 100644 (file)
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -20,8 +20,8 @@
   $color,
   $icon,
   $tooltip-color: color-contrast($color),
-  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
-  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
+  $tooltip-bg-color: color-mix(in oklch, #{$color $form-feedback-tooltip-opacity}, transparent),
+  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width color-mix(in oklch, #{$color $input-btn-focus-color-opacity}, transparent),
   $border-color: $color
 ) {
   .#{$state}-feedback {

diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
index f4d2d4f2a105c4bcfb1adeda4fd9da830493683a..1789d35d563a5b81b9c50943daf493e6bc992566 100644 (file)
--- a/scss/mixins/_gradients.scss
+++ b/scss/mixins/_gradients.scss
@@ -44,7 +44,7 @@
   background-image: radial-gradient(circle, $inner-color, $outer-color);
 }
 
-@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
+@mixin gradient-striped($color: rgb(255 255 255 / .15), $angle: 45deg) {
   background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
 }
 // scss-docs-end gradient-mixins

diff --git a/scss/tests/mixins/_box-shadow.test.scss b/scss/tests/mixins/_box-shadow.test.scss
index 725311cb8d015efd23ba91c21c9ac2afcfe2336b..187da47674ef71f4a70857d05ddde0cb8d1b4e7a 100644 (file)
--- a/scss/tests/mixins/_box-shadow.test.scss
+++ b/scss/tests/mixins/_box-shadow.test.scss
@@ -92,13 +92,13 @@ $enable-shadows: true !global;
     @include assert() {
       @include output() {
         .test {
-          @include box-shadow(0 0 10px rgba(0, 0, 0, .5));
+          @include box-shadow(0 0 10px rgb(0 0 0 / .5));
         }
       }
 
       @include expect() {
         .test {
-          box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+          box-shadow: 0 0 10px rgb(0 0 0 / .5);
         }
       }
     }
@@ -108,13 +108,13 @@ $enable-shadows: true !global;
     @include assert() {
       @include output() {
         .test {
-          @include box-shadow(0 0 10px rgba(0, 0, 0, .5), 0 0 20px rgba(0, 0, 0, .3));
+          @include box-shadow(0 0 10px rgb(0 0 0 / .5), 0 0 20px rgb(0 0 0 / .3));
         }
       }
 
       @include expect() {
         .test {
-          box-shadow: 0 0 10px rgba(0, 0, 0, .5), 0 0 20px rgba(0, 0, 0, .3);
+          box-shadow: 0 0 10px rgb(0 0 0 / .5), 0 0 20px rgb(0 0 0 / .3);
         }
       }
     }
@@ -124,13 +124,13 @@ $enable-shadows: true !global;
     @include assert() {
       @include output() {
         .test {
-          @include box-shadow(null, 0 0 10px rgba(0, 0, 0, .5), null);
+          @include box-shadow(null, 0 0 10px rgb(0 0 0 / .5), null);
         }
       }
 
       @include expect() {
         .test {
-          box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+          box-shadow: 0 0 10px rgb(0 0 0 / .5);
         }
       }
     }
@@ -140,7 +140,7 @@ $enable-shadows: true !global;
     @include assert() {
       @include output() {
         .test {
-          @include box-shadow(none, 0 0 10px rgba(0, 0, 0, .5));
+          @include box-shadow(none, 0 0 10px rgb(0 0 0 / .5));
         }
       }
 
@@ -173,7 +173,7 @@ $enable-shadows: true !global;
     @include assert() {
       @include output() {
         .test {
-          @include box-shadow(0 0 10px rgba(0, 0, 0, .5));
+          @include box-shadow(0 0 10px rgb(0 0 0 / .5));
         }
       }
 

diff --git a/scss/tests/mixins/_color-contrast.test.scss b/scss/tests/mixins/_color-contrast.test.scss
index bf2db2420d670d35d08a2dc2be903dcf1f610f50..d7a387e3fe6fca21151e8723c2f309e259c51c81 100644 (file)
--- a/scss/tests/mixins/_color-contrast.test.scss
+++ b/scss/tests/mixins/_color-contrast.test.scss
@@ -82,7 +82,7 @@
 
   @include it("should handle rgba colors correctly") {
     // Test case: Test with rgba colors
-    $test-background: rgba(118, 118, 118, 1); // Same as #767676
+    $test-background: rgb(118 118 118 / 1); // Same as #767676
     $result: color-contrast($test-background);
 
     @include assert-equal($result, $white, "Should handle rgba colors correctly");