From: Mark Otto Date: Sat, 4 Apr 2026 05:16:57 +0000 (-0700) Subject: Update remaining `rgba()`/`rgb()` syntax (#42267) X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=8e16cba68036931e52355285c96d4c3751af27f4;p=thirdparty%2Fbootstrap.git Update remaining `rgba()`/`rgb()` syntax (#42267) * Use modern rgb() syntax * more --- diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 99bd8e9c14..10bfdbad0c 100644 --- 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 78eeb74fea..a610d61468 100644 --- 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 d15e984618..7242dcb04b 100644 --- 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 3826471bb5..8acf19f879 100644 --- 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 b43a05089f..e70f50dfca 100644 --- 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 50d07d82e3..8697454144 100644 --- 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 228c5c9876..5a0a9e0a3d 100644 --- 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 8924a53e18..f50b359a90 100644 --- 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 f4d2d4f2a1..1789d35d56 100644 --- 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 725311cb8d..187da47674 100644 --- 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 bf2db2420d..d7a387e3fe 100644 --- 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");