refactor: replace RGBA() with rgba()

mrholek · mrholek · commit 2e137c4f2cb7 · 2025-01-13T23:30:12.000+01:00
diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss
@@ -4,11 +4,10 @@
 @use "../functions/color-contrast" as *;
 @use "../mixins/color-mode" as *;
 
-// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
   .text-bg-#{$color} {
     color: color-contrast($value) if($enable-important-utilities, !important, null);
-    background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
   }
 }
 
@@ -18,7 +17,7 @@
       $color-rgb: to-rgb($value);
       .text-bg-#{$color} {
         color: color-contrast($value) if($enable-important-utilities, !important, null);
-        background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+        background-color: rgba($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
       }
     }
   }
diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
@@ -2,33 +2,32 @@
 @use "../functions/color" as *;
 @use "../functions/color-contrast" as *;
 
-// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
   .link-#{$color} {
-    color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-    text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+    color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+    text-decoration-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
 
     @if $link-shade-percentage != 0 {
       &:hover,
       &:focus {
         $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
-        color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-        text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+        color: rgba(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+        text-decoration-color: rgba(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
       }
     }
   }
 }
 
 // One-off special link helper as a bridge until v6
 .link-body-emphasis {
-  color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-  text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+  color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
 
   @if $link-shade-percentage != 0 {
     &:hover,
     &:focus {
-      color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
-      text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
+      color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
+      text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -4,11 +4,10 @@`
`4`	`4`	`@use "../functions/color-contrast" as *;`
`5`	`5`	`@use "../mixins/color-mode" as *;`
`6`	`6`
`7`		-// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
`8`	`7`	`@each $color, $value in $theme-colors {`
`9`	`8`	`.text-bg-#{$color} {`
`10`	`9`	`color: color-contrast($value) if($enable-important-utilities, !important, null);`
`11`		`- background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);`
	`10`	`+ background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);`
`12`	`11`	`}`
`13`	`12`	`}`
`14`	`13`
`@@ -18,7 +17,7 @@`
`18`	`17`	`$color-rgb: to-rgb($value);`
`19`	`18`	`.text-bg-#{$color} {`
`20`	`19`	`color: color-contrast($value) if($enable-important-utilities, !important, null);`
`21`		`- background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);`
	`20`	`+ background-color: rgba($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);`
`22`	`21`	`}`
`23`	`22`	`}`
`24`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,33 +2,32 @@`
`2`	`2`	`@use "../functions/color" as *;`
`3`	`3`	`@use "../functions/color-contrast" as *;`
`4`	`4`
`5`		-// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
`6`	`5`	`@each $color, $value in $theme-colors {`
`7`	`6`	`.link-#{$color} {`
`8`		`- color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);`
`9`		`- text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);`
	`7`	`+ color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);`
	`8`	`+ text-decoration-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);`
`10`	`9`
`11`	`10`	`@if $link-shade-percentage != 0 {`
`12`	`11`	`&:hover,`
`13`	`12`	`&:focus {`
`14`	`13`	`$hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));`
`15`		`- color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);`
`16`		`- text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);`
	`14`	`+ color: rgba(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);`
	`15`	`+ text-decoration-color: rgba(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);`
`17`	`16`	`}`
`18`	`17`	`}`
`19`	`18`	`}`
`20`	`19`	`}`
`21`	`20`
`22`	`21`	`// One-off special link helper as a bridge until v6`
`23`	`22`	`.link-body-emphasis {`
`24`		`- color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);`
`25`		`- text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);`
	`23`	`+ color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);`
	`24`	`+ text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);`
`26`	`25`
`27`	`26`	`@if $link-shade-percentage != 0 {`
`28`	`27`	`&:hover,`
`29`	`28`	`&:focus {`
`30`		`- color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);`
`31`		`- text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);`
	`29`	`+ color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);`
	`30`	`+ text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);`
`32`	`31`	`}`
`33`	`32`	`}`
`34`	`33`	`}`