Skip to content

Commit

Permalink
spec(colors): refactor adaptive color tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@simeonoff
simeonoff committed Feb 21, 2025
1 parent b234984 commit 7a17c72
Showing 1 changed file with 60 additions and 25 deletions.
85 changes: 60 additions & 25 deletions test/_color.spec.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,14 @@ $_palette: palette(
$info: $_info,
$warn: $_warn,
$error: $_error,
$variant: 'material'
$variant: 'material',
);

@include describe('Color') {
@include describe('base') {
@include it('should mix two colors to produce an opaque color') {
@include assert-equal(to-opaque(rgba(255, 255, 255, .32), #fff), #fff);
@include assert-equal(to-opaque(rgba(233, 233, 233, .32), rgba(255, 255, 255, 0)), #f7f7f7);
@include assert-equal(to-opaque(rgba(255, 255, 255, 0.32), #fff), #fff);
@include assert-equal(to-opaque(rgba(233, 233, 233, 0.32), rgba(255, 255, 255, 0)), #f7f7f7);
}

@include it('converts a color to a list of HSL values') {
Expand All @@ -53,22 +53,27 @@ $_palette: palette(
}

@include describe('contrast') {
@include it('should return an OKLCH color with relative color syntax from a hex value'){
$fn: meta.get-function('color', $css: true);

@include it('should return an adaptive contrast color from a hex value') {
$color: #09f;

@include assert-equal(adaptive-contrast($color), oklch(from #09f var(--l) 0 h));
@include assert-equal(adaptive-contrast($color), meta.call($fn, from #09f var(--y-contrast)));
}

@include it('should return an OKLCH color with relative color syntax from an hsl value'){
@include it('should return an adaptive contrast color from an hsl value') {
$color: hsl(204deg 100% 50%);

@include assert-equal(adaptive-contrast($color), oklch(from hsl(204deg 100% 50%) var(--l) 0 h));
@include assert-equal(adaptive-contrast($color), meta.call($fn, from hsl(204deg 100% 50%) var(--y-contrast)));
}

@include it('should return an OKLCH color with relative color syntax from a CSS variable value'){
@include it('should return an adaptive contrast color from a CSS variable value') {
$color: var(--ig-primary-500);

@include assert-equal(adaptive-contrast($color), oklch(from var(--ig-primary-500) var(--l) 0 h));
@include assert-equal(
adaptive-contrast($color),
meta.call($fn, from var(--ig-primary-500) var(--y-contrast))
);
}

@include it('should return the passed background value if no valid colors are provided') {
Expand Down Expand Up @@ -143,28 +148,37 @@ $_palette: palette(
}

@include it('should return a shade as CSS variable w/ color as only argument') {
$value: color($color: secondary);
$value: color(
$color: secondary,
);

@include assert-equal(type-of($value), string);
@include assert-equal($value, hsl(from (var(--ig-secondary-500)) h s l / 1));
}

@include it('should return a shade of type string as CSS var w/ color and variant as only arguments') {
$value: color($color: secondary, $variant: 'A400');
$value: color(
$color: secondary,
$variant: 'A400',
);

@include assert-equal(type-of($value), string);
@include assert-equal($value, hsl(from (var(--ig-secondary-A400)) h s l / 1));
}

@include it('should return a contrast shade w/ palette as only argument') {
$value: contrast-color($_palette, $opacity: .5);
$value: contrast-color($_palette, $opacity: 0.5);
$expected: color-mix(in oklch, var(--ig-primary-500-contrast) 50%, transparent);

@include assert-equal($expected, $value);
}

@include it('should return a contrast shade of type string as CSS var w/ color and variant as only arguments') {
$value: contrast-color($color: secondary, $variant: 'A400', $opacity: .25);
$value: contrast-color(
$color: secondary,
$variant: 'A400',
$opacity: 0.25,
);

@include assert-equal(type-of($value), string);
@include assert-equal($value, color-mix(in oklch, var(--ig-secondary-A400-contrast) 25%, transparent));
Expand All @@ -187,7 +201,7 @@ $_palette: palette(
$shade: shade($color, $_primary, $variant, null);
$expected: (
raw: hsl(204deg 100% 44.5%),
hsl: #{hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89))}
hsl: #{hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89))},
);

@include assert-equal($shade, $expected);
Expand All @@ -200,18 +214,20 @@ $_palette: palette(
$shade: shade($color, null, $variant, $surface);
$expected: (
raw: hsl(0deg 0% 98%),
hsl: #{hsl(from var(--ig-gray-500) h s 98%)}
hsl: #{hsl(from var(--ig-gray-500) h s 98%)},
);

// $surface is bright, return a darker shade of gray
@include assert-equal($shade, $expected);

$surface: #444;
$shade: shade($color, null, $variant, $surface);
$expected: #{var(--ig-#{$color}-h), var(--ig-#{$color}-s), 13%};
$expected: #{var(--ig-#{$color}-h),
var(--ig-#{$color}-s),
13%};
$expected: (
raw: hsl(0deg 0% 13%),
hsl: #{hsl(from var(--ig-gray-500) h s 13%)}
hsl: #{hsl(from var(--ig-gray-500) h s 13%)},
);

// $surface is dark, return a lighter shade of gray
Expand Down Expand Up @@ -250,11 +266,11 @@ $_palette: palette(
@include contains($selector: false) {
:root {
@each $color, $shades in map.remove($IPalette, '_meta') {
@each $shade in $shades {
$value: map.get($_palette, $color, $shade);
@each $shade in $shades {
$value: map.get($_palette, $color, $shade);

--ig-#{$color}-#{$shade}: #{$value};
}
--ig-#{$color}-#{$shade}: #{$value};
}
}
}
}
Expand Down Expand Up @@ -298,11 +314,11 @@ $_palette: palette(
@include contains($selector: false) {
:root {
@each $color, $shades in map.remove($IPalette, '_meta') {
@each $shade in $shades {
$value: map.get($_palette, $color, $shade);
@each $shade in $shades {
$value: map.get($_palette, $color, $shade);

--ig-#{$color}-#{$shade}: #{$value};
}
--ig-#{$color}-#{$shade}: #{$value};
}
}
}
}
Expand All @@ -329,5 +345,24 @@ $_palette: palette(
@include it('should convert a color to a list of HSL values') {
@include assert-equal(to-hsl(black), (0deg, 0%, 0%));
}

@include it('should include all necessarry CSS custom properties for adaptive contrast to work') {
@include assert() {
@include output($selector: false) {
@include adaptive-contrast('aaa');
}

@include contains($selector: false) {
:root {
--ig-wcag-a: 0.31;
--ig-wcag-aa: 0.183;
--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);
}
}
}
}
}
}

0 comments on commit 7a17c72

Please sign in to comment.