refactor: migrate rgba() to color-mix() and color-transparent() (#2579)

.changeset/migrate-rgba-to-color-mix.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+---
+
+Migrated `rgba()` functions to modern CSS color functions (`color-mix()` and `color-transparent()`) for better browser support and cleaner code. Replaced `rgba(var(--#{$prefix}*-rgb), ...)` with `color-mix(in srgb, var(--#{$prefix}*) ..., transparent)`, static percentage `color-mix()` with `color-transparent()`, and `rgba($variable, ...)` with `color-transparent($variable, ...)`.
+

core/scss/_utilities.scss

@@ -746,7 +746,7 @@ $utilities: map-merge(
       values: map.merge(
           $utilities-links-underline,
           (
-            null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
+            null: color-mix(in srgb, var(--#{$prefix}link-color) calc(var(--#{$prefix}link-underline-opacity, 1) * 100%), transparent),
           )
         ),
     ),
@@ -773,8 +773,8 @@ $utilities: map-merge(
           $utilities-bg-colors,
           (
             'transparent': transparent,
-            'body-secondary': rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
-            'body-tertiary': rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
+            'body-secondary': color-mix(in srgb, var(--#{$prefix}secondary-bg) calc(var(--#{$prefix}bg-opacity) * 100%), transparent),
+            'body-tertiary': color-mix(in srgb, var(--#{$prefix}tertiary-bg) calc(var(--#{$prefix}bg-opacity) * 100%), transparent),
           )
         ),
     ),

core/scss/_variables.scss

@@ -564,10 +564,6 @@ $body-text-align: null !default;
 $body-bg: $gray-50 !default;
 $body-color: $gray-800 !default;
 $body-emphasis-color: $gray-700 !default;
-$body-secondary-color: rgba($body-color, 0.75) !default;
-$body-secondary-bg: $gray-200 !default;
-$body-tertiary-color: rgba($body-color, 0.5) !default;
-$body-tertiary-bg: $gray-100 !default;
 
 $color-contrast-dark: $body-color !default;
 $color-contrast-light: $light !default;
@@ -593,11 +589,11 @@ $border-active-color: var(--#{$prefix}gray-400) !default;
 $border-active-opacity: 44.8% !default;
 $border-active-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-active-opacity}, transparent) !default;
 
-$active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
+$active-bg: color-transparent(var(--#{$prefix}primary), 0.04) !default;
 $active-color: var(--#{$prefix}primary) !default;
 $active-border-color: var(--#{$prefix}primary) !default;
 
-$hover-bg: rgba(var(--#{$prefix}secondary-rgb), 0.08) !default;
+$hover-bg: color-transparent(var(--#{$prefix}secondary), 0.08) !default;
 
 $disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $disabled-color: color-transparent(var(--#{$prefix}body-color), 0.4) !default;
@@ -985,14 +981,14 @@ $aspect-ratios: (
 ) !default;
 
 // Shadows
-$box-shadow: rgba(var(--#{$prefix}body-color-rgb), 0.04) 0 2px 4px 0 !default;
+$box-shadow: color-transparent(var(--#{$prefix}body-color), 0.04) 0 2px 4px 0 !default;
 $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
 $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
 $box-shadow-transparent: 0 0 0 0 transparent !default;
 $box-shadow-border: inset 0 0 0 1px var(--#{$prefix}border-color-translucent) !default;
-$box-shadow-input: 0 1px 1px rgba(var(--#{$prefix}body-color-rgb), 0.06) !default;
+$box-shadow-input: 0 1px 1px color-transparent(var(--#{$prefix}body-color), 0.06) !default;
 $box-shadow-card: 0px 1px 3px rgba(0, 0, 0, 0.08) !default;
-$box-shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), 0.16) 0 2px 16px 0 !default;
+$box-shadow-card-hover: color-transparent(var(--#{$prefix}body-color), 0.16) 0 2px 16px 0 !default;
 $box-shadow-dropdown:
   0 16px 24px 2px rgba(0, 0, 0, 0.07),
   0 6px 30px 5px rgba(0, 0, 0, 0.06),
@@ -1017,7 +1013,7 @@ $component-active-bg: $primary !default;
 // Focus
 $focus-ring-width: 0.25rem !default;
 $focus-ring-opacity: 0.25 !default;
-$focus-ring-color: rgba(var(--#{$prefix}primary-rgb), $focus-ring-opacity) !default;
+$focus-ring-color: color-mix(in srgb, var(--#{$prefix}primary) #{percentage($focus-ring-opacity)}, transparent) !default;
 $focus-ring-blur: 0 !default;
 $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
 
@@ -1514,9 +1510,9 @@ $navbar-light-active-color: var(--#{$prefix}body-color) !default;
 $navbar-light-hover-color: var(--#{$prefix}body-color) !default;
 $navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
 $navbar-light-active-bg: rgba(0, 0, 0, 0.2) !default;
-$navbar-light-icon-color: rgba($body-color, 0.75) !default;
+$navbar-light-icon-color: color-transparent(var(--#{$prefix}body-color), 0.75) !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(--#{$prefix}emphasis-color-rgb), 0.15) !default;
+$navbar-light-toggler-border-color: color-transparent(var(--#{$prefix}emphasis-color), 0.15) !default;
 $navbar-light-brand-hover-color: $navbar-light-active-color !default;
 
 $navbar-dark-color: rgba($white, $text-secondary-opacity) !default;
@@ -1691,7 +1687,7 @@ $table-active-bg: var(--#{$prefix}active-bg) !default;
 
 $table-hover-color: $table-color !default;
 $table-hover-bg-factor: 0.075 !default;
-$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
+$table-hover-bg: color-mix(in srgb, var(--#{$prefix}emphasis-color) #{percentage($table-hover-bg-factor)}, transparent) !default;
 
 $table-caption-color: var(--#{$prefix}secondary-color) !default;
 
@@ -1726,7 +1722,7 @@ $toast-box-shadow: var(--#{$prefix}box-shadow) !default;
 $toast-spacing: $container-padding-x !default;
 
 $toast-header-color: var(--#{$prefix}gray-500) !default;
-$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), 0.85) !default;
+$toast-header-background-color: color-transparent(var(--#{$prefix}body-bg), 0.85) !default;
 $toast-header-border-color: $toast-border-color !default;
 
 // Tracking
@@ -1955,7 +1951,7 @@ $form-validation-states: (
     'icon': $form-feedback-icon-valid,
     'tooltip-color': #fff,
     'tooltip-bg-color': var(--#{$prefix}success),
-    'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
+    'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width color-mix(in srgb, var(--#{$prefix}success) #{percentage($input-btn-focus-color-opacity)}, transparent),
     'border-color': var(--#{$prefix}form-valid-border-color),
   ),
   'invalid': (
@@ -1963,7 +1959,7 @@ $form-validation-states: (
     'icon': $form-feedback-icon-invalid,
     'tooltip-color': #fff,
     'tooltip-bg-color': var(--#{$prefix}danger),
-    'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
+    'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width color-mix(in srgb, var(--#{$prefix}danger) #{percentage($input-btn-focus-color-opacity)}, transparent),
     'border-color': var(--#{$prefix}form-invalid-border-color),
   ),
 ) !default;

core/scss/mixins/_functions.scss

@@ -138,18 +138,20 @@
 
 // Colors
 @function to-rgb($value) {
+  @debug $value;
+  
   @return color.channel($value, 'red', $space: rgb), color.channel($value, 'green', $space: rgb), color.channel($value, 'blue', $space: rgb);
 }
 
 // stylelint-disable scss/dollar-variable-pattern
 @function rgba-css-var($identifier, $target) {
   @if $identifier == 'body' and $target == 'bg' {
-    @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
+    @return color-mix(in srgb, var(--#{$prefix}#{$identifier}-bg) calc(var(--#{$prefix}#{$target}-opacity) * 100%), transparent);
   }
   @if $identifier == 'body' and $target == 'text' {
-    @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
+    @return color-mix(in srgb, var(--#{$prefix}#{$identifier}-color) calc(var(--#{$prefix}#{$target}-opacity) * 100%), transparent);
   } @else {
-    @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
+    @return color-mix(in srgb, var(--#{$prefix}#{$identifier}) calc(var(--#{$prefix}#{$target}-opacity) * 100%), transparent);
   }
 }
 

core/scss/mixins/_mixins.scss

@@ -59,10 +59,10 @@
 
 @mixin focus-ring($show-border: false) {
   outline: 0;
-  box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(var(--#{$prefix}primary-rgb), 0.25);
+  box-shadow: 0 0 $focus-ring-blur $focus-ring-width color-transparent(var(--#{$prefix}primary), 0.25);
 
   @if ($show-border) {
-    border-color: rgba(var(--#{$prefix}primary-rgb), 0.25);
+    border-color: color-transparent(var(--#{$prefix}primary), 0.25);
   }
 }
 

core/scss/ui/_calendars.scss

@@ -81,7 +81,7 @@
     inset-inline-start: 0;
     height: 1.4rem;
     content: '';
-    background: rgba(var(--#{$prefix}primary-rgb), 0.1);
+    background: color-transparent(var(--#{$prefix}primary), 0.1);
     transform: translateY(-50%);
   }
 

core/scss/ui/_ribbons.scss

@@ -44,7 +44,7 @@
       }
 
       &.bg-#{$color}-lt {
-        border-color: rgba(var(--#{$prefix}#{$color}-rgb), 0.1) !important;
+        border-color: color-transparent(var(--#{$prefix}#{$color}), 0.1) !important;
       }
     }
   }

core/scss/ui/_status.scss

@@ -52,7 +52,7 @@
   padding: 0.25rem 0.75rem;
   gap: 0.5rem;
   color: var(--#{$prefix}status-color);
-  background: rgba(var(--#{$prefix}status-color-rgb), 0.1);
+  background: color-transparent(var(--#{$prefix}status-color), 0.1);
   font-size: $font-size-base;
   text-transform: none;
   letter-spacing: normal;

core/scss/vendor/_dropzone.scss

@@ -5,7 +5,7 @@
 
   &.dz-drag-hover {
     border: var(--#{$prefix}border-width) dashed var(--#{$prefix}primary);
-    background: rgba(var(--#{$prefix}primary-rgb), 0.01);
+    background: color-transparent(var(--#{$prefix}primary), 0.01);
     color: var(--#{$prefix}primary);
 
     .dz-message {

shared/e11ty/config.mjs

@@ -9,8 +9,6 @@ export function appConfig(eleventyConfig) {
 	eleventyConfig.addWatchTarget("../shared/**/*.html");
 	eleventyConfig.addWatchTarget("./pages/**/*.html");
 
-	console.log('ELEVENTY CONFIG additionalWatchTargets', eleventyConfig.directoryAssignments);
-
 	eleventyConfig.setLiquidOptions({
 		timezoneOffset: 0,
 		jekyllInclude: true,

turbo.json

@@ -10,24 +10,6 @@
       "dependsOn": [
         "^build"
       ],
-      "inputs": [
-        "core/scss/**",
-        "core/js/**",
-        "core/img/**",
-        "core/fonts/**",
-        "core/.build/**",
-        "preview/pages/**",
-        "preview/scss/**",
-        "preview/js/**",
-        "preview/.build/**",
-        "docs/content/**",
-        "docs/scss/**",
-        "docs/js/**",
-        "docs/.build/**",
-        "shared/**",
-        "package.json",
-        "pnpm-lock.yaml"
-      ],
       "outputs": [
         "dist/**",
         "demo/**"