refactor(color): update color function and fix contrast shading

IgniteUI · Feb 21, 2025 · 58b6392 · 58b6392
1 parent 7a17c72
commit 58b6392
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 21 deletions.
diff --git a/sass/color/_functions.scss b/sass/color/_functions.scss
@@ -185,23 +185,17 @@ $_enhanced-accessibility: false;
     $s: #{var(--ig-#{$color}-#{$variant})};
     $contrast: if(meta.type-of($variant) == string, string.index($variant, 'contrast'), false);
     $_alpha: if($opacity, $opacity, 1);
-    $_hsl-alpha: hsl(from $s h s l / $_alpha);
-    $_mix-alpha: color-mix(in oklch, $s #{$_alpha * 100%}, transparent);
+    $_relative-color: hsl(from $s h s l / $_alpha);
 
     @if $palette {
         $s: map.get($palette, #{$color});
         $base: map.get($s, #{$variant});
         $raw: map.get($s, #{$variant}-raw);
-        $var: var(--ig-#{$color}-#{$variant});
 
-        @return if(
-            $contrast,
-            if($opacity, $_mix-alpha, $var),
-            if($raw and $variant != '500', rgba($raw, $_alpha), $base)
-        );
+        @return if($contrast, $_relative-color, if($raw and $variant != '500', rgba($raw, $_alpha), $base));
     }
 
-    @return if($contrast, $_mix-alpha, $_hsl-alpha);
+    @return $_relative-color;
 }
 
 /// Retrieves a contrast text color for a given color variant from a color palette.
@@ -237,7 +231,7 @@ $_enhanced-accessibility: false;
 @function adaptive-contrast($color) {
     $fn: meta.get-function('color', $css: true);
 
-    @return meta.call($fn, from $color var(--y-contrast));
+    @return hsl(from meta.call($fn, from $color var(--y-contrast)) h 0 l);
 }
 
 /// Returns a contrast color for a passed color.

diff --git a/test/_color.spec.scss b/test/_color.spec.scss
@@ -58,21 +58,27 @@ $_palette: palette(
         @include it('should return an adaptive contrast color from a hex value') {
             $color: #09f;
 
-            @include assert-equal(adaptive-contrast($color), meta.call($fn, from #09f var(--y-contrast)));
+            @include assert-equal(
+                adaptive-contrast($color),
+                hsl(from meta.call($fn, from #09f var(--y-contrast)) h 0 l)
+            );
         }
 
         @include it('should return an adaptive contrast color from an hsl value') {
             $color: hsl(204deg 100% 50%);
 
-            @include assert-equal(adaptive-contrast($color), meta.call($fn, from hsl(204deg 100% 50%) var(--y-contrast)));
+            @include assert-equal(
+                adaptive-contrast($color),
+                hsl(from meta.call($fn, from hsl(204deg 100% 50%) var(--y-contrast)) h 0 l)
+            );
         }
 
         @include it('should return an adaptive contrast color from a CSS variable value') {
             $color: var(--ig-primary-500);
 
             @include assert-equal(
                 adaptive-contrast($color),
-                meta.call($fn, from var(--ig-primary-500) var(--y-contrast))
+                hsl(from meta.call($fn, from var(--ig-primary-500) var(--y-contrast)) h 0 l)
             );
         }
 
@@ -168,7 +174,7 @@ $_palette: palette(
 
         @include it('should return a contrast shade w/ palette as only argument') {
             $value: contrast-color($_palette, $opacity: 0.5);
-            $expected: color-mix(in oklch, var(--ig-primary-500-contrast) 50%, transparent);
+            $expected: hsl(from var(--ig-primary-500-contrast) h s l / 0.5);
 
             @include assert-equal($expected, $value);
         }
@@ -181,7 +187,7 @@ $_palette: palette(
             );
 
             @include assert-equal(type-of($value), string);
-            @include assert-equal($value, color-mix(in oklch, var(--ig-secondary-A400-contrast) 25%, transparent));
+            @include assert-equal($value, hsl(from var(--ig-secondary-A400-contrast) h s l / 0.25));
         }
 
         @include it('should retrieve colors from a palette regadless of type of key') {
@@ -190,9 +196,15 @@ $_palette: palette(
             @include assert-true(color($_palette, 'primary', '500'));
             @include assert-equal(color($_palette, 'primary', '500'), $_primary);
             @include assert-true(contrast-color($_palette, primary, 500));
-            @include assert-equal(contrast-color($_palette, primary, 500), var(--ig-primary-500-contrast));
+            @include assert-equal(
+                contrast-color($_palette, primary, 500),
+                hsl(from var(--ig-primary-500-contrast) h s l / 1)
+            );
             @include assert-true(contrast-color($_palette, 'primary', '500'));
-            @include assert-equal(contrast-color($_palette, 'primary', '500'), var(--ig-primary-500-contrast));
+            @include assert-equal(
+                contrast-color($_palette, 'primary', '500'),
+                hsl(from var(--ig-primary-500-contrast) h s l / 1)
+            );
         }
 
         @include it('should generate an HSL color shade from a given base color') {
@@ -355,11 +367,11 @@ $_palette: palette(
                 @include contains($selector: false) {
                     :root {
                         --ig-wcag-a: 0.31;
-                        --ig-wcag-aa: 0.183;
+                        --ig-wcag-aa: 0.185;
                         --ig-wcag-aaa: 0.178;
                         --ig-contrast-level: var(--ig-wcag-aaa);
                         --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1);
-                        --y-contrast: xyz-d50 var(--y) var(--y) var(--y);
+                        --y-contrast: xyz-d65 var(--y) var(--y) var(--y);
                     }
                 }
             }

diff --git a/test/_themes.spec.scss b/test/_themes.spec.scss
@@ -104,8 +104,8 @@ $schema: (
                 type: 'light',
                 background: hsl(from var(--ig-primary-400) h s l / 1),
                 hover-background: hsl(from var(--ig-secondary-700) h s l / .26),
-                foreground: color-mix(in oklch, var(--ig-primary-400-contrast) 100%, transparent),
-                hover-foreground: color-mix(in oklch, var(--ig-secondary-700-contrast) 100%, transparent),
+                foreground: hsl(from var(--ig-primary-400-contrast) h s l / 1),
+                hover-foreground: hsl(from var(--ig-secondary-700-contrast) h s l / 1),
                 border-style: solid,
                 border-radius: .125rem,
                 brushes: var(--chart-brushes),